/* edd-blocks */ :root { --edd-blocks-light-grey: #eee; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* contact-form-7 */ .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; } .wpcf7 .hidden-fields-container { display: none; } .wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; /* Blue */ } .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; /* Green */ } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; /* Red */ } .wpcf7 form.spam .wpcf7-response-output { border-color: #f56e28; /* Orange */ } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; /* Yellow */ } .wpcf7-form-control-wrap { position: relative; } .wpcf7-not-valid-tip { color: #dc3232; /* Red */ font-size: 1em; font-weight: normal; display: block; } .use-floating-validation-tip .wpcf7-not-valid-tip { position: relative; top: -2ex; left: 1em; z-index: 100; border: 1px solid #dc3232; background: #fff; padding: .2em .8em; width: 24em; } .wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; } .wpcf7-list-item-label::before, .wpcf7-list-item-label::after { content: " "; } .wpcf7-spinner { visibility: hidden; display: inline-block; background-color: #23282d; /* Dark Gray 800 */ opacity: 0.75; width: 24px; height: 24px; border: none; border-radius: 100%; padding: 0; margin: 0 24px; position: relative; } form.submitting .wpcf7-spinner { visibility: visible; } .wpcf7-spinner::before { content: ''; position: absolute; background-color: #fbfbfc; /* Light Gray 100 */ top: 4px; left: 4px; width: 6px; height: 6px; border: none; border-radius: 100%; transform-origin: 8px 8px; animation-name: spin; animation-duration: 1000ms; animation-timing-function: linear; animation-iteration-count: infinite; } @media (prefers-reduced-motion: reduce) { .wpcf7-spinner::before { animation-name: blink; animation-duration: 2000ms; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } .wpcf7 [inert] { opacity: 0.5; } .wpcf7 input[type="file"] { cursor: pointer; } .wpcf7 input[type="file"]:disabled { cursor: default; } .wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; } .wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { direction: ltr; } .wpcf7-reflection > output { display: list-item; list-style: none; } .wpcf7-reflection > output[hidden] { display: none; } /* edd_all_access_css */ #edd-aa-login-modal-content #edd_login_form{margin-top:0}#edd-aa-login-modal-content #edd_login_form fieldset{margin-bottom:0}.edd-aa-login-purchase-normal-plus-aa-mode{margin-top:20px}#edd-aa-login-modal-content .edd-lost-password{margin-bottom:0!important}.edd-aa-buy-btns-wrapper>div:nth-child(n+2){margin-top:5px}.edd-aa-buy-instructions{display:block;margin-bottom:5px}.edd-aa-login-wrapper{margin-top:5px}.edd-aa-upcoming-end-date,.edd-aa-upcoming-start-date{display:block} /* edd-multi-currency */ .edd-multi-currency-selector-buttons form{display:flex;flex-wrap:wrap;gap:5px}.edd-multi-currency-button--selected{opacity:.6} /* generate-style */ blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0;border:0}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}progress{vertical-align:baseline}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}body,button,input,select,textarea{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;text-transform:none;font-size:17px;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}pre{background:rgba(0,0,0,.05);font-family:inherit;font-size:inherit;line-height:normal;margin-bottom:1.5em;padding:20px;overflow:auto;max-width:100%}blockquote{border-left:5px solid rgba(0,0,0,.05);padding:20px;font-size:1.2em;font-style:italic;margin:0 0 1.5em;position:relative}blockquote p:last-child{margin:0}table,td,th{border:1px solid rgba(0,0,0,.1)}table{border-collapse:separate;border-spacing:0;border-width:1px 0 0 1px;margin:0 0 1.5em;width:100%}td,th{padding:8px}th{border-width:0 1px 1px 0}td{border-width:0 1px 1px 0}hr{background-color:rgba(0,0,0,.1);border:0;height:1px;margin-bottom:40px;margin-top:40px}fieldset{padding:0;border:0;min-width:inherit}fieldset legend{padding:0;margin-bottom:1.5em}h1{font-size:42px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h2{font-size:35px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h3{font-size:29px;margin-bottom:20px;line-height:1.2em;font-weight:400;text-transform:none}h4{font-size:24px}h5{font-size:20px}h4,h5,h6{margin-bottom:20px}ol,ul{margin:0 0 1.5em 3em}ul{list-style:disc}ol{list-style:decimal}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}dt{font-weight:700}dd{margin:0 1.5em 1.5em}b,strong{font-weight:700}cite,dfn,em,i{font-style:italic}address{margin:0 0 1.5em}code,kbd,tt,var{font:15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{text-decoration:none}sub,sup{font-size:75%;height:0;line-height:0;position:relative;vertical-align:baseline}sup{bottom:1ex}sub{top:.5ex}small{font-size:75%}big{font-size:125%}figure{margin:0}table{margin:0 0 1.5em;width:100%}th{font-weight:700}img{height:auto;max-width:100%}button,input[type=button],input[type=reset],input[type=submit]{background:#55555e;color:#fff;border:1px solid transparent;cursor:pointer;-webkit-appearance:button;padding:10px 20px}input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid;border-radius:0;padding:10px 15px;max-width:100%}textarea{width:100%}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.wp-block-button .wp-block-button__link{font-size:inherit;line-height:inherit}.using-mouse :focus{outline:0}.using-mouse ::-moz-focus-inner{border:0}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin:0 auto}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.no-sidebar .entry-content .alignfull{margin-left:calc(-100vw / 2 + 100% / 2);margin-right:calc(-100vw / 2 + 100% / 2);max-width:100vw;width:auto}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}#primary[tabindex="-1"]:focus{outline:0}.main-navigation{z-index:100;padding:0;clear:both;display:block}.main-navigation a{display:block;text-decoration:none;font-weight:400;text-transform:none;font-size:15px}.main-navigation ul{list-style:none;margin:0;padding-left:0}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.main-navigation .main-nav>ul{display:flex;flex-wrap:wrap;align-items:center}.main-navigation li{position:relative}.main-navigation .menu-bar-items{display:flex;align-items:center;font-size:15px}.main-navigation .menu-bar-items a{color:inherit}.main-navigation .menu-bar-item{position:relative}.main-navigation .menu-bar-item.search-item{z-index:20}.main-navigation .menu-bar-item>a{padding-left:20px;padding-right:20px;line-height:60px}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.sidebar .main-navigation .menu-bar-items{margin:0 auto}.sidebar .main-navigation .menu-bar-items .search-item{order:10}.nav-align-center .inside-navigation{justify-content:center}.nav-align-center .main-nav>ul{justify-content:center}.nav-align-right .inside-navigation{justify-content:flex-end}.main-navigation ul ul{display:block;box-shadow:1px 1px 0 rgba(0,0,0,.1);float:left;position:absolute;left:-99999px;opacity:0;z-index:99999;width:200px;text-align:left;top:auto;transition:opacity 80ms linear;transition-delay:0s;pointer-events:none;height:0;overflow:hidden}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{line-height:normal;padding:10px 20px;font-size:14px}.main-navigation .main-nav ul li.menu-item-has-children>a{padding-right:0;position:relative}.main-navigation.sub-menu-left ul ul{box-shadow:-1px 1px 0 rgba(0,0,0,.1)}.main-navigation.sub-menu-left .sub-menu{right:0}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{left:auto;opacity:1;transition-delay:150ms;pointer-events:auto;height:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{left:100%;top:0}.main-navigation.sub-menu-left:not(.toggled) ul ul li.sfHover>ul,.main-navigation.sub-menu-left:not(.toggled) ul ul li:hover>ul{right:100%;left:auto}.nav-float-right .main-navigation ul ul ul{top:0}.menu-item-has-children .dropdown-menu-toggle{display:inline-block;height:100%;clear:both;padding-right:20px;padding-left:10px}.menu-item-has-children ul .dropdown-menu-toggle{padding-top:10px;padding-bottom:10px;margin-top:-10px}.sidebar .menu-item-has-children .dropdown-menu-toggle,nav ul ul .menu-item-has-children .dropdown-menu-toggle{float:right}.widget-area .main-navigation li{float:none;display:block;width:100%;padding:0;margin:0}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.sidebar .main-navigation.sub-menu-left ul li.sfHover ul,.sidebar .main-navigation.sub-menu-left ul li:hover ul{top:0;right:100%}.site-main .comment-navigation,.site-main .post-navigation,.site-main .posts-navigation{margin:0 0 2em;overflow:hidden}.site-main .post-navigation{margin-bottom:0}.paging-navigation .nav-next,.paging-navigation .nav-previous{display:none}.paging-navigation .nav-links>*{padding:0 5px}.paging-navigation .nav-links .current{font-weight:700}.nav-links>:first-child{padding-left:0}.site-header{position:relative}.inside-header{padding:20px 40px}.main-title{margin:0;font-size:25px;line-height:1.2em;word-wrap:break-word;font-weight:700;text-transform:none}.site-description{margin:0;line-height:1.5;font-weight:400;text-transform:none;font-size:15px}.site-logo{display:inline-block;max-width:100%}.site-header .header-image{vertical-align:middle}.inside-header{display:flex;align-items:center}.header-widget{margin-left:auto}.header-widget p:last-child{margin-bottom:0}.nav-float-right .header-widget{margin-left:20px}.nav-float-right #site-navigation{margin-left:auto}.nav-float-left #site-navigation{margin-right:auto;order:-10}.nav-float-left .header-widget{margin-left:0;margin-right:20px;order:-15}.header-aligned-center:not([class*=nav-float-]) .inside-header{justify-content:center;flex-direction:column;text-align:center}.header-aligned-center:not([class*=nav-float-]) .header-widget{margin-left:auto;margin-right:auto}.header-aligned-center:not([class*=nav-float-]) .inside-header>:not(:first-child){margin-top:1em}.header-aligned-right:not([class*=nav-float-]) .inside-header{justify-content:flex-end}.header-aligned-right:not([class*=nav-float-]) .header-widget{margin-right:auto;margin-left:0;order:-10}.site-branding-container{display:inline-flex;align-items:center;text-align:left;flex-shrink:0}.site-branding-container .site-logo{margin-right:1em}.sticky{display:block}.entry-header .gp-icon,.posted-on .updated{display:none}.byline,.entry-header .cat-links,.entry-header .comments-link,.entry-header .tags-links,.group-blog .byline,.single .byline{display:inline}footer.entry-meta .byline,footer.entry-meta .posted-on{display:block}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.page-links{clear:both;margin:0 0 1.5em}.archive .format-aside .entry-header,.archive .format-status .entry-header,.archive .format-status .entry-meta,.archive .format-status .entry-title,.blog .format-aside .entry-header,.blog .format-status .entry-header,.blog .format-status .entry-meta,.blog .format-status .entry-title{display:none}.archive .format-aside .entry-content,.archive .format-status .entry-content,.blog .format-aside .entry-content,.blog .format-status .entry-content{margin-top:0}.archive .format-status .entry-content p:last-child,.blog .format-status .entry-content p:last-child{margin-bottom:0}.entry-header,.site-content{word-wrap:break-word}.entry-title{margin-bottom:0}.author .page-header .page-title{display:flex;align-items:center}.author .page-header .avatar{margin-right:20px}.page-header .author-info>:last-child,.page-header>:last-child{margin-bottom:0}.entry-meta{font-size:85%;margin-top:.5em;line-height:1.5}footer.entry-meta{margin-top:2em}.cat-links,.comments-link,.tags-links{display:block}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}.wp-caption{margin-bottom:1.5em;max-width:100%;position:relative}.wp-caption img[class*=wp-image-]{display:block;margin:0 auto 0;max-width:100%}.wp-caption .wp-caption-text{font-size:75%;padding-top:5px;opacity:.8}.wp-caption img{position:relative;vertical-align:bottom}.wp-block-image figcaption{font-size:13px;text-align:center}.wp-block-gallery,ul.blocks-gallery-grid{margin-left:0}.wp-block-gallery .blocks-gallery-image figcaption,.wp-block-gallery .blocks-gallery-item figcaption{background:rgba(255,255,255,.7);color:#000;padding:10px;box-sizing:border-box}.gallery{margin-bottom:1.5em}.gallery-item{display:inline-block;text-align:center;vertical-align:top;width:100%}.gallery-columns-2 .gallery-item{max-width:50%}.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery-columns-4 .gallery-item{max-width:25%}.gallery-columns-5 .gallery-item{max-width:20%}.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery-columns-8 .gallery-item{max-width:12.5%}.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery-caption{display:block}.site-main .gallery{margin-bottom:1.5em}.gallery-item img{vertical-align:bottom}.gallery-icon{padding:5px}embed,iframe,object{max-width:100%}.wp-block-post-template{margin-left:0}.widget-area .widget{padding:40px}.widget select{max-width:100%}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{margin-bottom:30px;font-size:20px;line-height:1.5;font-weight:400;text-transform:none}.widget ol,.widget ul{margin:0}.widget .search-field{width:100%}.widget .search-form{display:flex}.widget .search-form button.search-submit{font-size:15px}.footer-widgets .widget{margin-bottom:30px}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{list-style-type:none;position:relative;margin-bottom:.5em}.widget ul li ul{margin-left:1em;margin-top:.5em}.wp-calendar-table{table-layout:fixed}.site-content{display:flex}.grid-container{margin-left:auto;margin-right:auto;max-width:1200px}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.both-left .inside-left-sidebar,.both-right .inside-left-sidebar{margin-right:10px}.both-left .inside-right-sidebar,.both-right .inside-right-sidebar{margin-left:10px}.one-container.both-right .site-main,.one-container.right-sidebar .site-main{margin-right:40px}.one-container.both-left .site-main,.one-container.left-sidebar .site-main{margin-left:40px}.one-container.both-sidebars .site-main{margin:0 40px 0 40px}.one-container.archive .post:not(:last-child):not(.is-loop-template-item),.one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:40px}.one-container .site-content{padding:40px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.no-sidebar .site-main{margin-left:0;margin-right:0}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers.both-left .site-main,.separate-containers.left-sidebar .site-main{margin-right:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.inside-page-header{padding:40px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.full-width-content .container.grid-container{max-width:100%}.full-width-content.no-sidebar.separate-containers .site-main{margin:0}.full-width-content.one-container .site-content,.full-width-content.separate-containers .inside-article{padding:0}.full-width-content .entry-content .alignwide{margin-left:0;width:auto;max-width:unset}.contained-content.one-container .site-content,.contained-content.separate-containers .inside-article{padding:0}.sidebar .grid-container{max-width:100%;width:100%}.both-left .is-left-sidebar,.both-sidebars .is-left-sidebar,.left-sidebar .sidebar{order:-10}.both-left .is-right-sidebar{order:-5}.both-right .is-left-sidebar{order:5}.both-right .is-right-sidebar,.both-sidebars .is-right-sidebar{order:10}.inside-site-info{display:flex;align-items:center;justify-content:center;padding:20px 40px}.site-info{text-align:center;font-size:15px}.post-image:not(:first-child){margin-top:2em}.featured-image{line-height:0}.separate-containers .featured-image{margin-top:20px}.separate-containers .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.one-container .inside-article>.featured-image{margin-top:0;margin-bottom:2em}.gp-icon{display:inline-flex;align-self:center}.gp-icon svg{height:1em;width:1em;top:.125em;position:relative;fill:currentColor}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.close-search .icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:nth-child(2){display:block}.entry-meta .gp-icon{margin-right:.6em;opacity:.7}nav.toggled .icon-arrow-left svg{transform:rotate(-90deg)}nav.toggled .icon-arrow-right svg{transform:rotate(90deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg{transform:rotate(180deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-left svg{transform:rotate(-270deg)}nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon.icon-arrow-right svg{transform:rotate(270deg)}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{padding:0 20px;line-height:60px;margin:0;font-weight:400;text-transform:none;font-size:15px;cursor:pointer}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{background-color:transparent;flex-grow:1;border:0;text-align:center}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:transparent}.has-menu-bar-items button.menu-toggle{flex-grow:0}nav.toggled ul ul.sub-menu{width:100%}.toggled .menu-item-has-children .dropdown-menu-toggle{padding-left:20px}.main-navigation.toggled .main-nav{flex-basis:100%;order:3}.main-navigation.toggled .main-nav>ul{display:block}.main-navigation.toggled .main-nav li{width:100%;text-align:left}.main-navigation.toggled .main-nav ul ul{transition:0s;visibility:hidden;box-shadow:none;border-bottom:1px solid rgba(0,0,0,.05)}.main-navigation.toggled .main-nav ul ul li:last-child>ul{border-bottom:0}.main-navigation.toggled .main-nav ul ul.toggled-on{position:relative;top:0;left:auto!important;right:auto!important;width:100%;pointer-events:auto;height:auto;opacity:1;display:block;visibility:visible;float:none}.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle{float:right}.mobile-menu-control-wrapper{display:none;margin-left:auto;align-items:center}.has-inline-mobile-toggle #site-navigation.toggled{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search{margin-top:1.5em}.has-inline-mobile-toggle #site-navigation.has-active-search .nav-search-active{position:relative}.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input{outline:auto}.nav-float-left .mobile-menu-control-wrapper{order:-10;margin-left:0;margin-right:auto;flex-direction:row-reverse}@media (max-width:768px){.hide-on-mobile{display:none!important}a,body,button,input,select,textarea{transition:all 0s ease-in-out}.inside-header{flex-direction:column;text-align:center}.site-header .header-widget{margin-top:1.5em;margin-left:auto;margin-right:auto;text-align:center}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{width:auto;order:initial}.is-left-sidebar+.is-right-sidebar .inside-right-sidebar{margin-top:0}.both-left .inside-left-sidebar,.both-left .inside-right-sidebar,.both-right .inside-left-sidebar,.both-right .inside-right-sidebar{margin-right:0;margin-left:0}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;display:block;margin-left:auto;margin-right:auto}.comment .children{padding-left:10px;margin-left:0}.entry-meta{font-size:inherit}.entry-meta a{line-height:1.8em}}@media (min-width:769px) and (max-width:1024px){.hide-on-tablet{display:none!important}}@media (min-width:1025px){.hide-on-desktop{display:none!important}} body{background-color:var(--base-2);color:var(--contrast);}a{color:var(--accent);}a:hover, a:focus, a:active{color:var(--contrast);}.wp-block-group__inner-container{max-width:1200px;margin-left:auto;margin-right:auto;}.site-header .header-image{width:140px;}:root{--contrast:#222222;--contrast-2:#575760;--contrast-3:#b2b2be;--base:#f0f0f0;--base-2:#f7f8f9;--base-3:#ffffff;--accent:#1e73be;}:root .has-contrast-color{color:var(--contrast);}:root .has-contrast-background-color{background-color:var(--contrast);}:root .has-contrast-2-color{color:var(--contrast-2);}:root .has-contrast-2-background-color{background-color:var(--contrast-2);}:root .has-contrast-3-color{color:var(--contrast-3);}:root .has-contrast-3-background-color{background-color:var(--contrast-3);}:root .has-base-color{color:var(--base);}:root .has-base-background-color{background-color:var(--base);}:root .has-base-2-color{color:var(--base-2);}:root .has-base-2-background-color{background-color:var(--base-2);}:root .has-base-3-color{color:var(--base-3);}:root .has-base-3-background-color{background-color:var(--base-3);}:root .has-accent-color{color:var(--accent);}:root .has-accent-background-color{background-color:var(--accent);}.top-bar{background-color:#636363;color:#ffffff;}.top-bar a{color:#ffffff;}.top-bar a:hover{color:#303030;}.site-header{background-color:var(--base-3);}.main-title a,.main-title a:hover{color:var(--contrast);}.site-description{color:var(--contrast-2);}.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{color:var(--contrast);}.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{color:var(--accent);}button.menu-toggle:hover,button.menu-toggle:focus{color:var(--contrast);}.main-navigation .main-nav ul li[class*="current-menu-"] > a{color:var(--accent);}.navigation-search input[type="search"],.navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus, .main-navigation .main-nav ul li.search-item.active > a, .main-navigation .menu-bar-items .search-item.active > a{color:var(--accent);}.main-navigation ul ul{background-color:var(--base);}.entry-title a{color:var(--contrast);}.entry-title a:hover{color:var(--contrast-2);}.entry-meta{color:var(--contrast-2);}.sidebar .widget{background-color:var(--base-3);}.footer-widgets{background-color:var(--base-3);}.site-info{background-color:var(--base-3);}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{color:var(--contrast);background-color:var(--base-2);border-color:var(--base);}input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="number"]:focus,textarea:focus,select:focus{color:var(--contrast);background-color:var(--base-2);border-color:var(--contrast-3);}button,html input[type="button"],input[type="reset"],input[type="submit"],a.button,a.wp-block-button__link:not(.has-background){color:#ffffff;background-color:#55555e;}button:hover,html input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover,a.button:hover,button:focus,html input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,a.button:focus,a.wp-block-button__link:not(.has-background):active,a.wp-block-button__link:not(.has-background):focus,a.wp-block-button__link:not(.has-background):hover{color:#ffffff;background-color:#3f4047;}a.generate-back-to-top{background-color:rgba( 0,0,0,0.4 );color:#ffffff;}a.generate-back-to-top:hover,a.generate-back-to-top:focus{background-color:rgba( 0,0,0,0.6 );color:#ffffff;}:root{--gp-search-modal-bg-color:var(--base-3);--gp-search-modal-text-color:var(--contrast);--gp-search-modal-overlay-bg-color:rgba(0,0,0,0.2);}@media (max-width:768px){.main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a{background:none;color:var(--contrast);}}.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding:0px 20px 0px 20px;}.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:0px;}.site-main .wp-block-group__inner-container{padding:0px;}.separate-containers .paging-navigation{padding-top:20px;padding-bottom:20px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-0px;width:calc(100% + 0px);max-width:calc(100% + 0px);}.one-container.right-sidebar .site-main,.one-container.both-right .site-main{margin-right:0px;}.one-container.left-sidebar .site-main,.one-container.both-left .site-main{margin-left:0px;}.one-container.both-sidebars .site-main{margin:0px;}.sidebar .widget, .page-header, .widget-area .main-navigation, .site-main > *{margin-bottom:0px;}.separate-containers .site-main{margin:0px;}.both-right .inside-left-sidebar,.both-left .inside-left-sidebar{margin-right:0px;}.both-right .inside-right-sidebar,.both-left .inside-right-sidebar{margin-left:0px;}.one-container.archive .post:not(:last-child):not(.is-loop-template-item), .one-container.blog .post:not(:last-child):not(.is-loop-template-item){padding-bottom:0px;}.separate-containers .featured-image{margin-top:0px;}.separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar{margin-top:0px;margin-bottom:0px;}.rtl .menu-item-has-children .dropdown-menu-toggle{padding-left:20px;}.rtl .main-navigation .main-nav ul li.menu-item-has-children > a{padding-right:20px;}@media (max-width:768px){.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header{padding:30px;}.site-main .wp-block-group__inner-container{padding:30px;}.inside-top-bar{padding-right:30px;padding-left:30px;}.inside-header{padding-right:30px;padding-left:30px;}.widget-area .widget{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.footer-widgets-container{padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;}.inside-site-info{padding-right:30px;padding-left:30px;}.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull{margin-left:-30px;width:calc(100% + 60px);max-width:calc(100% + 60px);}.one-container .site-main .paging-navigation{margin-bottom:0px;}}/* End cached CSS */.is-right-sidebar{width:30%;}.is-left-sidebar{width:30%;}.site-content .content-area{width:100%;}@media (max-width:768px){.main-navigation .menu-toggle,.sidebar-nav-mobile:not(#sticky-placeholder){display:block;}.main-navigation ul,.gen-sidebar-nav,.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul,.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none;}.nav-align-right .inside-navigation,.nav-align-center .inside-navigation{justify-content:space-between;}} .dynamic-author-image-rounded{border-radius:100%;}.dynamic-featured-image, .dynamic-author-image{vertical-align:middle;}.one-container.blog .dynamic-content-template:not(:last-child), .one-container.archive .dynamic-content-template:not(:last-child){padding-bottom:0px;}.dynamic-entry-excerpt > p:last-child{margin-bottom:0px;} .post-image:not(:first-child), .page-content:not(:first-child), .entry-content:not(:first-child), .entry-summary:not(:first-child), footer.entry-meta{margin-top:0em;}.post-image-above-header .inside-article div.featured-image, .post-image-above-header .inside-article div.post-image{margin-bottom:0em;} /* generate-child */ /* Theme Name: GeneratePress Child Theme URI: https://puregpl.com/ Description: Child theme for GeneratePress Author: Varun Haldhar Author URI: https://puregpl.com/ Template: generatepress Version: 1.0.0 Text Domain: generatepress-child */ /* You can add custom CSS below this line */ :root { /* Neutrals */ --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-600: #4B5563; --gray-700: #374151; --gray-900: #111827; /* Gradients */ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-gold: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%); --gradient-emerald: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%); --gradient-hero: linear-gradient(135deg, #1a0b2e 0%, #6B46C1 50%, #9333EA 100%); --gradient-pink: linear-gradient(135deg, #EC4899 0%, #F472B6 100%); /* Typography */ --font-display: 'Inter', -apple-system, system-ui, sans-serif; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; --spacing-3xl: 6rem; /* Effects */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); /* Animations */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* pgpl-chrome */ /** * PureGPL — site chrome. * * "Ultramarine Ledger", the same tokens as checkout.css and receipt.css, so the * header a buyer sees on the homepage is the header they see at checkout. * * Tokens are declared on :root here rather than on a wrapper, because the * header and footer are two separate elements at opposite ends of the document. */ :root { --pgpl-ink: #0f1222; --pgpl-ink-soft: #3d4260; --pgpl-muted: #6a7091; --pgpl-paper: #fcfcfa; --pgpl-surface: #fff; --pgpl-line: #dde0ec; --pgpl-line-strong: #c3c8dd; --pgpl-ultra: #2436e4; --pgpl-ultra-deep: #1b29b8; --pgpl-wash: #eef1ff; --pgpl-night: #10132a; --pgpl-night-soft: #1b2040; /* Aurora surfaces: a near-black utility strip over a deep navy command bar. */ --pgpl-aurora: #0b0e1c; --pgpl-aurora-deep: #070915; --pgpl-aurora-panel: #0f1324; --pgpl-glow: rgba(108, 134, 255, 0.5); } /* --------------------------------------------------------------------------- * Header * ------------------------------------------------------------------------ */ /* * "Aurora Rail" — the header is a dark surface with one soft light source. * * Everything inside inherits a light colour from here, which is what lets the * wordmark, the actions and the drawer share markup with the light footer * without a single duplicated element. */ .pgpl-hd { position: sticky; top: 0; z-index: 200; color: rgba(255, 255, 255, 0.82); background: var(--pgpl-aurora); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } /* * The admin bar is position:fixed and would sit on top of a sticky header. * WordPress only adds this class when the bar is actually showing. * * All three of its states have to be matched, because the bar changes both * height and positioning scheme as the viewport narrows. With only the 32px * desktop offset, a logged-in editor got a 14px overlap between 601 and 782px * — where the bar is 46px — and, below 600px where the bar stops being fixed * and scrolls away, a permanent 32px hole above the header. */ .admin-bar .pgpl-hd { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .pgpl-hd { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar .pgpl-hd { top: 0; } } .pgpl-hd *, .pgpl-hd *::before, .pgpl-hd *::after, .pgpl-drawer *, .pgpl-ft *, .pgpl-ft *::before, .pgpl-ft *::after { box-sizing: border-box; } /* * --------------------------------------------------------------------------- * Link-colour guard — read this before adding any anchor to the chrome * --------------------------------------------------------------------------- * * GeneratePress ships `a:hover, a:focus, a:active { color: var(--contrast) }` * inline. On this site --contrast is #222, so EVERY link in the chrome turns * near-black on hover unless something outruns that rule. * * Its specificity is (0,1,1) — one pseudo-class plus one element — which quietly * beats a plain single-class selector like `.pgpl-drawer__updates` at (0,1,0). * It caught the header logo, two drawer controls, the footer wordmark, and most * recently the drawer's changelog chip, whose label dropped to 1.03:1 against * its own background while the timestamp beside it stayed lit, because that * span happened to carry its own colour. * * Patching each anchor as it surfaced was the wrong approach: the next one added * to this file would simply have been the fifth. This guard covers the whole of * the chrome at (0,2,1) — enough to beat GeneratePress, and low enough that any * component rule using two classes still wins and can choose its own colour. * * White is the correct default here: the chrome is dark everywhere it renders. * * Placed EARLY on purpose. A handful of existing rules — `.pgpl-hd__col-list * a:hover`, for one — tie this at (0,2,1), and on a tie the later rule wins. * Moving this block down the file would silently take those overrides away. * * `:visited` is deliberately NOT in this list, and must not be added back. * GeneratePress only forces a colour on :hover/:focus/:active, so :visited was * never being defended against — it was volunteering, and at (0,2,1) it outranked * every component that sets its own resting colour. Two of them are WHITE * surfaces: the active currency pill and the "See plans" button both went white * text on white and disappeared the moment their URL had been visited. It also * lit every visited link in the drawer and footer to full white while unvisited * siblings sat at 50-78%, so visited rows read as "you are here" and drowned out * the real `is-current` marker. Author colours already beat the browser's own * :visited style, so removing this costs nothing. */ .pgpl-hd a:hover, .pgpl-hd a:focus, .pgpl-hd a:active, .pgpl-drawer a:hover, .pgpl-drawer a:focus, .pgpl-drawer a:active, .pgpl-ft a:hover, .pgpl-ft a:focus, .pgpl-ft a:active { color: #fff; } .pgpl-hd__wrap { display: flex; gap: 1rem; align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 max(1rem, env(safe-area-inset-left)); } .pgpl-hd__icon { flex: 0 0 auto; } /* --- Utility band --------------------------------------------------------- */ /* Darker than the command bar, so it reads as a sub-band rather than a stripe. */ .pgpl-hd__utility { color: rgba(255, 255, 255, 0.62); background: var(--pgpl-aurora-deep); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.8rem; } .pgpl-hd__utility .pgpl-hd__wrap { justify-content: space-between; min-height: 2.25rem; } /* * The changelog link, as a status chip rather than a line of grey text. * * It was the least visible thing in the header despite pointing at the one page * that answers "is this store alive?" — the question every GPL buyer has. A * bordered chip with a live dot and a real timestamp answers it before the * click. */ .pgpl-hd__updates { display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.28rem 0.7rem 0.28rem 0.6rem; color: rgba(255, 255, 255, 0.85); text-decoration: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .pgpl-hd .pgpl-hd__updates:hover, .pgpl-hd .pgpl-hd__updates:focus { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } .pgpl-hd__updates-label { font-weight: 600; } /* The timestamp is supporting detail; it must not compete with the label. */ .pgpl-hd__updates-when { padding-left: 0.5rem; color: rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.14); } .pgpl-hd__updates-arrow { transition: transform 0.16s ease; } .pgpl-hd__updates:hover .pgpl-hd__updates-arrow, .pgpl-hd__updates:focus .pgpl-hd__updates-arrow { transform: translateX(2px); } /* --- The live dot --------------------------------------------------------- */ .pgpl-hd__pulse { position: relative; flex: 0 0 7px; width: 7px; height: 7px; background: #4ade80; border-radius: 50%; } /* * The halo is a separate ::after so only IT animates. Pulsing the dot itself * would move the text beside it on every cycle. */ .pgpl-hd__pulse::after { content: ""; position: absolute; inset: -3px; background: rgba(74, 222, 128, 0.45); border-radius: 50%; animation: pgpl-pulse 2.4s ease-out infinite; } @keyframes pgpl-pulse { 0% { transform: scale(0.6); opacity: 0.8; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } /* * A dot that pulses forever is exactly the kind of persistent motion that * triggers vestibular symptoms. Reduced motion gets a static halo — the state * is still legible, it simply stops moving. */ @media (prefers-reduced-motion: reduce) { .pgpl-hd__pulse::after { animation: none; opacity: 0.35; } } /* * There is no narrow-phone rule for the timestamp, and there cannot usefully be * one: a `@media (max-width: 30rem)` block used to hide .pgpl-hd__updates-when * here, but the entire utility band is already `display: none` from 60rem down, * so it could never once have applied. The drawer carries the freshness chip on * phones instead, under its own class. */ .pgpl-hd__utility-right { display: flex; gap: 0.9rem; align-items: center; } .pgpl-hd__count strong { color: #fff; font-variant-numeric: tabular-nums; } .pgpl-hd__currency { display: inline-flex; gap: 2px; padding: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; } .pgpl-hd__chip { padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.75); text-decoration: none; border-radius: 999px; transition: background-color 0.15s ease, color 0.15s ease; } .pgpl-hd__chip:hover, .pgpl-hd__chip:focus { color: #fff; } /* ...but never on the active pill, which is white. */ .pgpl-hd__chip.is-active:hover, .pgpl-hd__chip.is-active:focus { color: var(--pgpl-ink); } .pgpl-hd__chip.is-active { color: var(--pgpl-ink); background: #fff; } /* --- Command band --------------------------------------------------------- */ /* * Taller than a normal header row on purpose. This band IS the navigation now, * and the search field inside it has to read as the primary control rather than * as one more thing wedged between the logo and the account links. */ .pgpl-hd__command { position: relative; } /* * The clip lives on the glow's own layer, not on the band. * * `overflow: hidden` here was containing the decoration below — and clipping * every absolutely positioned descendant with it, including Ajax Search Pro's * floating results panel, which renders as an overlay beneath the field. The * suggestions were being cut off at the bottom edge of the band, on the one * control this entire header is built around. */ .pgpl-hd__glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* * The aurora. ONE light source, top-right, at low opacity — a single soft glow * reads as atmosphere; two or more read as a gradient mesh, which dates fast * and fights everything placed on top of it. * * `padding-top` rather than `aspect-ratio`: the height has to come from the * width either way, and on a browser without aspect-ratio support this element * is the only thing painting the glow — it would collapse to nothing. */ .pgpl-hd__glow::after { content: ""; position: absolute; top: -320%; right: -6%; width: 46%; height: 0; padding-top: 46%; background: radial-gradient(circle, var(--pgpl-glow) 0%, rgba(108, 134, 255, 0) 66%); pointer-events: none; } .pgpl-hd__command .pgpl-hd__wrap { position: relative; z-index: 1; min-height: 5rem; gap: 1.25rem; } .pgpl-hd__brand { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; } /* * Ajax Search Pro renders its own markup and is deliberately left alone — * restyling a search plugin's internals from the outside breaks on its next * update. Only the container is sized. */ .pgpl-hd__search { position: relative; flex: 1 1 auto; min-width: 0; } .pgpl-hd__search > * { max-width: none; } /* * A WHITE field on the dark bar, not a glass one. * * This used to be scoped to an Ajax Search Pro variant, because ASP rendered its * own input with no surface of its own while the fallback form brought one — and * painting both nested a white box inside a grey one. ASP is gone; the form below * is the only search there is, so it simply IS the field. * * White rather than glass because it makes search the brightest object in a dark * bar, which is where the emphasis belongs on a shop whose catalogue is too large * to browse. */ /* * A pill, like everything else in this bar. * * The field used to be a 12px rectangle sitting between a 999px Browse pill and * two 999px action pills — the only squared object in a header built entirely * from round ones, which read as unfinished rather than deliberate. Matching the * radius costs nothing and makes the bar look designed rather than assembled. * * Depth comes from two soft layers instead of one heavy drop: a hairline that * defines the edge against the dark bar, and a wide, very soft shadow that lifts * it. A single strong shadow reads as a sticker; two quiet ones read as glass on * a surface. */ .pgpl-hd__fallback { position: relative; display: flex; gap: 0.6rem; align-items: center; max-width: none; padding: 0 0.3rem 0 1.15rem; background: #fff; border: 0; border-radius: 999px; box-shadow: 0 1px 2px rgba(11, 14, 28, 0.16), 0 14px 30px -18px rgba(0, 0, 0, 0.8); transition: box-shadow 0.18s ease; } .pgpl-hd__fallback:focus-within { box-shadow: 0 0 0 3px rgba(108, 134, 255, 0.42), 0 1px 2px rgba(11, 14, 28, 0.16), 0 14px 30px -18px rgba(0, 0, 0, 0.8); } /* * The LEADING icon only — note the child combinator. * * The submit button carries the same icon class, so a descendant selector here * tints that one too: at rest it went muted grey on ultramarine, and on focus it * turned ultramarine on ultramarine and disappeared entirely. The button owns * its own colour and must keep it. */ .pgpl-hd__fallback > .pgpl-hd__icon { color: var(--pgpl-muted); transition: color 0.18s ease; } .pgpl-hd__fallback:focus-within > .pgpl-hd__icon { color: var(--pgpl-ultra); } .pgpl-hd__fallback input[type="search"] { flex: 1 1 auto; min-width: 0; height: 3.1rem; padding: 0; font-family: inherit; font-size: 0.95rem; color: var(--pgpl-ink); background: transparent; border: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; } /* Chrome draws its own clear button on type=search; it collides with ours. */ .pgpl-hd__fallback input[type="search"]::-webkit-search-decoration, .pgpl-hd__fallback input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .pgpl-hd__fallback input[type="search"]::placeholder { color: var(--pgpl-muted); opacity: 1; } /* --- The keyboard hint ---------------------------------------------------- */ /* * Quiet by default and gone the moment it stops being useful. * * It is an affordance, not a control: it should be findable by someone looking * for it and invisible to everyone else. So it sits at the muted end of the * palette, and it leaves as soon as the field is focused — at which point the * shortcut has already done its job and the hint is just something in the way of * what you are typing. */ .pgpl-hd__kbd { flex: 0 0 auto; padding: 0.24rem 0.5rem; font-family: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; /* * Not --pgpl-muted. At 10.9px on this 5%-ink chip that token measures * 4.36:1 — under the 4.5 WCAG asks of small text, and axe flags it. The * chip is meant to be quiet, but quiet has a floor. */ color: #54597a; background: rgba(11, 14, 28, 0.05); border: 1px solid rgba(11, 14, 28, 0.08); border-radius: 7px; white-space: nowrap; transition: opacity 0.15s ease; } .pgpl-hd__fallback:focus-within .pgpl-hd__kbd { opacity: 0; pointer-events: none; } /* * No modifier key on a touch screen, so no hint. Gated on the pointer rather * than on width: a tablet with a keyboard is still a keyboard. */ @media (hover: none), (pointer: coarse) { .pgpl-hd__kbd { display: none; } } /* --- Submit --------------------------------------------------------------- */ /* * A circle inside a pill, inset evenly on all four sides. * * The plugin this replaces sat its button 5px from the top and bottom of the * field but 1px from the right edge, at a 9px radius inside a 12px one — three * mismatches that together made it look dropped in rather than built in. */ .pgpl-hd__go { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: #fff; cursor: pointer; background: var(--pgpl-ultra); border: 0; border-radius: 999px; transition: background-color 0.15s ease, transform 0.12s ease; } @media (hover: hover) and (pointer: fine) { .pgpl-hd__go:hover { background: var(--pgpl-ultra-deep); } } .pgpl-hd__go:active { transform: scale(0.94); } .pgpl-hd__go:focus-visible { outline: 2px solid var(--pgpl-ultra); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .pgpl-hd__go:active { transform: none; } } /* --- Actions -------------------------------------------------------------- */ .pgpl-hd__actions { display: flex; flex: 0 0 auto; gap: 0.35rem; align-items: center; } .pgpl-hd__action { position: relative; display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.5rem 0.7rem; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); text-decoration: none; /* * Fully rounded, which resolves to a pill on desktop (where the control * carries a label) and a circle on mobile (where it is a 42px square holding * an 18px icon). The old 9px corners made these the only squared controls in * a header built from 999px pills and 12-14px cards — beside the Browse * button's pill they read as unfinished rather than deliberate. */ border-radius: 999px; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } /* * Hover is for pointers only. * * On a touch screen there is no "unhover": tapping an icon latches :hover and * the highlight stays painted until something else is tapped. Combined with * :focus doing the same thing, two icons could sit lit at once — which is what * made the bar look broken. Gating on `hover: hover` means a phone never enters * the state at all. */ @media (hover: hover) and (pointer: fine) { .pgpl-hd__action:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } } /* Keyboard focus still needs to be visible — but not a mere tap. */ .pgpl-hd__action:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.07); } /* * Touch feedback: a press that ends when the finger lifts. This is what :hover * was standing in for on mobile, without the part where it gets stuck. */ .pgpl-hd__action:active { background: rgba(255, 255, 255, 0.13); transform: scale(0.94); } .pgpl-hd__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; font-size: 0.68rem; font-weight: 700; line-height: 1; color: #fff; background: var(--pgpl-ultra); border-radius: 999px; font-variant-numeric: tabular-nums; } /* * Lifted out of the flow, which is what the `position: relative` on * .pgpl-hd__action was always for — that rule sat there for months with nothing * positioned against it. * * In flow the badge is a third flex child, and on mobile the action collapses to * a 42px square with `padding: 0`: an 18px icon plus a 6.4px gap plus an 18.4px * badge is 42.8px of content in a 42px box before the count even reaches two * digits, so it burst its own circle and crowded the burger beside it. */ /* * On desktop the badge stays IN FLOW — a third flex child after the label, so * the control reads "cart · Cart · (1)" on one line. It is lifted out of the * flow only on mobile, in the narrow-screen block near the end of this file, * where the label is clipped and the control is a 44px square. Pinning it at * every width put a filled circle on top of the word "Cart". */ /* * On the drawer's solid CTA the badge was ultramarine on ultramarine — the same * token for both — so the pill vanished and the count read as loose white text * beside the word "Cart". White pill, blue number: the same object, inverted. */ .pgpl-drawer__btn--solid .pgpl-hd__badge { color: var(--pgpl-ultra-deep); background: #fff; } .pgpl-hd__burger { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: #fff; cursor: pointer; background: transparent; border: 0; border-radius: 999px; transition: background-color 0.15s ease, transform 0.1s ease; } @media (hover: hover) and (pointer: fine) { .pgpl-hd__burger:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } } .pgpl-hd__burger:focus-visible { background: rgba(255, 255, 255, 0.07); } .pgpl-hd__burger:active { background: rgba(255, 255, 255, 0.13); transform: scale(0.94); } /* --- Account menu --------------------------------------------------------- */ /* * The signed-in dropdown. * * It escapes the command band, which it could not have done before the aurora * glow was moved onto its own clipping layer — the band used to carry * `overflow: hidden` and would have sliced this panel off at its bottom edge, * the same way it was slicing the search suggestions. */ .pgpl-hd__acct { position: relative; flex: 0 0 auto; } /* * The phone's copy of the Account control, hidden wherever the dropdown shows. * Two elements rather than one that changes role at a breakpoint: a link and a * disclosure are different things, and `display: none` keeps whichever is not * in play out of the accessibility tree entirely. */ .pgpl-hd__action--compact { display: none; } .pgpl-hd__acct-toggle { cursor: pointer; background: none; border: 0; font-family: inherit; font-size: 0.85rem; font-weight: 600; } .pgpl-hd__acct-toggle svg:last-child { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.18s ease; } .pgpl-hd__acct-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); } /* * The initials chip, which is what makes this read as "you" rather than as one * more icon. Ultramarine so it belongs to the brand, and the only saturated * object in the bar apart from the search button. */ .pgpl-hd__acct-chip { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; background: linear-gradient(150deg, var(--pgpl-ultra), var(--pgpl-ultra-deep)); border-radius: 9px; } .pgpl-hd__acct-chip--lg { width: 40px; height: 40px; font-size: 0.95rem; border-radius: 12px; } .pgpl-hd__acct-menu[hidden] { display: none; } .pgpl-hd__acct-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; /* * Sized to what is in it, within bounds. * * A flat 19rem was set while the membership badge still shared the identity * row; once that went, the widest thing in here measured 201px inside a * 304px panel — ninety pixels of empty right-hand side that made the menu * look unfinished. max-content lets the address decide the width, the floor * stops a short name collapsing it to a sliver, and the ceiling both caps a * long address (which then ellipses, as it already did) and keeps the panel * on screen at any viewport. */ width: max-content; min-width: 14rem; max-width: min(20rem, calc(100vw - 2rem)); padding: 0.45rem; background: var(--pgpl-aurora-panel); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; /* Two shadows: a hairline lift that separates it from the bar, and a long soft one that puts it convincingly in front of the page. */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 60px -22px rgba(0, 0, 0, 0.85); opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; } .pgpl-hd__acct-menu.is-open { opacity: 1; transform: translateY(0); } /* --- Identity row --------------------------------------------------------- */ .pgpl-hd__acct-id { display: flex; gap: 0.65rem; align-items: center; padding: 0.7rem 0.7rem 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pgpl-hd__acct-id-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.15rem; min-width: 0; } .pgpl-hd__acct-id-text strong { font-size: 0.9rem; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* An address is long and is not the point — it confirms which account this is. */ .pgpl-hd__acct-mail { font-size: 0.75rem; color: rgba(255, 255, 255, 0.62); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* --- Menu rows ------------------------------------------------------------ */ /* The divider lives on the list, not on the log-out row — a border there would sit inside that row's own hover pill and read as a seam across it. */ .pgpl-hd__acct-nav ul { margin: 0.45rem 0; padding: 0 0 0.45rem; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pgpl-hd__acct-nav a, .pgpl-hd__acct-out { display: flex; gap: 0.65rem; align-items: center; min-height: 40px; padding: 0 0.7rem; font-size: 0.86rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); text-decoration: none; border-radius: 11px; transition: color 0.15s ease, background-color 0.15s ease; } .pgpl-hd__acct-nav a svg, .pgpl-hd__acct-out svg { flex: 0 0 auto; opacity: 0.72; } /* * Gated on pointer type, like everything else in this file that highlights: * a tap on a touch screen has no "unhover" and would leave a row lit. */ @media (hover: hover) and (pointer: fine) { .pgpl-hd .pgpl-hd__acct-nav a:hover, .pgpl-hd .pgpl-hd__acct-out:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } } .pgpl-hd .pgpl-hd__acct-nav a:focus-visible, .pgpl-hd .pgpl-hd__acct-out:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); } .pgpl-hd .pgpl-hd__acct-nav a:active, .pgpl-hd .pgpl-hd__acct-out:active { background: rgba(255, 255, 255, 0.13); } /* * Log out sits below a rule and reads cooler than the navigation above it. It * is the one item here that ends the session rather than going somewhere, and * it should not be the thing a hurried cursor lands on by accident. */ .pgpl-hd__acct-out { color: rgba(255, 255, 255, 0.62); } .pgpl-hd__acct-out svg { opacity: 0.6; } /* --- Browse button + panel ------------------------------------------------ */ .pgpl-hd__browse { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.55rem 0.95rem; font-family: inherit; font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); cursor: pointer; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .pgpl-hd__browse:hover { color: #fff; background: rgba(255, 255, 255, 0.16); } /* Inverted while open, so the button reads as part of the panel it controls. */ .pgpl-hd__browse[aria-expanded="true"] { color: var(--pgpl-aurora); background: #fff; border-color: #fff; } /* The chevron flips to point at the panel it opened. */ .pgpl-hd__browse svg:last-child { transition: transform 0.18s ease; } .pgpl-hd__browse[aria-expanded="true"] svg:last-child { transform: rotate(180deg); } .pgpl-hd__panel[hidden] { display: none; } /* The panel continues the bar's surface — a white sheet under a dark bar reads as a different component that happened to open, not as the bar extending. */ .pgpl-hd__panel { border-top: 1px solid rgba(255, 255, 255, 0.07); background: var(--pgpl-aurora-panel); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.9); /* Animated open; the [hidden] attribute is removed a frame earlier by JS. */ opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease; } .pgpl-hd__panel.is-open { opacity: 1; transform: translateY(0); } .pgpl-hd__panel .pgpl-hd__wrap { display: block; } .pgpl-hd__panel-grid { display: grid; /* Wider minimum: 10rem let six tracks form for four columns, and the two empty ones collapsed to 0px while the filled ones stayed narrow. */ grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem 2.5rem; padding: 2.25rem 0 2.5rem; align-items: start; } /* A hairline under each heading gives the columns a shared baseline to sit on. */ .pgpl-hd__col-title { display: block; padding-bottom: 0.7rem; margin-bottom: 0.7rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } a.pgpl-hd__col-title:hover, a.pgpl-hd__col-title:focus { color: #fff; } .pgpl-hd__col-list { margin: 0; padding: 0; list-style: none; } .pgpl-hd__col-list li { margin: 0 0 0.15rem; } .pgpl-hd__col-list a { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem 0.6rem; margin-left: -0.6rem; font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); text-decoration: none; border-radius: 8px; /* transform is animated, not margin — margin would reflow the column. */ transition: color 0.14s ease, background-color 0.14s ease, transform 0.14s ease; } .pgpl-hd__col-list a:hover, .pgpl-hd__col-list a:focus { color: #fff; background: rgba(255, 255, 255, 0.08); transform: translateX(3px); } /* * The icon tile. * * Every link gets one, and every tile is the same size whether it holds an SVG * or a single letter — that shared footprint is what makes the column read as a * list rather than as ragged text. The monogram is a feature, not a fallback: * eleven CMS names have no meaningful shared icon, and repeating one generic * glyph eleven times reads as a bug. */ .pgpl-hd__ico { display: grid; flex: 0 0 1.6rem; place-items: center; width: 1.6rem; height: 1.6rem; font-size: 0.7rem; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 7px; transition: color 0.14s ease, background-color 0.14s ease, border-color 0.14s ease; } .pgpl-hd__ico svg { width: 14px; height: 14px; } .pgpl-hd__col-list a:hover .pgpl-hd__ico, .pgpl-hd__col-list a:focus .pgpl-hd__ico { color: #fff; background: var(--pgpl-ultra); border-color: var(--pgpl-ultra); } /* --- Membership card ------------------------------------------------------ */ /* * The only thing in the panel that is selling rather than navigating, so it is * the only thing given colour, depth and a border. * * Depth comes from four stacked layers, not one gradient: a deep navy base, a * diagonal ultramarine wash, a soft radial highlight top-right, and a 1px * inset white line that reads as a lit edge. A single two-stop gradient is what * makes a card look like a coloured rectangle instead of an object. */ .pgpl-hd__promo { position: relative; overflow: hidden; /* Grid items stretch to the row height by default, so a long category list dragged this card to 451px of mostly empty gradient. */ align-self: start; padding: 1.35rem 1.4rem 1.4rem; color: #fff; background: radial-gradient(120% 90% at 85% 0%, rgba(120, 150, 255, 0.55) 0%, rgba(120, 150, 255, 0) 60%), linear-gradient(155deg, #2436e4 0%, #1b29b8 55%, #131c86 100%); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 30px -18px rgba(19, 28, 134, 0.75); } /* * A large, very soft orb bleeding off the bottom-left corner. Blur plus low * opacity keeps it as texture rather than a shape you notice. */ .pgpl-hd__promo::after { content: ""; position: absolute; bottom: -55%; left: -25%; width: 80%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; } .pgpl-hd__promo > * { position: relative; z-index: 1; } .pgpl-hd__promo-eyebrow { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; } .pgpl-hd__promo-title { margin: 0.75rem 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.22; /* Tightened tracking is most of what separates a display line from body copy. */ letter-spacing: -0.02em; color: #fff; text-wrap: balance; } .pgpl-hd__promo-body { margin: 0.4rem 0 1.1rem; font-size: 0.8rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); } .pgpl-hd__promo-btn, .pgpl-hd__promo-btn:link, .pgpl-hd__promo-btn:visited { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.55rem 1.1rem; font-size: 0.82rem; font-weight: 700; color: var(--pgpl-ultra-deep); text-decoration: none; background: #fff; border-radius: 9px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* * The one LIGHT surface in the chrome that holds a link, so it has to opt out of * the white-on-hover guard above — white text on a white button is invisible. * * The extra `.pgpl-hd` is doing real work: at (0,2,0) this rule loses to the * guard's (0,2,1), because an element selector still breaks the tie. Two classes * plus the pseudo puts it at (0,3,0) and back in control of its own colour. */ .pgpl-hd .pgpl-hd__promo-btn:hover, .pgpl-hd .pgpl-hd__promo-btn:focus { color: var(--pgpl-ultra-deep); transform: translateY(-1px); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.55); } .pgpl-hd__promo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* * The desktop navigation band that used to live here is gone. * * .pgpl-hd__nav, .pgpl-hd__menu-list and their .sub-menu dropdowns — 79 lines * — styled markup header.php stopped emitting when the nav bar folded into the * Browse panel. Nothing in header.php, footer.php, chrome.php or chrome.js has * referenced any of those classes since, so every rule was dead, and two live * rules elsewhere in this file were still naming .sub-menu in their selector * lists and quietly doing nothing. */ /* --------------------------------------------------------------------------- * Mobile drawer * ------------------------------------------------------------------------ */ .pgpl-drawer[hidden] { display: none; } .pgpl-drawer { position: fixed; inset: 0; z-index: 999; } .pgpl-drawer__scrim { position: absolute; inset: 0; background: rgba(4, 6, 14, 0.6); /* Blur the page behind so the panel reads as a layer, not a patch. Safari needed the prefix until 18, which is most of the iPhones this drawer exists for — unprefixed, they got a flat grey wash. */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.24s ease; } .pgpl-drawer__panel { position: absolute; inset-block: 0; right: 0; display: flex; flex-direction: column; /* * Wider than the old fixed 320px: category names like "Best WordPress * Plugins" wrapped to two lines at 320, and a wrapped nav row reads as * broken. Capped so it never becomes a full-screen takeover on a tablet. */ width: min(92vw, 400px); max-width: 100%; background: var(--pgpl-aurora-panel); border-left: 1px solid rgba(255, 255, 255, 0.08); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); } .pgpl-drawer.is-open .pgpl-drawer__scrim { opacity: 1; } .pgpl-drawer.is-open .pgpl-drawer__panel { transform: translateX(0); } /* --- Pinned head ---------------------------------------------------------- */ .pgpl-drawer__head { display: flex; flex: 0 0 auto; gap: 0.6rem; align-items: center; /* env() keeps the head clear of a notch in landscape. */ padding: 1rem calc(1.15rem + env(safe-area-inset-right)) 1rem 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pgpl-drawer__close { display: inline-flex; flex: 0 0 auto; /* 44px — the smallest target Apple and WCAG both consider reliable. */ width: 44px; height: 44px; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); /* The same icon-button component as the bar, so it takes the same shape. */ border-radius: 999px; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .pgpl-drawer .pgpl-drawer__close:hover, .pgpl-drawer .pgpl-drawer__close:focus { color: #fff; background: rgba(255, 255, 255, 0.12); } /* --- Scrolling middle ----------------------------------------------------- */ .pgpl-drawer__scroll { flex: 1 1 auto; padding: 0.9rem 1.15rem 1.4rem; overflow-y: auto; /* Stop a flick at the end of the list from scrolling the page underneath. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* The changelog chip, restated for the drawer's narrower measure. */ .pgpl-drawer__updates { display: flex; gap: 0.55rem; align-items: center; min-height: 44px; margin-bottom: 1rem; padding: 0.6rem 0.85rem; color: rgba(255, 255, 255, 0.9); font-size: 0.85rem; text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; } .pgpl-drawer__updates-label { font-weight: 600; } .pgpl-drawer__updates-when { margin-left: auto; color: rgba(255, 255, 255, 0.5); } /* --- Rows ----------------------------------------------------------------- */ .pgpl-drawer__list, .pgpl-drawer__sublist { margin: 0; padding: 0; list-style: none; } .pgpl-drawer__item + .pgpl-drawer__item { margin-top: 2px; } /* * One shared row shape for both the destinations and the