style-rtl.css (155853B)
1 @charset "UTF-8"; 2 3 /* 4 Theme Name: Twenty Twenty-One 5 Theme URI: https://wordpress.org/themes/twentytwentyone/ 6 Author: the WordPress team 7 Author URI: https://wordpress.org/ 8 Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. 9 Requires at least: 5.3 10 Tested up to: 5.8 11 Requires PHP: 5.6 12 Version: 1.4 13 License: GNU General Public License v2 or later 14 License URI: http://www.gnu.org/licenses/gpl-2.0.html 15 Text Domain: twentytwentyone 16 Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready 17 18 Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org 19 Twenty Twenty-One is distributed under the terms of the GNU GPL. 20 */ 21 22 /** 23 * SETTINGS 24 * File-header..........The file header for the themes style.css file. 25 * Fonts................Any font files, if the project needs specific fonts. 26 * Global...............Project-specific, globally available variables. 27 * 28 * TOOLS 29 * Functions............Global functions. 30 * Mixins...............Global mixins. 31 * 32 * GENERIC 33 * Normalize.css........Normalise browser defaults. 34 * Breakpoints..........Mixins and variables for responsive styles 35 * Vertical-margins.....Vertical spacing for the main components. 36 * Reset................Reset specific elements to make them easier to style in other contexts. 37 * Clearings............Clearings for the main components. 38 * 39 * ELEMENTS 40 * Blockquote...........Default blockquote. 41 * Forms................Element-level form styling. 42 * Headings.............H1–H6 43 * Links................Default links. 44 * Lists................Default lists. 45 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video. 46 * 47 * BLOCKS 48 * Audio................Specific styles for the audio block. 49 * Button...............Specific styles for the button block. 50 * Code.................Specific styles for the code block. 51 * Columns..............Specific styles for the columns block. 52 * Cover................Specific styles for the cover block. 53 * File.................Specific styles for the file block. 54 * Gallery..............Specific styles for the gallery block. 55 * Group................Specific styles for the group block. 56 * Heading..............Specific styles for the heading block. 57 * Image................Specific styles for the image block. 58 * Latest comments......Specific styles for the latest comments block. 59 * Latest posts.........Specific styles for the latest posts block. 60 * Legacy...............Specific styles for the legacy gallery. 61 * List.................Specific styles for the list block. 62 * Media text...........Specific styles for the media and text block. 63 * Navigation...........Specific styles for the navigation block. 64 * Paragraph............Specific styles for the paragraph block. 65 * Pullquote............Specific styles for the pullquote block. 66 * Quote................Specific styles for the quote block. 67 * Search...............Specific styles for the search block. 68 * Separator............Specific styles for the separator block. 69 * Spacer...............Specific styles for the spacer block. 70 * Table................Specific styles for the table block. 71 * Verse................Specific styles for the verse block. 72 * Video................Specific styles for the video block. 73 * Utilities............Block alignments. 74 * 75 * COMPONENTS 76 * Header...............Header styles. 77 * Footer...............Footer styles. 78 * Comments.............Comment styles. 79 * Archives.............Archive styles. 80 * 404..................404 styles. 81 * Search...............Search styles. 82 * Navigation...........Navigation styles. 83 * Footer Navigation....Footer Navigation styles. 84 * Pagination...........Pagination styles. 85 * Single...............Single page and post styles. 86 * Posts and pages......Misc, sticky post styles. 87 * Entry................Entry, author biography. 88 * Widget...............Widget styles. 89 * Editor...............Editor styles. 90 * 91 * UTILITIES 92 * A11y.................Screen reader text, prefers reduced motion etc. 93 * Color Palette........Classes for the color palette colors. 94 * Editor Font Sizes....Editor Font Sizes. 95 * Measure..............The width of a line of text, in characters. 96 */ 97 98 /* Categories 01 to 03 are the basics. */ 99 100 /* Variables */ 101 :root { 102 103 /* Font Family */ 104 --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 105 --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 106 107 /* Font Size */ 108 --global--font-size-base: 1.25rem; 109 --global--font-size-xs: 1rem; 110 --global--font-size-sm: 1.125rem; 111 --global--font-size-md: 1.25rem; 112 --global--font-size-lg: 1.5rem; 113 --global--font-size-xl: 2.25rem; 114 --global--font-size-xxl: 4rem; 115 --global--font-size-xxxl: 5rem; 116 --global--font-size-page-title: var(--global--font-size-xxl); 117 --global--letter-spacing: normal; 118 119 /* Line Height */ 120 --global--line-height-body: 1.7; 121 --global--line-height-heading: 1.3; 122 --global--line-height-page-title: 1.1; 123 124 /* Headings */ 125 --heading--font-family: var(--global--font-primary); 126 --heading--font-size-h6: var(--global--font-size-xs); 127 --heading--font-size-h5: var(--global--font-size-sm); 128 --heading--font-size-h4: var(--global--font-size-lg); 129 --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); 130 --heading--font-size-h2: var(--global--font-size-xl); 131 --heading--font-size-h1: var(--global--font-size-page-title); 132 --heading--letter-spacing-h6: 0.05em; 133 --heading--letter-spacing-h5: 0.05em; 134 --heading--letter-spacing-h4: var(--global--letter-spacing); 135 --heading--letter-spacing-h3: var(--global--letter-spacing); 136 --heading--letter-spacing-h2: var(--global--letter-spacing); 137 --heading--letter-spacing-h1: var(--global--letter-spacing); 138 --heading--line-height-h6: var(--global--line-height-heading); 139 --heading--line-height-h5: var(--global--line-height-heading); 140 --heading--line-height-h4: var(--global--line-height-heading); 141 --heading--line-height-h3: var(--global--line-height-heading); 142 --heading--line-height-h2: var(--global--line-height-heading); 143 --heading--line-height-h1: var(--global--line-height-page-title); 144 --heading--font-weight: normal; 145 --heading--font-weight-page-title: 300; 146 --heading--font-weight-strong: 600; 147 148 /* Block: Latest posts */ 149 --latest-posts--title-font-family: var(--heading--font-family); 150 --latest-posts--title-font-size: var(--heading--font-size-h3); 151 --latest-posts--description-font-family: var(--global--font-secondary); 152 --latest-posts--description-font-size: var(--global--font-size-sm); 153 --list--font-family: var(--global--font-secondary); 154 --definition-term--font-family: var(--global--font-primary); 155 156 /* Colors */ 157 --global--color-black: #000; 158 --global--color-dark-gray: #28303d; 159 --global--color-gray: #39414d; 160 --global--color-light-gray: #f0f0f0; 161 --global--color-green: #d1e4dd; 162 --global--color-blue: #d1dfe4; 163 --global--color-purple: #d1d1e4; 164 --global--color-red: #e4d1d1; 165 --global--color-orange: #e4dad1; 166 --global--color-yellow: #eeeadd; 167 --global--color-white: #fff; 168 --global--color-white-50: rgba(255, 255, 255, 0.5); 169 --global--color-white-90: rgba(255, 255, 255, 0.9); 170 --global--color-primary: var(--global--color-dark-gray); 171 172 /* Body text color, site title, footer text color. */ 173 --global--color-secondary: var(--global--color-gray); 174 175 /* Headings */ 176 --global--color-primary-hover: var(--global--color-primary); 177 --global--color-background: var(--global--color-green); 178 179 /* Mint, default body background */ 180 --global--color-border: var(--global--color-primary); 181 182 /* Used for borders (separators) */ 183 184 /* Spacing */ 185 --global--spacing-unit: 20px; 186 --global--spacing-measure: unset; 187 --global--spacing-horizontal: 25px; 188 --global--spacing-vertical: 30px; 189 190 /* Elevation */ 191 --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); 192 193 /* Forms */ 194 --form--font-family: var(--global--font-secondary); 195 --form--font-size: var(--global--font-size-sm); 196 --form--line-height: var(--global--line-height-body); 197 --form--color-text: var(--global--color-dark-gray); 198 --form--color-ranged: var(--global--color-secondary); 199 --form--label-weight: 500; 200 --form--border-color: var(--global--color-secondary); 201 --form--border-width: 3px; 202 --form--border-radius: 0; 203 --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); 204 205 /* Cover block */ 206 --cover--height: calc(15 * var(--global--spacing-vertical)); 207 --cover--color-foreground: var(--global--color-white); 208 --cover--color-background: var(--global--color-black); 209 210 /* Buttons */ 211 --button--color-text: var(--global--color-background); 212 --button--color-text-hover: var(--global--color-secondary); 213 --button--color-text-active: var(--global--color-secondary); 214 --button--color-background: var(--global--color-secondary); 215 --button--color-background-active: var(--global--color-background); 216 --button--font-family: var(--global--font-primary); 217 --button--font-size: var(--global--font-size-base); 218 --button--font-weight: 500; 219 --button--line-height: 1.5; 220 --button--border-width: 3px; 221 --button--border-radius: 0; 222 --button--padding-vertical: 15px; 223 --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); 224 225 /* entry */ 226 --entry-header--color: var(--global--color-primary); 227 --entry-header--color-link: currentColor; 228 --entry-header--color-hover: var(--global--color-primary-hover); 229 --entry-header--color-focus: var(--global--color-secondary); 230 --entry-header--font-size: var(--heading--font-size-h2); 231 --entry-content--font-family: var(--global--font-secondary); 232 --entry-author-bio--font-family: var(--heading--font-family); 233 --entry-author-bio--font-size: var(--heading--font-size-h4); 234 235 /* Header */ 236 --branding--color-text: var(--global--color-primary); 237 --branding--color-link: var(--global--color-primary); 238 --branding--color-link-hover: var(--global--color-secondary); 239 --branding--title--font-family: var(--global--font-primary); 240 --branding--title--font-size: var(--global--font-size-lg); 241 --branding--title--font-size-mobile: var(--heading--font-size-h4); 242 --branding--title--font-weight: normal; 243 --branding--title--text-transform: uppercase; 244 --branding--description--font-family: var(--global--font-secondary); 245 --branding--description--font-size: var(--global--font-size-sm); 246 --branding--description--font-family: var(--global--font-secondary); 247 --branding--logo--max-width: 300px; 248 --branding--logo--max-height: 100px; 249 --branding--logo--max-width-mobile: 96px; 250 --branding--logo--max-height-mobile: 96px; 251 252 /* Main navigation */ 253 --primary-nav--font-family: var(--global--font-secondary); 254 --primary-nav--font-family-mobile: var(--global--font-primary); 255 --primary-nav--font-size: var(--global--font-size-md); 256 --primary-nav--font-size-sub-menu: var(--global--font-size-xs); 257 --primary-nav--font-size-mobile: var(--global--font-size-sm); 258 --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); 259 --primary-nav--font-size-button: var(--global--font-size-xs); 260 --primary-nav--font-style: normal; 261 --primary-nav--font-style-sub-menu-mobile: normal; 262 --primary-nav--font-weight: normal; 263 --primary-nav--font-weight-button: 500; 264 --primary-nav--color-link: var(--global--color-primary); 265 --primary-nav--color-link-hover: var(--global--color-primary-hover); 266 --primary-nav--color-text: var(--global--color-primary); 267 --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); 268 --primary-nav--border-color: var(--global--color-primary); 269 270 /* Pagination */ 271 --pagination--color-text: var(--global--color-primary); 272 --pagination--color-link-hover: var(--global--color-primary-hover); 273 --pagination--font-family: var(--global--font-secondary); 274 --pagination--font-size: var(--global--font-size-lg); 275 --pagination--font-weight: normal; 276 --pagination--font-weight-strong: 600; 277 278 /* Footer */ 279 --footer--color-text: var(--global--color-primary); 280 --footer--color-link: var(--global--color-primary); 281 --footer--color-link-hover: var(--global--color-primary-hover); 282 --footer--font-family: var(--global--font-primary); 283 --footer--font-size: var(--global--font-size-sm); 284 285 /* Block: Pull quote */ 286 --pullquote--font-family: var(--global--font-primary); 287 --pullquote--font-size: var(--heading--font-size-h3); 288 --pullquote--font-style: normal; 289 --pullquote--letter-spacing: var(--heading--letter-spacing-h4); 290 --pullquote--line-height: var(--global--line-height-heading); 291 --pullquote--border-width: 3px; 292 --pullquote--border-color: var(--global--color-primary); 293 --pullquote--color-foreground: var(--global--color-primary); 294 --pullquote--color-background: var(--global--color-background); 295 --quote--font-family: var(--global--font-secondary); 296 --quote--font-size: var(--global--font-size-md); 297 --quote--font-size-large: var(--global--font-size-xl); 298 --quote--font-style: normal; 299 --quote--font-weight: 700; 300 --quote--font-weight-strong: bolder; 301 --quote--font-style-large: normal; 302 --quote--font-style-cite: normal; 303 --quote--line-height: var(--global--line-height-body); 304 --quote--line-height-large: 1.35; 305 --separator--border-color: var(--global--color-border); 306 --separator--height: 1px; 307 308 /* Block: Table */ 309 --table--stripes-border-color: var(--global--color-light-gray); 310 --table--stripes-background-color: var(--global--color-light-gray); 311 --table--has-background-text-color: var(--global--color-dark-gray); 312 313 /* Widgets */ 314 --widget--line-height-list: 1.9; 315 --widget--line-height-title: 1.4; 316 --widget--font-weight-title: 700; 317 --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); 318 319 /* Admin-bar height */ 320 --global--admin-bar--height: 0px; 321 } 322 323 .admin-bar { 324 --global--admin-bar--height: 32px; 325 } 326 @media only screen and (max-width: 782px) { 327 328 .admin-bar { 329 --global--admin-bar--height: 46px; 330 } 331 } 332 333 @media only screen and (min-width: 652px) { 334 335 :root { 336 --global--font-size-xl: 2.5rem; 337 --global--font-size-xxl: 6rem; 338 --global--font-size-xxxl: 9rem; 339 --heading--font-size-h3: 2rem; 340 --heading--font-size-h2: 3rem; 341 } 342 } 343 344 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 345 346 /* Document 347 ========================================================================== */ 348 349 /** 350 * 1. Correct the line height in all browsers. 351 * 2. Prevent adjustments of font size after orientation changes in iOS. 352 */ 353 html { 354 line-height: 1.15; 355 356 /* 1 */ 357 -webkit-text-size-adjust: 100%; 358 359 /* 2 */ 360 } 361 362 /* Sections 363 ========================================================================== */ 364 365 /** 366 * Remove the margin in all browsers. 367 */ 368 body { 369 margin: 0; 370 } 371 372 /** 373 * Render the `main` element consistently in IE. 374 */ 375 main { 376 display: block; 377 } 378 379 /** 380 * Correct the font size and margin on `h1` elements within `section` and 381 * `article` contexts in Chrome, Firefox, and Safari. 382 */ 383 h1 { 384 font-size: 2em; 385 margin: 0.67em 0; 386 } 387 388 /* Grouping content 389 ========================================================================== */ 390 391 /** 392 * 1. Add the correct box sizing in Firefox. 393 * 2. Show the overflow in Edge and IE. 394 */ 395 hr { 396 box-sizing: content-box; 397 398 /* 1 */ 399 height: 0; 400 401 /* 1 */ 402 overflow: visible; 403 404 /* 2 */ 405 } 406 407 /** 408 * 1. Correct the inheritance and scaling of font size in all browsers. 409 * 2. Correct the odd `em` font sizing in all browsers. 410 */ 411 pre { 412 font-family: monospace; 413 414 /* 1 */ 415 font-size: 1em; 416 417 /* 2 */ 418 } 419 420 /* Text-level semantics 421 ========================================================================== */ 422 423 /** 424 * Remove the gray background on active links in IE 10. 425 */ 426 a { 427 background-color: transparent; 428 text-decoration-thickness: 1px; 429 } 430 431 /** 432 * 1. Remove the bottom border in Chrome 57- 433 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 434 */ 435 abbr[title] { 436 border-bottom: none; 437 438 /* 1 */ 439 text-decoration: underline; 440 441 /* 2 */ 442 text-decoration-style: dotted; 443 444 /* 2 */ 445 } 446 447 /** 448 * Add the correct font weight in Chrome, Edge, and Safari. 449 */ 450 b, 451 strong { 452 font-weight: bolder; 453 } 454 455 /** 456 * 1. Correct the inheritance and scaling of font size in all browsers. 457 * 2. Correct the odd `em` font sizing in all browsers. 458 */ 459 code, 460 kbd, 461 samp { 462 font-family: monospace; 463 464 /* 1 */ 465 font-size: 1em; 466 467 /* 2 */ 468 } 469 470 /** 471 * Add the correct font size in all browsers. 472 */ 473 small { 474 font-size: 80%; 475 } 476 477 /** 478 * Prevent `sub` and `sup` elements from affecting the line height in 479 * all browsers. 480 */ 481 sub, 482 sup { 483 font-size: 75%; 484 line-height: 0; 485 position: relative; 486 vertical-align: baseline; 487 } 488 489 sub { 490 bottom: -0.25em; 491 } 492 493 sup { 494 top: -0.5em; 495 } 496 497 /* Embedded content 498 ========================================================================== */ 499 500 /** 501 * Remove the border on images inside links in IE 10. 502 */ 503 img { 504 border-style: none; 505 } 506 507 /* Forms 508 ========================================================================== */ 509 510 /** 511 * 1. Change the font styles in all browsers. 512 * 2. Remove the margin in Firefox and Safari. 513 */ 514 button, 515 input, 516 optgroup, 517 select, 518 textarea { 519 font-family: inherit; 520 521 /* 1 */ 522 font-size: 100%; 523 524 /* 1 */ 525 line-height: 1.15; 526 527 /* 1 */ 528 margin: 0; 529 530 /* 2 */ 531 } 532 533 /** 534 * Show the overflow in IE. 535 * 1. Show the overflow in Edge. 536 */ 537 button, 538 input { 539 540 /* 1 */ 541 overflow: visible; 542 } 543 544 /** 545 * Remove the inheritance of text transform in Edge, Firefox, and IE. 546 * 1. Remove the inheritance of text transform in Firefox. 547 */ 548 button, 549 select { 550 551 /* 1 */ 552 text-transform: none; 553 } 554 555 /** 556 * Correct the inability to style clickable types in iOS and Safari. 557 */ 558 button, 559 [type=button], 560 [type=reset], 561 [type=submit] { 562 -webkit-appearance: button; 563 } 564 565 /** 566 * Remove the inner border and padding in Firefox. 567 */ 568 button::-moz-focus-inner, 569 [type=button]::-moz-focus-inner, 570 [type=reset]::-moz-focus-inner, 571 [type=submit]::-moz-focus-inner { 572 border-style: none; 573 padding: 0; 574 } 575 576 /** 577 * Restore the focus styles unset by the previous rule. 578 */ 579 button:-moz-focusring, 580 [type=button]:-moz-focusring, 581 [type=reset]:-moz-focusring, 582 [type=submit]:-moz-focusring { 583 outline: 1px dotted ButtonText; 584 } 585 586 /** 587 * Correct the padding in Firefox. 588 */ 589 fieldset { 590 padding: 0.35em 0.75em 0.625em; 591 } 592 593 /** 594 * 1. Correct the text wrapping in Edge and IE. 595 * 2. Correct the color inheritance from `fieldset` elements in IE. 596 * 3. Remove the padding so developers are not caught out when they zero out 597 * `fieldset` elements in all browsers. 598 */ 599 legend { 600 box-sizing: border-box; 601 602 /* 1 */ 603 color: inherit; 604 605 /* 2 */ 606 display: table; 607 608 /* 1 */ 609 max-width: 100%; 610 611 /* 1 */ 612 padding: 0; 613 614 /* 3 */ 615 white-space: normal; 616 617 /* 1 */ 618 } 619 620 /** 621 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 622 */ 623 progress { 624 vertical-align: baseline; 625 } 626 627 /** 628 * Remove the default vertical scrollbar in IE 10+. 629 */ 630 textarea { 631 overflow: auto; 632 } 633 634 /** 635 * 1. Add the correct box sizing in IE 10. 636 * 2. Remove the padding in IE 10. 637 */ 638 [type=checkbox], 639 [type=radio] { 640 box-sizing: border-box; 641 642 /* 1 */ 643 padding: 0; 644 645 /* 2 */ 646 } 647 648 /** 649 * Correct the cursor style of increment and decrement buttons in Chrome. 650 */ 651 [type=number]::-webkit-inner-spin-button, 652 [type=number]::-webkit-outer-spin-button { 653 height: auto; 654 } 655 656 /** 657 * 1. Correct the odd appearance in Chrome and Safari. 658 * 2. Correct the outline style in Safari. 659 */ 660 [type=search] { 661 -webkit-appearance: textfield; 662 663 /* 1 */ 664 outline-offset: -2px; 665 666 /* 2 */ 667 } 668 669 /** 670 * Remove the inner padding in Chrome and Safari on macOS. 671 */ 672 [type=search]::-webkit-search-decoration { 673 -webkit-appearance: none; 674 } 675 676 /** 677 * 1. Correct the inability to style clickable types in iOS and Safari. 678 * 2. Change font properties to `inherit` in Safari. 679 */ 680 ::-webkit-file-upload-button { 681 -webkit-appearance: button; 682 683 /* 1 */ 684 font: inherit; 685 686 /* 2 */ 687 } 688 689 /* Interactive 690 ========================================================================== */ 691 692 /* 693 * Add the correct display in Edge, IE 10+, and Firefox. 694 */ 695 details { 696 display: block; 697 } 698 699 /* 700 * Add the correct display in all browsers. 701 */ 702 summary { 703 display: list-item; 704 } 705 706 /* Misc 707 ========================================================================== */ 708 709 /** 710 * Add the correct display in IE 10+. 711 */ 712 template { 713 display: none; 714 } 715 716 /** 717 * Add the correct display in IE 10. 718 */ 719 [hidden] { 720 display: none; 721 } 722 723 /** 724 * Responsive Styles 725 */ 726 727 /** 728 * Required Variables 729 */ 730 731 /** 732 * Root Media Query Variables 733 */ 734 :root { 735 --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); 736 --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); 737 --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); 738 --responsive--alignfull-width: 100%; 739 --responsive--alignright-margin: var(--global--spacing-horizontal); 740 --responsive--alignleft-margin: var(--global--spacing-horizontal); 741 } 742 743 @media only screen and (min-width: 482px) { 744 745 :root { 746 --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px); 747 --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); 748 --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 749 --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 750 } 751 } 752 @media only screen and (min-width: 822px) { 753 754 :root { 755 --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px); 756 --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); 757 } 758 } 759 760 /** 761 * Extends 762 */ 763 .post-thumbnail, 764 .entry-content .wp-audio-shortcode, 765 .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 766 *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), 767 .default-max-width { 768 max-width: var(--responsive--aligndefault-width); 769 margin-right: auto; 770 margin-left: auto; 771 } 772 773 .widget-area, 774 .pagination, 775 .comments-pagination, 776 .post-navigation, 777 .site-footer, 778 .site-header, 779 .alignwide, 780 .wide-max-width { 781 max-width: var(--responsive--alignwide-width); 782 margin-right: auto; 783 margin-left: auto; 784 } 785 786 .alignfull, 787 .wp-block-group .wp-block-group__inner-container > *.alignfull, 788 .full-max-width { 789 max-width: var(--responsive--alignfull-width); 790 width: var(--responsive--alignfull-width); 791 margin-right: auto; 792 margin-left: auto; 793 } 794 795 @media only screen and (min-width: 482px) { 796 797 .alignfull, 798 .full-max-width { 799 max-width: var(--responsive--alignfull-width); 800 width: auto; 801 margin-right: auto; 802 margin-left: auto; 803 } 804 } 805 806 .entry-header .post-thumbnail, 807 .singular .post-thumbnail, 808 .alignfull [class*=inner-container] > .alignwide, 809 .alignwide [class*=inner-container] > .alignwide { 810 margin-right: auto; 811 margin-left: auto; 812 width: var(--responsive--alignwide-width); 813 max-width: var(--responsive--alignfull-width); 814 } 815 816 @media only screen and (min-width: 482px) { 817 818 .entry-content > .alignleft { 819 margin-left: var(--responsive--alignleft-margin); 820 margin-right: var(--global--spacing-horizontal); 821 } 822 } 823 @media only screen and (min-width: 482px) { 824 825 .entry-content > .alignright { 826 margin-left: var(--global--spacing-horizontal); 827 margin-right: var(--responsive--alignright-margin); 828 } 829 } 830 831 /** 832 * Site Structure 833 * 834 * - Set vertical margins and responsive widths on 835 * top-level wrappers and content wrappers 836 * - `--global--width-content` is a responsive variable 837 * - See: globals/_global-width-responsive.scss 838 */ 839 840 /** 841 * Top Level Wrappers (header, main, footer) 842 * - Set vertical padding and horizontal margins 843 */ 844 .site-header, 845 .site-main, 846 .widget-area, 847 .site-footer { 848 padding-top: var(--global--spacing-vertical); 849 padding-bottom: var(--global--spacing-vertical); 850 margin-right: auto; 851 margin-left: auto; 852 } 853 854 .site-header { 855 padding-top: calc(0.75 * var(--global--spacing-vertical)); 856 padding-bottom: calc(2 * var(--global--spacing-vertical)); 857 } 858 @media only screen and (min-width: 482px) { 859 860 .site-header { 861 padding-bottom: calc(3 * var(--global--spacing-vertical)); 862 } 863 } 864 865 /** 866 * Site-main children wrappers 867 * - Add double vertical margins here for clearer hierarchy 868 */ 869 .site-main > * { 870 margin-top: calc(3 * var(--global--spacing-vertical)); 871 margin-bottom: calc(3 * var(--global--spacing-vertical)); 872 } 873 874 .site-main > *:first-child { 875 margin-top: 0; 876 } 877 878 .site-main > *:last-child { 879 margin-bottom: 0; 880 } 881 882 /** 883 * Set the default maximum responsive content-width 884 */ 885 886 /** 887 * Set the wide maximum responsive content-width 888 */ 889 890 /** 891 * Set the full maximum responsive content-width 892 */ 893 894 /* 895 * Block & non-gutenberg content wrappers 896 * - Set margins 897 */ 898 .entry-header, 899 .post-thumbnail, 900 .entry-content, 901 .entry-footer, 902 .author-bio { 903 margin-top: var(--global--spacing-vertical); 904 margin-left: auto; 905 margin-bottom: var(--global--spacing-vertical); 906 margin-right: auto; 907 } 908 909 /* 910 * Block & non-gutenberg content wrapper children 911 * - Sets spacing-vertical margin logic 912 */ 913 .site-main > article > *, 914 .site-main > .not-found > *, 915 .entry-content > *, 916 [class*=inner-container] > *, 917 .wp-block-template-part > *, 918 .wp-block-post-template :where(li > *) { 919 margin-top: calc(0.666 * var(--global--spacing-vertical)); 920 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 921 } 922 @media only screen and (min-width: 482px) { 923 924 .site-main > article > *, 925 .site-main > .not-found > *, 926 .entry-content > *, 927 [class*=inner-container] > *, 928 .wp-block-template-part > *, 929 .wp-block-post-template :where(li > *) { 930 margin-top: var(--global--spacing-vertical); 931 margin-bottom: var(--global--spacing-vertical); 932 } 933 } 934 935 .site-main > article > *:first-child, 936 .site-main > .not-found > *:first-child, 937 .entry-content > *:first-child, 938 [class*=inner-container] > *:first-child, 939 .wp-block-template-part > *:first-child, 940 .wp-block-post-template :where(li > *):first-child { 941 margin-top: 0; 942 } 943 944 .site-main > article > *:last-child, 945 .site-main > .not-found > *:last-child, 946 .entry-content > *:last-child, 947 [class*=inner-container] > *:last-child, 948 .wp-block-template-part > *:last-child, 949 .wp-block-post-template :where(li > *):last-child { 950 margin-bottom: 0; 951 } 952 953 .site-footer > *, 954 .widget-area > * { 955 margin-top: calc(0.666 * var(--global--spacing-vertical)); 956 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 957 } 958 @media only screen and (min-width: 482px) { 959 960 .site-footer > *, 961 .widget-area > * { 962 margin-top: var(--global--spacing-vertical); 963 margin-bottom: var(--global--spacing-vertical); 964 } 965 } 966 967 /* 968 * Block & non-gutenberg content wrapper children 969 * - Sets spacing-unit margins 970 */ 971 .entry-header > *, 972 .post-thumbnail > *, 973 .page-content > *, 974 .comment-content > *, 975 .widget > * { 976 margin-top: var(--global--spacing-unit); 977 margin-bottom: var(--global--spacing-unit); 978 } 979 980 .entry-header > *:first-child, 981 .post-thumbnail > *:first-child, 982 .page-content > *:first-child, 983 .comment-content > *:first-child, 984 .widget > *:first-child { 985 margin-top: 0; 986 } 987 988 .entry-header > *:last-child, 989 .post-thumbnail > *:last-child, 990 .page-content > *:last-child, 991 .comment-content > *:last-child, 992 .widget > *:last-child { 993 margin-bottom: 0; 994 } 995 996 /* 997 * .entry-content children specific controls 998 * - Adds special margin overrides for alignment utility classes 999 */ 1000 .entry-content > * { 1001 1002 /* Reset alignleft and alignright margins after alignfull */ 1003 } 1004 1005 .entry-content > *.alignleft, 1006 .entry-content > *.alignright, 1007 .entry-content > *.alignleft:first-child + *, 1008 .entry-content > *.alignright:first-child + *, 1009 .entry-content > *.alignfull.has-background { 1010 margin-top: 0; 1011 } 1012 1013 .entry-content > *:last-child, 1014 .entry-content > *.alignfull.has-background { 1015 margin-bottom: 0; 1016 } 1017 1018 .entry-content > *.alignfull + .alignleft, 1019 .entry-content > *.alignfull + .alignright { 1020 margin-top: var(--global--spacing-vertical); 1021 } 1022 1023 /** 1024 * Reset specific elements to make them easier to style in other contexts. 1025 */ 1026 html, 1027 body, 1028 p, 1029 ol, 1030 ul, 1031 li, 1032 dl, 1033 dt, 1034 dd, 1035 blockquote, 1036 figure, 1037 fieldset, 1038 form, 1039 legend, 1040 textarea, 1041 pre, 1042 iframe, 1043 hr, 1044 h1, 1045 h2, 1046 h3, 1047 h4, 1048 h5, 1049 h6 { 1050 padding: 0; 1051 margin: 0; 1052 -moz-osx-font-smoothing: grayscale; 1053 -webkit-font-smoothing: antialiased; 1054 } 1055 1056 /** 1057 * Apply generic border-box to all elements. 1058 * See: 1059 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ 1060 */ 1061 html { 1062 1063 /* Apply border-box across the entire page. */ 1064 box-sizing: border-box; 1065 font-family: var(--global--font-secondary); 1066 line-height: var(--global--line-height-body); 1067 } 1068 1069 /** 1070 * Relax the definition a bit, to allow components to override it manually. 1071 */ 1072 *, 1073 *::before, 1074 *::after { 1075 box-sizing: inherit; 1076 } 1077 1078 body { 1079 font-size: var(--global--font-size-base); 1080 font-weight: normal; 1081 color: var(--global--color-primary); 1082 text-align: right; 1083 background-color: var(--global--color-background); 1084 } 1085 1086 button { 1087 cursor: pointer; 1088 } 1089 1090 .clear:before, 1091 .clear:after, 1092 .entry-content:before, 1093 .entry-content:after, 1094 .comment-content:before, 1095 .comment-content:after, 1096 .site-header:before, 1097 .site-header:after, 1098 .site-content:before, 1099 .site-content:after, 1100 .site-footer:before, 1101 .site-footer:after { 1102 content: ""; 1103 display: table; 1104 table-layout: fixed; 1105 } 1106 1107 .clear:after, 1108 .entry-content:after, 1109 .comment-content:after, 1110 .site-header:after, 1111 .site-content:after, 1112 .site-footer:after { 1113 clear: both; 1114 } 1115 1116 /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ 1117 blockquote { 1118 padding: 0; 1119 position: relative; 1120 margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) 0; 1121 } 1122 1123 blockquote > * { 1124 margin-top: var(--global--spacing-unit); 1125 margin-bottom: var(--global--spacing-unit); 1126 } 1127 1128 blockquote > *:first-child { 1129 margin-top: 0; 1130 } 1131 1132 blockquote > *:last-child { 1133 margin-bottom: 0; 1134 } 1135 1136 blockquote p { 1137 letter-spacing: var(--heading--letter-spacing-h4); 1138 font-family: var(--quote--font-family); 1139 font-size: var(--quote--font-size); 1140 font-style: var(--quote--font-style); 1141 font-weight: var(--quote--font-weight); 1142 line-height: var(--quote--line-height); 1143 } 1144 1145 blockquote cite, 1146 blockquote footer { 1147 font-weight: normal; 1148 color: var(--global--color-primary); 1149 font-size: var(--global--font-size-xs); 1150 letter-spacing: var(--global--letter-spacing); 1151 } 1152 1153 blockquote.alignleft, 1154 blockquote.alignright { 1155 padding-right: inherit; 1156 } 1157 1158 blockquote.alignleft p, 1159 blockquote.alignright p { 1160 font-size: var(--heading--font-size-h5); 1161 max-width: inherit; 1162 width: inherit; 1163 } 1164 1165 blockquote.alignleft cite, 1166 blockquote.alignleft footer, 1167 blockquote.alignright cite, 1168 blockquote.alignright footer { 1169 font-size: var(--global--font-size-xs); 1170 letter-spacing: var(--global--letter-spacing); 1171 } 1172 1173 blockquote strong { 1174 font-weight: var(--quote--font-weight-strong); 1175 } 1176 1177 blockquote:before { 1178 content: "“"; 1179 font-size: var(--quote--font-size); 1180 line-height: var(--quote--line-height); 1181 position: absolute; 1182 right: calc(-0.5 * var(--global--spacing-horizontal)); 1183 } 1184 1185 blockquote .wp-block-quote__citation, 1186 blockquote cite, 1187 blockquote footer { 1188 color: var(--global--color-primary); 1189 font-size: var(--global--font-size-xs); 1190 font-style: var(--quote--font-style-cite); 1191 } 1192 @media only screen and (max-width: 481px) { 1193 1194 blockquote { 1195 padding-right: calc(0.5 * var(--global--spacing-horizontal)); 1196 } 1197 1198 blockquote:before { 1199 right: 0; 1200 } 1201 } 1202 1203 input[type=text], 1204 input[type=email], 1205 input[type=url], 1206 input[type=password], 1207 input[type=search], 1208 input[type=number], 1209 input[type=tel], 1210 input[type=date], 1211 input[type=month], 1212 input[type=week], 1213 input[type=time], 1214 input[type=datetime], 1215 input[type=datetime-local], 1216 input[type=color], 1217 .site textarea { 1218 border: var(--form--border-width) solid var(--form--border-color); 1219 border-radius: var(--form--border-radius); 1220 color: var(--form--color-text); 1221 line-height: var(--global--line-height-body); 1222 padding: var(--form--spacing-unit); 1223 margin: 0 2px; 1224 max-width: 100%; 1225 } 1226 1227 input[type=text]:focus, 1228 input[type=email]:focus, 1229 input[type=url]:focus, 1230 input[type=password]:focus, 1231 input[type=search]:focus, 1232 input[type=number]:focus, 1233 input[type=tel]:focus, 1234 input[type=date]:focus, 1235 input[type=month]:focus, 1236 input[type=week]:focus, 1237 input[type=time]:focus, 1238 input[type=datetime]:focus, 1239 input[type=datetime-local]:focus, 1240 input[type=color]:focus, 1241 .site textarea:focus { 1242 color: var(--form--color-text); 1243 outline-offset: 2px; 1244 outline: 2px dotted var(--form--border-color); 1245 } 1246 1247 input[type=text]:disabled, 1248 input[type=email]:disabled, 1249 input[type=url]:disabled, 1250 input[type=password]:disabled, 1251 input[type=search]:disabled, 1252 input[type=number]:disabled, 1253 input[type=tel]:disabled, 1254 input[type=date]:disabled, 1255 input[type=month]:disabled, 1256 input[type=week]:disabled, 1257 input[type=time]:disabled, 1258 input[type=datetime]:disabled, 1259 input[type=datetime-local]:disabled, 1260 input[type=color]:disabled, 1261 .site textarea:disabled { 1262 opacity: 0.7; 1263 } 1264 1265 .is-dark-theme input[type=text], 1266 .is-dark-theme input[type=email], 1267 .is-dark-theme input[type=url], 1268 .is-dark-theme input[type=password], 1269 .is-dark-theme input[type=search], 1270 .is-dark-theme input[type=number], 1271 .is-dark-theme input[type=tel], 1272 .is-dark-theme input[type=date], 1273 .is-dark-theme input[type=month], 1274 .is-dark-theme input[type=week], 1275 .is-dark-theme input[type=time], 1276 .is-dark-theme input[type=datetime], 1277 .is-dark-theme input[type=datetime-local], 1278 .is-dark-theme input[type=color], 1279 .is-dark-theme .site textarea { 1280 background: var(--global--color-white-90); 1281 } 1282 1283 input[type=search]:focus { 1284 outline-offset: -7px; 1285 } 1286 1287 .is-dark-theme input[type=search]:focus { 1288 outline-color: var(--global--color-background); 1289 } 1290 1291 input[type=color] { 1292 padding: calc(var(--form--spacing-unit) / 2); 1293 height: calc(4 * var(--form--spacing-unit)); 1294 } 1295 1296 input[type=email], 1297 input[type=url] { 1298 direction: ltr; 1299 } 1300 1301 select { 1302 border: var(--form--border-width) solid var(--form--border-color); 1303 color: var(--form--color-text); 1304 -moz-appearance: none; 1305 -webkit-appearance: none; 1306 appearance: none; 1307 line-height: var(--global--line-height-body); 1308 padding: var(--form--spacing-unit) var(--form--spacing-unit) var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)); 1309 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; 1310 background-position: left var(--form--spacing-unit) top 60%; 1311 } 1312 1313 select:focus { 1314 outline-offset: 2px; 1315 outline: 2px dotted var(--form--border-color); 1316 } 1317 1318 .is-dark-theme select { 1319 background: var(--global--color-white-90) 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; 1320 background-position: left var(--form--spacing-unit) top 60%; 1321 } 1322 1323 textarea { 1324 width: 100%; 1325 } 1326 1327 label { 1328 font-size: var(--form--font-size); 1329 font-weight: var(--form--label-weight); 1330 margin-bottom: calc(var(--global--spacing-vertical) / 3); 1331 } 1332 1333 /** 1334 https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ 1335 https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. 1336 License: MIT. 1337 */ 1338 @supports (-webkit-appearance: none) or (-moz-appearance: none) { 1339 1340 input[type=checkbox], 1341 input[type=radio] { 1342 -webkit-appearance: none; 1343 -moz-appearance: none; 1344 position: relative; 1345 width: 25px; 1346 height: 25px; 1347 border: var(--form--border-width) solid var(--form--border-color); 1348 background: var(--global--color-white); 1349 } 1350 1351 input[type=checkbox]:disabled, 1352 input[type=radio]:disabled { 1353 opacity: 0.7; 1354 } 1355 1356 .is-dark-theme input[type=checkbox], 1357 .is-dark-theme input[type=radio] { 1358 background: var(--global--color-white-90); 1359 } 1360 1361 input[type=checkbox]:focus { 1362 outline-offset: 2px; 1363 outline: 2px dotted var(--form--border-color); 1364 } 1365 1366 input[type=checkbox]:after { 1367 content: ""; 1368 opacity: 0; 1369 display: block; 1370 right: 5px; 1371 top: 2px; 1372 position: absolute; 1373 width: 7px; 1374 height: 13px; 1375 border: 3px solid var(--form--color-text); 1376 border-top: 0; 1377 border-right: 0; 1378 transform: rotate(-30deg); 1379 } 1380 1381 input[type=checkbox]:checked { 1382 color: var(--form--color-text); 1383 } 1384 1385 input[type=checkbox]:checked:after { 1386 opacity: 1; 1387 } 1388 1389 input[type=radio] { 1390 border-radius: 50%; 1391 } 1392 1393 input[type=radio]:focus { 1394 outline-offset: 2px; 1395 outline: 2px dotted var(--form--border-color); 1396 } 1397 1398 input[type=radio]:after { 1399 content: ""; 1400 opacity: 0; 1401 display: block; 1402 right: 3px; 1403 top: 3px; 1404 position: absolute; 1405 width: 11px; 1406 height: 11px; 1407 border-radius: 50%; 1408 background: var(--form--color-text); 1409 } 1410 1411 input[type=radio]:checked { 1412 border: 4px solid var(--form--border-color); 1413 } 1414 1415 input[type=radio]:checked:after { 1416 opacity: 1; 1417 } 1418 1419 input[type=radio]:checked:focus { 1420 outline-offset: 4px; 1421 outline: 2px dotted var(--form--border-color); 1422 } 1423 } 1424 1425 input[type=checkbox] + label, 1426 input[type=radio] + label { 1427 display: inline-block; 1428 padding-right: 10px; 1429 font-size: var(--global--font-size-xs); 1430 vertical-align: top; 1431 } 1432 1433 /** 1434 * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ 1435 */ 1436 @supports (-webkit-appearance: none) or (-moz-appearance: none) { 1437 1438 input[type=range] { 1439 -webkit-appearance: none; 1440 1441 /* Hides the slider so that custom slider can be made */ 1442 width: 100%; 1443 1444 /* Specific width is required for Firefox. */ 1445 height: 6px; 1446 background: var(--form--color-ranged); 1447 border-radius: 6px; 1448 outline-offset: 10px; 1449 } 1450 1451 input[type=range]:disabled { 1452 opacity: 0.7; 1453 } 1454 1455 input[type=range]::-webkit-slider-thumb { 1456 -webkit-appearance: none; 1457 border: 3px solid var(--form--color-ranged); 1458 height: 44px; 1459 width: 44px; 1460 border-radius: 50%; 1461 background: var(--global--color-background); 1462 cursor: pointer; 1463 } 1464 1465 input[type=range]::-moz-range-thumb { 1466 border: 3px solid var(--form--color-ranged); 1467 height: 44px; 1468 width: 44px; 1469 border-radius: 50%; 1470 background: var(--global--color-background); 1471 cursor: pointer; 1472 box-sizing: border-box; 1473 } 1474 } 1475 1476 input[type=range]::-ms-track { 1477 width: 100%; 1478 height: 6px; 1479 border-radius: 6px; 1480 border-width: 19px 0; 1481 border-color: var(--global--color-background); 1482 background: transparent; 1483 color: transparent; 1484 cursor: pointer; 1485 } 1486 1487 input[type=range]::-ms-fill-upper { 1488 background: var(--form--color-ranged); 1489 border-radius: 6px; 1490 } 1491 1492 input[type=range]::-ms-fill-lower { 1493 background: var(--form--color-ranged); 1494 border-radius: 6px; 1495 } 1496 1497 input[type=range]::-ms-thumb { 1498 border: 3px solid var(--form--color-ranged); 1499 height: 44px; 1500 width: 44px; 1501 border-radius: 50%; 1502 background: var(--global--color-background); 1503 cursor: pointer; 1504 } 1505 1506 fieldset { 1507 display: grid; 1508 border-color: var(--global--color-secondary); 1509 padding: var(--global--spacing-horizontal); 1510 } 1511 1512 fieldset legend { 1513 font-size: var(--global--font-size-lg); 1514 } 1515 1516 fieldset input[type=submit] { 1517 max-width: max-content; 1518 } 1519 1520 fieldset input:not([type=submit]) { 1521 margin-bottom: var(--global--spacing-unit); 1522 } 1523 1524 fieldset input[type=radio], 1525 fieldset input[type=checkbox] { 1526 margin-bottom: 0; 1527 } 1528 1529 fieldset input[type=radio] + label, 1530 fieldset input[type=checkbox] + label { 1531 font-size: var(--form--font-size); 1532 padding-right: 0; 1533 margin-bottom: var(--global--spacing-unit); 1534 } 1535 1536 ::-moz-placeholder { 1537 opacity: 1; 1538 } 1539 1540 .post-password-message { 1541 font-size: var(--global--font-size-lg); 1542 } 1543 1544 .post-password-form { 1545 display: flex; 1546 flex-wrap: wrap; 1547 } 1548 1549 .post-password-form__label { 1550 width: 100%; 1551 margin-bottom: 0; 1552 } 1553 1554 .post-password-form input[type=password] { 1555 flex-grow: 1; 1556 margin-top: calc(var(--global--spacing-vertical) / 3); 1557 margin-left: calc(0.66 * var(--global--spacing-horizontal)); 1558 } 1559 1560 .post-password-form__submit { 1561 margin-top: calc(var(--global--spacing-vertical) / 3); 1562 } 1563 @media only screen and (min-width: 592px) { 1564 1565 .post-password-form__submit { 1566 margin-right: calc(0.4 * var(--global--spacing-horizontal)); 1567 } 1568 } 1569 1570 img { 1571 height: auto; 1572 max-width: 100%; 1573 vertical-align: middle; 1574 } 1575 1576 /* Classic editor images */ 1577 .entry-content img { 1578 max-width: 100%; 1579 } 1580 1581 /* Make sure embeds and iframes fit their containers. */ 1582 embed, 1583 iframe, 1584 object, 1585 video { 1586 max-width: 100%; 1587 } 1588 1589 /* Media captions */ 1590 figcaption, 1591 .wp-caption, 1592 .wp-caption-text, 1593 .wp-block-embed figcaption { 1594 color: currentColor; 1595 font-size: var(--global--font-size-xs); 1596 line-height: var(--global--line-height-body); 1597 margin-top: calc(0.5 * var(--global--spacing-unit)); 1598 margin-bottom: var(--global--spacing-unit); 1599 text-align: center; 1600 } 1601 1602 .alignleft figcaption, 1603 .alignright figcaption, 1604 .alignleft .wp-caption, 1605 .alignright .wp-caption, 1606 .alignleft .wp-caption-text, 1607 .alignright .wp-caption-text, 1608 .alignleft .wp-block-embed figcaption, 1609 .alignright .wp-block-embed figcaption { 1610 margin-bottom: 0; 1611 } 1612 1613 /* WP Smiley */ 1614 .page-content .wp-smiley, 1615 .entry-content .wp-smiley, 1616 .comment-content .wp-smiley { 1617 border: none; 1618 margin-bottom: 0; 1619 margin-top: 0; 1620 padding: 0; 1621 } 1622 1623 /* Over here, place any elements that do not need to have their own file. */ 1624 b, 1625 strong { 1626 font-weight: 700; 1627 } 1628 1629 dfn, 1630 cite, 1631 em, 1632 i { 1633 font-style: italic; 1634 } 1635 1636 pre { 1637 white-space: pre; 1638 overflow-x: auto; 1639 } 1640 1641 /* 1642 * text-underline-offset doesn't work in Chrome at all 👎 1643 * But looks nice in Safari/Firefox, so let's keep it and 1644 * maybe Chrome will support it soon. 1645 */ 1646 a { 1647 cursor: pointer; 1648 color: var(--wp--style--color--link, var(--global--color-primary)); 1649 text-underline-offset: 3px; 1650 text-decoration-skip-ink: all; 1651 } 1652 1653 a:hover { 1654 text-decoration-style: dotted; 1655 text-decoration-skip-ink: none; 1656 } 1657 1658 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 1659 1660 /* Only visible in Windows High Contrast mode */ 1661 outline: 2px solid transparent; 1662 text-decoration: underline 1px dotted currentColor; 1663 text-decoration-skip-ink: none; 1664 background: rgba(255, 255, 255, 0.9); 1665 } 1666 1667 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 1668 background: var(--global--color-black); 1669 color: var(--global--color-white); 1670 text-decoration: none; 1671 } 1672 1673 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { 1674 color: var(--wp--style--color--link, var(--global--color-white)); 1675 } 1676 1677 .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 1678 background: rgba(0, 0, 0, 0.9); 1679 color: var(--wp--style--color--link, var(--global--color-white)); 1680 } 1681 1682 .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { 1683 color: var(--wp--style--color--link, var(--global--color-white)); 1684 } 1685 1686 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { 1687 1688 /* Only visible in Windows High Contrast mode */ 1689 outline: 2px solid transparent; 1690 outline-offset: -2px; 1691 } 1692 1693 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { 1694 color: #21759b; 1695 background-color: #f1f1f1; 1696 } 1697 1698 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link { 1699 background: none; 1700 } 1701 1702 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { 1703 outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); 1704 } 1705 1706 .has-background .has-link-color a, 1707 .has-background.has-link-color a { 1708 color: var(--wp--style--color--link, var(--global--color-primary)); 1709 } 1710 1711 /* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ 1712 .wp-block-audio audio:focus { 1713 outline-offset: 5px; 1714 outline: 2px solid var(--global--color-primary); 1715 } 1716 1717 /** 1718 * Button 1719 */ 1720 .site .button, 1721 button, 1722 input[type=submit], 1723 input[type=reset], 1724 .wp-block-search .wp-block-search__button, 1725 .wp-block-button .wp-block-button__link, 1726 .wp-block-file a.wp-block-file__button { 1727 border: var(--button--border-width) solid transparent; 1728 border-radius: var(--button--border-radius); 1729 cursor: pointer; 1730 font-weight: var(--button--font-weight); 1731 font-family: var(--button--font-family); 1732 font-size: var(--button--font-size); 1733 line-height: var(--button--line-height); 1734 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 1735 text-decoration: none; 1736 } 1737 1738 .site .button:not(:hover):not(:active):not(.has-text-color), 1739 button:not(:hover):not(:active):not(.has-text-color), 1740 input[type=submit]:not(:hover):not(:active):not(.has-text-color), 1741 input[type=reset]:not(:hover):not(:active):not(.has-text-color), 1742 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color), 1743 .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 1744 .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { 1745 color: var(--global--color-background); 1746 } 1747 1748 .has-background .site .button:not(:hover):not(:active):not(.has-text-color), 1749 .has-background button:not(:hover):not(:active):not(.has-text-color), 1750 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color), 1751 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color), 1752 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color), 1753 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 1754 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { 1755 color: var(--local--color-background, var(--global--color-primary)); 1756 } 1757 1758 .has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background, 1759 .has-background button:not(:hover):not(:active):not(.has-text-color).has-background, 1760 .has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background, 1761 .has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background, 1762 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background, 1763 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background, 1764 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background { 1765 color: var(--global--color-primary); 1766 } 1767 1768 .site .button:not(:hover):not(:active):not(.has-background), 1769 button:not(:hover):not(:active):not(.has-background), 1770 input[type=submit]:not(:hover):not(:active):not(.has-background), 1771 input[type=reset]:not(:hover):not(:active):not(.has-background), 1772 .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), 1773 .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), 1774 .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { 1775 background-color: var(--global--color-primary); 1776 } 1777 1778 .has-background .site .button:not(:hover):not(:active):not(.has-background), 1779 .has-background button:not(:hover):not(:active):not(.has-background), 1780 .has-background input[type=submit]:not(:hover):not(:active):not(.has-background), 1781 .has-background input[type=reset]:not(:hover):not(:active):not(.has-background), 1782 .has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background), 1783 .has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background), 1784 .has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) { 1785 background-color: var(--local--color-primary, var(--global--color-primary)); 1786 } 1787 1788 .site .button:hover, 1789 .site .button:active, 1790 button:hover, 1791 button:active, 1792 input[type=submit]:hover, 1793 input[type=submit]:active, 1794 input[type=reset]:hover, 1795 input[type=reset]:active, 1796 .wp-block-search .wp-block-search__button:hover, 1797 .wp-block-search .wp-block-search__button:active, 1798 .wp-block-button .wp-block-button__link:hover, 1799 .wp-block-button .wp-block-button__link:active, 1800 .wp-block-file a.wp-block-file__button:hover, 1801 .wp-block-file a.wp-block-file__button:active { 1802 background-color: transparent; 1803 border-color: currentColor; 1804 color: inherit; 1805 } 1806 1807 .site .button:focus, 1808 button:focus, 1809 input[type=submit]:focus, 1810 input[type=reset]:focus, 1811 .wp-block-search .wp-block-search__button:focus, 1812 .wp-block-button .wp-block-button__link:focus, 1813 .wp-block-file a.wp-block-file__button:focus { 1814 outline-offset: -6px; 1815 outline: 2px dotted currentColor; 1816 } 1817 1818 .site .button:disabled, 1819 button:disabled, 1820 input[type=submit]:disabled, 1821 input[type=reset]:disabled, 1822 .wp-block-search .wp-block-search__button:disabled, 1823 .wp-block-button .wp-block-button__link:disabled, 1824 .wp-block-file a.wp-block-file__button:disabled { 1825 background-color: var(--global--color-white-50); 1826 border-color: var(--global--color-white-50); 1827 color: var(--button--color-text-active); 1828 } 1829 1830 /** 1831 * Block Options 1832 */ 1833 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1834 color: var(--global--color-background); 1835 } 1836 1837 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1838 color: var(--local--color-background, var(--global--color-background)); 1839 } 1840 1841 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { 1842 color: var(--global--color-primary); 1843 } 1844 1845 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 1846 background-color: var(--global--color-primary); 1847 } 1848 1849 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 1850 background-color: var(--local--color-primary, var(--global--color-primary)); 1851 } 1852 1853 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, 1854 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { 1855 border-color: currentColor !important; 1856 background-color: transparent !important; 1857 color: inherit !important; 1858 } 1859 1860 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 1861 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background), 1862 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background { 1863 border-color: currentColor; 1864 } 1865 1866 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1867 color: var(--global--color-primary); 1868 } 1869 1870 .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 1871 color: var(--local--color-primary, var(--global--color-primary)); 1872 } 1873 1874 .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) { 1875 color: inherit; 1876 } 1877 1878 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 1879 background-color: transparent; 1880 } 1881 1882 .wp-block-button.is-style-outline .wp-block-button__link:hover, 1883 .wp-block-button.is-style-outline .wp-block-button__link:active { 1884 border-color: transparent !important; 1885 background-color: var(--global--color-primary) !important; 1886 color: var(--global--color-background) !important; 1887 } 1888 1889 .has-background .wp-block-button.is-style-outline .wp-block-button__link:hover, 1890 .has-background .wp-block-button.is-style-outline .wp-block-button__link:active { 1891 background-color: var(--local--color-primary, var(--global--color-primary)) !important; 1892 color: var(--local--color-background, var(--global--color-background)) !important; 1893 } 1894 1895 .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover, 1896 .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active { 1897 color: var(--local--color-background, var(--global--color-background)) !important; 1898 } 1899 1900 .wp-block-button .is-style-squared .wp-block-button__link { 1901 border-radius: 0; 1902 } 1903 1904 .is-style-outline .wp-block-button__link[style*=radius]:focus, 1905 .wp-block-button a.wp-block-button__link[style*=radius]:focus { 1906 outline-offset: 2px; 1907 outline: 2px dotted var(--button--color-background); 1908 } 1909 1910 .wp-block-code { 1911 border-color: var(--global--color-border); 1912 border-radius: 0; 1913 border-style: solid; 1914 border-width: 0.1rem; 1915 padding: var(--global--spacing-unit); 1916 } 1917 1918 .wp-block-code code { 1919 color: var(--global--color-primary); 1920 white-space: pre; 1921 overflow-x: auto; 1922 display: block; 1923 } 1924 1925 .wp-block-columns:not(.alignwide):not(.alignfull) { 1926 clear: both; 1927 } 1928 1929 .wp-block-columns .wp-block-column > * { 1930 margin-top: calc(0.66 * var(--global--spacing-vertical)); 1931 margin-bottom: calc(0.66 * var(--global--spacing-vertical)); 1932 } 1933 @media only screen and (min-width: 482px) { 1934 1935 .wp-block-columns .wp-block-column > * { 1936 margin-top: var(--global--spacing-vertical); 1937 margin-bottom: var(--global--spacing-vertical); 1938 } 1939 } 1940 1941 .wp-block-columns .wp-block-column > *:first-child { 1942 margin-top: 0; 1943 } 1944 1945 .wp-block-columns .wp-block-column > *:last-child { 1946 margin-bottom: 0; 1947 } 1948 1949 .wp-block-columns .wp-block-column:last-child { 1950 margin-bottom: 0; 1951 } 1952 1953 .wp-block-columns .wp-block-column:not(:last-child) { 1954 margin-bottom: calc(0.66 * var(--global--spacing-vertical)); 1955 } 1956 @media only screen and (min-width: 482px) { 1957 1958 .wp-block-columns .wp-block-column:not(:last-child) { 1959 margin-bottom: var(--global--spacing-vertical); 1960 } 1961 } 1962 @media only screen and (min-width: 822px) { 1963 1964 .wp-block-columns .wp-block-column:not(:last-child) { 1965 margin-bottom: 0; 1966 } 1967 } 1968 1969 .wp-block-columns.is-style-twentytwentyone-columns-overlap { 1970 justify-content: space-around; 1971 } 1972 @media only screen and (min-width: 652px) { 1973 1974 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { 1975 margin-right: calc(-2 * var(--global--spacing-horizontal)); 1976 margin-top: calc(2.5 * var(--global--spacing-horizontal)); 1977 z-index: 2; 1978 } 1979 1980 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), 1981 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), 1982 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), 1983 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), 1984 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background), 1985 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background), 1986 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background), 1987 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), 1988 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background), 1989 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) { 1990 background-color: var(--global--color-background); 1991 padding: var(--global--spacing-unit); 1992 } 1993 1994 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), 1995 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { 1996 padding-right: calc(2 * var(--global--spacing-horizontal)); 1997 } 1998 1999 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { 2000 margin-top: 0; 2001 } 2002 } 2003 2004 .wp-block-columns.alignfull .wp-block-column p:not(.has-background), 2005 .wp-block-columns.alignfull .wp-block-column h1:not(.has-background), 2006 .wp-block-columns.alignfull .wp-block-column h2:not(.has-background), 2007 .wp-block-columns.alignfull .wp-block-column h3:not(.has-background), 2008 .wp-block-columns.alignfull .wp-block-column h4:not(.has-background), 2009 .wp-block-columns.alignfull .wp-block-column h5:not(.has-background), 2010 .wp-block-columns.alignfull .wp-block-column h6:not(.has-background) { 2011 padding-right: var(--global--spacing-unit); 2012 padding-left: var(--global--spacing-unit); 2013 } 2014 2015 .wp-block-cover, 2016 .wp-block-cover-image { 2017 background-color: var(--cover--color-background); 2018 min-height: var(--cover--height); 2019 margin-top: inherit; 2020 margin-bottom: inherit; 2021 2022 /* default & custom background-color */ 2023 2024 /* Treating H2 separately to account for legacy /core styles */ 2025 2026 /* Block Styles */ 2027 2028 /* The background color class is used just for the overlay, and does not need to be applied to the inner container. */ 2029 } 2030 2031 .wp-block-cover:not(.alignwide):not(.alignfull), 2032 .wp-block-cover-image:not(.alignwide):not(.alignfull) { 2033 clear: both; 2034 } 2035 2036 .wp-block-cover.alignfull, 2037 .wp-block-cover-image.alignfull { 2038 margin-top: 0; 2039 margin-bottom: 0; 2040 } 2041 2042 .wp-block-cover .wp-block-cover__inner-container, 2043 .wp-block-cover .wp-block-cover-image-text, 2044 .wp-block-cover .wp-block-cover-text, 2045 .wp-block-cover-image .wp-block-cover__inner-container, 2046 .wp-block-cover-image .wp-block-cover-image-text, 2047 .wp-block-cover-image .wp-block-cover-text { 2048 color: currentColor; 2049 margin-top: var(--global--spacing-vertical); 2050 margin-bottom: var(--global--spacing-vertical); 2051 } 2052 2053 .wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), 2054 .wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), 2055 .wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button), 2056 .wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), 2057 .wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), 2058 .wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) { 2059 color: currentColor; 2060 } 2061 2062 .wp-block-cover .wp-block-cover__inner-container .has-link-color a, 2063 .wp-block-cover .wp-block-cover-image-text .has-link-color a, 2064 .wp-block-cover .wp-block-cover-text .has-link-color a, 2065 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, 2066 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a, 2067 .wp-block-cover-image .wp-block-cover-text .has-link-color a { 2068 color: var(--wp--style--color--link, var(--global--color-primary)); 2069 } 2070 2071 .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container, 2072 .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text, 2073 .wp-block-cover:not([class*=background-color]) .wp-block-cover-text, 2074 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container, 2075 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text, 2076 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text { 2077 color: var(--cover--color-foreground); 2078 } 2079 2080 .wp-block-cover h2, 2081 .wp-block-cover-image h2 { 2082 font-size: var(--heading--font-size-h2); 2083 letter-spacing: var(--heading--letter-spacing-h2); 2084 line-height: var(--heading--line-height-h2); 2085 max-width: inherit; 2086 text-align: inherit; 2087 padding: 0; 2088 } 2089 2090 .wp-block-cover h2.has-text-align-left, 2091 .wp-block-cover-image h2.has-text-align-left { 2092 text-align: right; 2093 } 2094 2095 .wp-block-cover h2.has-text-align-center, 2096 .wp-block-cover-image h2.has-text-align-center { 2097 text-align: center; 2098 } 2099 2100 .wp-block-cover h2.has-text-align-right, 2101 .wp-block-cover-image h2.has-text-align-right { 2102 text-align: left; 2103 } 2104 2105 .wp-block-cover .wp-block-cover__inner-container, 2106 .wp-block-cover-image .wp-block-cover__inner-container { 2107 width: calc(100% - calc(2 * var(--global--spacing-vertical))); 2108 } 2109 2110 .wp-block-cover .wp-block-cover__inner-container > *, 2111 .wp-block-cover-image .wp-block-cover__inner-container > * { 2112 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2113 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 2114 } 2115 @media only screen and (min-width: 482px) { 2116 2117 .wp-block-cover .wp-block-cover__inner-container > *, 2118 .wp-block-cover-image .wp-block-cover__inner-container > * { 2119 margin-top: var(--global--spacing-vertical); 2120 margin-bottom: var(--global--spacing-vertical); 2121 } 2122 } 2123 2124 .wp-block-cover .wp-block-cover__inner-container > *:first-child, 2125 .wp-block-cover-image .wp-block-cover__inner-container > *:first-child { 2126 margin-top: 0; 2127 } 2128 2129 .wp-block-cover .wp-block-cover__inner-container > *:last-child, 2130 .wp-block-cover-image .wp-block-cover__inner-container > *:last-child { 2131 margin-bottom: 0; 2132 } 2133 2134 .wp-block-cover.alignleft, 2135 .wp-block-cover.alignright, 2136 .wp-block-cover-image.alignleft, 2137 .wp-block-cover-image.alignright { 2138 margin-top: 0; 2139 } 2140 2141 .wp-block-cover.alignleft > *, 2142 .wp-block-cover.alignright > *, 2143 .wp-block-cover-image.alignleft > *, 2144 .wp-block-cover-image.alignright > * { 2145 margin-top: calc(2 * var(--global--spacing-vertical)); 2146 margin-bottom: calc(2 * var(--global--spacing-vertical)); 2147 padding-right: var(--global--spacing-horizontal); 2148 padding-left: var(--global--spacing-horizontal); 2149 width: 100%; 2150 } 2151 2152 .wp-block-cover.has-left-content, 2153 .wp-block-cover.has-right-content, 2154 .wp-block-cover-image.has-left-content, 2155 .wp-block-cover-image.has-right-content { 2156 justify-content: center; 2157 } 2158 2159 .wp-block-cover.is-style-twentytwentyone-border, 2160 .wp-block-cover-image.is-style-twentytwentyone-border { 2161 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2162 } 2163 2164 .wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container, 2165 .wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container { 2166 background-color: unset; 2167 } 2168 2169 .wp-block-file a.wp-block-file__button:active, 2170 .wp-block-file a.wp-block-file__button:focus, 2171 .wp-block-file a.wp-block-file__button:hover { 2172 opacity: inherit; 2173 } 2174 2175 .wp-block-file a.wp-block-file__button { 2176 display: inline-block; 2177 } 2178 2179 .wp-block-gallery { 2180 margin: 0 auto; 2181 } 2182 2183 .wp-block-gallery .blocks-gallery-image, 2184 .wp-block-gallery .blocks-gallery-item { 2185 width: calc((100% - var(--global--spacing-unit)) / 2); 2186 } 2187 2188 .wp-block-gallery .blocks-gallery-image figcaption, 2189 .wp-block-gallery .blocks-gallery-item figcaption { 2190 margin: 0; 2191 color: var(--global--color-white); 2192 font-size: var(--global--font-size-xs); 2193 } 2194 2195 .wp-block-gallery .blocks-gallery-image figcaption a, 2196 .wp-block-gallery .blocks-gallery-item figcaption a { 2197 color: var(--global--color-white); 2198 } 2199 2200 .wp-block-gallery .blocks-gallery-image figcaption a:focus, 2201 .wp-block-gallery .blocks-gallery-item figcaption a:focus { 2202 background-color: transparent; 2203 outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); 2204 text-decoration: none; 2205 } 2206 2207 .wp-block-gallery .blocks-gallery-image a:focus img, 2208 .wp-block-gallery .blocks-gallery-item a:focus img { 2209 outline-offset: 2px; 2210 } 2211 2212 .wp-block-group { 2213 display: block; 2214 clear: both; 2215 display: flow-root; 2216 } 2217 2218 .wp-block-group:before, 2219 .wp-block-group:after { 2220 content: ""; 2221 display: block; 2222 clear: both; 2223 } 2224 2225 .wp-block-group .wp-block-group__inner-container { 2226 margin-right: auto; 2227 margin-left: auto; 2228 } 2229 2230 .wp-block-group .wp-block-group__inner-container > * { 2231 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2232 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 2233 } 2234 @media only screen and (min-width: 482px) { 2235 2236 .wp-block-group .wp-block-group__inner-container > * { 2237 margin-top: var(--global--spacing-vertical); 2238 margin-bottom: var(--global--spacing-vertical); 2239 } 2240 } 2241 2242 .wp-block-group .wp-block-group__inner-container > *:first-child { 2243 margin-top: 0; 2244 } 2245 2246 .wp-block-group .wp-block-group__inner-container > *:last-child { 2247 margin-bottom: 0; 2248 } 2249 2250 .wp-block-group.has-background { 2251 padding: calc(0.666 * var(--global--spacing-vertical)); 2252 } 2253 @media only screen and (min-width: 482px) { 2254 2255 .wp-block-group.has-background { 2256 padding: var(--global--spacing-vertical); 2257 } 2258 } 2259 2260 .wp-block-group.is-style-twentytwentyone-border { 2261 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2262 padding: var(--global--spacing-vertical); 2263 } 2264 2265 .wp-block-group.has-background .wp-block-group__inner-container > .alignfull, 2266 .wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, 2267 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull, 2268 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { 2269 max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 2270 width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 2271 margin-right: calc(-1 * var(--global--spacing-vertical)); 2272 } 2273 2274 h1, 2275 .h1, 2276 h2, 2277 .h2, 2278 h3, 2279 .h3, 2280 h4, 2281 .h4, 2282 h5, 2283 .h5, 2284 h6, 2285 .h6 { 2286 clear: both; 2287 font-family: var(--heading--font-family); 2288 font-weight: var(--heading--font-weight); 2289 } 2290 2291 h1 strong, 2292 .h1 strong, 2293 h2 strong, 2294 .h2 strong, 2295 h3 strong, 2296 .h3 strong, 2297 h4 strong, 2298 .h4 strong, 2299 h5 strong, 2300 .h5 strong, 2301 h6 strong, 2302 .h6 strong { 2303 font-weight: var(--heading--font-weight-strong); 2304 } 2305 2306 h1, 2307 .h1 { 2308 font-size: var(--heading--font-size-h1); 2309 letter-spacing: var(--heading--letter-spacing-h1); 2310 line-height: var(--heading--line-height-h1); 2311 } 2312 2313 h2, 2314 .h2 { 2315 font-size: var(--heading--font-size-h2); 2316 letter-spacing: var(--heading--letter-spacing-h2); 2317 line-height: var(--heading--line-height-h2); 2318 } 2319 2320 h3, 2321 .h3 { 2322 font-size: var(--heading--font-size-h3); 2323 letter-spacing: var(--heading--letter-spacing-h3); 2324 line-height: var(--heading--line-height-h3); 2325 } 2326 2327 h4, 2328 .h4 { 2329 font-size: var(--heading--font-size-h4); 2330 font-weight: var(--heading--font-weight-strong); 2331 letter-spacing: var(--heading--letter-spacing-h4); 2332 line-height: var(--heading--line-height-h4); 2333 } 2334 2335 h5, 2336 .h5 { 2337 font-size: var(--heading--font-size-h5); 2338 font-weight: var(--heading--font-weight-strong); 2339 letter-spacing: var(--heading--letter-spacing-h5); 2340 line-height: var(--heading--line-height-h5); 2341 } 2342 2343 h6, 2344 .h6 { 2345 font-size: var(--heading--font-size-h6); 2346 font-weight: var(--heading--font-weight-strong); 2347 letter-spacing: var(--heading--letter-spacing-h6); 2348 line-height: var(--heading--line-height-h6); 2349 } 2350 2351 .wp-block-image { 2352 text-align: center; 2353 } 2354 2355 .wp-block-image figcaption { 2356 color: var(--global--color-primary); 2357 font-size: var(--global--font-size-xs); 2358 line-height: var(--global--line-height-body); 2359 margin-top: calc(0.5 * var(--global--spacing-unit)); 2360 margin-bottom: var(--global--spacing-unit); 2361 text-align: center; 2362 } 2363 2364 .wp-block-image .alignright { 2365 margin-right: var(--global--spacing-horizontal); 2366 } 2367 2368 .wp-block-image .alignleft { 2369 margin-left: var(--global--spacing-horizontal); 2370 } 2371 2372 .wp-block-image a:focus img { 2373 outline-offset: 2px; 2374 } 2375 2376 .entry-content > *[class=wp-block-image], 2377 .entry-content [class*=inner-container] > *[class=wp-block-image] { 2378 margin-top: 0; 2379 margin-bottom: 0; 2380 } 2381 2382 .entry-content > *[class=wp-block-image] + *, 2383 .entry-content [class*=inner-container] > *[class=wp-block-image] + * { 2384 margin-top: 0; 2385 } 2386 2387 .wp-block-image.is-style-twentytwentyone-border img, 2388 .wp-block-image.is-style-twentytwentyone-image-frame img { 2389 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2390 } 2391 2392 .wp-block-image.is-style-twentytwentyone-image-frame img { 2393 padding: var(--global--spacing-unit); 2394 } 2395 2396 @media only screen and (min-width: 482px) { 2397 2398 .entry-content > .wp-block-image > .alignleft, 2399 .entry-content > .wp-block-image > .alignright { 2400 max-width: 50%; 2401 } 2402 } 2403 @media only screen and (max-width: 481px) { 2404 2405 .entry-content > .wp-block-image > .alignleft, 2406 .entry-content > .wp-block-image > .alignright { 2407 margin-right: 0; 2408 margin-left: 0; 2409 } 2410 } 2411 2412 .wp-block-latest-comments { 2413 padding-right: 0; 2414 } 2415 2416 .wp-block-latest-comments .wp-block-latest-comments__comment { 2417 font-size: var(--global--font-size-sm); 2418 line-height: var(--global--line-height-body); 2419 2420 /* Vertical margins logic */ 2421 margin-top: var(--global--spacing-vertical); 2422 margin-bottom: var(--global--spacing-vertical); 2423 } 2424 2425 .wp-block-latest-comments .wp-block-latest-comments__comment:first-child { 2426 margin-top: 0; 2427 } 2428 2429 .wp-block-latest-comments .wp-block-latest-comments__comment:last-child { 2430 margin-bottom: 0; 2431 } 2432 2433 .wp-block-latest-comments .wp-block-latest-comments__comment-meta { 2434 font-family: var(--heading--font-family); 2435 } 2436 2437 .wp-block-latest-comments .wp-block-latest-comments__comment-date { 2438 color: var(--global--color-primary); 2439 font-size: var(--global--font-size-sm); 2440 } 2441 2442 .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { 2443 font-size: var(--global--font-size-sm); 2444 line-height: var(--global--line-height-body); 2445 margin: 0; 2446 } 2447 2448 .wp-block-latest-posts { 2449 padding-right: 0; 2450 } 2451 2452 .wp-block-latest-posts:not(.is-grid) > li { 2453 margin-top: calc(1.666 * var(--global--spacing-vertical)); 2454 margin-bottom: calc(1.666 * var(--global--spacing-vertical)); 2455 } 2456 2457 .wp-block-latest-posts:not(.is-grid) > li:first-child { 2458 margin-top: 0; 2459 } 2460 2461 .wp-block-latest-posts:not(.is-grid) > li:last-child { 2462 margin-bottom: 0; 2463 } 2464 2465 .widget-area .wp-block-latest-posts:not(.is-grid) > li { 2466 margin-top: 0; 2467 margin-bottom: 0; 2468 } 2469 2470 .wp-block-latest-posts.is-grid { 2471 word-wrap: break-word; 2472 word-break: break-word; 2473 } 2474 2475 .wp-block-latest-posts.is-grid > li { 2476 margin-bottom: var(--global--spacing-vertical); 2477 } 2478 2479 .wp-block-latest-posts.is-grid > li:last-child { 2480 margin-bottom: 0; 2481 } 2482 2483 .wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), 2484 .wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, 2485 .wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), 2486 .wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, 2487 .wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), 2488 .wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, 2489 .wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), 2490 .wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, 2491 .wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), 2492 .wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { 2493 margin-bottom: 0; 2494 } 2495 2496 .wp-block-latest-posts > li > * { 2497 margin-top: calc(0.333 * var(--global--spacing-vertical)); 2498 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 2499 } 2500 2501 .wp-block-latest-posts > li > *:first-child { 2502 margin-top: 0; 2503 } 2504 2505 .wp-block-latest-posts > li > *:last-child { 2506 margin-bottom: 0; 2507 } 2508 2509 .wp-block-latest-posts > li > a { 2510 display: inline-block; 2511 font-family: var(--latest-posts--title-font-family); 2512 font-size: var(--latest-posts--title-font-size); 2513 font-weight: var(--heading--font-weight); 2514 line-height: var(--global--line-height-heading); 2515 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 2516 } 2517 2518 .widget-area .wp-block-latest-posts > li > a { 2519 font-size: var(--global--font-size-sm); 2520 margin-bottom: 0; 2521 } 2522 2523 .wp-block-latest-posts .wp-block-latest-posts__post-author { 2524 color: var(--global--color-primary); 2525 font-size: var(--global--font-size-md); 2526 line-height: var(--global--line-height-body); 2527 } 2528 2529 .wp-block-latest-posts .wp-block-latest-posts__post-date { 2530 color: var(--global--color-primary); 2531 font-size: var(--global--font-size-xs); 2532 line-height: var(--global--line-height-body); 2533 } 2534 2535 [class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, 2536 .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { 2537 color: currentColor; 2538 } 2539 2540 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt, 2541 .wp-block-latest-posts .wp-block-latest-posts__post-full-content { 2542 font-family: var(--latest-posts--description-font-family); 2543 font-size: var(--latest-posts--description-font-size); 2544 line-height: var(--global--line-height-body); 2545 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2546 } 2547 2548 .wp-block-latest-posts.alignfull { 2549 padding-right: var(--global--spacing-unit); 2550 padding-left: var(--global--spacing-unit); 2551 } 2552 2553 .entry-content [class*=inner-container] .wp-block-latest-posts.alignfull, 2554 .entry-content .has-background .wp-block-latest-posts.alignfull { 2555 padding-right: 0; 2556 padding-left: 0; 2557 } 2558 2559 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers { 2560 border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); 2561 border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); 2562 } 2563 2564 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, 2565 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li { 2566 padding-bottom: var(--global--spacing-vertical); 2567 border-bottom: var(--separator--height) solid var(--global--color-border); 2568 margin-top: var(--global--spacing-vertical); 2569 margin-bottom: var(--global--spacing-vertical); 2570 } 2571 2572 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child, 2573 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child { 2574 padding-bottom: 0; 2575 border-bottom: none; 2576 } 2577 2578 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid { 2579 box-shadow: inset 0 -1px 0 0 var(--global--color-border); 2580 border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); 2581 } 2582 2583 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li { 2584 margin: 0; 2585 padding-top: var(--global--spacing-vertical); 2586 padding-left: var(--global--spacing-horizontal); 2587 } 2588 2589 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { 2590 padding-bottom: var(--global--spacing-vertical); 2591 } 2592 @media screen and (min-width: 600px) { 2593 2594 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li { 2595 width: calc((100% / 2)); 2596 } 2597 2598 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { 2599 width: calc((100% / 3)); 2600 } 2601 2602 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { 2603 width: calc((100% / 4)); 2604 } 2605 2606 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { 2607 width: calc((100% / 5)); 2608 } 2609 2610 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { 2611 width: calc((100% / 6)); 2612 } 2613 } 2614 2615 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li { 2616 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2617 padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); 2618 } 2619 2620 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child { 2621 padding-bottom: var(--global--spacing-vertical); 2622 } 2623 2624 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li { 2625 margin-top: var(--global--spacing-horizontal); 2626 margin-bottom: var(--global--spacing-horizontal); 2627 } 2628 2629 .gallery-item { 2630 display: inline-block; 2631 text-align: center; 2632 vertical-align: top; 2633 width: 100%; 2634 } 2635 2636 .gallery-item a { 2637 display: block; 2638 } 2639 2640 .gallery-item a:focus img { 2641 outline-offset: -2px; 2642 } 2643 2644 .gallery-columns-2 .gallery-item { 2645 max-width: 50%; 2646 } 2647 2648 .gallery-columns-3 .gallery-item { 2649 max-width: 33.33%; 2650 } 2651 2652 .gallery-columns-4 .gallery-item { 2653 max-width: 25%; 2654 } 2655 2656 .gallery-columns-5 .gallery-item { 2657 max-width: 20%; 2658 } 2659 2660 .gallery-columns-6 .gallery-item { 2661 max-width: 16.66%; 2662 } 2663 2664 .gallery-columns-7 .gallery-item { 2665 max-width: 14.28%; 2666 } 2667 2668 .gallery-columns-8 .gallery-item { 2669 max-width: 12.5%; 2670 } 2671 2672 .gallery-columns-9 .gallery-item { 2673 max-width: 11.11%; 2674 } 2675 2676 .gallery-caption { 2677 display: block; 2678 } 2679 2680 figure.wp-caption a:focus img { 2681 outline-offset: 2px; 2682 } 2683 2684 ul, 2685 ol { 2686 font-family: var(--list--font-family); 2687 margin: 0; 2688 padding-right: calc(2 * var(--global--spacing-horizontal)); 2689 } 2690 2691 ul.aligncenter, 2692 ol.aligncenter { 2693 list-style-position: inside; 2694 padding: 0; 2695 } 2696 2697 ul.alignright, 2698 ol.alignright { 2699 list-style-position: inside; 2700 text-align: left; 2701 padding: 0; 2702 } 2703 2704 ul { 2705 list-style-type: disc; 2706 } 2707 2708 ul ul { 2709 list-style-type: circle; 2710 } 2711 2712 ol { 2713 list-style-type: decimal; 2714 } 2715 2716 ol ul { 2717 list-style-type: circle; 2718 } 2719 2720 dt { 2721 font-family: var(--definition-term--font-family); 2722 font-weight: bold; 2723 } 2724 2725 dd { 2726 margin: 0; 2727 padding-right: calc(2 * var(--global--spacing-horizontal)); 2728 } 2729 2730 .wp-block-media-text { 2731 2732 /** 2733 * Block Options 2734 */ 2735 } 2736 2737 .wp-block-media-text.alignfull { 2738 margin-top: 0; 2739 margin-bottom: 0; 2740 } 2741 2742 .wp-block-media-text a:focus img { 2743 outline-offset: -1px; 2744 } 2745 2746 .wp-block-media-text .wp-block-media-text__content { 2747 padding: var(--global--spacing-horizontal); 2748 } 2749 @media only screen and (min-width: 592px) { 2750 2751 .wp-block-media-text .wp-block-media-text__content { 2752 padding: var(--global--spacing-vertical); 2753 } 2754 } 2755 2756 .wp-block-media-text .wp-block-media-text__content > * { 2757 margin-top: calc(0.666 * var(--global--spacing-vertical)); 2758 margin-bottom: calc(0.666 * var(--global--spacing-vertical)); 2759 } 2760 @media only screen and (min-width: 482px) { 2761 2762 .wp-block-media-text .wp-block-media-text__content > * { 2763 margin-top: var(--global--spacing-vertical); 2764 margin-bottom: var(--global--spacing-vertical); 2765 } 2766 } 2767 2768 .wp-block-media-text .wp-block-media-text__content > *:first-child { 2769 margin-top: 0; 2770 } 2771 2772 .wp-block-media-text .wp-block-media-text__content > *:last-child { 2773 margin-bottom: 0; 2774 } 2775 @media only screen and (min-width: 482px) { 2776 2777 .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { 2778 padding-top: var(--global--spacing-vertical); 2779 padding-bottom: var(--global--spacing-vertical); 2780 } 2781 } 2782 2783 .wp-block-media-text.is-style-twentytwentyone-border { 2784 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 2785 } 2786 2787 .wp-block-navigation .wp-block-navigation-link { 2788 padding: 0; 2789 } 2790 2791 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { 2792 padding: var(--primary-nav--padding); 2793 } 2794 2795 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { 2796 font-family: var(--primary-nav--font-family); 2797 font-size: var(--primary-nav--font-size); 2798 font-weight: var(--primary-nav--font-weight); 2799 } 2800 2801 .wp-block-navigation .wp-block-navigation-link__submenu-icon { 2802 padding: 0; 2803 } 2804 2805 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation-link { 2806 display: inherit; 2807 } 2808 2809 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { 2810 border: none; 2811 right: 0; 2812 margin-right: var(--primary-nav--padding); 2813 min-width: max-content; 2814 opacity: 0; 2815 padding: 0; 2816 position: inherit; 2817 top: inherit; 2818 } 2819 2820 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content { 2821 display: inline-block; 2822 padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding); 2823 } 2824 2825 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { 2826 display: none; 2827 } 2828 2829 .wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, 2830 .wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container { 2831 display: block; 2832 opacity: 1; 2833 visibility: visible; 2834 } 2835 2836 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { 2837 background: var(--global--color-background); 2838 margin: 0; 2839 padding: 0; 2840 position: absolute; 2841 top: 100%; 2842 border: 1px solid var(--primary-nav--border-color); 2843 } 2844 2845 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before, 2846 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { 2847 content: ""; 2848 display: block; 2849 position: absolute; 2850 width: 0; 2851 top: -10px; 2852 right: var(--global--spacing-horizontal); 2853 border-style: solid; 2854 border-color: var(--primary-nav--border-color) transparent; 2855 border-width: 0 7px 10px 7px; 2856 } 2857 2858 .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { 2859 top: -9px; 2860 border-color: var(--global--color-background) transparent; 2861 } 2862 2863 .wp-block-navigation:not(.has-background) .wp-block-navigation__container { 2864 background: var(--global--color-background); 2865 } 2866 2867 .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container { 2868 background: var(--global--color-background); 2869 } 2870 2871 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, 2872 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus { 2873 color: var(--primary-nav--color-link-hover); 2874 } 2875 2876 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover { 2877 text-decoration: underline; 2878 text-decoration-style: dotted; 2879 } 2880 2881 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content { 2882 color: currentColor; 2883 } 2884 2885 p { 2886 line-height: var(--wp--typography--line-height, var(--global--line-height-body)); 2887 } 2888 2889 p.has-background { 2890 padding: var(--global--spacing-unit); 2891 } 2892 2893 p.has-text-color a { 2894 color: var(--wp--style--color--link, var(--global--color-primary)); 2895 } 2896 2897 pre.wp-block-preformatted { 2898 overflow-x: auto; 2899 white-space: pre; 2900 } 2901 2902 .wp-block-pullquote { 2903 padding: calc(2 * var(--global--spacing-unit)) 0; 2904 text-align: center; 2905 border-width: var(--pullquote--border-width); 2906 border-bottom-style: solid; 2907 border-top-style: solid; 2908 color: currentColor; 2909 border-color: currentColor; 2910 position: relative; 2911 2912 /** 2913 * Block Options 2914 */ 2915 } 2916 2917 .wp-block-pullquote blockquote::before { 2918 color: currentColor; 2919 content: "“"; 2920 display: block; 2921 position: relative; 2922 right: 0; 2923 font-size: 3rem; 2924 font-weight: 500; 2925 line-height: 1; 2926 } 2927 2928 .wp-block-pullquote p { 2929 font-family: var(--pullquote--font-family); 2930 font-size: var(--pullquote--font-size); 2931 font-style: var(--pullquote--font-style); 2932 font-weight: 700; 2933 letter-spacing: var(--pullquote--letter-spacing); 2934 line-height: var(--pullquote--line-height); 2935 margin: 0; 2936 } 2937 2938 .wp-block-pullquote a { 2939 color: currentColor; 2940 } 2941 2942 .wp-block-pullquote .wp-block-pullquote__citation, 2943 .wp-block-pullquote cite, 2944 .wp-block-pullquote footer { 2945 color: currentColor; 2946 display: block; 2947 font-size: var(--global--font-size-xs); 2948 font-style: var(--pullquote--font-style); 2949 text-transform: none; 2950 } 2951 2952 .wp-block-pullquote:not(.is-style-solid-color) { 2953 background: none; 2954 } 2955 2956 .wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before, 2957 .wp-block-pullquote.alignleft:not(.is-style-solid-color) cite { 2958 text-align: center; 2959 } 2960 2961 .wp-block-pullquote.alignwide > p, 2962 .wp-block-pullquote.alignwide blockquote { 2963 max-width: var(--responsive--alignwide-width); 2964 } 2965 2966 .wp-block-pullquote.alignfull:not(.is-style-solid-color) > p, 2967 .wp-block-pullquote.alignfull:not(.is-style-solid-color) blockquote { 2968 padding: 0 calc(2 * var(--global--spacing-unit)); 2969 } 2970 2971 .wp-block-pullquote.is-style-solid-color { 2972 color: var(--pullquote--color-foreground); 2973 padding: calc(2.5 * var(--global--spacing-unit)); 2974 border-width: var(--pullquote--border-width); 2975 border-style: solid; 2976 border-color: var(--pullquote--border-color); 2977 } 2978 @media (min-width: 600px) { 2979 2980 .wp-block-pullquote.is-style-solid-color { 2981 padding: calc(5 * var(--global--spacing-unit)); 2982 } 2983 } 2984 2985 .wp-block-pullquote.is-style-solid-color blockquote::before { 2986 text-align: right; 2987 } 2988 2989 .wp-block-pullquote.is-style-solid-color blockquote { 2990 margin: 0; 2991 max-width: inherit; 2992 } 2993 2994 .wp-block-pullquote.is-style-solid-color blockquote p { 2995 font-size: var(--pullquote--font-size); 2996 } 2997 2998 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, 2999 .wp-block-pullquote.is-style-solid-color cite, 3000 .wp-block-pullquote.is-style-solid-color footer { 3001 color: currentColor; 3002 } 3003 3004 .wp-block-pullquote.is-style-solid-color.alignleft, 3005 .wp-block-pullquote.is-style-solid-color.alignright { 3006 padding: var(--global--spacing-unit); 3007 } 3008 3009 .wp-block-pullquote.is-style-solid-color.alignleft blockquote, 3010 .wp-block-pullquote.is-style-solid-color.alignright blockquote { 3011 max-width: initial; 3012 } 3013 3014 .wp-block-query.has-background { 3015 padding: calc(0.666 * var(--global--spacing-vertical)); 3016 } 3017 @media only screen and (min-width: 482px) { 3018 3019 .wp-block-query.has-background { 3020 padding: var(--global--spacing-vertical); 3021 } 3022 } 3023 3024 .wp-block-quote { 3025 border-right: none; 3026 3027 /** 3028 * Block Options 3029 */ 3030 } 3031 3032 .wp-block-quote:before { 3033 content: "“"; 3034 font-size: var(--quote--font-size); 3035 line-height: var(--quote--line-height); 3036 right: 8px; 3037 } 3038 3039 .has-background .wp-block-quote .wp-block-quote__citation, 3040 [class*=background-color] .wp-block-quote .wp-block-quote__citation, 3041 [style*=background-color] .wp-block-quote .wp-block-quote__citation, 3042 .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation, 3043 .has-background .wp-block-quote cite, 3044 [class*=background-color] .wp-block-quote cite, 3045 [style*=background-color] .wp-block-quote cite, 3046 .wp-block-cover[style*=background-image] .wp-block-quote cite, 3047 .has-background .wp-block-quote footer, 3048 [class*=background-color] .wp-block-quote footer, 3049 [style*=background-color] .wp-block-quote footer, 3050 .wp-block-cover[style*=background-image] .wp-block-quote footer { 3051 color: currentColor; 3052 } 3053 3054 .wp-block-quote.has-text-align-right { 3055 margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); 3056 padding-left: 0; 3057 border-left: none; 3058 } 3059 3060 .wp-block-quote.has-text-align-right:before { 3061 display: none; 3062 } 3063 3064 .wp-block-quote.has-text-align-right p:before { 3065 content: "”"; 3066 font-size: var(--quote--font-size); 3067 font-weight: normal; 3068 line-height: var(--quote--line-height); 3069 margin-left: 5px; 3070 } 3071 3072 .wp-block-quote.has-text-align-center { 3073 margin: var(--global--spacing-vertical) auto; 3074 } 3075 3076 .wp-block-quote.has-text-align-center:before { 3077 display: none; 3078 } 3079 3080 .wp-block-quote.is-large, 3081 .wp-block-quote.is-style-large { 3082 padding-right: 0; 3083 padding-left: 0; 3084 3085 /* Resetting margins to match _block-container.scss */ 3086 margin-top: var(--global--spacing-vertical); 3087 margin-bottom: var(--global--spacing-vertical); 3088 } 3089 3090 .wp-block-quote.is-large p, 3091 .wp-block-quote.is-style-large p { 3092 font-size: var(--quote--font-size-large); 3093 font-style: var(--quote--font-style-large); 3094 line-height: var(--quote--line-height-large); 3095 } 3096 3097 .wp-block-quote.is-large:before, 3098 .wp-block-quote.is-style-large:before { 3099 font-size: var(--quote--font-size-large); 3100 line-height: var(--quote--line-height-large); 3101 right: calc(-1 * var(--global--spacing-horizontal)); 3102 } 3103 3104 .wp-block-quote.is-large.has-text-align-right:before, 3105 .wp-block-quote.is-style-large.has-text-align-right:before { 3106 display: none; 3107 } 3108 3109 .wp-block-quote.is-large.has-text-align-right p:before, 3110 .wp-block-quote.is-style-large.has-text-align-right p:before { 3111 content: "”"; 3112 font-size: var(--quote--font-size-large); 3113 font-weight: normal; 3114 line-height: var(--quote--line-height-large); 3115 margin-left: 10px; 3116 } 3117 3118 .wp-block-quote.is-large .wp-block-quote__citation, 3119 .wp-block-quote.is-large cite, 3120 .wp-block-quote.is-large footer, 3121 .wp-block-quote.is-style-large .wp-block-quote__citation, 3122 .wp-block-quote.is-style-large cite, 3123 .wp-block-quote.is-style-large footer { 3124 color: var(--global--color-primary); 3125 font-size: var(--global--font-size-sm); 3126 } 3127 @media only screen and (max-width: 481px) { 3128 3129 .wp-block-quote.is-large, 3130 .wp-block-quote.is-style-large { 3131 padding-right: var(--global--spacing-horizontal); 3132 } 3133 3134 .wp-block-quote.is-large:before, 3135 .wp-block-quote.is-style-large:before { 3136 right: 0; 3137 } 3138 3139 .wp-block-quote.is-large.has-text-align-right, 3140 .wp-block-quote.is-style-large.has-text-align-right { 3141 padding-right: 0; 3142 padding-left: var(--global--spacing-horizontal); 3143 } 3144 3145 .wp-block-quote.is-large.has-text-align-right:before, 3146 .wp-block-quote.is-style-large.has-text-align-right:before { 3147 left: 0; 3148 } 3149 3150 .wp-block-quote.is-large.has-text-align-center, 3151 .wp-block-quote.is-style-large.has-text-align-center { 3152 padding-right: 0; 3153 padding-left: 0; 3154 } 3155 } 3156 @media only screen and (max-width: 481px) { 3157 3158 .wp-block-quote.has-text-align-right { 3159 padding-right: 0; 3160 padding-left: calc(0.5 * var(--global--spacing-horizontal)); 3161 } 3162 3163 .wp-block-quote.has-text-align-right:before { 3164 left: 0; 3165 } 3166 3167 .wp-block-quote.has-text-align-center { 3168 padding-right: 0; 3169 padding-left: 0; 3170 } 3171 } 3172 3173 .wp-block-rss { 3174 padding-right: 0; 3175 } 3176 3177 .wp-block-rss > li { 3178 list-style: none; 3179 } 3180 3181 .wp-block-rss:not(.is-grid) > li { 3182 margin-top: calc(1.666 * var(--global--spacing-vertical)); 3183 margin-bottom: calc(1.666 * var(--global--spacing-vertical)); 3184 } 3185 3186 .wp-block-rss:not(.is-grid) > li:first-child { 3187 margin-top: 0; 3188 } 3189 3190 .wp-block-rss:not(.is-grid) > li:last-child { 3191 margin-bottom: 0; 3192 } 3193 3194 .wp-block-rss.is-grid > li { 3195 margin-bottom: var(--global--spacing-vertical); 3196 } 3197 3198 .wp-block-rss.is-grid > li:last-child { 3199 margin-bottom: 0; 3200 } 3201 3202 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), 3203 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, 3204 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), 3205 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, 3206 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), 3207 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, 3208 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), 3209 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, 3210 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), 3211 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { 3212 margin-bottom: 0; 3213 } 3214 3215 .wp-block-rss > li > * { 3216 margin-top: calc(0.333 * var(--global--spacing-vertical)); 3217 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 3218 } 3219 3220 .wp-block-rss > li > *:first-child { 3221 margin-top: 0; 3222 } 3223 3224 .wp-block-rss > li > *:last-child { 3225 margin-bottom: 0; 3226 } 3227 3228 .wp-block-rss .wp-block-rss__item-title > a { 3229 display: inline-block; 3230 font-family: var(--latest-posts--title-font-family); 3231 font-size: var(--latest-posts--title-font-size); 3232 font-weight: var(--heading--font-weight); 3233 line-height: var(--global--line-height-heading); 3234 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 3235 } 3236 3237 .wp-block-rss .wp-block-rss__item-author { 3238 color: var(--global--color-primary); 3239 font-size: var(--global--font-size-md); 3240 line-height: var(--global--line-height-body); 3241 } 3242 3243 .wp-block-rss .wp-block-rss__item-publish-date { 3244 color: var(--global--color-primary); 3245 font-size: var(--global--font-size-xs); 3246 line-height: var(--global--line-height-body); 3247 } 3248 3249 [class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, 3250 .has-background .wp-block-rss .wp-block-rss__item-publish-date { 3251 color: currentColor; 3252 } 3253 3254 .wp-block-rss .wp-block-rss__item-excerpt, 3255 .wp-block-rss .wp-block-rss__item-full-content { 3256 font-family: var(--latest-posts--description-font-family); 3257 font-size: var(--latest-posts--description-font-size); 3258 line-height: var(--global--line-height-body); 3259 margin-top: calc(0.666 * var(--global--spacing-vertical)); 3260 } 3261 3262 .wp-block-rss.alignfull { 3263 padding-right: var(--global--spacing-unit); 3264 padding-left: var(--global--spacing-unit); 3265 } 3266 3267 .entry-content [class*=inner-container] .wp-block-rss.alignfull, 3268 .entry-content .has-background .wp-block-rss.alignfull { 3269 padding-right: 0; 3270 padding-left: 0; 3271 } 3272 3273 .wp-block-search { 3274 max-width: var(--responsive--aligndefault-width); 3275 } 3276 3277 .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { 3278 justify-content: center; 3279 } 3280 3281 .wp-block-search .wp-block-search__label { 3282 font-size: var(--form--font-size); 3283 font-weight: var(--form--label-weight); 3284 margin-bottom: calc(var(--global--spacing-vertical) / 3); 3285 } 3286 3287 .wp-block-search .wp-block-search__input { 3288 border: var(--form--border-width) solid var(--form--border-color); 3289 border-radius: var(--form--border-radius); 3290 color: var(--form--color-text); 3291 line-height: var(--form--line-height); 3292 max-width: inherit; 3293 margin-left: calc(-1 * var(--button--border-width)); 3294 padding: var(--form--spacing-unit); 3295 } 3296 3297 .wp-block-search .wp-block-search__input:focus { 3298 color: var(--form--color-text); 3299 border-color: var(--form--border-color); 3300 } 3301 3302 .has-background .wp-block-search .wp-block-search__input { 3303 border-color: var(--local--color-primary, var(--global--color-primary)) !important; 3304 } 3305 3306 .wp-block-search button.wp-block-search__button { 3307 margin-right: 0; 3308 line-height: 1; 3309 } 3310 3311 .wp-block-search button.wp-block-search__button.has-icon { 3312 padding: 6px calc(0.5 * var(--button--padding-horizontal)); 3313 } 3314 3315 .wp-block-search button.wp-block-search__button.has-icon svg { 3316 width: 40px; 3317 height: 40px; 3318 fill: currentColor; 3319 } 3320 3321 .has-background .wp-block-search button.wp-block-search__button:hover, 3322 .has-background .wp-block-search button.wp-block-search__button:active { 3323 background-color: var(--local--color-background, var(--global--color-background)) !important; 3324 color: var(--local--color-primary, var(--global--color-primary)) !important; 3325 } 3326 3327 .has-text-color .wp-block-search button.wp-block-search__button:hover, 3328 .has-text-color .wp-block-search button.wp-block-search__button:active { 3329 color: var(--local--color-primary, var(--global--color-primary)) !important; 3330 } 3331 3332 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { 3333 background-color: var(--global--color-white); 3334 border: var(--form--border-width) solid var(--form--border-color); 3335 border-radius: var(--form--border-radius); 3336 padding: var(--form--border-width); 3337 } 3338 3339 .has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { 3340 border-color: var(--local--color-primary, var(--global--color-primary)) !important; 3341 } 3342 3343 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { 3344 margin-right: 0; 3345 margin-left: 0; 3346 padding-right: var(--form--spacing-unit); 3347 } 3348 3349 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { 3350 color: var(--form--color-text); 3351 outline-offset: -2px; 3352 outline: 2px dotted var(--form--border-color); 3353 } 3354 3355 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button { 3356 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 3357 } 3358 3359 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover { 3360 color: var(--global--color-dark-gray); 3361 } 3362 3363 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button { 3364 color: var(--global--color-dark-gray); 3365 } 3366 3367 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover { 3368 background-color: var(--global--color-dark-gray); 3369 color: var(--global--color-white); 3370 } 3371 3372 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon { 3373 padding: 6px calc(0.5 * var(--button--padding-horizontal)); 3374 } 3375 3376 .wp-block-search__button { 3377 box-shadow: none; 3378 } 3379 3380 hr { 3381 border-style: none; 3382 border-bottom: var(--separator--height) solid var(--separator--border-color); 3383 clear: both; 3384 margin-right: auto; 3385 margin-left: auto; 3386 } 3387 3388 hr.wp-block-separator { 3389 border-bottom: var(--separator--height) solid var(--separator--border-color); 3390 opacity: 1; 3391 3392 /** 3393 * Block Options 3394 */ 3395 } 3396 3397 hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { 3398 max-width: var(--responsive--aligndefault-width); 3399 } 3400 3401 hr.wp-block-separator:not(.is-style-dots).alignwide { 3402 max-width: var(--responsive--alignwide-width); 3403 } 3404 3405 hr.wp-block-separator:not(.is-style-dots).alignfull { 3406 max-width: var(--responsive--alignfull-width); 3407 } 3408 3409 hr.wp-block-separator.is-style-twentytwentyone-separator-thick { 3410 border-bottom-width: calc(3 * var(--separator--height)); 3411 } 3412 3413 hr.wp-block-separator.is-style-dots.has-background, 3414 hr.wp-block-separator.is-style-dots.has-text-color { 3415 background-color: transparent !important; 3416 } 3417 3418 hr.wp-block-separator.is-style-dots.has-background:before, 3419 hr.wp-block-separator.is-style-dots.has-text-color:before { 3420 color: currentColor !important; 3421 } 3422 3423 hr.wp-block-separator.is-style-dots:before { 3424 color: var(--separator--border-color); 3425 font-size: var(--global--font-size-xl); 3426 letter-spacing: var(--global--font-size-sm); 3427 padding-right: var(--global--font-size-sm); 3428 } 3429 3430 .has-background hr.wp-block-separator, 3431 [class*=background-color] hr.wp-block-separator, 3432 [style*=background-color] hr.wp-block-separator, 3433 .wp-block-cover[style*=background-image] hr.wp-block-separator { 3434 border-color: currentColor; 3435 } 3436 3437 .wp-block-social-links a:focus { 3438 color: var(--global--color-primary); 3439 } 3440 3441 .wp-block-social-links.is-style-twentytwentyone-social-icons-color a { 3442 color: var(--global--color-primary); 3443 } 3444 3445 .wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link, 3446 .wp-block-social-links.is-style-twentytwentyone-social-icons-color.has-icon-background-color.has-icon-background-color .wp-social-link { 3447 background: none; 3448 } 3449 3450 .wp-block-spacer { 3451 display: block; 3452 margin-bottom: 0 !important; 3453 margin-top: 0 !important; 3454 } 3455 @media only screen and (max-width: 481px) { 3456 3457 .wp-block-spacer[style] { 3458 height: var(--global--spacing-unit) !important; 3459 } 3460 } 3461 3462 table, 3463 .wp-block-table { 3464 width: 100%; 3465 min-width: 240px; 3466 border-collapse: collapse; 3467 } 3468 3469 table thead, 3470 table tfoot, 3471 .wp-block-table thead, 3472 .wp-block-table tfoot { 3473 text-align: center; 3474 } 3475 3476 table th, 3477 .wp-block-table th { 3478 font-family: var(--heading--font-family); 3479 } 3480 3481 table td, 3482 table th, 3483 .wp-block-table td, 3484 .wp-block-table th { 3485 padding: calc(0.5 * var(--global--spacing-unit)); 3486 border: 1px solid; 3487 } 3488 3489 table figcaption, 3490 .wp-block-table figcaption { 3491 color: var(--global--color-primary); 3492 font-size: var(--global--font-size-xs); 3493 } 3494 3495 table.is-style-regular .has-background, 3496 table.is-style-stripes .has-background, 3497 table.is-style-stripes .has-background thead tr, 3498 table.is-style-stripes .has-background tfoot tr, 3499 table.is-style-stripes .has-background tbody tr, 3500 .wp-block-table.is-style-regular .has-background, 3501 .wp-block-table.is-style-stripes .has-background, 3502 .wp-block-table.is-style-stripes .has-background thead tr, 3503 .wp-block-table.is-style-stripes .has-background tfoot tr, 3504 .wp-block-table.is-style-stripes .has-background tbody tr { 3505 color: var(--table--has-background-text-color); 3506 } 3507 3508 table.is-style-stripes, 3509 .wp-block-table.is-style-stripes { 3510 border-color: var(--table--stripes-border-color); 3511 } 3512 3513 table.is-style-stripes th, 3514 table.is-style-stripes td, 3515 .wp-block-table.is-style-stripes th, 3516 .wp-block-table.is-style-stripes td { 3517 border-width: 0; 3518 } 3519 3520 table.is-style-stripes tbody tr:nth-child(odd), 3521 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { 3522 background-color: var(--table--stripes-background-color); 3523 } 3524 3525 table.is-style-stripes .has-background tbody tr:nth-child(odd), 3526 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { 3527 background-color: var(--global--color-white-90); 3528 } 3529 3530 table.wp-calendar-table td, 3531 table.wp-calendar-table th { 3532 background: transparent; 3533 border: 0; 3534 text-align: center; 3535 line-height: 2; 3536 vertical-align: middle; 3537 word-break: normal; 3538 } 3539 3540 table.wp-calendar-table th { 3541 font-weight: bold; 3542 } 3543 3544 table.wp-calendar-table thead, 3545 table.wp-calendar-table tbody { 3546 color: currentColor; 3547 border: 1px solid; 3548 } 3549 3550 table.wp-calendar-table caption { 3551 font-weight: bold; 3552 text-align: right; 3553 margin-bottom: var(--global--spacing-unit); 3554 color: currentColor; 3555 } 3556 3557 .wp-calendar-nav { 3558 text-align: right; 3559 margin-top: calc(var(--global--spacing-unit) / 2); 3560 } 3561 3562 .wp-calendar-nav svg { 3563 height: 1em; 3564 vertical-align: middle; 3565 } 3566 3567 .wp-calendar-nav svg path { 3568 fill: currentColor; 3569 } 3570 3571 .wp-calendar-nav .wp-calendar-nav-next { 3572 float: left; 3573 } 3574 3575 .wp-block-tag-cloud.alignfull { 3576 padding-right: var(--global--spacing-unit); 3577 padding-left: var(--global--spacing-unit); 3578 } 3579 3580 .wp-block-verse { 3581 font-family: var(--entry-content--font-family); 3582 } 3583 3584 .wp-block-video figcaption { 3585 color: var(--global--color-primary); 3586 font-size: var(--global--font-size-xs); 3587 margin-top: calc(0.5 * var(--global--spacing-unit)); 3588 margin-bottom: var(--global--spacing-unit); 3589 text-align: center; 3590 } 3591 3592 * > figure > video { 3593 max-width: unset; 3594 width: 100%; 3595 vertical-align: middle; 3596 } 3597 3598 :root .is-extra-small-text, 3599 :root .has-extra-small-font-size { 3600 font-size: var(--global--font-size-xs); 3601 } 3602 3603 :root .is-small-text, 3604 :root .has-small-font-size { 3605 font-size: var(--global--font-size-sm); 3606 } 3607 3608 :root .is-regular-text, 3609 :root .has-regular-font-size, 3610 :root .is-normal-font-size, 3611 :root .has-normal-font-size, 3612 :root .has-medium-font-size { 3613 font-size: var(--global--font-size-base); 3614 } 3615 3616 :root .is-large-text, 3617 :root .has-large-font-size { 3618 font-size: var(--global--font-size-lg); 3619 line-height: var(--global--line-height-heading); 3620 } 3621 3622 :root .is-larger-text, 3623 :root .has-larger-font-size, 3624 :root .is-extra-large-text, 3625 :root .has-extra-large-font-size { 3626 font-size: var(--global--font-size-xl); 3627 line-height: var(--global--line-height-heading); 3628 } 3629 3630 :root .is-huge-text, 3631 :root .has-huge-font-size { 3632 font-size: var(--global--font-size-xxl); 3633 line-height: var(--global--line-height-heading); 3634 font-weight: var(--heading--font-weight-page-title); 3635 } 3636 3637 :root .is-gigantic-text, 3638 :root .has-gigantic-font-size { 3639 font-size: var(--global--font-size-xxxl); 3640 line-height: var(--global--line-height-heading); 3641 font-weight: var(--heading--font-weight-page-title); 3642 } 3643 3644 /* Block Alignments */ 3645 3646 /** 3647 * These selectors set the default max width for content appearing inside a post or page. 3648 */ 3649 3650 /** 3651 * .alignleft 3652 */ 3653 .alignleft { 3654 text-align: left; 3655 margin-top: 0; 3656 } 3657 3658 .entry-content > .alignleft { 3659 max-width: var(--responsive--aligndefault-width); 3660 } 3661 3662 @media only screen and (min-width: 482px) { 3663 3664 .alignleft { 3665 float: left; 3666 margin-right: var(--global--spacing-horizontal); 3667 margin-bottom: var(--global--spacing-vertical); 3668 } 3669 3670 .entry-content > .alignleft { 3671 max-width: calc(50% - var(--responsive--alignleft-margin)); 3672 } 3673 } 3674 3675 /** 3676 * .aligncenter 3677 */ 3678 .aligncenter { 3679 clear: both; 3680 display: block; 3681 float: none; 3682 margin-left: auto; 3683 margin-right: auto; 3684 text-align: center; 3685 } 3686 3687 /** 3688 * .alignright 3689 */ 3690 .alignright { 3691 margin-top: 0; 3692 margin-bottom: var(--global--spacing-vertical); 3693 } 3694 3695 .entry-content > .alignright { 3696 max-width: var(--responsive--aligndefault-width); 3697 } 3698 3699 @media only screen and (min-width: 482px) { 3700 3701 .alignright { 3702 float: right; 3703 margin-left: var(--global--spacing-horizontal); 3704 } 3705 3706 .entry-content > .alignright { 3707 max-width: calc(50% - var(--responsive--alignright-margin)); 3708 } 3709 } 3710 3711 [class*=inner-container] > .alignleft + *, 3712 [class*=inner-container] > .alignright + * { 3713 margin-top: 0; 3714 } 3715 3716 /** 3717 * .alignwide 3718 */ 3719 .alignwide { 3720 clear: both; 3721 } 3722 3723 /** 3724 * .alignfull 3725 */ 3726 .alignfull { 3727 clear: both; 3728 } 3729 3730 .has-left-content { 3731 justify-content: flex-start; 3732 } 3733 3734 .has-right-content { 3735 justify-content: flex-end; 3736 } 3737 3738 .has-parallax { 3739 background-attachment: fixed; 3740 } 3741 3742 .has-drop-cap:not(:focus)::first-letter { 3743 font-family: var(--heading--font-family); 3744 font-weight: var(--heading--font-weight); 3745 line-height: 0.66; 3746 text-transform: uppercase; 3747 font-style: normal; 3748 float: right; 3749 margin: 0.1em 0 0 0.1em; 3750 font-size: calc(1.2 * var(--heading--font-size-h1)); 3751 } 3752 3753 .has-drop-cap:not(:focus)::after { 3754 content: ""; 3755 display: table; 3756 clear: both; 3757 padding-top: 14px; 3758 } 3759 3760 .desktop-only { 3761 display: none; 3762 } 3763 @media only screen and (min-width: 482px) { 3764 3765 .desktop-only { 3766 display: block; 3767 } 3768 } 3769 3770 /* Category 06 contains all "bigger" components which contain elements of the previous two categories like header, footer, page template, single template, comments section, archives, ... */ 3771 .site-header { 3772 display: flex; 3773 align-items: flex-start; 3774 flex-wrap: wrap; 3775 row-gap: var(--global--spacing-vertical); 3776 } 3777 3778 .wp-custom-logo .site-header { 3779 align-items: center; 3780 } 3781 @media only screen and (min-width: 482px) { 3782 3783 .site-header { 3784 padding-top: calc(var(--global--spacing-vertical) / 0.75); 3785 } 3786 } 3787 @media only screen and (min-width: 822px) { 3788 3789 .site-header { 3790 padding-top: calc(2.4 * var(--global--spacing-vertical)); 3791 } 3792 } 3793 3794 .site-branding { 3795 color: var(--branding--color-text); 3796 margin-left: 140px; 3797 } 3798 3799 .site-branding:last-child { 3800 margin-left: 0; 3801 width: 100%; 3802 text-align: center; 3803 } 3804 @media only screen and (min-width: 482px) { 3805 3806 .site-branding { 3807 margin-left: initial; 3808 margin-top: 4px; 3809 } 3810 } 3811 3812 .site-title { 3813 color: var(--branding--color-link); 3814 font-family: var(--branding--title--font-family); 3815 font-size: var(--branding--title--font-size-mobile); 3816 letter-spacing: normal; 3817 text-transform: var(--branding--title--text-transform); 3818 line-height: var(--global--line-height-heading); 3819 margin-bottom: calc(var(--global--spacing-vertical) / 6); 3820 } 3821 3822 .site-title a { 3823 color: currentColor; 3824 font-weight: var(--branding--title--font-weight); 3825 } 3826 3827 .site-title a:link, 3828 .site-title a:visited, 3829 .site-title a:active { 3830 color: currentColor; 3831 } 3832 3833 .site-title a:hover, 3834 .site-title a:focus { 3835 color: var(--branding--color-link-hover); 3836 } 3837 @media only screen and (min-width: 482px) { 3838 3839 .site-title { 3840 font-size: var(--branding--title--font-size); 3841 } 3842 } 3843 3844 .site-description { 3845 color: currentColor; 3846 font-family: var(--branding--description--font-family); 3847 font-size: var(--branding--description--font-size); 3848 line-height: 1.4; 3849 } 3850 3851 .site-title > a { 3852 text-decoration-color: var(--global--color-secondary); 3853 } 3854 3855 .site-logo { 3856 margin: calc(var(--global--spacing-vertical) / 2) 0; 3857 } 3858 3859 .site-header > .site-logo { 3860 width: 100%; 3861 padding-bottom: calc(var(--global--spacing-vertical) * 1.5); 3862 border-bottom: 1px solid; 3863 text-align: center; 3864 } 3865 3866 .site-logo .custom-logo { 3867 margin-right: auto; 3868 margin-left: auto; 3869 max-width: var(--branding--logo--max-width-mobile); 3870 max-height: var(--branding--logo--max-height-mobile); 3871 height: auto; 3872 display: inline-block; 3873 width: auto; 3874 } 3875 @media only screen and (min-width: 482px) { 3876 3877 .site-logo .custom-logo { 3878 max-width: var(--branding--logo--max-width); 3879 max-height: var(--branding--logo--max-height); 3880 height: auto; 3881 width: auto; 3882 } 3883 } 3884 3885 @media only screen and (max-width: 481px) { 3886 3887 .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { 3888 position: absolute; 3889 padding-top: calc(0.5 * var(--global--spacing-vertical)); 3890 margin-top: 0; 3891 top: var(--global--admin-bar--height); 3892 } 3893 3894 .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { 3895 display: none; 3896 } 3897 3898 .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img { 3899 max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em); 3900 } 3901 3902 .site-header.has-logo.has-title-and-tagline { 3903 align-items: flex-start; 3904 } 3905 3906 .site-header.has-logo.has-title-and-tagline.has-menu { 3907 justify-content: space-between; 3908 } 3909 3910 .site-header.has-logo.has-title-and-tagline.has-menu .site-branding { 3911 max-width: calc(100% - 160px); 3912 } 3913 3914 .site-header.has-logo.has-title-and-tagline .site-branding { 3915 margin-left: 0; 3916 } 3917 3918 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline:after { 3919 display: none; 3920 } 3921 3922 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation { 3923 position: relative; 3924 top: 0; 3925 } 3926 3927 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container { 3928 position: relative; 3929 padding-top: 0; 3930 margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit))); 3931 } 3932 3933 body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu { 3934 padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); 3935 padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); 3936 margin-left: calc(0px - var(--global--spacing-horizontal) * 0.6); 3937 } 3938 3939 .site-header:not(.has-logo).has-title-and-tagline .site-branding { 3940 margin-left: 0; 3941 max-width: calc(100% - 160px); 3942 } 3943 3944 .site-header:not(.has-menu) { 3945 justify-content: center; 3946 } 3947 } 3948 3949 .site-footer { 3950 padding-top: 0; 3951 padding-bottom: calc(1.7 * var(--global--spacing-vertical)); 3952 } 3953 3954 .no-widgets .site-footer { 3955 margin-top: calc(6 * var(--global--spacing-vertical)); 3956 } 3957 @media only screen and (max-width: 481px) { 3958 3959 .no-widgets .site-footer { 3960 margin-top: calc(3 * var(--global--spacing-vertical)); 3961 } 3962 } 3963 3964 .site-footer > .site-info { 3965 padding-top: var(--global--spacing-vertical); 3966 color: var(--footer--color-text); 3967 font-family: var(--footer--font-family); 3968 font-size: var(--footer--font-size); 3969 line-height: var(--global--line-height-body); 3970 border-top: 3px solid var(--global--color-border); 3971 } 3972 3973 .site-footer > .site-info .site-name { 3974 text-transform: var(--branding--title--text-transform); 3975 font-size: var(--branding--title--font-size); 3976 } 3977 3978 .site-footer > .site-info .powered-by { 3979 margin-top: calc(0.5 * var(--global--spacing-vertical)); 3980 } 3981 @media only screen and (min-width: 822px) { 3982 3983 .site-footer > .site-info { 3984 display: flex; 3985 align-items: center; 3986 } 3987 3988 .site-footer > .site-info .powered-by { 3989 margin-top: initial; 3990 margin-right: auto; 3991 } 3992 } 3993 3994 .site-footer > .site-info a { 3995 color: var(--footer--color-link); 3996 } 3997 3998 .site-footer > .site-info a:link, 3999 .site-footer > .site-info a:visited, 4000 .site-footer > .site-info a:active { 4001 color: var(--footer--color-link); 4002 } 4003 4004 .site-footer > .site-info a:hover { 4005 color: var(--footer--color-link-hover); 4006 } 4007 4008 .site-footer > .site-info a:focus { 4009 color: var(--footer--color-link-hover); 4010 } 4011 4012 .is-dark-theme .site-footer > .site-info a:focus { 4013 color: var(--wp--style--color--link, var(--global--color-background)); 4014 } 4015 4016 .has-background-white .site-footer > .site-info a:focus { 4017 color: var(--wp--style--color--link, var(--global--color-white)); 4018 } 4019 4020 .singular .entry-header { 4021 border-bottom: 3px solid var(--global--color-border); 4022 padding-bottom: calc(2 * var(--global--spacing-vertical)); 4023 margin-bottom: calc(3 * var(--global--spacing-vertical)); 4024 } 4025 4026 .home .entry-header { 4027 border-bottom: none; 4028 padding-bottom: 0; 4029 margin-bottom: 0; 4030 } 4031 4032 .singular .has-post-thumbnail .entry-header { 4033 border-bottom: none; 4034 padding-bottom: calc(1.3 * var(--global--spacing-vertical)); 4035 margin-bottom: 0; 4036 } 4037 4038 .no-results.not-found > *:first-child { 4039 margin-bottom: calc(3 * var(--global--spacing-vertical)); 4040 } 4041 4042 .page-links { 4043 clear: both; 4044 } 4045 4046 .page-links .post-page-numbers { 4047 display: inline-block; 4048 margin-right: calc(0.66 * var(--global--spacing-unit)); 4049 margin-left: calc(0.66 * var(--global--spacing-unit)); 4050 min-width: 44px; 4051 min-height: 44px; 4052 } 4053 4054 .page-links .post-page-numbers:first-child { 4055 margin-right: 0; 4056 } 4057 4058 .entry-title { 4059 color: var(--entry-header--color); 4060 font-size: var(--entry-header--font-size); 4061 letter-spacing: var(--heading--letter-spacing-h2); 4062 line-height: var(--heading--line-height-h2); 4063 overflow-wrap: break-word; 4064 } 4065 4066 .entry-title a { 4067 color: var(--entry-header--color-link); 4068 text-underline-offset: 0.15em; 4069 } 4070 4071 .entry-title a:hover { 4072 color: var(--entry-header--color-hover); 4073 } 4074 4075 .entry-title a:focus { 4076 color: var(--entry-header--color-focus); 4077 } 4078 4079 .entry-title a:active { 4080 color: var(--entry-header--color-link); 4081 } 4082 4083 .singular .entry-title { 4084 font-size: var(--global--font-size-page-title); 4085 } 4086 4087 h1.entry-title { 4088 line-height: var(--heading--line-height-h1); 4089 font-weight: var(--heading--font-weight-page-title); 4090 } 4091 4092 /** 4093 * Entry Content 4094 */ 4095 .entry-content, 4096 .entry-summary { 4097 font-family: var(--entry-content--font-family); 4098 } 4099 4100 .entry-content p { 4101 word-wrap: break-word; 4102 } 4103 4104 .entry-content > iframe[style] { 4105 margin: var(--global--spacing-vertical) 0 !important; 4106 max-width: 100% !important; 4107 } 4108 4109 .entry-footer { 4110 color: var(--global--color-primary); 4111 clear: both; 4112 float: none; 4113 font-size: var(--global--font-size-xs); 4114 display: block; 4115 } 4116 4117 .entry-footer > span { 4118 display: inline-block; 4119 } 4120 4121 .entry-footer a { 4122 color: currentColor; 4123 } 4124 4125 .entry-footer a:hover, 4126 .entry-footer a:focus { 4127 color: var(--global--color-primary-hover); 4128 } 4129 4130 .entry-footer a:active { 4131 color: currentColor; 4132 } 4133 4134 .site-main > article > .entry-footer { 4135 margin-top: var(--global--spacing-vertical); 4136 padding-top: var(--global--spacing-unit); 4137 padding-bottom: calc(3 * var(--global--spacing-vertical)); 4138 border-bottom: var(--separator--height) solid var(--separator--border-color); 4139 } 4140 4141 body:not(.single) .site-main > article:last-of-type .entry-footer { 4142 border-bottom: var(--separator--height) solid transparent; 4143 } 4144 4145 .single .site-main > article > .entry-footer { 4146 margin-top: calc(3.4 * var(--global--spacing-vertical)); 4147 margin-bottom: calc(3.4 * var(--global--spacing-vertical)); 4148 padding-bottom: 0; 4149 padding-top: calc(0.8 * var(--global--spacing-vertical)); 4150 border-top: 3px solid var(--separator--border-color); 4151 border-bottom: var(--separator--height) solid transparent; 4152 display: grid; 4153 grid-template-columns: repeat(2, 1fr); 4154 column-gap: calc(2 * var(--global--spacing-horizontal)); 4155 } 4156 4157 .single .site-main > article > .entry-footer .post-taxonomies, 4158 .single .site-main > article > .entry-footer .full-size-link { 4159 justify-content: flex-end; 4160 text-align: left; 4161 } 4162 4163 .single .site-main > article > .entry-footer .full-size-link:first-child:last-child { 4164 grid-column: span 2; 4165 } 4166 4167 .single .site-main > article > .entry-footer .posted-on, 4168 .single .site-main > article > .entry-footer .byline, 4169 .single .site-main > article > .entry-footer .cat-links, 4170 .single .site-main > article > .entry-footer .tags-links { 4171 display: block; 4172 } 4173 @media only screen and (max-width: 481px) { 4174 4175 .single .site-main > article > .entry-footer { 4176 display: block; 4177 } 4178 4179 .single .site-main > article > .entry-footer .full-size-link { 4180 display: block; 4181 } 4182 4183 .single .site-main > article > .entry-footer .post-taxonomies, 4184 .single .site-main > article > .entry-footer .full-size-link { 4185 text-align: right; 4186 } 4187 } 4188 4189 /** 4190 * Post Thumbnails 4191 */ 4192 .post-thumbnail { 4193 text-align: center; 4194 } 4195 4196 .post-thumbnail .wp-post-image { 4197 display: block; 4198 width: auto; 4199 max-width: 100%; 4200 margin-right: auto; 4201 margin-left: auto; 4202 margin-top: calc(2 * var(--global--spacing-vertical)); 4203 } 4204 4205 /** 4206 * Author 4207 */ 4208 .author-bio { 4209 position: relative; 4210 font-size: var(--global--font-size-xs); 4211 max-width: var(--responsive--aligndefault-width); 4212 } 4213 4214 .site-main > article > .author-bio { 4215 margin-top: calc(2 * var(--global--spacing-vertical)); 4216 } 4217 4218 .author-bio.show-avatars .avatar { 4219 display: inline-block; 4220 vertical-align: top; 4221 border-radius: 50%; 4222 } 4223 4224 .author-bio.show-avatars .author-bio-content { 4225 display: inline-block; 4226 padding-right: var(--global--spacing-horizontal); 4227 max-width: calc(var(--responsive--aligndefault-width) - 90px); 4228 } 4229 4230 .author-bio .author-bio-content .author-title { 4231 font-family: var(--entry-author-bio--font-family); 4232 font-size: var(--entry-author-bio--font-size); 4233 display: inline; 4234 } 4235 4236 .author-bio .author-bio-content .author-description { 4237 font-size: var(--global--font-size-xs); 4238 margin-top: calc(0.5 * var(--global--spacing-vertical)); 4239 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 4240 } 4241 4242 .page-title { 4243 font-size: var(--global--font-size-page-title); 4244 } 4245 4246 h1.page-title, 4247 h2.page-title { 4248 font-weight: var(--heading--font-weight-page-title); 4249 } 4250 4251 h1.page-title { 4252 line-height: var(--heading--line-height-h1); 4253 } 4254 4255 .page-header { 4256 border-bottom: 3px solid var(--global--color-border); 4257 padding-bottom: calc(2 * var(--global--spacing-vertical)); 4258 } 4259 4260 .archive .content-area .format-aside .entry-content, 4261 .archive .content-area .format-status .entry-content, 4262 .archive .content-area .format-link .entry-content, 4263 .search .content-area .format-aside .entry-content, 4264 .search .content-area .format-status .entry-content, 4265 .search .content-area .format-link .entry-content, 4266 .blog .content-area .format-aside .entry-content, 4267 .blog .content-area .format-status .entry-content, 4268 .blog .content-area .format-link .entry-content { 4269 font-size: var(--global--font-size-lg); 4270 } 4271 4272 .archive .format-image .entry-content, 4273 .archive .format-gallery .entry-content, 4274 .archive .format-video .entry-content, 4275 .search .format-image .entry-content, 4276 .search .format-gallery .entry-content, 4277 .search .format-video .entry-content, 4278 .blog .format-image .entry-content, 4279 .blog .format-gallery .entry-content, 4280 .blog .format-video .entry-content { 4281 margin-top: calc(2 * var(--global--spacing-vertical)); 4282 } 4283 4284 .archive .entry-footer .cat-links, 4285 .archive .entry-footer .tags-links, 4286 .search .entry-footer .cat-links, 4287 .search .entry-footer .tags-links, 4288 .blog .entry-footer .cat-links, 4289 .blog .entry-footer .tags-links { 4290 display: block; 4291 } 4292 4293 .archive.logged-in .entry-footer .posted-on, 4294 .search.logged-in .entry-footer .posted-on, 4295 .blog.logged-in .entry-footer .posted-on { 4296 margin-left: calc(0.5 * var(--global--spacing-unit)); 4297 } 4298 4299 .archive-description { 4300 margin-top: var(--global--spacing-vertical); 4301 font-size: var(--global--font-size-xl); 4302 line-height: var(--global--line-height-heading); 4303 } 4304 4305 .error404 main p { 4306 font-size: var(--global--font-size-lg); 4307 margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667); 4308 } 4309 4310 .search-no-results .page-content { 4311 margin-top: calc(3 * var(--global--spacing-vertical)); 4312 } 4313 4314 /** 4315 * Comments Wrapper 4316 */ 4317 .comments-area > * { 4318 margin-top: var(--global--spacing-vertical); 4319 margin-bottom: var(--global--spacing-vertical); 4320 } 4321 4322 .comments-area > *:first-child { 4323 margin-top: 0; 4324 } 4325 4326 .comments-area > *:last-child { 4327 margin-bottom: 0; 4328 } 4329 4330 .comments-area.show-avatars .avatar { 4331 border-radius: 50%; 4332 position: absolute; 4333 top: 10px; 4334 } 4335 4336 .comments-area.show-avatars .fn { 4337 display: inline-block; 4338 padding-right: 85px; 4339 } 4340 4341 .comments-area.show-avatars .comment-metadata { 4342 padding: 8px 85px 9px 0; 4343 } 4344 4345 /** 4346 * Comment Title 4347 */ 4348 .comments-title, 4349 .comment-reply-title { 4350 font-size: var(--heading--font-size-h2); 4351 letter-spacing: var(--heading--letter-spacing-h2); 4352 } 4353 4354 .comment-reply-title { 4355 display: flex; 4356 justify-content: space-between; 4357 } 4358 4359 .comment-reply-title small a { 4360 font-family: var(--global--font-secondary); 4361 font-size: var(--global--font-size-xs); 4362 font-style: normal; 4363 font-weight: normal; 4364 letter-spacing: normal; 4365 } 4366 4367 /* Nested comment reply title*/ 4368 .comment .comment-respond .comment-reply-title { 4369 font-size: var(--global--font-size-lg); 4370 } 4371 4372 /** 4373 * Comment Lists 4374 */ 4375 .comment-list { 4376 padding-right: 0; 4377 list-style: none; 4378 } 4379 4380 .comment-list > li { 4381 margin-top: var(--global--spacing-vertical); 4382 margin-bottom: var(--global--spacing-vertical); 4383 } 4384 4385 .comment-list .children { 4386 list-style: none; 4387 padding-right: 0; 4388 } 4389 4390 .comment-list .children > li { 4391 margin-top: var(--global--spacing-vertical); 4392 margin-bottom: var(--global--spacing-vertical); 4393 } 4394 4395 @media only screen and (min-width: 482px) { 4396 4397 .comment-list .depth-2, 4398 .comment-list .depth-3 { 4399 padding-right: calc(4 * var(--global--spacing-horizontal)); 4400 } 4401 } 4402 4403 /** 4404 * Comment Meta 4405 */ 4406 .comment-meta .comment-author { 4407 line-height: var(--global--line-height-heading); 4408 margin-bottom: calc(0.25 * var(--global--spacing-unit)); 4409 } 4410 @media only screen and (min-width: 482px) { 4411 4412 .comment-meta .comment-author { 4413 margin-bottom: 0; 4414 padding-left: 0; 4415 } 4416 } 4417 4418 .comment-meta .comment-author .fn { 4419 font-family: var(--global--font-secondary); 4420 font-weight: normal; 4421 font-size: var(--global--font-size-lg); 4422 hyphens: auto; 4423 word-wrap: break-word; 4424 word-break: break-word; 4425 } 4426 4427 .comment-meta .comment-metadata { 4428 color: var(--global--color-primary); 4429 font-size: var(--global--font-size-xs); 4430 padding: 8px 0 9px 0; 4431 } 4432 4433 .comment-meta .comment-metadata .edit-link { 4434 margin-right: var(--global--spacing-horizontal); 4435 } 4436 @media only screen and (min-width: 482px) { 4437 4438 .comment-meta { 4439 margin-left: inherit; 4440 } 4441 4442 .comment-meta .comment-author { 4443 max-width: inherit; 4444 } 4445 } 4446 4447 .reply { 4448 font-size: var(--global--font-size-sm); 4449 line-height: var(--global--line-height-heading); 4450 } 4451 4452 .bypostauthor { 4453 display: block; 4454 } 4455 4456 .says { 4457 display: none; 4458 } 4459 4460 .pingback .url, 4461 .trackback .url { 4462 font-family: var(--global--font-primary); 4463 } 4464 4465 .comment-body { 4466 position: relative; 4467 margin-bottom: calc(1.7 * var(--global--spacing-vertical)); 4468 } 4469 4470 .comment-body > * { 4471 margin-top: var(--global--spacing-vertical); 4472 margin-bottom: var(--global--spacing-vertical); 4473 } 4474 4475 .comment-body .reply { 4476 margin: 0; 4477 } 4478 4479 .comment-content { 4480 word-wrap: break-word; 4481 } 4482 4483 .pingback .comment-body, 4484 .trackback .comment-body { 4485 margin-top: var(--global--spacing-vertical); 4486 margin-bottom: var(--global--spacing-vertical); 4487 } 4488 4489 .comment-respond { 4490 margin-top: var(--global--spacing-vertical); 4491 } 4492 4493 .comment-respond > * { 4494 margin-top: var(--global--spacing-unit); 4495 margin-bottom: var(--global--spacing-unit); 4496 } 4497 4498 .comment-respond > *:first-child { 4499 margin-top: 0; 4500 } 4501 4502 .comment-respond > *:last-child { 4503 margin-bottom: 0; 4504 } 4505 4506 .comment-respond > *:last-child.comment-form { 4507 margin-bottom: var(--global--spacing-vertical); 4508 } 4509 4510 .comment-author { 4511 padding-top: 3px; 4512 } 4513 4514 .comment-author .url { 4515 color: currentColor; 4516 } 4517 4518 .comment-form { 4519 display: flex; 4520 flex-wrap: wrap; 4521 } 4522 4523 .comment-form > * { 4524 flex-basis: 100%; 4525 } 4526 4527 .comment-form .comment-notes { 4528 font-size: var(--global--font-size-sm); 4529 } 4530 4531 .comment-form .comment-form-url, 4532 .comment-form .comment-form-comment { 4533 width: 100%; 4534 } 4535 4536 .comment-form .comment-form-author, 4537 .comment-form .comment-form-email { 4538 flex-basis: 0; 4539 flex-grow: 1; 4540 } 4541 @media only screen and (max-width: 481px) { 4542 4543 .comment-form .comment-form-author, 4544 .comment-form .comment-form-email { 4545 flex-basis: 100%; 4546 } 4547 } 4548 4549 .comment-form .comment-form-cookies-consent > label, 4550 .comment-form .comment-notes { 4551 font-size: var(--global--font-size-xs); 4552 font-weight: normal; 4553 } 4554 4555 .comment-form > p { 4556 margin-bottom: var(--global--spacing-unit); 4557 } 4558 4559 .comment-form > p:first-of-type { 4560 margin-top: 0; 4561 } 4562 4563 .comment-form > p:last-of-type { 4564 margin-bottom: 0; 4565 } 4566 4567 .comment-form > p label, 4568 .comment-form > p input[type=email], 4569 .comment-form > p input[type=text], 4570 .comment-form > p input[type=url], 4571 .comment-form > p textarea { 4572 display: block; 4573 font-size: var(--global--font-size-sm); 4574 margin-bottom: calc(.5 * var(--global--spacing-unit)); 4575 width: 100%; 4576 font-weight: var(--form--label-weight); 4577 } 4578 4579 .comment-form > p.comment-form-cookies-consent { 4580 display: flex; 4581 } 4582 @media only screen and (min-width: 482px) { 4583 4584 .comment-form > p.comment-form-author { 4585 margin-left: calc(1.5 * var(--global--spacing-horizontal)); 4586 } 4587 4588 .comment-form > p.comment-notes, 4589 .comment-form > p.logged-in-as { 4590 display: block; 4591 } 4592 } 4593 4594 .menu-button-container { 4595 display: none; 4596 justify-content: space-between; 4597 position: absolute; 4598 left: 0; 4599 padding-top: calc(0.5 * var(--global--spacing-vertical)); 4600 padding-bottom: calc(0.25 * var(--global--spacing-vertical)); 4601 } 4602 @media only screen and (max-width: 481px) { 4603 4604 .menu-button-container { 4605 display: flex; 4606 } 4607 } 4608 4609 .menu-button-container #primary-mobile-menu { 4610 display: flex; 4611 margin-right: auto; 4612 padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); 4613 font-size: var(--primary-nav--font-size-button); 4614 font-weight: var(--primary-nav--font-weight-button); 4615 background-color: transparent; 4616 border: none; 4617 color: var(--primary-nav--color-link); 4618 } 4619 4620 .menu-button-container #primary-mobile-menu .dropdown-icon { 4621 display: flex; 4622 align-items: center; 4623 } 4624 4625 .menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon { 4626 margin-right: calc(0.25 * var(--global--spacing-unit)); 4627 } 4628 4629 .menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon { 4630 position: relative; 4631 top: -1px; 4632 } 4633 4634 .menu-button-container #primary-mobile-menu .dropdown-icon.close { 4635 display: none; 4636 } 4637 4638 .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open { 4639 display: none; 4640 } 4641 4642 .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { 4643 display: flex; 4644 } 4645 4646 .has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close { 4647 animation-name: twentytwentyone-close-button-transition; 4648 animation-duration: 0.3s; 4649 } 4650 4651 .primary-navigation-open .menu-button-container { 4652 width: 100%; 4653 z-index: 500; 4654 background-color: var(--global--color-background); 4655 } 4656 4657 .primary-navigation-open .menu-button-container #primary-mobile-menu { 4658 position: static; 4659 } 4660 4661 .primary-navigation { 4662 position: absolute; 4663 top: var(--global--admin-bar--height); 4664 left: 0; 4665 color: var(--primary-nav--color-text); 4666 font-size: var(--primary-nav--font-size); 4667 line-height: 1.15; 4668 margin-top: 0; 4669 margin-bottom: 0; 4670 } 4671 4672 .primary-navigation > .primary-menu-container { 4673 position: fixed; 4674 visibility: hidden; 4675 opacity: 0; 4676 top: 0; 4677 left: 0; 4678 bottom: 0; 4679 right: 0; 4680 padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px); 4681 padding-right: var(--global--spacing-unit); 4682 padding-left: var(--global--spacing-unit); 4683 padding-bottom: var(--global--spacing-horizontal); 4684 background-color: var(--global--color-background); 4685 transition: all 0.15s ease-in-out; 4686 transform: translateY(var(--global--spacing-vertical)); 4687 } 4688 @media only screen and (max-width: 481px) { 4689 4690 .primary-navigation > .primary-menu-container { 4691 height: 100vh; 4692 z-index: 499; 4693 overflow-x: hidden; 4694 overflow-y: auto; 4695 border: 2px solid transparent; 4696 } 4697 4698 .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { 4699 position: fixed; 4700 transform: translateY(0) translateX(-100%); 4701 } 4702 4703 .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { 4704 top: var(--global--admin-bar--height); 4705 } 4706 4707 .admin-bar .primary-navigation > .primary-menu-container { 4708 height: calc(100vh - var(--global--admin-bar--height)); 4709 } 4710 4711 .primary-navigation > .primary-menu-container:focus { 4712 border: 2px solid var(--global--color-primary); 4713 } 4714 } 4715 @media only screen and (max-width: 481px) { 4716 4717 .primary-navigation-open .primary-navigation { 4718 width: 100%; 4719 position: fixed; 4720 z-index: 2; 4721 } 4722 } 4723 4724 .primary-navigation-open .primary-navigation > .primary-menu-container { 4725 position: absolute; 4726 visibility: visible; 4727 opacity: 1; 4728 transform: translateY(0); 4729 } 4730 @media only screen and (max-width: 481px) { 4731 4732 .primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { 4733 transform: translateX(0) translateY(0); 4734 } 4735 } 4736 @media only screen and (min-width: 482px) { 4737 4738 .primary-navigation { 4739 position: relative; 4740 margin-right: auto; 4741 } 4742 4743 .primary-navigation > .primary-menu-container { 4744 visibility: visible; 4745 opacity: 1; 4746 position: relative; 4747 padding: 0; 4748 background-color: transparent; 4749 overflow: initial; 4750 transform: none; 4751 } 4752 4753 .primary-navigation #toggle-menu { 4754 display: none; 4755 } 4756 4757 .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul { 4758 display: none; 4759 } 4760 4761 .admin-bar .primary-navigation { 4762 top: initial; 4763 } 4764 4765 .admin-bar .primary-navigation > .primary-menu-container { 4766 top: initial; 4767 } 4768 } 4769 4770 .primary-navigation > div > .menu-wrapper { 4771 display: flex; 4772 justify-content: flex-start; 4773 flex-wrap: wrap; 4774 list-style: none; 4775 margin: 0; 4776 max-width: none; 4777 padding-right: 0; 4778 position: relative; 4779 } 4780 @media only screen and (max-width: 481px) { 4781 4782 .primary-navigation > div > .menu-wrapper { 4783 padding-bottom: 100px; 4784 } 4785 4786 .primary-navigation > div > .menu-wrapper ul { 4787 padding-right: 0; 4788 } 4789 } 4790 4791 .primary-navigation > div > .menu-wrapper li { 4792 display: block; 4793 position: relative; 4794 width: 100%; 4795 } 4796 @media only screen and (min-width: 482px) { 4797 4798 .primary-navigation > div > .menu-wrapper li { 4799 margin: 0; 4800 width: inherit; 4801 } 4802 4803 .primary-navigation > div > .menu-wrapper li:last-child { 4804 margin-left: 0; 4805 } 4806 } 4807 4808 .primary-navigation > div > .menu-wrapper .sub-menu-toggle { 4809 display: flex; 4810 height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); 4811 width: 44px; 4812 padding: 0; 4813 justify-content: center; 4814 align-items: center; 4815 background: transparent; 4816 color: currentColor; 4817 border: none; 4818 } 4819 4820 .primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus { 4821 outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); 4822 } 4823 @media only screen and (max-width: 481px) { 4824 4825 .primary-navigation > div > .menu-wrapper .sub-menu-toggle { 4826 display: none; 4827 } 4828 } 4829 4830 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus, 4831 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus { 4832 height: 100%; 4833 display: flex; 4834 align-items: center; 4835 } 4836 4837 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-plus svg, 4838 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus svg { 4839 margin-top: -1px; 4840 } 4841 4842 .primary-navigation > div > .menu-wrapper .sub-menu-toggle .icon-minus { 4843 display: none; 4844 } 4845 4846 .primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-minus { 4847 display: flex; 4848 } 4849 4850 .primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-plus { 4851 display: none; 4852 } 4853 4854 .primary-navigation > div > .menu-wrapper > li > .sub-menu { 4855 position: relative; 4856 } 4857 @media only screen and (min-width: 482px) { 4858 4859 .primary-navigation > div > .menu-wrapper > li > .sub-menu { 4860 right: 0; 4861 margin: 0; 4862 min-width: max-content; 4863 position: absolute; 4864 top: 100%; 4865 padding-top: 3px; 4866 transition: all 0.5s ease; 4867 z-index: 88888; 4868 } 4869 4870 .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, 4871 .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { 4872 content: ""; 4873 display: block; 4874 position: absolute; 4875 width: 0; 4876 top: -10px; 4877 right: var(--global--spacing-horizontal); 4878 border-style: solid; 4879 border-color: var(--primary-nav--border-color) transparent; 4880 border-width: 0 7px 10px 7px; 4881 } 4882 4883 .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { 4884 top: -9px; 4885 border-color: var(--global--color-background) transparent; 4886 } 4887 4888 .primary-navigation > div > .menu-wrapper > li > .sub-menu li { 4889 background: var(--global--color-background); 4890 } 4891 4892 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { 4893 left: 0; 4894 right: auto; 4895 } 4896 4897 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, 4898 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { 4899 left: var(--global--spacing-horizontal); 4900 right: auto; 4901 } 4902 4903 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { 4904 right: 0; 4905 left: auto; 4906 } 4907 4908 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, 4909 .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { 4910 left: auto; 4911 right: var(--global--spacing-horizontal); 4912 } 4913 } 4914 4915 .primary-navigation .primary-menu > .menu-item:hover > a { 4916 color: var(--primary-nav--color-link-hover); 4917 } 4918 @media only screen and (min-width: 482px) { 4919 4920 .primary-navigation .primary-menu-container { 4921 margin-left: calc(0px - var(--primary-nav--padding)); 4922 margin-right: calc(0px - var(--primary-nav--padding)); 4923 } 4924 4925 .primary-navigation .primary-menu-container > ul > .menu-item { 4926 display: flex; 4927 } 4928 4929 .primary-navigation .primary-menu-container > ul > .menu-item > a { 4930 padding-right: var(--primary-nav--padding); 4931 padding-left: var(--primary-nav--padding); 4932 } 4933 4934 .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { 4935 margin-right: calc(5px - var(--primary-nav--padding)); 4936 } 4937 } 4938 4939 .primary-navigation a { 4940 display: block; 4941 font-family: var(--primary-nav--font-family-mobile); 4942 font-size: var(--primary-nav--font-size-mobile); 4943 font-weight: var(--primary-nav--font-weight); 4944 padding: var(--primary-nav--padding) 0; 4945 text-decoration: none; 4946 } 4947 @media only screen and (min-width: 482px) { 4948 4949 .primary-navigation a { 4950 display: block; 4951 font-family: var(--primary-nav--font-family); 4952 font-size: var(--primary-nav--font-size); 4953 font-weight: var(--primary-nav--font-weight); 4954 } 4955 } 4956 4957 .primary-navigation a + svg { 4958 fill: var(--primary-nav--color-text); 4959 } 4960 4961 .primary-navigation a:hover, 4962 .primary-navigation a:link, 4963 .primary-navigation a:visited { 4964 color: var(--primary-nav--color-link-hover); 4965 } 4966 4967 .primary-navigation a:hover { 4968 text-decoration: underline; 4969 text-decoration-style: dotted; 4970 } 4971 4972 .primary-navigation a:focus { 4973 position: relative; 4974 z-index: 99999; 4975 outline-offset: 0; 4976 text-decoration-thickness: 2px; 4977 } 4978 4979 .primary-navigation .current-menu-item > a:first-child, 4980 .primary-navigation .current_page_item > a:first-child { 4981 text-decoration: underline; 4982 text-decoration-style: solid; 4983 } 4984 4985 .primary-navigation .current-menu-item > a:first-child:hover, 4986 .primary-navigation .current_page_item > a:first-child:hover { 4987 text-decoration: underline; 4988 text-decoration-style: dotted; 4989 } 4990 4991 .primary-navigation .sub-menu { 4992 margin: 0; 4993 padding: 0; 4994 list-style: none; 4995 margin-right: var(--primary-nav--padding); 4996 border: 1px solid var(--primary-nav--border-color); 4997 } 4998 4999 .primary-navigation .sub-menu .sub-menu { 5000 border: none; 5001 } 5002 @media only screen and (min-width: 482px) { 5003 5004 .primary-navigation .sub-menu > .menu-item > .sub-menu { 5005 padding: 0; 5006 } 5007 } 5008 @media only screen and (max-width: 481px) { 5009 5010 .primary-navigation .sub-menu .menu-item:last-child { 5011 margin-bottom: 0; 5012 } 5013 } 5014 5015 .primary-navigation .sub-menu .menu-item > a { 5016 padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); 5017 display: block; 5018 font-size: var(--primary-nav--font-size-sub-menu-mobile); 5019 font-style: var(--primary-nav--font-style-sub-menu-mobile); 5020 } 5021 @media only screen and (min-width: 482px) { 5022 5023 .primary-navigation .sub-menu .menu-item > a { 5024 font-size: var(--primary-nav--font-size-sub-menu); 5025 font-style: var(--primary-nav--font-style); 5026 } 5027 } 5028 5029 .primary-navigation .menu-item-has-children > .svg-icon { 5030 display: none; 5031 } 5032 @media only screen and (min-width: 482px) { 5033 5034 .primary-navigation .menu-item-has-children > .svg-icon { 5035 display: inline-block; 5036 height: 100%; 5037 } 5038 5039 .primary-navigation .menu-item-has-children .sub-menu .svg-icon { 5040 display: none; 5041 } 5042 } 5043 5044 .primary-navigation .menu-item-description { 5045 display: block; 5046 clear: both; 5047 font-size: var(--global--font-size-xs); 5048 text-transform: none; 5049 line-height: 1.7; 5050 } 5051 5052 .primary-navigation .menu-item-description > span { 5053 display: inline-block; 5054 } 5055 5056 @media only screen and (max-width: 481px) { 5057 5058 .lock-scrolling .site { 5059 position: fixed; 5060 max-width: 100%; 5061 width: 100%; 5062 } 5063 } 5064 @keyframes twentytwentyone-close-button-transition { 5065 5066 from { 5067 opacity: 0; 5068 } 5069 5070 to { 5071 opacity: 1; 5072 } 5073 } 5074 5075 .footer-navigation { 5076 margin-top: calc(2 * var(--global--spacing-vertical)); 5077 margin-bottom: var(--global--spacing-vertical); 5078 color: var(--footer--color-text); 5079 font-size: var(--global--font-size-xs); 5080 font-family: var(--footer--font-family); 5081 } 5082 5083 .footer-navigation-wrapper { 5084 display: flex; 5085 justify-content: center; 5086 flex-wrap: wrap; 5087 list-style: none; 5088 padding-right: 0; 5089 } 5090 5091 .footer-navigation-wrapper li { 5092 display: inline; 5093 line-height: 3; 5094 } 5095 5096 .footer-navigation-wrapper li a { 5097 padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); 5098 transition: transform 0.1s ease; 5099 color: var(--footer--color-link); 5100 } 5101 5102 .footer-navigation-wrapper li a:link, 5103 .footer-navigation-wrapper li a:visited, 5104 .footer-navigation-wrapper li a:active { 5105 color: var(--footer--color-link); 5106 } 5107 5108 .footer-navigation-wrapper li a:hover { 5109 text-decoration: underline; 5110 text-decoration-style: dotted; 5111 text-decoration-skip-ink: none; 5112 color: var(--footer--color-link-hover); 5113 } 5114 5115 .is-dark-theme .footer-navigation-wrapper li a:focus .svg-icon { 5116 fill: var(--wp--style--color--link, var(--global--color-background)); 5117 } 5118 5119 .has-background-white .footer-navigation-wrapper li a:focus .svg-icon { 5120 fill: var(--wp--style--color--link, var(--global--color-white)); 5121 } 5122 5123 .footer-navigation-wrapper li .svg-icon { 5124 vertical-align: middle; 5125 fill: var(--footer--color-link); 5126 } 5127 5128 .footer-navigation-wrapper li .svg-icon:hover { 5129 transform: scale(1.1); 5130 } 5131 5132 .footer-navigation-wrapper .sub-menu-toggle, 5133 .footer-navigation-wrapper .menu-item-description { 5134 display: none; 5135 } 5136 5137 /* Next/Previous navigation */ 5138 .navigation { 5139 color: var(--global--color-primary); 5140 } 5141 5142 .navigation a { 5143 color: var(--global--color-primary); 5144 text-decoration: none; 5145 } 5146 5147 .navigation a:hover { 5148 color: var(--global--color-primary-hover); 5149 text-decoration: underline; 5150 text-decoration-style: dotted; 5151 } 5152 5153 .navigation a:focus { 5154 color: var(--global--color-secondary); 5155 } 5156 5157 .navigation a:active { 5158 color: var(--global--color-primary); 5159 } 5160 5161 .navigation .nav-links > * { 5162 min-width: 44px; 5163 min-height: 44px; 5164 } 5165 5166 .navigation .nav-links .nav-next a, 5167 .navigation .nav-links .nav-previous a { 5168 display: flex; 5169 flex-direction: column; 5170 } 5171 5172 .navigation .nav-links .dots { 5173 text-align: center; 5174 } 5175 @media only screen and (min-width: 592px) { 5176 5177 .navigation .nav-links { 5178 display: flex; 5179 justify-content: center; 5180 flex-wrap: wrap; 5181 } 5182 5183 .navigation .nav-links .nav-next, 5184 .navigation .nav-links .nav-previous { 5185 flex: 0 1 auto; 5186 margin-bottom: inherit; 5187 margin-top: inherit; 5188 max-width: calc(50% - (0.5 * var(--global--spacing-unit))); 5189 } 5190 5191 .navigation .nav-links .nav-next { 5192 text-align: left; 5193 } 5194 } 5195 5196 .navigation .svg-icon { 5197 display: inline-block; 5198 fill: currentColor; 5199 vertical-align: middle; 5200 position: relative; 5201 } 5202 5203 .navigation .nav-previous .svg-icon, 5204 .navigation .prev .svg-icon { 5205 top: -2px; 5206 margin-left: calc(0.25 * var(--global--spacing-unit)); 5207 } 5208 5209 .navigation .nav-next .svg-icon, 5210 .navigation .next .svg-icon { 5211 top: -1px; 5212 margin-right: calc(0.25 * var(--global--spacing-unit)); 5213 } 5214 5215 .post-navigation { 5216 margin: var(--global--spacing-vertical) auto; 5217 } 5218 @media only screen and (min-width: 822px) { 5219 5220 .post-navigation { 5221 margin: var(--global--spacing-vertical) auto; 5222 } 5223 } 5224 5225 .post-navigation .meta-nav { 5226 line-height: var(--global--line-height-body); 5227 color: var(--global--color-primary); 5228 } 5229 5230 .post-navigation .post-title { 5231 display: inline-block; 5232 font-family: var(--global--font-primary); 5233 font-size: var(--global--font-size-lg); 5234 font-weight: var(--pagination--font-weight-strong); 5235 line-height: var(--global--line-height-heading); 5236 } 5237 @media only screen and (min-width: 822px) { 5238 5239 .post-navigation .post-title { 5240 margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0; 5241 } 5242 } 5243 @media only screen and (min-width: 482px) { 5244 5245 .post-navigation .nav-links { 5246 justify-content: space-between; 5247 } 5248 } 5249 5250 .post-navigation .nav-next, 5251 .post-navigation .nav-previous { 5252 margin-top: var(--global--spacing-vertical); 5253 margin-bottom: var(--global--spacing-vertical); 5254 } 5255 5256 .post-navigation .nav-next:first-child, 5257 .post-navigation .nav-previous:first-child { 5258 margin-top: 0; 5259 } 5260 5261 .post-navigation .nav-next:last-child, 5262 .post-navigation .nav-previous:last-child { 5263 margin-bottom: 0; 5264 } 5265 5266 .pagination, 5267 .comments-pagination { 5268 border-top: 3px solid var(--global--color-border); 5269 padding-top: var(--global--spacing-vertical); 5270 margin: var(--global--spacing-vertical) auto; 5271 } 5272 @media only screen and (min-width: 822px) { 5273 5274 .pagination, 5275 .comments-pagination { 5276 margin: var(--global--spacing-vertical) auto; 5277 } 5278 } 5279 5280 .pagination .nav-links, 5281 .comments-pagination .nav-links { 5282 margin-top: calc(-1 * var(--global--spacing-vertical)); 5283 } 5284 5285 .pagination .nav-links a:hover, 5286 .comments-pagination .nav-links a:hover { 5287 color: var(--pagination--color-link-hover); 5288 } 5289 5290 .is-dark-theme .pagination .nav-links a:active, 5291 .is-dark-theme .pagination .nav-links a:hover:active, 5292 .is-dark-theme .pagination .nav-links a:hover:focus, 5293 .is-dark-theme .comments-pagination .nav-links a:active, 5294 .is-dark-theme .comments-pagination .nav-links a:hover:active, 5295 .is-dark-theme .comments-pagination .nav-links a:hover:focus { 5296 color: var(--global--color-background); 5297 } 5298 5299 .has-background-white .pagination .nav-links a:active, 5300 .has-background-white .pagination .nav-links a:hover:active, 5301 .has-background-white .pagination .nav-links a:hover:focus, 5302 .has-background-white .comments-pagination .nav-links a:active, 5303 .has-background-white .comments-pagination .nav-links a:hover:active, 5304 .has-background-white .comments-pagination .nav-links a:hover:focus { 5305 color: var(--global--color-white); 5306 } 5307 5308 .pagination .nav-links > *, 5309 .comments-pagination .nav-links > * { 5310 color: var(--pagination--color-text); 5311 font-family: var(--pagination--font-family); 5312 font-size: var(--pagination--font-size); 5313 font-weight: var(--pagination--font-weight); 5314 margin-top: var(--global--spacing-vertical); 5315 margin-right: calc(0.66 * var(--global--spacing-unit)); 5316 margin-left: calc(0.66 * var(--global--spacing-unit)); 5317 } 5318 5319 .pagination .nav-links > *.current, 5320 .comments-pagination .nav-links > *.current { 5321 text-decoration: underline; 5322 } 5323 5324 .pagination .nav-links > *:not(.dots):not(.current):hover, 5325 .comments-pagination .nav-links > *:not(.dots):not(.current):hover { 5326 text-decoration-style: dotted; 5327 } 5328 5329 .pagination .nav-links > *:first-child, 5330 .comments-pagination .nav-links > *:first-child { 5331 margin-right: 0; 5332 } 5333 5334 .pagination .nav-links > *:last-child, 5335 .comments-pagination .nav-links > *:last-child { 5336 margin-left: 0; 5337 } 5338 5339 .pagination .nav-links > *.next, 5340 .comments-pagination .nav-links > *.next { 5341 margin-right: auto; 5342 } 5343 5344 .pagination .nav-links > *.prev, 5345 .comments-pagination .nav-links > *.prev { 5346 margin-left: auto; 5347 } 5348 @media only screen and (max-width: 821px) { 5349 5350 .pagination .nav-links, 5351 .comments-pagination .nav-links { 5352 display: flex; 5353 flex-wrap: wrap; 5354 } 5355 5356 .pagination .page-numbers, 5357 .comments-pagination .page-numbers { 5358 display: none; 5359 } 5360 5361 .pagination .page-numbers.prev, 5362 .pagination .page-numbers.next, 5363 .comments-pagination .page-numbers.prev, 5364 .comments-pagination .page-numbers.next { 5365 display: inline-block; 5366 flex: 0 1 auto; 5367 } 5368 } 5369 @media only screen and (max-width: 481px) { 5370 5371 .pagination .nav-short, 5372 .comments-pagination .nav-short { 5373 display: none; 5374 } 5375 } 5376 5377 .comments-pagination { 5378 padding-top: calc(0.66 * var(--global--spacing-vertical)); 5379 margin: calc(3 * var(--global--spacing-vertical)) auto; 5380 } 5381 @media only screen and (min-width: 822px) { 5382 5383 .comments-pagination { 5384 margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto; 5385 } 5386 } 5387 5388 .comments-pagination .nav-links > * { 5389 font-size: var(--global--font-size-md); 5390 } 5391 5392 .widget-area { 5393 margin-top: calc(6 * var(--global--spacing-vertical)); 5394 padding-bottom: calc(var(--global--spacing-vertical) / 3); 5395 color: var(--footer--color-text); 5396 font-size: var(--footer--font-size); 5397 font-family: var(--footer--font-family); 5398 } 5399 @media only screen and (min-width: 652px) { 5400 5401 .widget-area { 5402 display: grid; 5403 grid-template-columns: repeat(2, 1fr); 5404 column-gap: calc(2 * var(--global--spacing-horizontal)); 5405 } 5406 } 5407 @media only screen and (min-width: 1024px) { 5408 5409 .widget-area { 5410 grid-template-columns: repeat(3, 1fr); 5411 } 5412 } 5413 @media only screen and (max-width: 481px) { 5414 5415 .widget-area { 5416 margin-top: calc(3 * var(--global--spacing-vertical)); 5417 } 5418 } 5419 5420 .widget-area ul { 5421 list-style-type: none; 5422 padding: 0; 5423 } 5424 5425 .widget-area ul li { 5426 line-height: var(--widget--line-height-list); 5427 } 5428 5429 .widget-area ul.sub-menu, 5430 .widget-area ul.children { 5431 margin-right: var(--widget--spacing-menu); 5432 } 5433 5434 .widget-area ul .sub-menu-toggle { 5435 display: none; 5436 } 5437 5438 .widget-area a { 5439 color: var(--footer--color-link); 5440 text-decoration: underline; 5441 text-decoration-style: solid; 5442 text-decoration-color: currentColor; 5443 } 5444 5445 .widget-area a:link, 5446 .widget-area a:visited, 5447 .widget-area a:active { 5448 color: var(--footer--color-link); 5449 } 5450 5451 .widget-area a:hover { 5452 color: var(--footer--color-link-hover); 5453 text-decoration-style: dotted; 5454 } 5455 5456 .widget-area .wp-block-social-links.alignright { 5457 margin-top: var(--global--spacing-vertical); 5458 justify-content: flex-end; 5459 } 5460 5461 .widget-area .wp-block-social-links.alignleft { 5462 margin-top: var(--global--spacing-vertical); 5463 } 5464 5465 .widget-area:after { 5466 content: ""; 5467 display: table; 5468 clear: both; 5469 } 5470 5471 .widget h1, 5472 .widget h2, 5473 .widget h3, 5474 .widget h4, 5475 .widget h5, 5476 .widget h6 { 5477 font-weight: var(--widget--font-weight-title); 5478 line-height: var(--widget--line-height-title); 5479 } 5480 5481 .widget h1 { 5482 font-size: var(--global--font-size-md); 5483 } 5484 5485 .widget h2 { 5486 font-size: var(--global--font-size-sm); 5487 } 5488 5489 .widget h3 { 5490 font-size: var(--global--font-size-xs); 5491 } 5492 5493 .widget h4 { 5494 font-size: var(--global--font-size-xs); 5495 } 5496 5497 .widget h5 { 5498 font-size: var(--global--font-size-xs); 5499 } 5500 5501 .widget h6 { 5502 font-size: var(--global--font-size-xs); 5503 } 5504 5505 .search-form { 5506 display: flex; 5507 flex-wrap: wrap; 5508 margin: auto; 5509 max-width: var(--responsive--aligndefault-width); 5510 } 5511 5512 .search-form > label { 5513 width: 100%; 5514 margin-bottom: 0; 5515 font-weight: var(--form--label-weight); 5516 } 5517 5518 .search-form .search-field { 5519 flex-grow: 1; 5520 max-width: inherit; 5521 margin-top: calc(var(--global--spacing-vertical) / 3); 5522 margin-left: calc(0.66 * var(--global--spacing-horizontal)); 5523 } 5524 5525 .search-form .search-submit { 5526 margin-top: calc(var(--global--spacing-vertical) / 3); 5527 margin-right: 10px; 5528 } 5529 5530 .widget_search > .search-form .search-field { 5531 margin-left: calc(-1 * var(--button--border-width)); 5532 -webkit-appearance: none; 5533 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 5534 } 5535 5536 .widget_search > .search-form .search-submit { 5537 margin-right: 0; 5538 margin-bottom: calc(0.5 * var(--global--spacing-vertical)); 5539 } 5540 5541 .widget_rss a.rsswidget .rss-widget-icon { 5542 display: none; 5543 } 5544 5545 /* Category 07 is for any utility classes that are not assigned to a specific component. */ 5546 .screen-reader-text { 5547 border: 0; 5548 clip: rect(1px, 1px, 1px, 1px); 5549 -webkit-clip-path: inset(50%); 5550 clip-path: inset(50%); 5551 height: 1px; 5552 margin: -1px; 5553 overflow: hidden; 5554 padding: 0; 5555 position: absolute !important; 5556 width: 1px; 5557 word-wrap: normal !important; 5558 word-break: normal; 5559 } 5560 5561 .skip-link:focus { 5562 background-color: #f1f1f1; 5563 border-radius: 3px; 5564 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 5565 clip: auto !important; 5566 -webkit-clip-path: none; 5567 clip-path: none; 5568 color: #21759b; 5569 display: block; 5570 font-size: 0.875rem; 5571 font-weight: 700; 5572 height: auto; 5573 right: 5px; 5574 line-height: normal; 5575 padding: 15px 23px 14px; 5576 text-decoration: none; 5577 top: 5px; 5578 width: auto; 5579 z-index: 100000; 5580 } 5581 5582 /* Do not show the outline on the skip link target. */ 5583 #content[tabindex="-1"]:focus { 5584 outline: 0; 5585 } 5586 5587 @media (prefers-reduced-motion) { 5588 5589 * { 5590 transition-delay: 0s !important; 5591 transition-duration: 0s !important; 5592 } 5593 } 5594 5595 .has-black-color[class] { 5596 color: var(--global--color-black); 5597 } 5598 5599 .has-black-color[class] > [class*=__inner-container] { 5600 --local--color-primary: var(--global--color-black, #000); 5601 color: var(--local--color-primary); 5602 } 5603 5604 .has-gray-color[class] { 5605 color: var(--global--color-gray); 5606 } 5607 5608 .has-gray-color[class] > [class*=__inner-container] { 5609 --local--color-primary: var(--global--color-gray, #000); 5610 color: var(--local--color-primary); 5611 } 5612 5613 .has-dark-gray-color[class] { 5614 color: var(--global--color-dark-gray); 5615 } 5616 5617 .has-dark-gray-color[class] > [class*=__inner-container] { 5618 --local--color-primary: var(--global--color-dark-gray, #000); 5619 color: var(--local--color-primary); 5620 } 5621 5622 .has-green-color[class] { 5623 color: var(--global--color-green); 5624 } 5625 5626 .has-green-color[class] > [class*=__inner-container] { 5627 --local--color-primary: var(--global--color-green, #fff); 5628 color: var(--local--color-primary); 5629 } 5630 5631 .has-blue-color[class] { 5632 color: var(--global--color-blue); 5633 } 5634 5635 .has-blue-color[class] > [class*=__inner-container] { 5636 --local--color-primary: var(--global--color-blue, #fff); 5637 color: var(--local--color-primary); 5638 } 5639 5640 .has-purple-color[class] { 5641 color: var(--global--color-purple); 5642 } 5643 5644 .has-purple-color[class] > [class*=__inner-container] { 5645 --local--color-primary: var(--global--color-purple, #fff); 5646 color: var(--local--color-primary); 5647 } 5648 5649 .has-red-color[class] { 5650 color: var(--global--color-red); 5651 } 5652 5653 .has-red-color[class] > [class*=__inner-container] { 5654 --local--color-primary: var(--global--color-red, #fff); 5655 color: var(--local--color-primary); 5656 } 5657 5658 .has-orange-color[class] { 5659 color: var(--global--color-orange); 5660 } 5661 5662 .has-orange-color[class] > [class*=__inner-container] { 5663 --local--color-primary: var(--global--color-orange, #fff); 5664 color: var(--local--color-primary); 5665 } 5666 5667 .has-yellow-color[class] { 5668 color: var(--global--color-yellow); 5669 } 5670 5671 .has-yellow-color[class] > [class*=__inner-container] { 5672 --local--color-primary: var(--global--color-yellow, #fff); 5673 color: var(--local--color-primary); 5674 } 5675 5676 .has-white-color[class] { 5677 color: var(--global--color-white); 5678 } 5679 5680 .has-white-color[class] > [class*=__inner-container] { 5681 --local--color-primary: var(--global--color-white, #fff); 5682 color: var(--local--color-primary); 5683 } 5684 5685 .has-background a, 5686 .has-background p, 5687 .has-background h1, 5688 .has-background h2, 5689 .has-background h3, 5690 .has-background h4, 5691 .has-background h5, 5692 .has-background h6 { 5693 color: currentColor; 5694 } 5695 5696 .has-black-background-color[class] { 5697 background-color: var(--global--color-black); 5698 } 5699 5700 .has-black-background-color[class] > [class*=__inner-container] { 5701 --local--color-background: var(--global--color-black, #000); 5702 background-color: var(--local--color-background); 5703 } 5704 5705 .has-dark-gray-background-color[class] { 5706 background-color: var(--global--color-dark-gray); 5707 } 5708 5709 .has-dark-gray-background-color[class] > [class*=__inner-container] { 5710 --local--color-background: var(--global--color-dark-gray, #000); 5711 background-color: var(--local--color-background); 5712 } 5713 5714 .has-gray-background-color[class] { 5715 background-color: var(--global--color-gray); 5716 } 5717 5718 .has-gray-background-color[class] > [class*=__inner-container] { 5719 --local--color-background: var(--global--color-gray, #000); 5720 background-color: var(--local--color-background); 5721 } 5722 5723 .has-light-gray-background-color[class] { 5724 background-color: var(--global--color-light-gray); 5725 } 5726 5727 .has-light-gray-background-color[class] > [class*=__inner-container] { 5728 --local--color-background: var(--global--color-light-gray, #fff); 5729 background-color: var(--local--color-background); 5730 } 5731 5732 .has-green-background-color[class] { 5733 background-color: var(--global--color-green); 5734 } 5735 5736 .has-green-background-color[class] > [class*=__inner-container] { 5737 --local--color-background: var(--global--color-green, #fff); 5738 background-color: var(--local--color-background); 5739 } 5740 5741 .has-blue-background-color[class] { 5742 background-color: var(--global--color-blue); 5743 } 5744 5745 .has-blue-background-color[class] > [class*=__inner-container] { 5746 --local--color-background: var(--global--color-blue, #fff); 5747 background-color: var(--local--color-background); 5748 } 5749 5750 .has-purple-background-color[class] { 5751 background-color: var(--global--color-purple); 5752 } 5753 5754 .has-purple-background-color[class] > [class*=__inner-container] { 5755 --local--color-background: var(--global--color-purple, #fff); 5756 background-color: var(--local--color-background); 5757 } 5758 5759 .has-red-background-color[class] { 5760 background-color: var(--global--color-red); 5761 } 5762 5763 .has-red-background-color[class] > [class*=__inner-container] { 5764 --local--color-background: var(--global--color-red, #fff); 5765 background-color: var(--local--color-background); 5766 } 5767 5768 .has-orange-background-color[class] { 5769 background-color: var(--global--color-orange); 5770 } 5771 5772 .has-orange-background-color[class] > [class*=__inner-container] { 5773 --local--color-background: var(--global--color-orange, #fff); 5774 background-color: var(--local--color-background); 5775 } 5776 5777 .has-yellow-background-color[class] { 5778 background-color: var(--global--color-yellow); 5779 } 5780 5781 .has-yellow-background-color[class] > [class*=__inner-container] { 5782 --local--color-background: var(--global--color-yellow, #fff); 5783 background-color: var(--local--color-background); 5784 } 5785 5786 .has-white-background-color[class] { 5787 background-color: var(--global--color-white); 5788 } 5789 5790 .has-white-background-color[class] > [class*=__inner-container] { 5791 --local--color-background: var(--global--color-white, #fff); 5792 background-color: var(--local--color-background); 5793 } 5794 5795 .has-background:not(.has-text-color).has-black-background-color[class], 5796 .has-background:not(.has-text-color).has-gray-background-color[class], 5797 .has-background:not(.has-text-color).has-dark-gray-background-color[class] { 5798 color: var(--global--color-white); 5799 } 5800 5801 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container], 5802 .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container], 5803 .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] { 5804 --local--color-primary: var(--global--color-background, #fff); 5805 color: var(--local--color-primary, var(--global--color-primary)); 5806 } 5807 5808 .is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container], 5809 .is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container], 5810 .is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] { 5811 --local--color-primary: var(--global--color-primary, #000); 5812 } 5813 5814 .has-background:not(.has-text-color).has-green-background-color[class], 5815 .has-background:not(.has-text-color).has-blue-background-color[class], 5816 .has-background:not(.has-text-color).has-purple-background-color[class], 5817 .has-background:not(.has-text-color).has-red-background-color[class], 5818 .has-background:not(.has-text-color).has-orange-background-color[class], 5819 .has-background:not(.has-text-color).has-yellow-background-color[class], 5820 .has-background:not(.has-text-color).has-white-background-color[class] { 5821 color: var(--global--color-dark-gray); 5822 } 5823 5824 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container], 5825 .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container], 5826 .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container], 5827 .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container], 5828 .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container], 5829 .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container], 5830 .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] { 5831 --local--color-primary: var(--global--color-primary, #000); 5832 color: var(--local--color-primary, var(--global--color-primary)); 5833 } 5834 5835 .is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container], 5836 .is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container], 5837 .is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container], 5838 .is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container], 5839 .is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container], 5840 .is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container], 5841 .is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] { 5842 --local--color-primary: var(--global--color-background, #fff); 5843 } 5844 5845 .has-purple-to-yellow-gradient-background { 5846 background: linear-gradient(-160deg, var(--global--color-purple), var(--global--color-yellow)); 5847 } 5848 5849 .has-yellow-to-purple-gradient-background { 5850 background: linear-gradient(-160deg, var(--global--color-yellow), var(--global--color-purple)); 5851 } 5852 5853 .has-green-to-yellow-gradient-background { 5854 background: linear-gradient(-160deg, var(--global--color-green), var(--global--color-yellow)); 5855 } 5856 5857 .has-yellow-to-green-gradient-background { 5858 background: linear-gradient(-160deg, var(--global--color-yellow), var(--global--color-green)); 5859 } 5860 5861 .has-red-to-yellow-gradient-background { 5862 background: linear-gradient(-160deg, var(--global--color-red), var(--global--color-yellow)); 5863 } 5864 5865 .has-yellow-to-red-gradient-background { 5866 background: linear-gradient(-160deg, var(--global--color-yellow), var(--global--color-red)); 5867 } 5868 5869 .has-purple-to-red-gradient-background { 5870 background: linear-gradient(-160deg, var(--global--color-purple), var(--global--color-red)); 5871 } 5872 5873 .has-red-to-purple-gradient-background { 5874 background: linear-gradient(-160deg, var(--global--color-red), var(--global--color-purple)); 5875 } 5876 5877 header *, 5878 main *, 5879 footer * { 5880 max-width: var(--global--spacing-measure); 5881 } 5882 5883 html, 5884 body, 5885 div, 5886 header, 5887 nav, 5888 article, 5889 figure, 5890 hr, 5891 main, 5892 section, 5893 footer { 5894 max-width: none; 5895 } 5896 5897 .is-IE.is-dark-theme { 5898 color: #fff; 5899 } 5900 5901 .is-IE.is-dark-theme *, 5902 .is-IE.is-dark-theme a, 5903 .is-IE.is-dark-theme .site-description, 5904 .is-IE.is-dark-theme .entry-title, 5905 .is-IE.is-dark-theme .entry-footer, 5906 .is-IE.is-dark-theme .widget-area, 5907 .is-IE.is-dark-theme .post-navigation .meta-nav, 5908 .is-IE.is-dark-theme .footer-navigation-wrapper li a:link, 5909 .is-IE.is-dark-theme .site-footer > .site-info, 5910 .is-IE.is-dark-theme .site-footer > .site-info a, 5911 .is-IE.is-dark-theme .site-footer > .site-info a:visited { 5912 color: #fff; 5913 } 5914 5915 .is-IE.is-dark-theme .sub-menu-toggle svg, 5916 .is-IE.is-dark-theme .sub-menu-toggle path, 5917 .is-IE.is-dark-theme .post-navigation .meta-nav svg, 5918 .is-IE.is-dark-theme .post-navigation .meta-nav path { 5919 fill: #fff; 5920 } 5921 5922 .is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li { 5923 background: #000; 5924 } 5925 @media only screen and (max-width: 481px) { 5926 5927 .is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container, 5928 .is-IE.is-dark-theme.primary-navigation-open .menu-button-container { 5929 background-color: #000; 5930 } 5931 } 5932 5933 .is-IE.is-dark-theme .skip-link:focus { 5934 color: #21759b; 5935 } 5936 5937 .is-IE .navigation .nav-links { 5938 display: block; 5939 } 5940 5941 .is-IE .post-thumbnail .wp-post-image { 5942 min-width: auto; 5943 }