/** * Jetpack related posts */ /** * The Gutenberg block */ .jp-related-posts-i2 { margin-top: 1.5rem; } .jp-related-posts-i2__list { --hgap: 1rem; display: flex; flex-wrap: wrap; column-gap: var(--hgap); row-gap: 2rem; margin: 0; padding: 0; list-style-type: none; } .jp-related-posts-i2__post { display: flex; flex-direction: column; /* Default: 2 items by row */ flex-basis: calc(( 100% - var(--hgap) ) / 2); } /* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */ .jp-related-posts-i2__post:nth-last-child(n+3):first-child, .jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * { /* From 3 total items on, 3 items by row */ flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3); } .jp-related-posts-i2__post:nth-last-child(4):first-child, .jp-related-posts-i2__post:nth-last-child(4):first-child ~ * { /* Exception for 4 total items: 2 items by row */ flex-basis: calc(( 100% - var(--hgap) ) / 2); } .jp-related-posts-i2__post-link { display: flex; flex-direction: column; row-gap: 0.5rem; width: 100%; margin-bottom: 1rem; line-height: 1.2; } .jp-related-posts-i2__post-link:focus-visible { outline-offset: 2px; } .jp-related-posts-i2__post-img { order: -1; max-width: 100%; } .jp-related-posts-i2__post-defs { margin: 0; list-style-type: unset; } /* Hide, except from screen readers */ .jp-related-posts-i2__post-defs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .jp-related-posts-i2__post-defs dd { margin: 0; } /* List view */ .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list { display: block; } .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post { margin-bottom: 2rem; } /* Breakpoints */ @media only screen and (max-width: 640px) { .jp-related-posts-i2__list { display: block; } .jp-related-posts-i2__post { margin-bottom: 2rem; } } /* Container */ #jp-relatedposts { display: none; padding-top: 1em; margin: 1em 0; position: relative; clear: both; } .jp-relatedposts::after { content: ""; display: block; clear: both; } /* Headline above related posts section, labeled "Related" */ #jp-relatedposts h3.jp-relatedposts-headline { margin: 0 0 1em 0; display: inline-block; float: left; font-size: 9pt; font-weight: 700; font-family: inherit; } #jp-relatedposts h3.jp-relatedposts-headline em::before { content: ""; display: block; width: 100%; min-width: 30px; border-top: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 1em; } #jp-relatedposts h3.jp-relatedposts-headline em { font-style: normal; font-weight: 700; } /* Related posts items (wrapping items) */ #jp-relatedposts .jp-relatedposts-items { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: -20px; } /* Related posts item */ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { float: left; width: 33%; margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */ box-sizing: border-box; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { padding-right: 20px; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) { clear: both; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } /* Related posts item content */ #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title, #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { font-size: 14px; line-height: 20px; margin: 0; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs { position: relative; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; border-bottom: 0; } #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { margin-bottom: 0; } #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title { text-transform: none; margin: 0; font-family: inherit; display: block; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a { font-size: inherit; font-weight: 400; text-decoration: none; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span { display: block; max-width: 90%; overflow: hidden; text-overflow: ellipsis; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span { height: auto; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { opacity: 0.6; } /* Hide the date by default, but leave the element there if * a theme wants to use css to make it visible. */ .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date { display: none; } /* Behavior when there are thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt { display: none; } /* Behavior when there are no thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt { overflow: hidden; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span { margin-bottom: 1em; } /* List Layout */ #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post { clear: both; width: 100%; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img { float: left; overflow: hidden; max-width: 33%; margin-right: 3%; } #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { display: inline-block; max-width: 63%; } /* * Responsive */ @media only screen and (max-width: 640px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 50%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: 20px; } } @media only screen and (max-width: 320px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 100%; clear: both; margin: 0 0 1em; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { float: none; max-width: 100%; margin-right: 0; } } /* * Hide the related post section in the print view of a post */ @media print { .jp-relatedposts { display: none !important; } } .wp-block-navigation{position:relative}.wp-block-navigation ul{margin-bottom:0;margin-left:0;margin-top:0;padding-left:0}.wp-block-navigation ul,.wp-block-navigation ul li{list-style:none;padding:0}.wp-block-navigation .wp-block-navigation-item{align-items:center;background-color:inherit;display:flex;position:relative}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{display:none}.wp-block-navigation .wp-block-navigation-item__content{display:block;z-index:1}.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus{text-decoration:underline}.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus{text-decoration:line-through}.wp-block-navigation :where(a),.wp-block-navigation :where(a:active),.wp-block-navigation :where(a:focus){text-decoration:none}.wp-block-navigation .wp-block-navigation__submenu-icon{align-self:center;background-color:inherit;border:none;color:currentColor;display:inline-block;font-size:inherit;height:.6em;line-height:0;margin-left:.25em;padding:0;width:.6em}.wp-block-navigation .wp-block-navigation__submenu-icon svg{stroke:currentColor;display:inline-block;height:inherit;margin-top:.075em;width:inherit}.wp-block-navigation{--navigation-layout-justification-setting:flex-start;--navigation-layout-direction:row;--navigation-layout-wrap:wrap;--navigation-layout-justify:flex-start;--navigation-layout-align:center}.wp-block-navigation.is-vertical{--navigation-layout-direction:column;--navigation-layout-justify:initial;--navigation-layout-align:flex-start}.wp-block-navigation.no-wrap{--navigation-layout-wrap:nowrap}.wp-block-navigation.items-justified-center{--navigation-layout-justification-setting:center;--navigation-layout-justify:center}.wp-block-navigation.items-justified-center.is-vertical{--navigation-layout-align:center}.wp-block-navigation.items-justified-right{--navigation-layout-justification-setting:flex-end;--navigation-layout-justify:flex-end}.wp-block-navigation.items-justified-right.is-vertical{--navigation-layout-align:flex-end}.wp-block-navigation.items-justified-space-between{--navigation-layout-justification-setting:space-between;--navigation-layout-justify:space-between}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{align-items:normal;background-color:inherit;color:inherit;display:flex;flex-direction:column;opacity:0;position:absolute;z-index:2}@media not (prefers-reduced-motion){.wp-block-navigation .has-child .wp-block-navigation__submenu-container{transition:opacity .1s linear}}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{height:0;overflow:hidden;visibility:hidden;width:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{display:flex;flex-grow:1;padding:.5em 1em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{margin-left:auto;margin-right:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{margin:0}.wp-block-navigation .has-child .wp-block-navigation__submenu-container{left:-1px;top:100%}@media (min-width:782px){.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:-1px}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{background:#0000;content:"";display:block;height:100%;position:absolute;right:100%;width:.5em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{margin-right:.25em}.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{transform:rotate(-90deg)}}@media (hover:hover){.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container{height:auto;min-width:200px;opacity:1;overflow:visible;visibility:visible;width:auto}}.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{height:auto;min-width:200px;opacity:1;overflow:visible;visibility:visible;width:auto}.wp-block-navigation .has-child.open-always{align-items:var(--navigation-layout-align,initial);flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);gap:var(--wp--style--block-gap,2em)}.wp-block-navigation .has-child.open-always,.wp-block-navigation .has-child.open-always .wp-block-navigation-item{justify-content:var(--navigation-layout-justify,initial)}.wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container,.wp-block-navigation .has-child.open-always.wp-block-navigation-submenu{gap:var(--wp--style--block-gap,2em)}.wp-block-navigation .has-child.open-always .wp-block-navigation-item,.wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container,.wp-block-navigation .has-child.open-always.wp-block-navigation-submenu{padding-bottom:0;padding-top:0}.wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container{padding-left:var(--wp--style--block-gap,2em);padding-right:var(--wp--style--block-gap,2em)}.wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:0}.wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content,.wp-block-navigation .has-child.open-always>.wp-block-navigation-item__content{flex-grow:0}.wp-block-navigation .has-child.open-always>.wp-block-navigation__submenu-container{background-color:initial;border:none;color:inherit;flex-basis:100%;height:auto;opacity:1;overflow:visible;position:static;visibility:visible;width:auto}.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{left:0;top:100%}@media (min-width:782px){.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:100%;top:0}}.wp-block-navigation-submenu{display:flex;position:relative}.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{stroke:currentColor}button.wp-block-navigation-item__content{background-color:initial;border:none;color:currentColor;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;text-transform:inherit}.wp-block-navigation-submenu__toggle{cursor:pointer}.wp-block-navigation-submenu__toggle[aria-expanded=true]+.wp-block-navigation__submenu-icon>svg,.wp-block-navigation-submenu__toggle[aria-expanded=true]>svg{transform:rotate(180deg)}.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{padding-left:0;padding-right:.85em}.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{margin-left:-.6em;pointer-events:none}.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){padding:0}.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-dialog{gap:inherit}:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)){padding:.5em 1em}:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){padding:.5em 1em}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{left:auto;right:0}.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:-1px;right:-1px}@media (min-width:782px){.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{left:auto;right:100%}}.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{background-color:#fff;border:1px solid #00000026}.wp-block-navigation.has-background .wp-block-navigation__submenu-container{background-color:inherit}.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{color:#000}.wp-block-navigation__container{align-items:var(--navigation-layout-align,initial);display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial);list-style:none;margin:0;padding-left:0}.wp-block-navigation__container .is-responsive{display:none}.wp-block-navigation__container:only-child,.wp-block-page-list:only-child{flex-grow:1}@keyframes overlay-menu__fade-in-animation{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}.wp-block-navigation__responsive-container{bottom:0;display:none;left:0;position:fixed;right:0;top:0}.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){color:inherit}.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{align-items:var(--navigation-layout-align,initial);display:flex;flex-direction:var(--navigation-layout-direction,initial);flex-wrap:var(--navigation-layout-wrap,wrap);justify-content:var(--navigation-layout-justify,initial)}.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){background-color:inherit!important;color:inherit!important}.wp-block-navigation__responsive-container.is-menu-open{background-color:inherit;display:flex;flex-direction:column}@media not (prefers-reduced-motion){.wp-block-navigation__responsive-container.is-menu-open{animation:overlay-menu__fade-in-animation .1s ease-out;animation-fill-mode:forwards}}.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){padding:clamp(1rem,var(--wp--style--root--padding-top),20rem) clamp(1rem,var(--wp--style--root--padding-right),20rem) clamp(1rem,var(--wp--style--root--padding-bottom),20rem) clamp(1rem,var(--wp--style--root--padding-left),20rem)}.wp-block-navigation__responsive-container.is-menu-open{overflow:auto;z-index:100000}.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content{padding-top:calc(2rem + 24px)}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content{align-items:var(--navigation-layout-justification-setting,inherit);display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list{justify-content:flex-start}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{display:none}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{border:none;height:auto;min-width:200px;opacity:1;overflow:initial;padding-left:2rem;padding-right:2rem;position:static;visibility:visible;width:auto}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{gap:inherit}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{padding-top:var(--wp--style--block-gap,2em)}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{padding:0}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list{align-items:var(--navigation-layout-justification-setting,initial);display:flex;flex-direction:column}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list{background:#0000!important;color:inherit!important}.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:auto;right:auto}.wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__overlay-container{display:none;width:100%}.wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__responsive-close{max-width:none}.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content>:not(.wp-block-navigation__overlay-container){display:none}.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container{display:block}.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container{left:0;right:auto}@media (min-width:600px){.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){background-color:inherit;display:block;position:relative;width:100%;z-index:auto}.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{left:0}}.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){background-color:#fff}.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){color:#000}.wp-block-navigation__toggle_button_label{font-size:1rem;font-weight:700}.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{background:#0000;border:none;color:currentColor;cursor:pointer;margin:0;padding:0;text-transform:inherit;vertical-align:middle}.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{fill:currentColor;display:block;height:24px;pointer-events:none;width:24px}.wp-block-navigation__responsive-container-open{display:flex}.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{font-family:inherit;font-size:inherit;font-weight:inherit}@media (min-width:600px){.wp-block-navigation__responsive-container-open:not(.always-shown){display:none}}.wp-block-navigation__responsive-container-close{position:absolute;right:0;top:0;z-index:2}.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{font-family:inherit;font-size:inherit;font-weight:inherit}.disable-default-overlay .wp-block-navigation__responsive-container-close{right:clamp(1rem,var(--wp--style--root--padding-left),20rem);top:clamp(1rem,var(--wp--style--root--padding-left),20rem)}.wp-block-navigation__responsive-close{width:100%}.has-modal-open .wp-block-navigation__responsive-close{margin-left:auto;margin-right:auto;max-width:var(--wp--style--global--wide-size,100%)}.wp-block-navigation__responsive-close:focus{outline:none}.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{box-sizing:border-box}.wp-block-navigation__responsive-dialog{position:relative}.has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog{margin-top:46px}@media (min-width:782px){.has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog{margin-top:32px}}html.has-modal-open{overflow:hidden}/* Theme Name: Extendable Theme URI: https://github.com/extendify/extendable Author: Extendify Author URI: https://extendify.com Description: Extendable is a distinct, dynamic block theme designed as a canvas for your next online venture. Sporting multiple style variations, Extendable is the most expressive block theme yet. Go fresh, bold, bohemian or minimal — with a single click. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 Version: 2.1.6 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: extendable Tags: one-column, custom-colors, custom-menu, custom-logo, e-commerce, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Extendable is a derivative work of the code from the Twenty Twenty-Two WordPress Theme, which is licensed GPLv2. Extendable WordPress Theme, Copyright (C) 2021-2025 Extendify Inc. Extendable therefore is also distributed under the terms of the GNU GPL. */ /* Fallback for deprecate variables. ---------------------------------------------------------------------------- */ :root { --wp--custom--spacing--small: var(--wp--preset--spacing--30, clamp(1.5rem, 5vw, 2rem)); --wp--custom--spacing--medium: var(--wp--preset--spacing--50, clamp(2.5rem, 8vw, 4rem)); --wp--custom--spacing--large: var(--wp--preset--spacing--60, clamp(2.5rem, 8vw, 6rem)); --wp--custom--spacing--outer: max(1.25rem, 4vw); --wp--preset--spacing--80: min(8rem, 12vw); } /* * Smooth scrolling */ html { scroll-behavior: smooth; } /* * Font smoothing. * This is a niche setting that will not be available via Global Styles. * https://github.com/WordPress/gutenberg/issues/35934 */ body { -moz-osx-font-smoothing: var(--wp--custom--typography--font-smoothing--moz, auto); -webkit-font-smoothing: var(--wp--custom--typography--font-smoothing--webkit, auto); } /* * Text and navigation link styles. * Necessary until the following issue is resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/27075 */ a { text-decoration-style: var(--wp--custom--elements--link--static--text-decoration-style, solid); text-decoration-thickness: var(--wp--custom--elements--link--text-decoration-thickness, 1px); text-underline-offset: var(--wp--custom--elements--link--text-underline-offset, 0.25ch); } a:hover, a:focus { text-decoration-style: var(--wp--custom--elements--link--interactive--text-decoration-style, dashed); } :where(.wp-site-blocks *:focus) { outline-width: 1px; outline-style: solid; } a:active { text-decoration: none; } /* * Navigation Block */ @media (min-width: 600px) { .site-logo-title { display: none; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; } } @media (max-width: 600px) { .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-page-list { align-items: flex-start !important; } } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title { display: flex; flex-wrap: nowrap; max-width: 100%; align-items: center; gap: 0.5rem; padding-bottom: var(--wp--preset--spacing--30); position: relative; padding-inline-end: 52px; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title::after { content: ""; position: absolute; left: calc(-1 * var(--wp--preset--spacing--30)); right: calc(-1 * var(--wp--preset--spacing--30)); bottom: 0; height: 1px; background: #8080801d; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title img { max-height: 42px !important; height: auto !important; width: auto !important; } .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title .site-title { font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--foreground); text-transform: uppercase; letter-spacing: -0.02em; box-sizing: border-box; line-height: 1.15; } .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content { padding-top: var(--wp--preset--spacing--30); } .has-modal-open .wp-block-navigation__responsive-container-close { background-color: var(--wp--preset--color--tertiary); padding: 0.625rem; border-radius: 100%; top: -2.5px !important; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 0 !important; width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navrigation__containe, .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container ul { row-gap: 0.75rem !important; width: -webkit-fill-available; max-width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container) { border-bottom: 1px solid #8080801d; padding-top: 0.75rem; padding-bottom: 0.75rem; width: -webkit-fill-available; max-width: 100%; } .has-modal-open .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { padding: 0.75rem 0.75rem 0 0.75rem !important; gap: 0.75rem !important; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li:not(.wp-block-navigation__submenu-container) > a.wp-block-navigation-item__content { font-size: 1.25rem; font-weight: 600; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__submenu-container { padding-top: 0.75rem !important; } .has-modal-open .wp-block-navigation__responsive-container:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item a { font-size: 1rem !important; } /* * When the responsive navigation modal opens (WordPress sets .has-modal-open * on ), suppress every property on the modal's ancestor chain that * creates a containing block for position:fixed descendants — otherwise * the modal is trapped inside the header instead of overlaying the viewport. * * Two rules here: * * 1) Broad ancestor coverage — the header itself plus any element inside * it that contains the responsive dialog. Handles transform/filter on * any header variant (overlay, glass, floating-pill, future ones). * * 2) Animation override — mirrors the selectors used by the floating-pill * scroll animations so we can match their specificity. Those animations * use !important + a deep selector to apply translate/backdrop-filter * via keyframes; without a same-or-higher-specificity override our broad * rule loses the cascade and the animation keeps trapping the modal. */ html.has-modal-open header.wp-block-template-part, html.has-modal-open header.wp-block-template-part :has(.wp-block-navigation__responsive-dialog) { backdrop-filter: none !important; transform: none !important; translate: none !important; filter: none !important; animation: none !important; } html.has-modal-open body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass, html.has-modal-open body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: none !important; backdrop-filter: none !important; translate: none !important; } /* * Mobile nav-extras: cloned by navigation-customization.js into the * responsive menu dialog so phone / CTA / social aren't visible in the * cramped top bar on small screens. We target the specific modifier * classes (.ext-nav-extras-phone, -btn, -social) rather than the * .ext-nav-extras wrapper, because some header parts use the wrapper * class around the nav block itself. * * On desktop the dialog is rendered inline (it's only "modal-shaped" * when the hamburger opens it), so the cloned extras must stay hidden * until WordPress sets .has-modal-open on . */ @media (max-width: 781px) { body:not(:has(.wp-block-navigation__responsive-container.disable-default-overlay)) header.wp-block-template-part :is(.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social):not(.ext-nav-extras-mobile *) { display: none; } /* Collapse the .ext-nav-extras wrapper too when its only children are the extras (no nav inside) — otherwise the empty wrapper holds a flex slot and the hamburger stays stuck in the middle instead of moving to the end of the row. */ header.wp-block-template-part .ext-nav-extras:not(:has(nav, .wp-block-navigation)) { display: none; } } .ext-nav-extras-mobile { display: none; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile { display: flex; flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button { width: 100%; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button__link { display: block; text-align: center; width: 100%; } /* Match the nav-link typography (see rule above) on the cloned phone CTA. */ .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone, .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone a, .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone p { font-size: 1.25rem !important; font-weight: 600 !important; } /* Bigger, more tappable social icons in the menu. */ .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-social-link { width: 32px; height: 32px; } .has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-social-link svg { width: 28px; height: 28px; } .wp-block-navigation .wp-block-navigation-item a:hover, .wp-block-navigation .wp-block-navigation-item a:focus { text-decoration: underline; text-decoration-style: solid; } /* Don't display the homepage in the Page List block, when located inside a navigation element. */ nav .wp-block-pages-list__item.wp-block-navigation-item.menu-item-home { display: none; } /* * Responsive menu container padding. * This ensures the responsive container inherits the same * spacing defined above. This behavior may be built into * the Block Editor in the future. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--30); padding-left: var(--wp--preset--spacing--30); } /* Temporary: WP core ships this padding as a 4-value clamp() shorthand that some browsers fail to parse — re-declare as individual props. */ .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem); } /* * -------------------------------------------------------- * Custom - blocks * -------------------------------------------------------- */ /* Button ----------------------------------------------------------*/ .wp-element-button { transition: background-color 0.15s ease; } .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):hover, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { background-color: rgba(159, 159, 159, 0.2); } /* Table ----------------------------------------------------------*/ .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--custom--blocks--core-table--variant-stripes--color--background, var(--wp--preset--color--tertiary)); } /* Template Part Block ----------------------------------------------------------*/ /* Temporary fix until template-part blocks support spacing */ footer.wp-block-template-part:not([style*="margin-top"]) { margin-top: 0; } /* Quote - 'Plain' variation ----------------------------------------------------------*/ blockquote:is(.is-style-plain) { border: none; padding-left: 0; } /* Search Block ----------------------------------------------------------*/ :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) { border-color: var(--wp--custom--elements--input--border--color); border-radius: var(--wp--custom--elements--button--border--radius); border-width: var(--wp--custom--elements--input--border--width); } :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input { border-color: transparent; } .wp-block-search .wp-block-search__input { border-radius: var(--wp--custom--elements--button--border--radius); } /* Image ----------------------------------------------------------*/ .wp-block-image[style*="-radius"]:not([style*="overflow"]) { overflow: hidden; } /* * -------------------------------------------------------- * Custom - experimental * -------------------------------------------------------- */ .block-editor-block-list__block.wp-block.is-default-size.wp-block-site-logo .components-resizable-box__container, .wp-block-site-logo.is-default-size img { max-height: 42px !important; height: auto !important; width: auto !important; } /* Ensure default logo works well on light and dark backgrounds ----------------------------------------------------------*/ .wp-block-site-logo img[src*="extendify-demo-"], .wp-block-site-logo img[src*="ext-custom-logo-"] { filter: var(--wp--preset--duotone--primary-foreground); min-width: 40px; } /* * Remove all animations, transitions and smooth scroll * for people that prefer not to see them. */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* * Matching caret and focus outline colors. */ input, textarea { caret-color: inherit; outline-color: inherit; } /* * Matching input with outline button style. */ :where(.wp-block-post-comments-form) input:not([type="submit"]), :where(.wp-block-post-comments-form) textarea { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); border-color: inherit; } /* * Woocommerce temporarily customization until the woo blocks offer support */ .woocommerce-Tabs-panel--description h2, .woocommerce-Reviews-title { font-size: var(--wp--preset--font-size--medium); } .wp-block-button.wc-block-components-product-button { flex-direction: row; flex-wrap: wrap; justify-content: start; gap: 1rem; } .wp-block-button.wc-block-components-product-button a.added_to_cart { margin-top: 0; } .woocommerce-checkout.woocommerce-page header.wp-block-template-part nav.wp-block-navigation { visibility: hidden; } .wp-site-blocks .wp-block-group.woocommerce.product { margin-top: 0; margin-bottom: 0; } .wc-block-product-template__responsive { grid-row-gap: 2rem; } .wc-block-components-product-button__button { z-index: 1; } /* * Adds offset for sticky header overlap */ .sticky-header-offset-container .entry-content > .wp-block-group { scroll-margin-top: var(--wp--preset--spacing--60); } /* * Avoids parent/child color collision when child has no custom background. */ :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background) { background-color: var(--wp--preset--color--background); } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background)::before { background-color: var(--wp--preset--color--background) !important; } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--image--"]:not(.has-background)::before { background-color: var(--wp--preset--color--tertiary) !important; } :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--group--"][class*="item-card-1"]::before, :not(.block-editor-block-preview__content-iframe) .has-tertiary-background-color.has-background [class*="is-style-ext-preset--media-text--"]::before { background-color: var(--wp--preset--color--background) !important; } .block-editor-block-preview__content-iframe [class*="is-style-ext-preset--group--natural-1"][class*="item-card-1"] { background-color: transparent !important; } :root { --grid-vector-bg: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQ0MCAxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIG9wYWNpdHk9IjAuMDkiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utb3BhY2l0eT0iMC43IiBzdHJva2Utd2lkdGg9IjEuMjYwNyI+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI2MjQuOTk1IiB4Mj0iMTQ2MC45NiIgeTI9IjYyNC45OTUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI5NDcuNzMzIiB4Mj0iMTQ2MC45NiIgeTI9Ijk0Ny43MzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzMDIuMjU2IiB4Mj0iMTQ2MC45NiIgeTI9IjMwMi4yNTYiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI0NjMuNjI0IiB4Mj0iMTQ2MC45NiIgeTI9IjQ2My42MjQiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI3ODYuMzYyIiB4Mj0iMTQ2MC45NiIgeTI9Ijc4Ni4zNjIiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIxNDAuODg1IiB4Mj0iMTQ2MC45NiIgeTI9IjE0MC44ODUiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI1NDQuMzExIiB4Mj0iMTQ2MC45NiIgeTI9IjU0NC4zMTEiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSI4NjcuMDQ5IiB4Mj0iMTQ2MC45NiIgeTI9Ijg2Ny4wNDkiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIyMjEuNTczIiB4Mj0iMTQ2MC45NiIgeTI9IjIyMS41NzMiIC8+CiAgICA8bGluZSB4MT0iLTUwLjYxNzIiIHkxPSIzODIuOTQiIHgyPSIxNDYwLjk2IiB5Mj0iMzgyLjk0IiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNzA1LjY4MiIgeDI9IjE0NjAuOTYiIHkyPSI3MDUuNjgyIiAvPgogICAgPGxpbmUgeDE9Ii01MC42MTcyIiB5MT0iNjAuMjAxNyIgeDI9IjE0NjAuOTYiIHkyPSI2MC4yMDE3IiAvPgogICAgPGxpbmUgeDE9IjY0Mi4xMzgiIHkxPSItNDguODQ3NyIgeDI9IjY0Mi4xMzgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjMxOS4zOTgiIHkxPSItNDguODQ3NyIgeDI9IjMxOS4zOTgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9Ijk2NC44NzQiIHkxPSItNDguODQ3NyIgeDI9Ijk2NC44NzQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEyODcuNjEiIHkxPSItNDguODQ3NyIgeDI9IjEyODcuNjEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjE1OC4wMjgiIHkxPSItNDguODQ3NyIgeDI9IjE1OC4wMjgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjgwMy41MDQiIHkxPSItNDguODQ3NyIgeDI9IjgwMy41MDQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjQ4MC43NjgiIHkxPSItNDguODQ3NyIgeDI9IjQ4MC43NjgiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjExMjYuMjQiIHkxPSItNDguODQ3NyIgeDI9IjExMjYuMjQiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9Ijc3LjM0NTIiIHkxPSItNDguODQ3NyIgeDI9Ijc3LjM0NTEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjcyMi44MjIiIHkxPSItNDguODQ3NyIgeDI9IjcyMi44MjIiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjQwMC4wODEiIHkxPSItNDguODQ3NyIgeDI9IjQwMC4wODEiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEwNDUuNTYiIHkxPSItNDguODQ3NyIgeDI9IjEwNDUuNTYiIHkyPSIxMTE4LjU2IiAvPgogICAgPGxpbmUgeDE9IjEzNjguMyIgeTE9Ii00OC44NDc3IiB4Mj0iMTM2OC4zIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSIyMzguNzE1IiB5MT0iLTQ4Ljg0NzciIHgyPSIyMzguNzE1IiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSI4ODQuMTkyIiB5MT0iLTQ4Ljg0NzciIHgyPSI4ODQuMTkyIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSI1NjEuNDUxIiB5MT0iLTQ4Ljg0NzciIHgyPSI1NjEuNDUxIiB5Mj0iMTExOC41NiIgLz4KICAgIDxsaW5lIHgxPSIxMjA2LjkzIiB5MT0iLTQ4Ljg0NzciIHgyPSIxMjA2LjkzIiB5Mj0iMTExOC41NiIgLz4KICA8L2c+CiAgPGcgb3BhY2l0eT0iMC41IiBmaWxsPSJjdXJyZW50Q29sb3IiPgogICAgPHJlY3QgeD0iODAzLjU2MyIgeT0iNzg2LjMwNSIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjQiIC8+CiAgICA8cmVjdCB4PSI0MDAuMTQiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjExMjYuNzYiIHk9IjIyMi40MyIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjA4IiAvPgogICAgPHJlY3QgeD0iNDgwLjM2NyIgeT0iNDY0LjIwMyIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjEzIiAvPgogICAgPHJlY3QgeD0iMTA0NS4zOSIgeT0iMzAyLjY1NiIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iNzkuMDgwMSIgZmlsbC1vcGFjaXR5PSIwLjAzIiAvPgogICAgPHJlY3QgeD0iMzk5Ljk5NCIgeT0iMjIyLjQzIiB3aWR0aD0iODAuMjI2MiIgaGVpZ2h0PSI3OS4wODAxIiBmaWxsLW9wYWNpdHk9IjAuMTMiIC8+CiAgICA8cmVjdCB4PSIxMDQ1LjM5IiB5PSIyMjIuNDMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjA4MDEiIGZpbGwtb3BhY2l0eT0iMC4wOCIgLz4KICAgIDxyZWN0IHg9IjM5OS45OTQiIHk9IjQ2NC4yMDMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjA4MDEiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjMxOS45MTQiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjMxOS45MTQiIHk9Ijg2Ni41MzEiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgxLjM3MjMiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjcwNi4wNzgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9Ijk2NS4xNjIiIHk9IjYwLjgzMiIgd2lkdGg9IjgwLjIyNjIiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjEzIiAvPgogICAgPHJlY3QgeD0iODg0LjA1OSIgeT0iLTE5Ljg1NTUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9Ijc5LjUwNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9Ijg4NC4wNTkiIHk9IjYwLjQwMjMiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjAyODUiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjEzOS45MSIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODIuNTE4NCIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iNzYuOTQzNCIgeT0iNTkuNjgzNiIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iLTMuMjgzMiIgeT0iNjAuODI4MSIgd2lkdGg9IjgxLjM3MjMiIGhlaWdodD0iODAuMjI2MiIgZmlsbC1vcGFjaXR5PSIwLjE4IiAvPgogICAgPHJlY3QgeD0iNzYuOTQzNCIgeT0iMTM5LjkxIiB3aWR0aD0iODEuMzcyMyIgaGVpZ2h0PSI4Mi41MTg0IiBmaWxsLW9wYWNpdHk9IjAuMTgiIC8+CiAgICA8cmVjdCB4PSI0MDAuMTQxIiB5PSItMjAuNTQzIiB3aWR0aD0iODEuMzcyMyIgaGVpZ2h0PSI4MC4yMjYyIiBmaWxsLW9wYWNpdHk9IjAuMiIgLz4KICAgIDxyZWN0IHg9IjE1OC4zMTUiIHk9IjMwMS41MDgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgxLjM3MjMiIGZpbGwtb3BhY2l0eT0iMC4xOCIgLz4KICAgIDxyZWN0IHg9IjExMjYuNzYiIHk9IjcwNi4wNzgiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICAgIDxyZWN0IHg9IjEyMDYuOTkiIHk9Ijc4Ni4zMDUiIHdpZHRoPSI4MC4yMjYyIiBoZWlnaHQ9IjgwLjIyNjIiIGZpbGwtb3BhY2l0eT0iMC4xMyIgLz4KICA8L2c+Cjwvc3ZnPg=="); } /* * CSS related to prism vibe */ /* * CSS related to wave vibe */ [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has( + .has-background-background-color > .wp-block-cover.alignfull )::after { content: none !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has( + .has-background-background-color > .wp-block-cover.alignfull ) { margin-bottom: 0 !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color::before { content: none !important; } [class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color { margin-top: 0 !important; } /* * utilities */ .m-0 { margin: 0 !important; } .z-0 { z-index: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .d-none { display: none; } .d-block { display: block; } @media (min-width: 640px) { .sm-d-none { display: none; } .sm-d-block { display: block; } } @media (min-width: 768px) { .md-d-none { display: none; } .md-d-block { display: block; } } @media (min-width: 1024px) { .lg-d-none { display: none; } .lg-d-block { display: block; } } /* RTL-only fix for Gutenberg Group left justification */ [dir="rtl"] [class*="wp-container-core-group-is-layout-"].ext-is-logical-start.is-content-justification-left > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-inline-start: 0 !important; margin-inline-end: auto !important; } .no-underline, .no-underline a { text-decoration: none; } /* CSS for extendify-agent vibe previews */ .extendify-agent .preview-is-style-ext-preset--group--matrix-1--section .preview-is-style-ext-preset--group--matrix-1--item-card-1--align-center { border: solid 6px color-mix(in oklab, var(--wp--preset--color--foreground) 10%, transparent) !important; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section { --wave-ratio: 1440 / 80; overflow: visible; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center { position: relative; overflow: visible; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::after { content: ""; position: absolute; width: 150%; left: 50%; transform: translateX(-35%); aspect-ratio: var(--wave-ratio); background-color: var(--wp--preset--color--background); -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%; mask: var(--wave-mask) no-repeat center / 100% 100%; bottom: -1px; pointer-events: none; z-index: 1; } .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::before { content: ""; position: absolute; width: 150%; left: 50%; transform: translateX(-65%) scale(-1, -1); aspect-ratio: var(--wave-ratio); background-color: var(--wp--preset--color--background); -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%; mask: var(--wave-mask) no-repeat center / 100% 100%; top: -1px; pointer-events: none; z-index: 1; } /* * -------------------------------------------------------- * Modular Header System * -------------------------------------------------------- * * Layout (positioning): * - .ext-header-sticky → position: sticky + admin-bar handling * - .ext-header-overlay → hero section overlap (negative margin) * * Appearance: * - .ext-header-glass → static glassmorphism (bg + blur + radius) * - .ext-header--dark → dark color scheme: white text + dark scrim/glass tint * * Behavior: * - .ext-header-sticky--floating-pill → scroll-driven intensification of glass + layout shift * * Compositions: * - ext-header-sticky → just sticky, theme bg * - ext-header-overlay → overlay, transparent * - ext-header-overlay ext-header--dark → overlay + dark scrim + white text * - ext-header-sticky ext-header-glass → static glass header * - ext-header-sticky ext-header-glass ext-header--dark → static dark glass * - ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky--floating-pill → animated glass over hero * - + ext-header--dark on the above → animated DARK glass over hero */ :root { --ext-header-height: 96px; --ext-header-offset: 1rem; --ext-header-blur-start: 4px; --ext-header-blur-end: 12px; --ext-header-bg-opacity-start: 0.75; --ext-header-bg-opacity-end: 0.95; --ext-header-padding: 1.5rem; --ext-header-animation-distance: 100px; --ext-header-glass-tint-dark: #ffffff; --ext-header-dark-logo-filter: brightness(0) invert(1); } body { timeline-scope: --ext-hero-timeline; } /* =========================================================== Layout: ext-header-sticky =========================================================== */ header.wp-block-template-part:has(.ext-header-sticky) { position: sticky; top: 0; z-index: 12; } /* Default bg for sticky headers without glass. Glass headers leave the wrapper transparent so the inner glass element shows through. */ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)):not(.has-background) { background-color: var(--wp--preset--color--background); } body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) { top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)); } @media (max-width: 782px) { body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) { top:0; } } html:has(.ext-header-sticky) { scroll-padding-top: var(--ext-header-height); } /* =========================================================== Layout: ext-header-overlay (hero overlap) =========================================================== */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(:has(.ext-header-sticky)) { position: relative; top: 0; z-index: 12; } body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child { margin-top: calc(-1 * var(--ext-header-height)) !important; position: relative; z-index: 0; } /* Overlay over hero: wrapper goes transparent so the hero shows through. Reverts to default theme bg once .is-past-hero is added or on subpages without a hero. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(.is-past-hero):not(:has(.ext-header-glass)) { background-color: transparent; } /* =========================================================== Appearance: ext-header-glass (static glassmorphism) - --ext-header-glass-color-start: tint during the frosted/initial state - --ext-header-glass-color-end: tint at the solid/scrolled state - Static glass shows the end state (most readable) =========================================================== */ .ext-header-glass { --ext-header-glass-color-start: var(--wp--preset--color--background); --ext-header-glass-color-end: var(--wp--preset--color--background); } header.wp-block-template-part:has(.ext-header-glass) .ext-header-glass { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); border-radius: 1rem; overflow: hidden; } /* =========================================================== Color: ext-header--dark - Sets shared scrim/glass color variable - Wrapper gets white text when used with overlay or glass - Inner blocks reset their colors to inherit =========================================================== */ /* Dark variant only takes effect on pages with a fullscreen hero. On subpages, dark+glass falls back to the light glass defaults. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) .ext-header-glass.ext-header--dark { --ext-header-glass-color-start: var(--ext-header-glass-tint-dark); --ext-header-glass-color-end: var(--wp--preset--color--foreground); --ext-header-bg-opacity-start: 0.06; --ext-header-bg-opacity-end: 0.85; --ext-header-blur-start: 16px; --ext-header-blur-end: 24px; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-header-glass { border: 1px solid rgb(255 255 255 / 0.12); } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) { color: #fff; } /* Top-fade scrim on the hero's cover block — softer falloff than a header-bound gradient. Flat (non-nested) :has() check on body so the rule reliably matches on hero pages that use an overlay+dark header. Fades out via opacity once the smart-sticky JS adds .is-past-hero on the header, in sync with the header reverting to its default theme appearance. */ body:has(.ext-header-overlay.ext-header--dark) .ext-hero-section--full-screen .wp-block-cover::after { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(var(--ext-header-height) * 3); transition: opacity 300ms ease; background: linear-gradient( to bottom, rgb(0 0 0 / 0.50) 0%, rgb(0 0 0 / 0.25) 50%, rgb(0 0 0 / 0.05) 80%, rgb(0 0 0 / 0) 100% ); pointer-events: none; z-index: 1; } /* Past-hero: fade the scrim out so the hero image returns to its natural look, matching the header reverting to default theme bg + colors. */ body:has(header.wp-block-template-part.is-past-hero) .ext-hero-section--full-screen .wp-block-cover::after { opacity: 0; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) { color: #fff; } /* Inner-block dark overrides — fire only on hero pages with a dark backdrop. Overlay+dark drops out at .is-past-hero (header has reverted to default theme). Glass+dark keeps firing past-hero because the glass stays dark via its own animation. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *) { color: inherit; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *) { color: #fff !important; } /* Phone CTA: force white over the dark hero. Needed because the paragraph carries WP's wp-elements-* link-color rule (preset primary), which beats .has-text-color inheritance on the inner . Drops out at .is-past-hero so the phone reverts to theme. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *) { color: #fff !important; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg:not(.cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg:not(.cloned-for-mobile *) { fill: currentColor; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *), body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *) { filter: var(--ext-header-dark-logo-filter); } /* Nav-extras CTA: white pill + dark text for contrast against the dark hero scrim. Drops out at .is-past-hero so the button returns to its preset styling. */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link, body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link { background-color: #fefefe !important; color: #060606 !important; } /* Sticky non-glass headers: smooth shadow/bg transitions (toggle on .is-scrolled / .is-past-hero) */ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)) { transition: background-color 300ms ease, box-shadow 300ms ease; } /* Floating-pill: smooth the top change when .is-scrolled toggles, so the header doesn't snap up when scrolling past the admin bar. */ header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { transition: top 300ms ease; } /* Subpage elevation shadow: appears when user scrolls (no hero on the page) */ body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky):not(:has(.ext-header-glass)) { box-shadow: 0 4px 24px -8px oklch(from var(--wp--preset--color--foreground) l c h / 0.08); } /* Smart sticky transitions: smooth color/filter changes when toggling .is-past-hero */ header.wp-block-template-part:has(.ext-header--dark) { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, border-color 300ms ease; } header.wp-block-template-part:has(.ext-header--dark) :where(a, button, .wp-block-site-title, .wp-social-link) { transition: color 300ms ease; } header.wp-block-template-part:has(.ext-header--dark) .wp-block-site-logo { transition: filter 300ms ease; } /* Past-hero: any sticky+overlay gets solid theme bg + elevation shadow. Glass headers are excluded — they manage their own scroll visuals. */ header.wp-block-template-part.is-past-hero:has(.ext-header-sticky.ext-header-overlay):not(:has(.ext-header-glass)) { background-color: var(--wp--preset--color--background); box-shadow: 0 4px 24px -8px oklch(from var(--wp--preset--color--foreground) l c h / 0.08); } /* Past-hero on dark variant: also revert white text / inverted logo / forced social color */ header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) { color: var(--wp--preset--color--foreground); } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link) { color: inherit; } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-social-link { color: var(--wp--preset--color--foreground) !important; } header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-block-site-logo { filter: brightness(1) invert(0); } /* =========================================================== Hero timeline (for scroll-driven animations) =========================================================== */ @supports (animation-timeline: scroll()) { .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child { view-timeline: --ext-hero-timeline block; } } /* =========================================================== Behavior: ext-header-sticky--floating-pill - Layout shift: header wrapper goes transparent + constrained width - When combined with .ext-header-glass, animates glass intensity =========================================================== */ header.wp-block-template-part .ext-header-sticky--floating-pill.ext-animate { opacity: 1 !important; } header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { position: sticky; top: 0; z-index: 12; border-bottom: none; } body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { position: sticky; top: var(--ext-header-offset); max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto; background-color: transparent; padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left); } /* Initial glass state (over hero): override static glass-end with start values */ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); } body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px))); background-color: transparent; } @media (max-width: 782px) { body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px))); } body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky.ext-header-sticky--floating-pill) { top:var(--ext-header-offset); } } @supports (animation-timeline: scroll()) { body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) { max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left)); margin-left: auto; margin-right: auto; } @media (prefers-reduced-motion: no-preference) { body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: ext-header-glass-intensify linear both !important; animation-timeline: --ext-hero-timeline !important; animation-range: exit 0% exit 80% !important; } body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass { animation: ext-header-glass-intensify-no-hero linear forwards !important; animation-timeline: scroll() !important; animation-range: 0 var(--ext-header-animation-distance) !important; } } } @keyframes ext-header-glass-intensify { from { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); } to { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14); } } @keyframes ext-header-glass-intensify-no-hero { from { background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start)); backdrop-filter: blur(var(--ext-header-blur-start)); box-shadow: none; translate: 0 0; max-width: 100%; margin-inline: auto; } to { background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end)); backdrop-filter: blur(var(--ext-header-blur-end)); box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14); translate: 0 var(--ext-header-offset); max-width: var(--wp--style--global--wide-size); margin-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left); border-radius: 1rem; } } /* =========================================================== Vibe/gradient fix ----------------------------------------------------------- Vibe block-style variations (e.g. is-style-ext-preset--group--*--header-1--N) paint a background gradient on the header. That gradient fights every over-hero / glass-tint / dark-scrim treatment we apply to overlay or glass headers, because the glass and overlay rules set background-COLOR while the variation sets a background-IMAGE that paints on top. Override the variation's background-image specifically (not the whole `background:` shorthand). That lets each header keep working in its natural design: - overlay non-glass: gets transparent bg over hero, theme bg past hero - glass: gets the glass tint (light by default, dark when --dark is set) On non-overlay / non-glass headers the variation gradient stays as-is. =========================================================== */ .ext-header-overlay[class*="is-style-ext-preset--"], .ext-header-glass[class*="is-style-ext-preset--"] { background-image: none !important; } /* Temporary: a few template parts (e.g. no-title-sticky-header.html) wrap our header in another sticky
. Scope the fix to the three new headers (atlas-beacon, catalina-skyline, ceadar-peak) — they're the only ones using .ext-header-overlay, so older headers that intentionally rely on the wrapper's positioning aren't affected. display: contents removes the wrapper from layout entirely so its bg/border/sticky/box-shadow/ wp-container-* styles don't apply. Remove once the upstream template stops wrapping. */ header:has(> header.wp-block-template-part :where(.ext-header-overlay)) { display: contents; }