/********************************************************************************************************************* * Theme Name: Improvise * Description: A simple, Gutenberg supported WordPress custom theme built by Crack Ajax as a starter theme to quickly develop children themes for clients. * Author: Crack-Ajax Web Technologies * Author URI: http://improvise.com * Text Domain: improvise * Version: 4.8 ********************************************************************************************************************/ /****************************************** WordPress User Edit Link ************************************************/ .edit-this-link { display: none; width: 100%; } /********************************************************************************************************************* *********** General Purpose Classes * * @class .no-margin-top | Sets margin-top to 0 !important * @class .no-margin-bottom | Sets margin-bottom to 0 !important * @class .restricted-width | Sets the user defined restricted width to a block * @class .portrait-image | Centers image and limits width to 450px * *********** Media Text Block Custom Classes ( styling for plugin /inc/gutenberg//blocks/block-media-text.js ) * * @class .media-text-cta | Create polished CTA for the Media-Text block * @class .media-padded | Media image has padding around the outside edges, good for background color * @class .content-flush | If no background-color & no alignfull, removes outside edge padding of content * *********** Cover Block Custom Classes ( styling for plugin /inc/gutenberg//blocks/block-cover.js ) * * @class .is-style-cover-cta | Cover Block with Resticted Width for CTA setup * @class .a-left | Align the CTA to the left * @class .a-right | Align the CTA to the right * ********************************************************************************************************************/ .no-margin-top { margin-top: 0!important; } .no-margin-bottom { margin-bottom: 0!important; } .restricted-width { max-width: var(--restricted-width); margin-left: auto; margin-right: auto; } .portrait-image { margin: 0 auto; max-width: 450px; } /****************************************** Text and Anchor Tag Settings ******************************************/ *, *::after, *::before { box-sizing: border-box; } h1, h2, h3, h4, p, a, span, div, label { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; } h1 { color: var(--color-dark-text); font-family: var(--font-primary-heading); margin-bottom: var(--m-spacing); font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 0.8rem; } h2, h3, h4, h5, h6 { color: var(--color-dark-text); font-family: var(--font-secondary-heading); margin-bottom: var(--s-spacing); } h1, h2, h3, h4, h5, h6, p { margin-top: 0; line-height: 1.2; } h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background { padding: var(--l-spacing); @media (max-width: 992px) { padding: var(--m-spacing); } @media (max-width: 480px) { padding: var(--s-spacing); } } h2[id]:not(.block-editor-rich-text__editable):before { display: block; content: " "; margin-top: calc( calc( var(--s-spacing) + var(--xl-spacing) ) * -1 ); height: calc( var(--s-spacing) + var(--xl-spacing) ); visibility: hidden; pointer-events: none; } p, li, pre, .wp-block-verse { color: var(--color-light-text); font-family: var(--font-primary); font-size: var(--fontsize-base); line-height: 1.6; } p, pre, .wp-block-verse { margin-bottom: var(--s-spacing); } sup { font-size: 0.5em; font-weight: bold; } article li { margin: 10px 0; } .wp-block-verse { font-style: italic; font-weight: 600; } a { font-weight: 500; text-decoration: none; &:link { color: var(--color-light-text); } &:visited { color: var(--color-dark-text); } &:hover, &:active { color: var(--color-accent); } } /* A heading that's entirely wrapped in a link (e.g. a card title that's also its "See the site" link) should read as a heading, not as body copy — but without this, its color is an accident of the visitor's own browser history: a:link/a:visited above target the itself, giving --color-light-text (white, invisible on a white card) if they've never visited that URL, --color-dark-text if they have. Scoped to real headings only — body-copy links still use the normal a:link/a:visited treatment above. !important is required: a:link's pseudo-class outweighs this rule's two bare elements in raw CSS specificity ((0,1,1) vs (0,0,2) — a pseudo-class counts the same as a real class, ranking above element count regardless of source order), so a plain declaration here cannot reliably win even though it reads as "more specific". */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit !important; } article a { text-decoration: underline; } .wp-block-group.has-text-color *, .wp-block-media-text.has-text-color * { color: inherit; } @media (max-width: 540px) { h1 { font-size: 2rem; } h2 { font-size: 1.625rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; } } /******************************************* WordPress Alignment Settings *******************************************/ .alignright { float: right; max-width: 100%; } .alignleft { float: left; max-width: 100%; } .aligncenter { display: block; margin: 0 auto; max-width: 100%; } .alignwide { width: calc(100% + calc(var(--xl-spacing) * 2)); max-width: var(--wide-width); margin-left: calc(var(--xl-spacing) * -1); @media (max-width: 1200px) { width: calc(100% + calc(var(--l-spacing) * 2)); margin-left: calc(var(--l-spacing) * -1); } @media (max-width: 992px) { width: calc(100% + calc(var(--s-spacing) * 2)); margin-left: calc(var(--s-spacing) * -1); } @media (max-width: 480px) { width: calc(100% + calc(calc(var(--s-spacing) / 2) * 2)); margin-left: calc(calc(var(--s-spacing) / 2) * -1); } } .alignfull { margin-left: calc( -100vw / 2 + 100% / 2 ); margin-right: calc( -100vw / 2 + 100% / 2 ); max-width: 100vw !important; width: 100vw !important; } img.alignleft { margin-top: var(--s-spacing); margin-right: var(--s-spacing); margin-bottom: var(--s-spacing); } img.center { margin-top: var(--s-spacing); margin-bottom: var(--s-spacing); } img.alignright { margin-top: var(--s-spacing); margin-left: var(--s-spacing); margin-bottom: var(--s-spacing); } .alignfull .alignfull { @media (max-width: 1200px) { margin-left: 0; margin-right: 0; max-width: 100% !important; } } .wp-block-image { .alignright { @media (max-width: 480px) { display: block; margin-left: 0; float: none; width: 100%; } } .alignleft { @media (max-width: 480px) { display: block; margin-right: 0; float: none; width: 100%; } } } .wp-block-group__inner-container .alignwide { @media (max-width: 480px) { max-width: 100%; margin-left: 0; } } .no-margin-bottom-mobile { @media (max-width: 480px) { margin-bottom: 0; } } .inherit-color p, .inherit-color a, .inherit-color li, .inherit-color li::before { color: inherit!important; } /****************************************** Image & Video Default Settings *******************************************/ .wp-block-image figure { margin-bottom: 1em!important; @media (max-width: 540px) { display: block; } } .wp-block-image .aligncenter>figcaption { text-align: center; } video { -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; /*-webkit-appearance: none; Try this if still don't work */ } iframe { max-width: 100%; width: 100%; } figcaption { font-size: 0.8rem; font-family: var(--font-accent); } /********************************************* Blockquotes & Pullquotes **********************************************/ caption, blockquote, blockquote p { font-family: var(--font-accent); } blockquote { position: relative; border: none; max-width: var(--restricted-width); quotes: "\201C""\201D""\2018""\2019"; @media (max-width: 480px) { margin: 1em 0; } &.is-style-default { margin: calc(var(--l-spacing) + var(--m-spacing)) auto; @media (max-width: 992px) { max-width: calc(100% - calc(var(--m-spacing) * 2)); } @media (max-width: 480px) { margin: calc(var(--m-spacing) + var(--m-spacing)) auto; } &:before, &:after { content: ''; border: 5px solid var(--color-accent); width: calc(100% + calc(var(--m-spacing) * 2)); position: absolute; left: calc(var(--m-spacing) * -1); height: var(--s-spacing); } &:before { top: calc(var(--m-spacing) * -1); border-bottom: 0; } &:after { border-top: 0; bottom: calc(var(--m-spacing) * -1); } } cite { font-family: var(--font-primary); font-size: 0.8rem; } a, cite { color: var(--color-accent) !important; text-decoration: none; } a:hover { text-decoration: underline; } } .wp-block-quote p:before, .wp-block-quote p:after, .wp-block-pullquote blockquote:before, .wp-block-pullquote blockquote:after { color: var(--color-accent); content: open-quote; font-size: 3.5em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } .wp-block-quote p:after, .wp-block-pullquote blockquote:after { content: close-quote; margin-right: 0; } .wp-block-quote.is-style-large cite { display: block; } .wp-block-quote, .wp-block-quote.is-style-large { margin: var(--l-spacing) auto; @media (max-width: 480px) { margin: var(--m-spacing) auto; } } .wp-block-pullquote { position: relative; margin: var(--l-spacing) auto; padding: 0; max-width: var(--restricted-width); blockquote p { display: block; font-size: 1.5rem; } blockquote:after { position: absolute; opacity: 0; } &:not(.is-style-solid-color) { border-top: 3px solid var(--color-dark-text); border-bottom: 3px solid var(--color-dark-text); padding: var(--xl-spacing) 0 var(--m-spacing); blockquote:before { content: open-quote; quotes: "\201C""\201D""\2018""\2019"; font-size: 10rem; position: absolute; left: 0; width: 100%; @media (max-width: 480px) { left: 0; transform: translate(-5%); } } } &.alignright, &.alignleft { margin-top: var(--m-spacing); margin-bottom: var(--m-spacing); max-width: var(--restricted-width); } &.alignright { margin-left: var(--m-spacing); } &.alignleft { margin-right: var(--m-spacing); } &.alignwide { margin: var(--l-spacing) calc(var(--xl-spacing) * -1); max-width: none; @media (max-width: 1200px) { margin: var(--l-spacing) auto; margin-left: calc(var(--l-spacing) * -1); } @media (max-width: 992px) { margin: var(--l-spacing) auto; margin-left: calc(var(--s-spacing) * -1); } @media (max-width: 480px) { margin: var(--m-spacing) auto; margin-left: calc(calc(var(--s-spacing) / 2) * -1); } &:not(.is-style-solid-color) blockquote { margin: 1em auto; @media (max-width: 480px) { padding: 0 var(--s-spacing); } } } &.alignfull { margin: var(--l-spacing) calc( -100vw / 2 + 100% / 2 ); max-width: none; @media (max-width: 480px) { margin: var(--m-spacing) auto; margin-left: calc(calc(var(--s-spacing) / 2) * -1); } &:not(.is-style-solid-color) blockquote { max-width: var(--restricted-width); margin: 0 auto; @media (max-width: 480px) { padding: 0 var(--s-spacing); } } } &.is-style-solid-color { blockquote { position: relative; background-color: #eee; padding: var(--l-spacing); max-width: var(--restricted-width); margin: 0; @media (max-width: 768px) { padding: var(--s-spacing); } &:before { font-size: 8em; color: var(--color-accent); position: absolute; left: var(--m-spacing); top: var(--xl-spacing); @media (max-width: 768px) { left: 0; top: calc(var(--l-spacing) + var(--s-spacing)); } } p { padding-left: var(--xl-spacing); font-size: 1.3rem; text-align: left; margin-bottom: var(--s-spacing); &:last-child { margin-bottom: 0; } @media (max-width: 768px) { padding-left: var(--l-spacing); } } } &.alignwide blockquote { max-width: none; } &.alignfull blockquote { margin: 0; padding: var(--xl-spacing); max-width: none; @media (max-width: 992px) { padding: var(--l-spacing); } @media (max-width: 768px) { padding: var(--s-spacing); } } cite, .wp-block-pullquote__citation { display: block; text-align: right; } } } /********************************************** Verse Block Styles ***********************************************/ .wp-block-verse.has-background { padding: var(--s-spacing); } /********************************************** Block Separator Styles ***********************************************/ /* core/separator's block.json now only supports a "Background" color control (text: false, no border support) — the editor's color panel sets background-color/background, not border-color. WordPress's own global-styles CSS already emits a !important background rule per palette slug and per registered gradient (.has-primary-background- color, .has-brand-colors-bar-gradient-background, etc.), generated from the same ACF colors this theme's vars come from — so the old per-slug border-color mappings below were both the wrong property and redundant with that. The has-X-color (non-background) variants below them were already dead: this block hasn't had a text-color control since the block.json update, and a DB check confirmed no published content here still uses those classes. */ .wp-block-separator { background-color: var(--color-accent); height: 2px; border: none; margin: var(--l-spacing) auto; &:not(.is-style-dots):not(.is-style-wide), &.is-style-default { max-width: calc(var(--xl-spacing) * 2); } &.is-style-dots { margin: var(--m-spacing) auto; &:before { font-size: 2.5rem; color: var(--color-accent); @media (max-width: 480px) { letter-spacing: 1em; padding-left: 1em; } } } } /****************************************** Gutenberg Color Palette Styles *******************************************/ :root .has-white-background-color { background-color: var(--color-white); } .has-white-color { color: var(--color-white); } :root .has-black-background-color { background-color: var(--color-black); } .has-black-color { color: var(--color-black); } :root .has-primary-background-color { background-color: var(--color-primary); } .has-primary-color { color: var(--color-primary); } :root .has-secondary-background-color { background-color: var(--color-secondary); } .has-secondary-color { color: var(--color-secondary); } :root .has-accent-background-color { background-color: var(--color-accent); } .has-accent-color { color: var(--color-accent); } :root .has-light-text-background-color { background-color: var(--color-light-text); } .has-light-text-color { color: var(--color-light-text); } :root .has-dark-text-background-color { background-color: var(--color-dark-text); } .has-dark-text-color { color: var(--color-dark-text); } /********************************************** Gutenberg Button Styles ***********************************************/ .wp-block-buttons, .wp-block-buttons.aligncenter { margin: var(--l-spacing) auto; @media (max-width: 480px) { margin: var(--s-spacing) auto; } } .button:not(.read-more), .wp-block-button__link, .wp-block-button__link.add_to_cart_button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled], .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button:disabled[disabled], .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled], #add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce button.button.alt.disabled { display: inline-block; border: 2px solid white; border-radius: 0; background-color: var(--color-primary); color: white; font-family: var(--font-primary-heading); padding: calc(var(--s-spacing) / 2 ) var(--m-spacing); text-decoration: none; transition: none; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled], .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button:disabled[disabled], .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled], .woocommerce div.product form.cart .button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { border-color: var(--color-primary); } #add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button { display: block; padding: 1em; } .button:not(.read-more), .wp-block-button__link { @media (max-width: 480px) { padding: 10px 15px; } } .button:not(.read-more):hover, .wp-block-button__link:hover, .wp-block-button__link.add_to_cart_button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.disabled:hover, .woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit:disabled[disabled]:hover, .woocommerce a.button.disabled:hover, .woocommerce a.button:disabled:hover, .woocommerce a.button:disabled[disabled]:hover, .woocommerce button.button.disabled:hover, .woocommerce button.button:disabled:hover, .woocommerce button.button:disabled[disabled]:hover, .woocommerce input.button.disabled:hover, .woocommerce input.button:disabled:hover, .woocommerce input.button:disabled[disabled]:hover, #add_payment_method .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { border: 2px solid white; background-color: var(--color-accent); color: white; text-decoration: none; transition: all .2s ease-in; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.disabled:hover, .woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit:disabled[disabled]:hover, .woocommerce a.button.disabled:hover, .woocommerce a.button:disabled:hover, .woocommerce a.button:disabled[disabled]:hover, .woocommerce button.button.disabled:hover, .woocommerce button.button:disabled:hover, .woocommerce button.button:disabled[disabled]:hover, .woocommerce input.button.disabled:hover, .woocommerce input.button:disabled:hover, .woocommerce input.button:disabled[disabled]:hover, .woocommerce div.product form.cart .button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { border-color: var(--color-accent); } .is-style-outline .wp-block-button__link { border: 2px solid; } /** Button Color Combinations */ .wp-block-button__link { /** Black & White */ &.has-white-color.has-black-background-color, &.has-black-color.has-white-background-color:hover { color: var(--color-white) !important; border-color: var(--color-white) !important; background-color: var(--color-black) !important; } &.has-black-color.has-white-background-color, &.has-white-color.has-black-background-color:hover { color: var(--color-black) !important; border-color: var(--color-black) !important; background-color: var(--color-white) !important; } /** Primary & White */ &.has-white-color.has-primary-background-color, &.has-primary-color.has-white-background-color:hover { color: var(--color-white) !important; border-color: var(--color-white) !important; background-color: var(--color-primary) !important; } &.has-primary-color.has-white-background-color, &.has-white-color.has-primary-background-color:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background-color: var(--color-white) !important; } /** Secondary & White */ &.has-white-color.has-secondary-background-color, &.has-secondary-color.has-white-background-color:hover { color: var(--color-white) !important; border-color: var(--color-white) !important; background-color: var(--color-secondary) !important; } &.has-secondary-color.has-white-background-color, &.has-white-color.has-secondary-background-color:hover { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; background-color: var(--color-white) !important; } /** Accent & White */ &.has-white-color.has-accent-background-color, &.has-accent-color.has-white-background-color:hover { color: var(--color-white) !important; border-color: var(--color-white) !important; background-color: var(--color-accent) !important; } &.has-accent-color.has-white-background-color, &.has-white-color.has-accent-background-color:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: var(--color-white) !important; } /** Light Text & White */ &.has-white-color.has-light-text-background-color, &.has-light-text-color.has-white-background-color:hover { color: var(--color-white) !important; border-color: var(--color-white) !important; background-color: var(--color-light-text) !important; } &.has-light-text-color.has-white-background-color, &.has-white-color.has-light-text-background-color:hover { color: var(--color-light-text) !important; border-color: var(--color-light-text) !important; background-color: var(--color-white) !important; } /** Dark Text & White */ &.has-white-color.has-dark-text-background-color, &.has-dark-text-color.has-white-background-color:hover { color: var(--color-white) !important; border-color: var(--color-white) !important; background-color: var(--color-dark-text) !important; } &.has-dark-text-color.has-white-background-color, &.has-white-color.has-dark-text-background-color:hover { color: var(--color-dark-text) !important; border-color: var(--color-dark-text) !important; background-color: var(--color-white) !important; } /** Primary & Black */ &.has-black-color.has-primary-background-color, &.has-primary-color.has-black-background-color:hover { color: var(--color-black) !important; border-color: var(--color-black) !important; background-color: var(--color-primary) !important; } &.has-primary-color.has-black-background-color, &.has-black-color.has-primary-background-color:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background-color: var(--color-black) !important; } /** Secondary & Black */ &.has-black-color.has-secondary-background-color, &.has-secondary-color.has-black-background-color:hover { color: var(--color-black) !important; border-color: var(--color-black) !important; background-color: var(--color-secondary) !important; } &.has-secondary-color.has-black-background-color, &.has-black-color.has-secondary-background-color:hover { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; background-color: var(--color-black) !important; } /** Accent & Black */ &.has-black-color.has-accent-background-color, &.has-accent-color.has-black-background-color:hover { color: var(--color-black) !important; border-color: var(--color-black) !important; background-color: var(--color-accent) !important; } &.has-accent-color.has-black-background-color, &.has-black-color.has-accent-background-color:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: var(--color-black) !important; } /** Light Text & Black */ &.has-black-color.has-light-text-background-color, &.has-light-text-color.has-black-background-color:hover { color: var(--color-black) !important; border-color: var(--color-black) !important; background-color: var(--color-light-text) !important; } &.has-light-text-color.has-black-background-color, &.has-black-color.has-light-text-background-color:hover { color: var(--color-light-text) !important; border-color: var(--color-light-text) !important; background-color: var(--color-black) !important; } /** Dark Text & Black */ &.has-black-color.has-dark-text-background-color, &.has-dark-text-color.has-black-background-color:hover { color: var(--color-black) !important; border-color: var(--color-black) !important; background-color: var(--color-dark-text) !important; } &.has-dark-text-color.has-black-background-color, &.has-black-color.has-dark-text-background-color:hover { color: var(--color-dark-text) !important; border-color: var(--color-dark-text) !important; background-color: var(--color-black) !important; } /** Primary & Secondary */ &.has-secondary-color.has-primary-background-color, &.has-primary-color.has-secondary-background-color:hover { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; background-color: var(--color-primary) !important; } &.has-primary-color.has-secondary-background-color, &.has-secondary-color.has-primary-background-color:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background-color: var(--color-secondary) !important; } /** Primary & Accent */ &.has-accent-color.has-primary-background-color, &.has-primary-color.has-accent-background-color:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: var(--color-primary) !important; } &.has-primary-color.has-accent-background-color, &.has-accent-color.has-primary-background-color:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background-color: var(--color-accent) !important; } /** Primary & Light Text */ &.has-light-text-color.has-primary-background-color, &.has-primary-color.has-light-text-background-color:hover { color: var(--color-light-text) !important; border-color: var(--color-light-text) !important; background-color: var(--color-primary) !important; } &.has-primary-color.has-light-text-background-color, &.has-light-text-color.has-primary-background-color:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background-color: var(--color-light-text) !important; } /** Primary & Dark Text */ &.has-dark-text-color.has-primary-background-color, &.has-primary-color.has-dark-text-background-color:hover { color: var(--color-dark-text) !important; border-color: var(--color-dark-text) !important; background-color: var(--color-primary) !important; } &.has-primary-color.has-dark-text-background-color, &.has-dark-text-color.has-primary-background-color:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; background-color: var(--color-dark-text) !important; } /** Secondary & Accent */ &.has-accent-color.has-secondary-background-color, &.has-secondary-color.has-accent-background-color:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: var(--color-secondary) !important; } &.has-secondary-color.has-accent-background-color, &.has-accent-color.has-secondary-background-color:hover { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; background-color: var(--color-accent) !important; } /** Secondary & Light Text */ &.has-light-text-color.has-secondary-background-color, &.has-secondary-color.has-light-text-background-color:hover { color: var(--color-light-text) !important; border-color: var(--color-light-text) !important; background-color: var(--color-secondary) !important; } &.has-secondary-color.has-light-text-background-color, &.has-light-text-color.has-secondary-background-color:hover { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; background-color: var(--color-light-text) !important; } /** Secondary & Dark Text */ &.has-dark-text-color.has-secondary-background-color, &.has-secondary-color.has-dark-text-background-color:hover { color: var(--color-dark-text) !important; border-color: var(--color-dark-text) !important; background-color: var(--color-secondary) !important; } &.has-secondary-color.has-dark-text-background-color, &.has-dark-text-color.has-secondary-background-color:hover { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; background-color: var(--color-dark-text) !important; } /** Accent & Light Text */ &.has-light-text-color.has-accent-background-color, &.has-accent-color.has-light-text-background-color:hover { color: var(--color-light-text) !important; border-color: var(--color-light-text) !important; background-color: var(--color-accent) !important; } &.has-accent-color.has-light-text-background-color, &.has-light-text-color.has-accent-background-color:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: var(--color-light-text) !important; } /** Accent & Dark Text */ &.has-dark-text-color.has-accent-background-color, &.has-accent-color.has-dark-text-background-color:hover { color: var(--color-dark-text) !important; border-color: var(--color-dark-text) !important; background-color: var(--color-accent) !important; } &.has-accent-color.has-dark-text-background-color, &.has-dark-text-color.has-accent-background-color:hover { color: var(--color-accent) !important; border-color: var(--color-accent) !important; background-color: var(--color-dark-text) !important; } /** Light Text & Dark Text */ &.has-dark-text-color.has-light-text-background-color, &.has-light-text-color.has-dark-text-background-color:hover { color: var(--color-dark-text) !important; border-color: var(--color-dark-text) !important; background-color: var(--color-light-text) !important; } &.has-light-text-color.has-dark-text-background-color, &.has-dark-text-color.has-light-text-background-color:hover { color: var(--color-light-text) !important; border-color: var(--color-light-text) !important; background-color: var(--color-dark-text) !important; } } /** is-style-fill: border color matches the active background */ .is-style-fill .wp-block-button__link { /** black background → black border */ &.has-white-color.has-black-background-color, &.has-black-color.has-white-background-color:hover, &.has-primary-color.has-black-background-color, &.has-black-color.has-primary-background-color:hover, &.has-secondary-color.has-black-background-color, &.has-black-color.has-secondary-background-color:hover, &.has-accent-color.has-black-background-color, &.has-black-color.has-accent-background-color:hover, &.has-light-text-color.has-black-background-color, &.has-black-color.has-light-text-background-color:hover, &.has-dark-text-color.has-black-background-color, &.has-black-color.has-dark-text-background-color:hover { border-color: var(--color-black) !important; } /** white background → white border */ &.has-black-color.has-white-background-color, &.has-white-color.has-black-background-color:hover, &.has-primary-color.has-white-background-color, &.has-white-color.has-primary-background-color:hover, &.has-secondary-color.has-white-background-color, &.has-white-color.has-secondary-background-color:hover, &.has-accent-color.has-white-background-color, &.has-white-color.has-accent-background-color:hover, &.has-light-text-color.has-white-background-color, &.has-white-color.has-light-text-background-color:hover, &.has-dark-text-color.has-white-background-color, &.has-white-color.has-dark-text-background-color:hover { border-color: var(--color-white) !important; } /** primary background → primary border */ &.has-white-color.has-primary-background-color, &.has-primary-color.has-white-background-color:hover, &.has-black-color.has-primary-background-color, &.has-primary-color.has-black-background-color:hover, &.has-secondary-color.has-primary-background-color, &.has-primary-color.has-secondary-background-color:hover, &.has-accent-color.has-primary-background-color, &.has-primary-color.has-accent-background-color:hover, &.has-light-text-color.has-primary-background-color, &.has-primary-color.has-light-text-background-color:hover, &.has-dark-text-color.has-primary-background-color, &.has-primary-color.has-dark-text-background-color:hover { border-color: var(--color-primary) !important; } /** secondary background → secondary border */ &.has-white-color.has-secondary-background-color, &.has-secondary-color.has-white-background-color:hover, &.has-black-color.has-secondary-background-color, &.has-secondary-color.has-black-background-color:hover, &.has-primary-color.has-secondary-background-color, &.has-secondary-color.has-primary-background-color:hover, &.has-accent-color.has-secondary-background-color, &.has-secondary-color.has-accent-background-color:hover, &.has-light-text-color.has-secondary-background-color, &.has-secondary-color.has-light-text-background-color:hover, &.has-dark-text-color.has-secondary-background-color, &.has-secondary-color.has-dark-text-background-color:hover { border-color: var(--color-secondary) !important; } /** accent background → accent border */ &.has-white-color.has-accent-background-color, &.has-accent-color.has-white-background-color:hover, &.has-black-color.has-accent-background-color, &.has-accent-color.has-black-background-color:hover, &.has-primary-color.has-accent-background-color, &.has-accent-color.has-primary-background-color:hover, &.has-secondary-color.has-accent-background-color, &.has-accent-color.has-secondary-background-color:hover, &.has-light-text-color.has-accent-background-color, &.has-accent-color.has-light-text-background-color:hover, &.has-dark-text-color.has-accent-background-color, &.has-accent-color.has-dark-text-background-color:hover { border-color: var(--color-accent) !important; } /** light-text background → light-text border */ &.has-white-color.has-light-text-background-color, &.has-light-text-color.has-white-background-color:hover, &.has-black-color.has-light-text-background-color, &.has-light-text-color.has-black-background-color:hover, &.has-primary-color.has-light-text-background-color, &.has-light-text-color.has-primary-background-color:hover, &.has-secondary-color.has-light-text-background-color, &.has-light-text-color.has-secondary-background-color:hover, &.has-accent-color.has-light-text-background-color, &.has-light-text-color.has-accent-background-color:hover, &.has-dark-text-color.has-light-text-background-color, &.has-light-text-color.has-dark-text-background-color:hover { border-color: var(--color-light-text) !important; } /** dark-text background → dark-text border */ &.has-white-color.has-dark-text-background-color, &.has-dark-text-color.has-white-background-color:hover, &.has-black-color.has-dark-text-background-color, &.has-dark-text-color.has-black-background-color:hover, &.has-primary-color.has-dark-text-background-color, &.has-dark-text-color.has-primary-background-color:hover, &.has-secondary-color.has-dark-text-background-color, &.has-dark-text-color.has-secondary-background-color:hover, &.has-accent-color.has-dark-text-background-color, &.has-dark-text-color.has-accent-background-color:hover, &.has-light-text-color.has-dark-text-background-color, &.has-dark-text-color.has-light-text-background-color:hover { border-color: var(--color-dark-text) !important; } } /********************************************* Popup and Overlay **********************************************/ .overlay { display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 1000; cursor: pointer; } .pop-up { position: fixed; width: 100%; max-width: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: var(--l-spacing); z-index: 10000; } .custom-message { display: none; background: var(--color-primary); box-shadow: 0px 0px 10px 8px var(--color-secondary); h1, h2, h3, h4, h5, h6, p, li, a { color: white; } :last-child { margin-bottom: 0; } .close-x { position: absolute; right: var(--s-spacing); top: var(--s-spacing); } @media (max-width: 768px) { max-width: 90%; padding: var(--l-spacing) 10px var(--m-spacing); } } .no-scroll .overlay, .no-scroll .custom-message { display: block; } /********************************************* Primary Content Styling **********************************************/ html { scroll-behavior: smooth; font-size: var(--fontsize-base); font-family: var(--font-primary); line-height: 1.6rem; color: var(--color-dark-text); overflow-x: hidden; } body.improvise { display: flex; flex-direction: column; justify-content: space-between; margin: 0; min-height: 100vh; /* No overflow-x here on purpose — html (above) already sets overflow-x: hidden and is the element that actually governs the page's horizontal clipping (the CSS Overflow spec routes viewport scrolling/clipping to the root element whenever it declares a non-visible overflow, which html does here), so this was always redundant for its stated purpose. It was also actively harmful: per the same spec, whenever one axis computes to a non-'visible' value and the other axis is unset (defaults to 'visible'), the 'visible' axis gets silently upgraded to 'auto' — so body's unset overflow-y was computing to 'auto', not 'visible'. That made BODY its own independently-scrollable box, nested inside html's real page scroll, any time its rendered content height came out even slightly taller than its own box (which varies by breakpoint/content — confirmed live at a 768px viewport, where body had a ~115px internal scroll range). Wheel/trackpad input scrolls whatever box is directly under the pointer first, so that phantom inner scrollbar silently absorbed the first ~115px of scroll input before the real page ever started moving — verified via Playwright (real wheel events, not scrollTo()) as the actual cause of a "have to scroll a while before anything happens, then it works" symptom users were seeing, distinct from the separate .document-header/main transition-sync issue fixed above. Removing this line stops body from ever establishing its own scroll container — confirmed via the same live wheel-scroll test that scrollY then advances on every single tick, and confirmed html's own overflow-x:hidden alone is still sufficient to prevent any horizontal scrollbar (scrollWidth === clientWidth after the change). */ font-size: var(--fontsize-base); } html:has(body.menu-open), body.menu-open { overflow: hidden; } .document-header { position: fixed; top: 0; width: 100%; * { transition: all 0.5s ease; } div.social { width: 25%; max-width: 50%; } .fixed & { min-height: var(--l-spacing) !important; max-height: var(--l-spacing) !important; } /* Unconditional on .admin-bar alone — NOT gated behind .fixed (a separate, scroll-triggered class) like this used to be. .fixed toggles independently of the admin bar and independently of whether the mobile hamburger menu is open, so a page freshly loaded (not yet scrolled, .fixed absent) with the admin bar showing had no explicit top at all here before — position:fixed's "auto behaves as if static" fallback isn't reliable enough to depend on for this, and in practice the header would slide up underneath the admin bar, most visibly on <1200px breakpoints when the hamburger menu was opened. Since .document-header is position:fixed (permanently pinned to the viewport) regardless of scroll state, its top offset should always be explicit — 0 normally, or the admin bar's own height whenever it's showing — not conditional on an unrelated scroll-state class. */ .admin-bar & { top: 32px; @media (max-width: 782px) { top: 46px; } } } body:not(.has-top-bar) .document-header, body.has-top-bar .document-header .main-bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--xl-spacing); max-height: var(--xl-spacing); padding: 0 var(--l-spacing); background-color: var(--color-header-bg); border-bottom: 1px solid var(--color-header-text); z-index: 99999; transition: all 0.5s ease; } body.has-top-bar .document-header { display: flex; flex-direction: column; z-index: 99999; } main { position: relative; padding-top: var(--xl-spacing); /* Must match .document-header's own transition (min-height/max-height, "transition: all 0.5s ease" on the rule above) exactly — duration and easing both. A prior version of this rule removed the transition entirely on the theory that an animated padding-top was "fighting" the user's scroll input. Verified with real wheel-driven scroll events (not just class-toggle checks) that this was wrong: .document-header is position:fixed and its own height shrink was never removed, so making ONLY main's padding-top instant meant main snapped to its final (smaller) padding immediately while the still-tall header kept animating over the following 0.5s — the header physically overlapped/covered the top of main's content for that whole window, which is what actually produced the "scroll hangs, have to scroll again" symptom (confirmed by sampling .document-header's rendered height alongside main's padding-top across a real wheel-scroll: the header took ~15 scroll ticks to settle while main's padding had already snapped on tick 1). Keeping both on the same transition means they always shrink in lockstep — no window where one has finished and the other hasn't. */ transition: padding-top 0.5s ease; .has-top-bar & { padding-top: calc(var(--xl-spacing) + var(--m-spacing)); } .fixed & { padding-top: var(--l-spacing); } .has-top-bar.fixed & { padding-top: calc(var(--l-spacing) + var(--m-spacing)); } } /* Anchor-scroll offset: `scroll-padding-top` on the actual scroll root (html, per the overflow decision documented above on body.improvise) so clicking any in-page `` — or a browser tab landing directly on a `#id` URL — stops with the target's top just below .document-header's bottom edge, not underneath it. Mirrors main's own padding-top states one rule up (base/.fixed/.has-top-bar combinations) rather than a second, independently-maintained copy of the header-height math, on the same "single source of truth" reasoning as this project's other shared-token refactors. Layered on top of WP core's own admin-bar.min.css rule (`html { scroll-padding-top: var( --wp-admin--admin-bar--height) }`) via that same variable — falls back to 0px so the calc is still valid when core's admin-bar CSS isn't enqueued (logged-out visitors) and its custom property is undefined. Uses :has() because .fixed/.has-top-bar live on body, not html, matching the existing html:has(body.menu-open) precedent above. Deliberately keys off .fixed's *current* state rather than a single static value: if the page hasn't scrolled yet (.fixed absent, tall header) this uses the taller offset, which is correct AND is also the safe direction if .fixed happens to toggle mid-scroll on a long jump — the target lands with a little extra clearance rather than getting hidden under the header. */ html:has(body:not(.fixed):not(.has-top-bar)) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--xl-spacing)); } html:has(body.fixed:not(.has-top-bar)) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--l-spacing)); } html:has(body.has-top-bar:not(.fixed)) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--xl-spacing) + var(--m-spacing)); } html:has(body.has-top-bar.fixed) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--l-spacing) + var(--m-spacing)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } article { position: relative; padding: 0 var(--xl-spacing) var(--xl-spacing); @media (max-width: 1200px) { padding: 0 var(--l-spacing) var(--l-spacing); } @media (max-width: 992px) { padding: 0 var(--s-spacing) var(--l-spacing); } @media (max-width: 480px) { padding: 0 calc(var(--s-spacing) / 2); } ul { @media (max-width: 480px) { padding-left: var(--s-spacing); } } } .page-title { padding-top: var(--xl-spacing); @media (max-width: 992px) { padding-top: var(--l-spacing); } } .row { margin: 0 auto; max-width: var(--wide-width); @media (max-width: 480px) { max-width: 100%; } } #wpadminbar { @media (max-width: 600px) { position: fixed; } } /******************************************** Site Logo Styling ********************************************/ .site-info { height: var(--xl-spacing); max-height: 100px; display: flex; flex-direction: column; justify-content: center; color: var(--color-header-text); transition: max-height 0.5s ease; a, p { color: var(--color-header-text); line-height: calc(var(--l-spacing) / 2); font-size: 1.125rem; margin-bottom: 0; text-decoration: none; } p { font-size: 0.9rem; max-height: var(--xl-spacing); } .fixed & { max-height: 50px; flex-direction: row; justify-content: space-between; align-items: center; p { display: none; } } } .document-header .logo { max-width: 250px; padding: 5px 0; a { display: block; position: relative; z-index: 999; } img { max-height: calc(var(--xl-spacing) - 10px); width: auto; height: 100%; margin-bottom: 0; transition: all 0.5s ease; vertical-align: middle; @media (max-width: 480px) { max-width: 100%; } } .fixed & img { max-height: calc(var(--l-spacing) - 10px); } } body:not(.has-top-bar) .document-header, body.has-top-bar .document-header .main-bar { @media (max-width: 1200px) { flex-wrap: wrap; padding: 0 var(--l-spacing); } @media (max-width: 992px) { padding: 0 var(--s-spacing); } @media (max-width: 480px) { padding: 0 calc(var(--s-spacing) / 2); } } /******************************************** Primary Navigation Styling ********************************************/ .primary-nav, .top-bar { align-items: center; display: flex; position: relative; } .primary-nav .navbar-nav, .top-bar .top-nav { display: flex; justify-content: space-between; margin: 0; } .primary-nav div.navbar-header { display: none; } .primary-nav ul, .top-bar .top-nav { list-style-type: none; } .primary-nav .dropdown.inactive { background-color: transparent; } .primary-nav ul li, .top-bar .top-nav li { line-height: normal; position: relative; margin-bottom: 0; } .primary-nav.tab-underline ul li { padding: 0 15px; } .primary-nav ul li a { color: var(--color-header-text); font-size: 1rem; font-family: var(--font-primary-nav); font-weight: 600; text-decoration: none; } .primary-nav:not(.tab-underline) ul li a, .top-bar .top-nav li a { display: block; padding: 0 15px; line-height: calc(var(--xl-spacing) - 1px); max-height: calc(var(--xl-spacing) - 1px); } .fixed .primary-nav:not(.tab-underline) ul li a { line-height: calc(var(--l-spacing) - 1px); max-height: calc(var(--l-spacing) - 1px); } .primary-nav .dropdown.inactive a { background-color: transparent; } .primary-nav.tab-underline ul li:not(.touch-start):hover a, .primary-nav.tab-underline ul li.current-menu-item a { border-bottom: 2px solid var(--color-header-text); } .primary-nav.tab-underline ul li.current-menu-item a[href*='#'] { border-bottom: none; } .primary-nav.tab-hover ul li:not(.touch-start):hover a, .primary-nav.tab-hover ul li.current-menu-item a { color: var(--color-header-hover); } .primary-nav.tab-hover ul li.current-menu-item a[href*='#'] { color: inherit; } .primary-nav.tab-button ul li:not(.touch-start):hover a, .primary-nav.tab-button ul li.current-menu-item a { color: var(--color-header-bg); background-color: var(--color-header-text); } /* The caret is empty (see the matching comment in functions.php's start_el()) — the visible glyph is a single ▼ drawn via ::before content, rotated 180deg in place for the expanded state instead of swapping to a separate ▲ character. A ▼ rotated 180deg is visually identical to ▲ (same glyph, same bounding box, just reoriented around its own center), which guarantees the shape can never appear to shift/slide the way two different-but-similar glyphs swapped via content could — this replaced an earlier version of this fix that did swap distinct ▼/▲ characters and, at the <=1200px mobile menu's fixed-size caret box in particular, visibly slid between states instead of turning cleanly in place. */ .primary-nav .dropdown .caret, .primary-nav .dropdown.inactive .caret { margin-left: 5px; display: inline-block; font-size: 0.65rem; } .primary-nav .dropdown .caret::before, .primary-nav .dropdown.inactive .caret::before { content: "\25BC"; display: inline-block; transition: transform 0.25s linear; } .primary-nav.tab-underline .dropdown .caret, .primary-nav.tab-underline .dropdown.inactive .caret { vertical-align: text-bottom; } .primary-nav ul li:not(.touch-start):hover .caret, .primary-nav .dropdown.active .caret{ margin-right: 3px; margin-left: 2px; } .primary-nav ul li:not(.touch-start):hover .caret::before, .primary-nav .dropdown.active .caret::before { transform: rotate(180deg); } .primary-nav .dropdown .dropdown-menu { display: flex; width: 300px; width: max-content; opacity: 0; visibility: hidden; overflow: hidden; flex-direction: column; justify-content: center; position: absolute; left: 0; right: auto; z-index: 100; padding: 0; background-color: transparent; z-index: -1; transition: all 0.25s linear; margin-left: -2px; border: 2px solid rgba(255,255,255,0.1); border-top: 0; } .primary-nav.tab-underline .dropdown .dropdown-menu { padding-top: 37px; } .fixed .primary-nav.tab-underline .dropdown .dropdown-menu { padding: 11px 0 0; } .primary-nav ul li:nth-last-child(-n+2) .dropdown-menu { right: 0; left: auto; text-align: right; } .primary-nav ul li:not(.touch-start):hover .dropdown-menu, .primary-nav .dropdown.active .dropdown-menu { visibility: visible; opacity: 1; z-index: 10; } .primary-nav .dropdown-menu li { background-color: var(--color-header-text); } .primary-nav.tab-underline .dropdown-menu li { padding: 10px 15px; } .primary-nav.tab-underline li.dropdown .dropdown-menu li:last-child { padding-bottom: var(--s-spacing); } .primary-nav .dropdown-menu li a { position: relative; z-index: 99; } .primary-nav:not(.tab-underline) .dropdown:not(.touch-start) .dropdown-menu li a { line-height: var(--l-spacing); background-color: var(--color-header-dropdown); } .primary-nav.tab-button:not(.tab-underline) .dropdown:not(.touch-start) .dropdown-menu li a { color: var(--color-header-dropdown-text); background-color: var(--color-header-dropdown); } .primary-nav .dropdown-menu li a { color: var(--color-header-bg); } .primary-nav.tab-hover .dropdown:not(.touch-start) .dropdown-menu li a { color: var(--color-header-text); } .primary-nav.tab-underline .dropdown-menu li.current-menu-item a { border-bottom: 2px solid var(--color-header-bg); } .primary-nav.tab-underline :not(.touch-start) .dropdown-menu li:hover a { border-color: var(--color-header-bg); } .primary-nav.tab-hover :not(.touch-start) .dropdown-menu li:hover a, .primary-nav.tab-hover .dropdown:not(.touch-start) .dropdown-menu li.current-menu-item a { color: var(--color-header-hover); } .primary-nav.tab-button:not(.tab-underline) ul li:not(.touch-start) .dropdown-menu li:hover a, .primary-nav.tab-button:not(.tab-underline) .dropdown:not(.touch-start) .dropdown-menu li.current-menu-item a { color: var(--color-header-dropdown); background-color: var(--color-header-dropdown-text); } .primary-nav .dropdown-menu .dropdown-submenu .caret, .primary-nav .dropdown-menu ul.dropdown-submenu { display: none; } @media (max-width: 1200px) { .primary-nav { position: absolute; top: var(--xl-spacing); left: 0; width: 100%; height: auto; max-height: 0; background-color: var(--color-header-bg); overflow: hidden; z-index: 9; transition: all 0.25s linear; /* .primary-nav's own base rule (>1200px, desktop) is "display:flex; align-items:center;" — fine there, since it's just centering a short row of horizontal nav items within the header bar's own height. At this breakpoint .primary-nav becomes the absolutely-positioned, height-bounded mobile dropdown container instead, and align-items:center keeps cascading in unchanged (never overridden here before) — so once .navbar-nav (its flex child) grows TALLER than .primary-nav's own bounded box, which is exactly what happens the moment a top-level item's dropdown expands past the max-height fixed above, "center" vertically centers that overflowing child INSIDE the box instead of anchoring it to the top, making it spill out equally above AND below — confirmed live: with .navbar-nav taller than .primary-nav's 600px box by ~96px, it rendered from -49px to +47px past the box's own top/bottom edges, a near-even split, the signature of centering rather than a scroll-position bug (scrollTop measured 0 throughout). flex-start anchors it to the top instead, so overflow only ever happens on the bottom edge, which .primary-nav's own overflow:auto + max-height (fixed in an earlier entry) is what's actually meant to handle via scrolling. */ align-items: flex-start; } .fixed .primary-nav { top: var(--l-spacing); } .menu-open .primary-nav { overflow: visible; height: var(--l-spacing); max-height: var(--l-spacing); } .navbar-collapse .navbar-nav { justify-content: space-around; align-items: center; height: 100%; width: 100%; padding: 0; border-bottom: 1px solid var(--color-header-text); } .primary-nav ul li a { color: var(--color-header-text); } .primary-nav:not(.tab-underline) ul li a { height: auto; max-height: 0; line-height: calc(var(--l-spacing) - 1px); overflow: hidden; transition: max-height 0.25s linear; } .menu-open .primary-nav:not(.tab-underline) ul li a { max-height: calc(var(--l-spacing) - 1px); height: calc(var(--l-spacing) - 1px); } .primary-nav ul li:not(.touch-start):hover a, .primary-nav ul li.current-menu-item a { border-color: var(--color-header-text); } .menu-open .primary-nav.tab-underline .dropdown .dropdown-menu { padding: 12px 0 0; } .menu-open .primary-nav.tab-underline .dropdown.active .dropdown-menu, .menu-open .primary-nav.tab-underline .dropdown:not(.touch-start):hover .dropdown-menu { border-bottom: 1px solid var(--color-header-bg); } .primary-nav ul li:not(.touch-start):hover .dropdown-menu li a { border-color: var(--color-header-text); } .primary-nav ul li:not(.touch-start) .dropdown-menu li:hover a, .primary-nav ul li .dropdown-menu li.current-menu-item a { border-color: var(--color-header-bg); } .primary-nav.tab-underline ul li:not(.touch-start):hover .dropdown-menu li, .primary-nav.tab-underline .dropdown.active .dropdown-menu li { border-left: 1px solid var(--color-header-bg); border-right: 1px solid var(--color-header-bg); } } @media (max-width: 850px) { .primary-nav { border-bottom: 0;; transition: max-height 0.25s linear; background-color: none; } /* max-height must be the REMAINING viewport height below wherever .primary-nav actually starts, not a flat 100dvh — .primary-nav is position:absolute relative to the fixed .document-header, offset by top: var(--xl-spacing) (or var(--l-spacing) once .fixed, and the admin bar's own height on top of either when .admin-bar is present). A flat 100dvh box starting that far down the viewport extends past the bottom of the screen by exactly that offset — and since the whole subtree lives inside a position:fixed ancestor, that overflow is invisible AND unreachable (the page itself has nothing to scroll; only this element's own overflow: auto can reveal it, and only for the portion of its box that's actually within the viewport). Each variant below subtracts whatever combination of header-shrink state and admin-bar height actually applies — specificity (more body classes = more specific) picks the right one automatically when several classes are present at once, no !important needed. dvh, not vh: plain vh is the LARGEST possible viewport (browser chrome fully retracted) and doesn't shrink when transient mobile UI — the address bar, or Chrome for Android's newer bottom tab panel — is showing, so a vh-based max-height would let this box's bottom edge sit right under whatever bar is currently on screen. dvh tracks the ACTUAL current viewport and shrinks/grows with that UI in real time, so the nav's bottom edge stays above it. */ .menu-open .primary-nav { height: auto; max-height: calc(100dvh - var(--xl-spacing)); overflow: auto; } .menu-open.fixed .primary-nav { max-height: calc(100dvh - var(--l-spacing)); } .admin-bar.menu-open .primary-nav { max-height: calc(100dvh - var(--xl-spacing) - 32px); } .admin-bar.menu-open.fixed .primary-nav { max-height: calc(100dvh - var(--l-spacing) - 32px); } @media (max-width: 782px) { .admin-bar.menu-open .primary-nav { max-height: calc(100dvh - var(--xl-spacing) - 46px); } .admin-bar.menu-open.fixed .primary-nav { max-height: calc(100dvh - var(--l-spacing) - 46px); } } .navbar-collapse .navbar-nav { flex-direction: column; align-items: normal; background-color: var(--color-header-bg); border-bottom: 0; /* Override the >1200px rule's justify-content: space-around and height: 100% (still cascading in from the @media(max-width: 1200px) block above — same selector/specificity, so this later rule wins). space-around distributes EQUAL space before, between, and after every flex item based on (container height − total items' own height); once an item's own height grows past a FIXED 100% container (exactly what happens when one item's dropdown expands past the .primary-nav max-height fixed above), that leftover-space calculation goes negative — and a negative half-unit of space BEFORE the first item shoves it up past the container's own top edge, where it's clipped by .primary-nav's overflow:auto and unreachable (confirmed live: the first item's rendered top went from 100px, correctly under the header, to -133.8px after expanding its own dropdown, with scrollTop staying 0 throughout — a flex layout shove, not a scroll position bug). height: auto here lets .navbar-nav grow to its own real content height (including any expanded dropdown) instead of being pinned to a size smaller than its content demands, and flex-start simply stacks items from the top with no redistributed gaps — the actual bounding/clipping/ scrolling job belongs entirely to .primary-nav's own overflow:auto + calc()-bounded max-height, not to this. */ justify-content: flex-start; height: auto; } .primary-nav ul li, .primary-nav.tab-underline ul li { padding: 0; } .primary-nav ul.navbar-nav>li { border-bottom: 1px solid var(--color-header-text); border-top: 1px solid transparent; } .primary-nav ul.navbar-nav>li:hover { border-top: 1px solid var(--color-header-bg); } .primary-nav ul.navbar-nav>li a { line-height: 45px; } .primary-nav ul li a { display: block; width: 100%; padding: 0 0 0 20px; border: 0 !important; } .menu-open .primary-nav:not(.tab-underline) ul li a { height: auto; } .primary-nav:not(.tab-button) li:not(.touch-start) a:hover { font-weight: bold !important; } /* Extra space above the caret block to separate from no-border .primary-nav .dropdown > a, .primary-nav:not(.tab-underline) ul li a { padding-top: 1px; } */ /* On Mobile menu do not hover drop down menu item .primary-nav.tab-button ul li.dropdown:not(.touch-start):hover>a { color: var(--color-header-text); background-color: var(--color-header-bg); } */ .primary-nav .dropdown .dropdown-toggle { display: flex; justify-content: space-between; padding-right: 0; } /* max-height 0 -> a real pixel value (not 100vh) is what makes this transition actually read as smooth: a submenu here only ever needs roughly 200-300px (the tallest current one, "Websites", is 5 items), so animating toward 100vh meant the visible content finished growing in a small fraction of the transition's duration — reaching its real height almost instantly, then continuing to "animate" invisibly toward a target far past anything actually rendered. 480px gives headroom for a few more submenu items than exist today while keeping the animated distance close enough to the real content height that the growth itself is visible for most of the transition. ease (not linear) matches how a physical panel actually decelerates as it opens. Scoped to the two properties that actually change here rather than `all`, per this project's general preference for targeted transitions — opacity never actually changes at this breakpoint (it's a flat 1 in both the closed and open rules; visibility is handled entirely by max-height + the overflow:hidden inherited from the base >850px rule), so only max-height needs a transition. */ .primary-nav .dropdown .dropdown-menu { position: relative; width: 100%; height: auto; max-height: 0; opacity: 1; box-shadow: none; margin-left: 0; text-align: left; transition: max-height 0.3s ease; } .primary-nav.tab-underline .dropdown .dropdown-menu, .menu-open .primary-nav.tab-underline .dropdown .dropdown-menu, .fixed .primary-nav.tab-underline .dropdown .dropdown-menu { padding: 0; } .menu-open .primary-nav .dropdown.active .dropdown-menu { border-bottom: 0; border-top-color: var(--color-header-bg); } .primary-nav .dropdown.active .dropdown-menu, .primary-nav ul li:not(.touch-start):hover .dropdown-menu { padding: 0; height: auto; max-height: 480px; border-bottom: 0; border-top: 1px solid var(--color-header-bg); } .primary-nav ul li:nth-last-child(-n+2) .dropdown-menu { text-align: left; } .primary-nav .navbar-nav .dropdown .dropdown-menu li { border-bottom: 1px solid var(--color-header-bg); padding: 0 0 0 20px; } .primary-nav:not(.tab-underline) .navbar-nav .dropdown .dropdown-menu li { background-color: var(--color-header-hover); } .primary-nav.tab-underline ul li:not(.touch-start):hover .dropdown-menu li, .primary-nav.tab-underline .dropdown.active .dropdown-menu li { border-left: 0; border-right: 0; width: 100%; padding: 0 0 0 20px; } .primary-nav.tab-underline li.dropdown .dropdown-menu li:last-child, .primary-nav.tab-underline .dropdown.active .dropdown-menu li:last-child, .primary-nav.tab-underline li:not(.touch-start):hover .dropdown-menu li:last-child, .primary-nav.tab-underline .dropdown.active .dropdown-menu li:last-child { padding-bottom: 0; border-bottom: 0; } .primary-nav.tab-button :not(.touch-start) .dropdown-menu li:hover, .primary-nav.tab-button .dropdown-menu li.current-menu-item { background-color: var(--color-header-text); } .primary-nav .dropdown .dropdown-menu li a { padding: 0 0 0 20px; } .primary-nav.tab-button :not(.touch-start) .dropdown-menu li:hover a, .primary-nav.tab-button .dropdown-menu li.current-menu-item a { background-color: inherit; } .primary-nav .dropdown .caret { height: 45px; width: 45px; margin: 0; text-align: center; position: relative; background: var(--color-header-text); color: var(--color-header-bg); font-size: 0.65rem; transition: none !important; } .primary-nav ul li:not(.touch-start):hover .caret, .primary-nav .dropdown.active .caret { margin: 0; } .primary-nav .dropdown .caret, .primary-nav .dropdown.inactive .caret { margin-left: 0; } } /****************************************** Transparent Nav Styling ******************************************/ .has-transparent-nav { &:not(.fixed) .document-header, &:not(.fixed) .document-header .main-bar { background-color: transparent !important; } .document-header, .document-header .main-bar { border-bottom: 0 !important; } main { padding-top: 0; } /* These two compensate for the transparent header's absolute-positioned desktop flyout dropdown (see .primary-nav .dropdown .dropdown-menu above) sitting differently once the header has no background/border. The mobile hamburger nav takes over at max-width: 1200px and uses a completely different accordion-style dropdown-menu (position:relative, max-height-driven) — these offsets don't apply to that layout and were breaking it by being left unscoped. */ @media (min-width: 1201px) { .primary-nav.tab-underline .dropdown .dropdown-menu { padding-top: 0; margin-top: 10px; } .primary-nav.tab-hover .dropdown .dropdown-menu { margin-top: -27px; } } } /******************************************** Top Bar Nav Styling ********************************************/ .top-bar { background-color: var(--color-topbar-bg); justify-content: flex-end; max-height: var(--m-spacing); min-height: var(--m-spacing); @media (max-width: 1200px) { justify-content: center; } .top-nav { margin: 0; padding: 0 var(--l-spacing); li a { color: var(--color-topbar-text); line-height: calc(var(--m-spacing) - 1px); @media (max-width: 500px) { font-size: 14px; } } li:not(.touch-start):hover a { color: var(--color-topbar-text-hover); background-color: var(--color-topbar-bg-hover); } } } @media (max-width: 1200px) { body.has-top-bar .document-header .primary-nav { top: calc(var(--xl-spacing) + var(--m-spacing)); } .fixed.has-top-bar .document-header .primary-nav { top: calc(var(--l-spacing) + var(--m-spacing)); } } /******************************************** Mobile Hamburger Styling ********************************************/ .mobile-hamburger { display: none; @media (max-width: 1200px) { display: flex; flex-direction: column; justify-content: space-evenly; width: 40px; height: 40px; position: relative; overflow: hidden; cursor: pointer; transform: rotate(0deg); transition: 0.25s ease-in-out; z-index: 2; padding: 0; background: transparent; border: 0; .fixed & { margin-top: -5px; } span { position: relative; background: var(--color-header-text); border-radius: 9px; height: 3px; width: 40px; transform: rotate(0deg); transition: .25s ease-in-out; } .primary-nav:not(.tab-underline) &:hover span { background: var(--color-header-hover); } &.toggled .wrapper { max-height: 1000px; } &.toggled span:nth-child(1) { top: 11px; transform: rotate(135deg); } &.toggled span:nth-child(2) { transform: rotate(495deg); } &.toggled span:nth-child(3) { top: -10px; transform: rotate(-135deg); } } } /******************************************** Mobile Telephone Styling ********************************************/ .mobile-telephone-button { background-color: var(--color-accent); display: none; position: fixed; bottom: 0; text-align: center; width: 100%; z-index: 99; .icon-phone { color: white; margin-left: 15px; vertical-align: middle; } @media (max-width: 480px) { box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2); display: block; a { color: var(--color-white); display: block; font-size: 1.125rem; padding: 10px; text-decoration: none; .icon-phone { vertical-align: text-bottom; } } } } /******************************************** Section Styling ********************************************/ .image-slider { margin-bottom: var(--l-spacing); h2 { font-size: 2.25rem; } .blurb-back { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 var(--l-spacing); a { max-width: 300px; width: 100%; } } } .wp-block-columns.three-column-background { @media (max-width: 1020px) { flex-direction: column; .wp-block-column:not(:last-of-type) { margin: 0 0 var(--l-spacing); } .wp-block-buttons { margin: 0 auto; max-width: 300px; width: 100%; } } } .three-column-background .wp-block-column { border: 1px solid black; border-radius: 5px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-spacing) var(--m-spacing); text-align: center; @media (max-width: 1020px) { margin-left: 0; } @media (max-width: 480px) { padding: var(--s-spacing); } .wp-block-button, .wp-block-button a { display: block; } p { padding: 0; } } article .image-slider { @media (max-width: 480px) { display: block; } } .heading-column { display: flex; align-items: center; } /******************************************** Footer Styling ********************************************/ .document-footer { position: relative; clear: both; padding: var(--l-spacing) 0 var(--m-spacing); background-color: var(--color-footer-bg); @media (max-width: 1300px) { padding: var(--m-spacing) var(--l-spacing); } @media (max-width: 992px) { padding: var(--m-spacing) var(--s-spacing); } @media (max-width: 480px) { padding: var(--m-spacing) calc(var(--s-spacing) / 2) 80px; } a, p, li, h2, table { color: var(--color-footer-text); } a:hover { text-decoration: underline; opacity: 0.7; } .social-menu li a[href*="facebook.com"]::before, .social-menu li a[href*="instagram.com"]::before, .social-menu li a[href*="pinterest.com"]::before { color: var(--color-footer-text); } } .footer-widgets { display: grid; grid-template-columns: repeat(3, 32%); grid-gap: 2%; list-style: none; padding: 0; margin: 0 0 var(--l-spacing); > li { margin-bottom: 0; } /* Automatically switch to 4 columns when the optional 4th footer widget area is active — #footer4 only exists in the markup at all when is_active_sidebar('footer4') is true (see footer.php), so :has() is enough to detect it without any PHP-computed class/inline style. */ &:has(#footer4) { grid-template-columns: repeat(4, 23.5%); } /* 1200px, not the more common 992px — matches .document-header's own mobile-nav breakpoint (@media(max-width:1200px) on .primary-nav elsewhere in this file), so the footer switches into its mobile, reflowed layout at the same point the header does, instead of the two disagreeing about where "mobile" starts. */ @media (max-width: 1200px) { grid-template-columns: repeat(2, 48%); grid-row-gap: var(--l-spacing); > li:first-child { grid-row: 2/3; grid-column: 1/3; text-align: center; } &:has(#footer4) { grid-template-columns: repeat(3, 32%); > li:first-child { grid-column: 1/4; } } } @media (max-width: 768px) { max-width: 350px; margin: 0 auto var(--l-spacing); grid-template-columns: 100%; grid-column-gap: 0; > li:first-child { grid-row: 3/4; grid-column: 1/2; text-align: center; } > li:nth-child(2) { grid-row: 1/2; } > li:nth-child(3) { grid-row: 2/3; } /* :has(#footer4) carries ID-level specificity (from the #footer4 inside it), which otherwise beats this plain-class rule and would keep the desktop 4-column layout even at this breakpoint — so grid-template-columns has to be explicitly re-asserted here too. */ &:has(#footer4) { grid-template-columns: 100%; > li:first-child { grid-row: 4/5; } > li:nth-child(4) { grid-row: 3/4; } } } @media (max-width: 540px) { grid-template-columns: repeat(1, 100%); > li, > li:first-of-type { width: 100%; } &:has(#footer4) { grid-template-columns: repeat(1, 100%); } } } .widget-area { .widgets:not(:last-child) { margin-bottom: var(--s-spacing); } .widgets ul { padding: 0; list-style-type: none; } .widgets .menu ul { list-style-type: square; padding-left: 40px; } .widgets li { margin-bottom: 0; } .widgets ul.wp-block-social-links { @media (max-width: 992px) { justify-content: center; } } } /* Same list resets as .widget-area .widgets above, duplicated onto .widget_nav_menu directly. A Nav Menu widget placed via a Legacy Widget block (e.g. the footer menu columns) renders its live preview, inside the block-based Widgets screen, in its own iframe using WordPress core's generic widget-preview template — which wraps the widget's output in a plain #page/#content shell, not the theme's own .widget-area/.widgets markup from register_sidebar()'s before_widget (that only gets added by dynamic_sidebar() on the real front end). So the rules above never match inside that preview, even though the exact same theme stylesheet is loaded there (confirmed live) — .widget_nav_menu itself is the one class present in both contexts, since it comes from the widget's own output, not the sidebar wrapper. Same reasoning applies to the text color below: .document-footer's own `a, p, li, h2, table { color: var(--color-footer-text); }` rule needs the