/* Theme Name: Escapography Theme URI: https://www.escapography.com Author: Dan Suleski Description: The Escapography Theme Version: 5.0 License: GNU General Public License v2.0 License URI: https://www.gnu.org/licenses/gpl-2.0.html Template: generatepress Template Version: 0.1 Tags: black */ /*///////////////////////// * OVERALL BASE */ /* Ensure the footer hugs the bottom of the viewport. */ body { display: flex; flex-direction: column; height: 100vh; } div.site.container { flex-grow: 1; width: 100vw; } /* Everything on the site gets rounds corners. */ :root { --pog-border-radius: 0.33em; } * { border-radius: var( --pog-border-radius ); } /* Everything on the site gets a different-colored text selection. */ ::selection { background: var( --pog-peach-dark ); } /*///////////////////////// * FORMAT: BUTTONS */ :root { --button-padding: 0.75em 1em; } /* * _Overall - Can apply these to any of the other buttons. * Note: Colors are expected to be set locally on the GB Block level. */ button, .button-x, .button-x-icon, button[type=submit], .gb-button, input[type=submit] button:hover, .button-x:hover, .button-x-icon:hover, button[type=submit]:hover, .gb-button:hover, input[type=submit]:hover { align-items: center; display: inline-flex; color: inherit; cursor: pointer; justify-content: center; outline: inherit; padding: var( --button-padding ); text-decoration: none; white-space: nowrap; /* This is captured in the Customizer - leave it commented out here for reference */ /* font-size: 1.25em; font-weight: normal; line-height: 1em; text-transform: uppercase; */ } .button-x-icon { padding: 0; } /*///////////////////////// * FORMAT: FORMS * The form fields are getting style values from different sources. * - GenerateBlocks local styles. * - GeneratePress Customizer. * - Fluent Forms. * - Elsewhere in THIS style.css file. * * Give a good base of style defs that other cascading sources can build from. * Note: Buttons are handled alongside the .button-x class. */ /* INPUT/SELECT/TEXTAREA (common) */ input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea { /* * Note: Remove the three colors (background-color, border-color, and color) and set the FF form * to "Inherit Theme Styles" to drive the colors from Customizer >> Colors >> Content. * https://generate.support/topic/override-fluent-forms-style-with-generatepress-customizer-style/ */ background-color: var( --pog-black-off ); border: none; border-color: var( --pog-white-off ); border-radius: 0; border-style: solid; border-width: 0.15em 0; color: var( --pog-white-off ); font-family: 'Lexend'; } input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select.:focus, textarea.:focus { box-shadow: 0 0 1em 0 var( --pog-white-off ); } input[type="email"].::placeholder, input[type="number"].::placeholder, input[type="password"].::placeholder, input[type="search"].::placeholder, input[type="tel"].::placeholder, input[type="text"].::placeholder, input[type="url"].::placeholder, select.::placeholder, textarea.::placeholder { color: currentColor; font-family: 'Lexend'; font-size: 0.75em; opacity: 0.25; } /* CHECKBOX */ input[type="checkbox"] { position: relative; appearance: none; -webkit-appearance: none; border: 0.1em solid var( --pog-white-off ); border-radius: 0; height: 0.8em; width: 0.8em; } input[type="checkbox"]:checked:after { content: ""; position: absolute; border: 0 solid var( --pog-white ); border-width: 0 0.2em 0.2em 0; inset: 0.1em; top: 0; transform: rotate( 22.5deg ); } /* NUMERIC */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } /* RADIO */ input[type="radio"] { appearance: none; -webkit-appearance: none; border: 0.1em solid var( --pog-white-off ); border-radius: 1em; height: 0.8em; width: 0.8em; } input[type="radio"]:checked { background: var( --pog-white ); } /* SELECT */ select { appearance: none; background: var( --pog-black-off ) !important; color: var( --pog-white-off ) !important; } select:focus { border-color: var( --pog-white-off ) !important; box-shadow: 0 0 1em 0 var( --pog-white-off ); } /* TEXTAREA */ textarea::-webkit-scrollbar { width: 0.25em; } textarea::-webkit-scrollbar-track { background: var( --pog-black-off ); } textarea::-webkit-scrollbar-thumb { background: var( --pog-white-off ); } textarea { appearance: none; background: var( --pog-black-off ) !important; color: var( --pog-white-off ) !important; } textarea:focus { border-color: var( --pog-white-off ) !important; box-shadow: 0 0 1em 0 var( --pog-white-off ); } /* * The auto-complete does not respect background-color because browsers * override it with an !important designation, so to change the background * color, special hacky styling is required. */ :-webkit-autofill, :-webkit-autofill:active, :-webkit-autofill:focus, :-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px var( --pog-black-off ) inset !important; -webkit-text-fill-color: var( --pog-white-off ); } /*///////////////////////// * FORMAT: LINKS */ /* Links should have a special underline. */ a:not(.button-x) { padding: 0.25em; text-decoration: none; transition: all 500ms ease; } a:has(img):not(.button-x) { padding: 0; } a:not(.button-x):hover { background: var( --pog-white ); } /*///////////////////////// * FORMAT: LISTS */ /* The lists are indented way too far. */ ul { margin-left: 3em; } /*///////////////////////// * FORMAT: SCROLLBAR */ /* Change the width of the scrollbar. */ body::-webkit-scrollbar { width: 1em; } /* The background area where the thumb is not visible. */ body::-webkit-scrollbar-track { background: var( --pog-olive ); } /* The small bit that moves back-and-forth. */ body::-webkit-scrollbar-thumb { background: var( --pog-olive-light ); } /*///////////////////////// * FORMAT: TYPOGRAPHY */ /* * These are the general text sizes we use across the site. * Note: These values are referenced in the Customizer, so if changed here, the whole site will get it. * Note: Useful locally for when

,

, and elements need to visually look to be a certain size, but not affect SEO. */ :root { --pog-body-size: 1.25em; --pog-button-size: 1.25em; --pog-h1-size: 3em; --pog-h2-size: 2.7em; --pog-h3-size: 2.4em; --pog-h4-size: 2.1em; --pog-h5-size: 1.8em; --pog-h6-size: 1.5em; --pog-body-size-tablet: 1.25em; --pog-button-size-tablet: 1.1em; --pog-h1-size-tablet: 2.3em; --pog-h2-size-tablet: 2.1em; --pog-h3-size-tablet: 1.9em; --pog-h4-size-tablet: 1.7em; --pog-h5-size-tablet: 1.5em; --pog-h6-size-tablet: 1.3em; --pog-body-size-mobile: 1.25em; --pog-button-size-mobile: 1em; --pog-h1-size-mobile: 1.6em; --pog-h2-size-mobile: 1.5em; --pog-h3-size-mobile: 1.4em; --pog-h4-size-mobile: 1.3em; --pog-h5-size-mobile: 1.2em; --pog-h6-size-mobile: 1.1em; } /*///////////////////////// * AREA: BLOG */ /* * Adding outer/inner containers to every article is just asking to have a human error somewhere. * As such, build that padding into the regular WP structure instead. */ article.type-post { padding: var( --outer-xs-padding-y ) calc( var( --outer-padding-x ) + var( --inner-padding-x ) ) var( --outer-xs-padding-y ); } @media ( max-width: 1024px ) { article.type-post { padding: var( --outer-xs-padding-y-tablet ) calc( var( --outer-padding-x-tablet ) + var( --inner-padding-x-tablet ) ) var( --outer-xs-padding-y-tablet ); } } @media ( max-width: 767px ) { article.type-post { padding: var( --outer-xs-padding-y-mobile ) calc( var( --outer-padding-x-mobile ) + var( --inner-padding-x-mobile ) ) var( --outer-xs-padding-y-mobile ); } } /* * Default spacing for the blog content. Blog authors should place their content into a flat list * of logical Containers, then label those Containers. The following CSS will space things out. * Note: The special CSS selector is also targeting the backend so authors can see the spacing * without needing to flip over to the frontend for a preview constantly. */ article.type-post .entry-content, :where(.editor-styles-wrapper) .is-root-container.wp-block-post-content { display: flex; flex-direction: column; padding-bottom: 2em; padding-top: 2em; row-gap: 5em; } article.type-post .entry-content figure, .is-root-container.wp-block-post-content figure { margin-bottom: 0.5em; } /* * The comments area cannot be overwritten through GP/GB, so styling must be manual here. */ .comments-area { padding: var( --outer-xs-padding-y ) calc( var( --outer-padding-x ) + var( --inner-padding-x ) ); } @media ( max-width: 1024px ) { .comments-area { padding: var( --outer-xs-padding-y-tablet ) calc( var( --outer-padding-x-tablet ) + var( --inner-padding-x-tablet ) ); } } @media ( max-width: 767px ) { .comments-area { padding: var( --outer-xs-padding-y-mobile ) calc( var( --outer-padding-x-mobile ) + var( --inner-padding-x-mobile ) ); } } .comments-area input#author { width: 100%; } .comments-area input#email { width: 100%; } .comments-area input#url { width: 100%; } .comments-area .comment-form { margin-bottom: 2em; } /*///////////////////////// * AREA: HEADER */ /* * The header has some special requirements - should stick to the top. * Note: GB doc says 767px, but my local Chrome says 781px for mobile. */ #header { position: sticky; top: 0; z-index: 99; } body.logged-in > #header { top: 32px; } @media ( max-width: 767px ) { body.logged-in > #header { top: 0; } } /*///////////////////////// * AREA: OFF-CANVAS PANEL */ /* * This section changes the styling of the off-canvas panel. * * Can change the width of the panel. * * GP puts an X at the top corner of the off-canvas panel - * we are replacing it with our own, so remove the GP version. */ :root { /* --gp-slideout-width: 90vw !important; */ } .slideout-exit { display: none !important; } /*///////////////////////// * PLUGIN: GENERATEBLOCKS * https://generateblocks.com */ /* * Not all properties are exposed through the GUI for the Carousel Bullets. * https://generate.support/topic/carousel-not-displaying-two-slides-at-once/#post-192701 */ /* DAN-NOTE: Keep bullets round for now, but uncomment this bit to make square. */ /* .gb-carousel-pagination .gb-carousel-dot { border-radius: 0; } */ /*///////////////////////// * PLUGIN: FLUENT FORMS * https://fluentforms.com * Note: Ensure that each form is set to "Inherit Theme Style". */ /* Labels surrounding the fields. */ .fluentform label { font-family: 'Fugaz One'; text-transform: uppercase; } /* Error styling for the input fields/messages. */ .fluentform .error.text-danger { background-color: var( --pog-white-off ); border-radius: 0; color: var( --pog-red ); font-family: 'Lexend'; font-weight: bold; line-height: 1.2em; padding: 0.5em; text-transform: uppercase; } .fluentform .ff-el-is-error input[type="email"].ff-el-form-control, .fluentform .ff-el-is-error input[type="number"].ff-el-form-control, .fluentform .ff-el-is-error input[type="password"].ff-el-form-control, .fluentform .ff-el-is-error input[type="search"].ff-el-form-control, .fluentform .ff-el-is-error input[type="tel"].ff-el-form-control, .fluentform .ff-el-is-error input[type="text"].ff-el-form-control, .fluentform .ff-el-is-error input[type="url"].ff-el-form-control, .fluentform .ff-el-is-error select.ff-el-form-control, .fluentform .ff-el-is-error textarea.ff-el-form-control { border-color: var( --pog-red ); } .fluentform > .ff-message-success, .fluentform > .ff-message-success > p { border: none; box-shadow: none; margin: 0; } /* * Several field types are not completely (or at all) styled * with the base text and base button efforts. Thus, this * section covers everything else. */ /* ACCORDION */ .fluentform div.ff-accordion-container { border: none; } .fluentform div.ff-accordion-container > div.ff-accordion-content { background: var( --pog-black ); border: 0; } .fluentform div.ff-accordion-container > div.ff-accordion-header { background: var( --pog-black-off ); } .fluentform div.ff-accordion-container > div.ff-accordion-header > * { color: var( --pog-white ); font-size: revert; } .fluentform div.ff-accordion-container .ff-accordion-icon::after, .fluentform div.ff-accordion-container .ff-accordion-icon::before { background: var( --pog-white ) !important; } /* BUTTONS */ .fluentform button[type=submit].ff-btn-submit, .fluentform span.ff_upload_btn:has( ~input[type=file] ), .fluentform div.ff-step-body > div.fluentform-step .step-nav > button[type=button] { /* Default color scheme for most of the FF buttons. */ background-color: var( --pog-olive-dark ); color: var( --pog-white ); /* FF buttons should not have a border. */ border: none; } .fluentform button[type=submit].ff-btn-submit:focus, .fluentform button[type=submit].ff-btn-submit:hover { /* No idea why FF changes hover opacity to 0.8. */ opacity: 1; /* Default hover color for all the FF submit buttons. */ background-color: var( --pog-brown ); color: var( --pog-white ); } /* CHAINED SELECT */ .fluentform select.el-chained-select:disabled { opacity: 0.5; } /* CHECKBOX */ .fluentform input[type="checkbox"].ff-el-form-check-checkbox+span { font-family: 'Lexend'; text-transform: none; } .fluentform span.ff_tc_checkbox { padding-right: 0.5em; } /* CHECKBOX GRID */ .fluentform table.ff-checkable-grids { border: 0; } .fluentform table.ff-checkable-grids thead > tr > th { background: var( --pog-black ); border-radius: 0; color: var( --pog-white-off ); } .fluentform table.ff-checkable-grids tbody > tr > td { border-radius: 0; } .fluentform table.ff-checkable-grids tbody > tr:nth-child( 2n ) > td { background: var( --pog-olive ); color: var( --pog-white-off ); } .fluentform table.ff-checkable-grids tbody > tr:nth-child( 2n-1 ) > td { background: var( --pog-olive-dark ); color: var( --pog-white-off ); } /* COLOR PICKER */ .fluentform input[type=text].ff-el-color { background: var( --pog-black-off ) !important; color: var( --pog-white-off ) !important; } div.pcr-app { background: var( --pog-black ); border-color: var( --pog-olive-light ); border-style: solid; border-width: 0.25em 0; color: var( --pog-black ); } div.pcr-app div.pcr-selection > div.pcr-color-preview::before { background: none !important; } div.pcr-app div.pcr-interaction > input.pcr-result { background: var( --pog-black-off ); border: 0; color: var( --pog-white-off ); } div.pcr-app div.pcr-interaction > input.pcr-result:focus { box-shadow: 0 0 1em 0 var( --pog-white-off ); } div.pcr-app div.pcr-interaction > input.pcr-clear { background: var( --pog-black-off ); color: var( --pog-white ); } div.pcr-app div.pcr-interaction > input.pcr-save { background: var( --pog-white-off ); color: var( --pog-black ); } /* DATE/TIME CALENDAR - https://flatpickr.js.org */ /* Calendar. */ .flatpickr-calendar { background: var( --pog-black-off ) !important; border-color: var( --pog-white-off ) !important; border-style: solid !important; border-radius: 0 !important; border-width: 0.25em 0 !important; box-shadow: none !important; } .flatpickr-calendar::after, .flatpickr-calendar::before { border: 0 !important; } .flatpickr-calendar .flatpickr-months .flatpickr-month, .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday, .flatpickr-calendar .flatpickr-days .flatpickr-day { color: var( --pog-white-off ) !important; } .flatpickr-calendar .flatpickr-months .flatpickr-next-month, .flatpickr-calendar .flatpickr-months .flatpickr-prev-month { fill: var( --pog-olive-light ); } .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg { fill: var( --pog-white-off ); } .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-months > option { appearance: none; background: var( --pog-black-off ) !important; color: var( --pog-white-off ) !important; } .flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowUp { background: var( --pog-white-off ); } .flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowUp::after { border-bottom-color: var( --pog-black ); } .flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowDown { background: var( --pog-white-off ); } .flatpickr-calendar .flatpickr-months .numInputWrapper > .arrowDown::after { border-top-color: var( --pog-black ); } .flatpickr-calendar .flatpickr-days .flatpickr-day.nextMonthDay, .flatpickr-calendar .flatpickr-days .flatpickr-day.prevMonthDay { color: var( --pog-olive ) !important; } .flatpickr-calendar .flatpickr-days .flatpickr-day.today { border: 2px solid var( --pog-white-off ); } .flatpickr-calendar .flatpickr-days .flatpickr-day.selected { background: var( --pog-olive-light ); border: 0; color: var( --pog-black ); } .flatpickr-calendar .flatpickr-days .flatpickr-day:focus, .flatpickr-calendar .flatpickr-days .flatpickr-day:hover { background: var( --pog-olive ); border: 0; } /* Time. */ .flatpickr-time { background: var(--pog-black-off ) !important; border: 0 !important; } .flatpickr-time .flatpickr-hour, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-minute, .flatpickr-time .flatpickr-am-pm { color: var( --pog-white-off ) !important; } .flatpickr-time .flatpickr-hour:focus, .flatpickr-time .flatpickr-hour:hover, .flatpickr-time .flatpickr-minute:focus, .flatpickr-time .flatpickr-minute:hover { background: var( --pog-black-off ); color: var( --pog-white-off ); } .flatpickr-time .numInputWrapper > .arrowUp { background: var( --pog-white-off ); } .flatpickr-time .numInputWrapper > .arrowUp::after { border-bottom-color: var( --pog-black ); } .flatpickr-time .numInputWrapper > .arrowDown { background: var( --pog-white-off ); } .flatpickr-time .numInputWrapper > .arrowDown::after { border-top-color: var( --pog-black ); } .flatpickr-time .flatpickr-am-pm:focus, .flatpickr-time .flatpickr-am-pm:hover { background: var( --pog-peach-dark ) !important; color: var( --pog-white-off ) !important; } /* DYNAMIC FIELD */ .fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions { background: var( --pog-black-off ); color: var( --pog-white-off ); } .fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions > ul { overflow: hidden; } .fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions > ul > li { border: 0; } .fluentform div.ff-dynamic-autocomplete-wrap > div.ff-autocomplete-suggestions > ul > li:hover { background: var( --pog-olive-dark ); } /* FILE UPLOAD */ .fluentform div.ff-dropzone span.ff_upload_btn.ff-btn { background: var( --pog-black ); border-color: var( --pog-white-off ); color: var( --pog-white ); opacity: 0.75; } .fluentform div.ff-dropzone span.ff_upload_btn.ff-btn:focus, .fluentform div.ff-dropzone span.ff_upload_btn.ff-btn:hover { background: var( --pog-black ); opacity: 1.0; } .fluentform div.ff-upload-preview { border: 0.25em solid var( --pog-white-off ); } .fluentform div.ff-upload-thumb, .fluentform div.ff-upload-thumb > div.ff-upload-preview-img { background: var( --pog-brown ); border-radius: 0; } .fluentform div.ff-upload-details { border: 0; } /* MULTISELECT */ .fluentform div.choices.is-focused { box-shadow: 0 0 1em 0 var( --pog-white-off ); } .fluentform div.choices, .fluentform div.choices > div.choices__inner, .fluentform div.choices > div.choices__list { /* * NOTE: Keep this styling the same as the default base form fields, * (input, select, textarea) found towards the start of this CSS file. */ background-color: var( --pog-black-off ); border: none; border-color: var( --pog-white-off ); border-radius: 0; border-style: solid; border-width: 0.15em 0; color: var( --pog-white-off ); font-family: 'Lexend'; } .fluentform div.choices > div.choices__list div.is-highlighted { background-color: var( --pog-olive-dark ); } .fluentform div.choices > div.choices__inner > div.choices__list div.choices__item { background-color: var( --pog-olive-dark ); border: none; color: var( --pog-white-off ); } /* NET PROMOTER SCORE */ .fluentform table.ff_net_table > thead { color: var( --pog-white-off ); } .fluentform table.ff_net_table > tbody > tr > td { background: transparent; border: 0; } .fluentform table.ff_net_table > tbody > tr > td > input + label { background: var( --pog-olive ); color: var( --pog-white-off ); transition: all 0.1s ease-out; } .fluentform table.ff_net_table > tbody > tr > td > input + label:hover { background: var( --pog-olive-light ); color: var( --pog-black ); } .fluentform table.ff_net_table > tbody > tr > td > input:checked + label { background: var( --pog-olive-light ); color: var( --pog-black ); transform: scale( 1.25 ); z-index: 1; } .fluentform table.ff_net_table > tbody > tr > td > input:not(:checked) + label { border-radius: 0; } .fluentform table.ff_net_table > tbody > tr > td > input + label::after { border: 0; } /* PAGE */ .fluentform div.ff-step-container div.fluentform-step::-webkit-scrollbar { background: var( --pog-black-off ); } .fluentform div.ff-step-container div.fluentform-step::-webkit-scrollbar-thumb { background: var( --pog-olive ); } .fluentform div.ff-step-container div.fluentform-step::-webkit-scrollbar-track { background: var( --pog-olive-dark ); } /* PHONE */ .fluentform button.iti__selected-country { background-color: transparent; } .fluentform div.iti__dropdown-content { border-width: 0; } .fluentform ul.iti__country-list { background: var( --pog-black-off ); border-radius: 0; color: var( --pog-white-off ); } .fluentform ul.iti__country-list::-webkit-scrollbar { background: var( --pog-black-off ); } .fluentform ul.iti__country-list::-webkit-scrollbar-thumb { background: var( --pog-olive ); } .fluentform ul.iti__country-list::-webkit-scrollbar-track { background: var( --pog-olive-dark ); } /* PROGRESS BAR */ .fluentform div.ff-el-progress { background: var( --pog-white ); color: var( --pog-black ); } .fluentform div.ff-el-progress > div.ff-el-progress-bar { background: var( --pog-peach ); color: var( --pog-white ); } /* RADIO */ .fluentform input[type="radio"].ff-el-form-check-radio ~ span { font-family: 'Lexend'; text-transform: none; } /* RANGE SLIDER */ .fluentform div.rangeslider { background: var( --pog-white-off ); } .fluentform div.rangeslider > div.rangeslider__fill { background: var( --pog-olive-light ); } .fluentform div.rangeslider > div.rangeslider__handle { background: var( --pog-olive ); border-color: var( --pog-white-off ); } .fluentform div.rangeslider + div.ff_range_value { color: var( --pog-white-off ); } /* RATINGS */ .fluentform div.ff-el-ratings label svg.ff-svg { fill: var( --pog-white-off ); } .fluentform div.ff-el-ratings label.active svg.ff-svg { fill: var( --pog-peach ); } /* REPEATER */ .fluentform table.ff_repeater_table div.ff-el-repeat-buttons-list { fill: var( --pog-white-off ); } /* RICH TEXT */ /* TinyMCE top-level header/footer. */ .fluentform div.mce-tinymce.mce-container.mce-panel { background: var( --pog-black-off ) !important; border-color: var( --pog-white-off ) !important; border-style: solid !important; border-radius: 0 !important; border-width: 0.25em 0 !important; box-sizing: border-box !important; } .fluentform div.mce-tinymce div.mce-toolbar-grp, .fluentform div.mce-tinymce div.mce-statusbar { background: var( --pog-black-off ); border-radius: 0; color: var( --pog-white-off ); } .fluentform div.mce-tinymce div.mce-edit-area { border-radius: 0; } /* TinyMCE toolbar dropdown. */ .fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn, .fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:focus, .fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:hover { background: var( --pog-black-off ); border: 0; } .fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn button, .fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:focus button, .fluentform div.mce-tinymce div.mce-toolbar div.mce-btn-group div.mce-menubtn:hover button { color: var( --pog-white-off ); } /* TinyMCE toolbar buttons. */ .fluentform div.mce-tinymce i.mce-ico, .fluentform div.mce-tinymce i.mce-ico { color: var( --pog-white-off ); } .fluentform div.mce-tinymce div.mce-btn.mce-active { background: var( --pog-olive ); } .fluentform div.mce-tinymce div.mce-btn:focus, .fluentform div.mce-tinymce div.mce-btn.mce-active:focus, .fluentform div.mce-tinymce div.mce-btn.mce-disabled:focus, .fluentform div.mce-tinymce div.mce-btn:hover, .fluentform div.mce-tinymce div.mce-btn.mce-active:hover, .fluentform div.mce-tinymce div.mce-btn.mce-disabled:hover { background: var( --pog-olive-light ); border-color: transparent; box-shadow: none; } .fluentform div.mce-tinymce div.mce-btn:focus i.mce-ico, .fluentform div.mce-tinymce div.mce-btn.mce-disabled:focus i.mce-ico, .fluentform div.mce-tinymce div.mce-btn:hover i.mce-ico, .fluentform div.mce-tinymce div.mce-btn.mce-disabled:hover i.mce-ico { color: var( --pog-white-off ); } .fluentform div.mce-tinymce div.mce-btn button:focus, .fluentform div.mce-tinymce div.mce-btn button:hover { background: transparent; } /* TinyMCE dialogs. */ div.mce-panel.mce-inline-toolbar-grp, div.mce-floatpanel > div.mce-reset, div.mce-floatpanel.mce-popover { background: var( --pog-black-off ); border-color: var( --pog-white-off ); border-style: solid; border-radius: 0; border-width: 0.25em 0; } div.mce-arrow-up::before, div.mce-arrow-up::after { border-bottom-color: var( --pog-black-off ) !important; } div.mce-arrow-down::before, div.mce-arrow-down::after { border-top-color: var( --pog-black-off ) !important; } div.mce-btn, div.mce-btn:active, div.mce-btn:focus, div.mce-btn:hover, div.mce-btn.mce-primary, div.mce-btn.mce-primary:active, div.mce-btn.mce-primary:focus, div.mce-btn.mce-primary:hover, div.mce-btn > button, div.mce-btn > button:active, div.mce-btn > button:focus, div.mce-btn > button:hover, div.mce-btn.mce-primary > button, div.mce-btn.mce-primary:active > button, div.mce-btn.mce-primary:focus > button, div.mce-btn.mce-primary:hover > button { background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; } div.mce-btn { background: var( --pog-black-off ) !important; } div.mce-btn:active, div.mce-btn:focus, div.mce-btn:hover { background: var( --pog-black ) !important; } div.mce-btn > button, div.mce-btn > button > i.mce-ico { color: var( --pog-white-off ) !important; } div.mce-btn.mce-primary { background: var( --pog-white-off ) !important; } div.mce-btn.mce-primary:active, div.mce-btn.mce-primary:focus, div.mce-btn.mce-primary:hover { background: var( --pog-olive-light ) !important; } div.mce-btn.mce-primary > button, div.mce-btn.mce-primary > button > i.mce-ico { color: var( --pog-black ) !important; } div.mce-btn > button > span.mce-txt, div.mce-btn.mce-primary > button > span.mce-txt { font-family: 'Fugaz One' !important; } /* TinyMCE dialog color grid. */ table.mce-colorbutton-grid div.mce-widget { background: transparent; } table.mce-colorbutton-grid div.mce-widget button { color: var( --pog-white-off ); } table.mce-colorbutton-grid div.mce-widget button:hover { background: transparent; color: var( --pog-olive-light ); } /* TinyMCE dialog color selector. */ div.mce-floatpanel div.mce-window-head, div.mce-floatpanel div.mce-window-body, div.mce-floatpanel div.mce-foot { background: var( --pog-black-off ); border: 0; } div.mce-floatpanel div.mce-window-head > div.mce-title, div.mce-floatpanel div.mce-window-head > button.mce-close > i.mce-ico::before, div.mce-floatpanel div.mce-window-body label.mce-label { color: var( --pog-white-off ) !important; font-family: 'Fugaz One' !important; font-weight: normal !important; text-shadow: 0 !important; text-transform: uppercase !important; } div.mce-floatpanel input.mce-textbox { background: var( --pog-black ); border: 0; color: var( --pog-white-off ); } div.mce-floatpanel input.mce-textbox:focus { box-shadow: 0 0 1em 0 var( --pog-white-off ); } div.mce-floatpanel div.mce-colorpicker-h, div.mce-floatpanel div.mce-colorpicker-sv { border: 0; } /* TinyMCE dialog link. */ div.mce-panel.mce-toolbar-grp div.wp-link-input > label { color: var( --pog-white-off ); font-family: 'Fugaz One'; font-weight: normal; text-shadow: 0; text-transform: uppercase; } div.mce-panel.mce-toolbar-grp div.wp-link-input > input { background: var( --pog-black ); border: 0; color: var( --pog-white-off ); } div.mce-panel.mce-toolbar-grp div.wp-link-input > input:focus { box-shadow: 0 0 1em 0 var( --pog-white-off ); } /* TinyMCE dialog link options - oddly, FF does not use classes??. */ #wp-link, #wp-link > #link-modal-title, #wp-link > #link-selector, #wp-link > div.submitbox { background: var( --pog-black ); border: 0; color: var( --pog-white-off ); } #wp-link { border-color: var( --pog-olive-light ); border-style: solid; border-width: 0.25em 0; } #wp-link button#wp-link-close { color: var( --pog-white-off ); } div.mce-floatpanel div.mce-window-head > div.mce-title, div.mce-floatpanel div.mce-window-head > button.mce-close > i.mce-ico::before, div.mce-floatpanel div.mce-window-body label.mce-label { color: var( --pog-white-off ) !important; font-family: 'Fugaz One' !important; font-weight: normal !important; text-shadow: 0 !important; text-transform: uppercase !important; } #wp-link div#most-recent-results { background: var( --pog-white-off ); color: var( --pog-black ); } #wp-link div#most-recent-results { border: 0; box-shadow: none; } #wp-link div#most-recent-results::-webkit-scrollbar { background: var( --pog-black-off ); } #wp-link div#most-recent-results::-webkit-scrollbar-thumb { background: var( --pog-olive ); } #wp-link div#most-recent-results::-webkit-scrollbar-track { background: var( --pog-olive-dark ); } #wp-link div#most-recent-results > div#query-notice-message { background: var( --pog-white-off ); border: 0; border-radius: 0; color: var( --pog-black ); overflow: hidden; } #wp-link div#most-recent-results > div#query-notice-message > em.query-notice-default, #wp-link div#most-recent-results > div#query-notice-message > em.query-notice-hint { border-color: var( --pog-peach-dark ); border-radius: 0; } #wp-link div#wp-link-cancel > button, #wp-link div#wp-link-update > input { background: var( --pog-black ); border: 0; color: var( --pog-white-off ); padding: var( --button-padding ); } #wp-link div#wp-link-cancel > button:hover { background: var( --pog-black-off ); } #wp-link div#wp-link-update > input { background: var( --pog-white-off ); color: var( --pog-black ); } #wp-link div#wp-link-update > input:hover { background: var( --pog-olive-light ); } /* STEPS */ .fluentform ul.ff-step-titles > li::before { background: var( --pog-white ); color: var( --pog-black ); } .fluentform ul.ff-step-titles > li.ff_active::before { background: var( --pog-peach ); color: var( --pog-white ); } .fluentform ul.ff-step-titles > li.ff_completed:before { background: var( --pog-peach-light ); color: var( --pog-white-off ); } .fluentform ul.ff-step-titles > li.ff_active::after, .fluentform ul.ff-step-titles > li.ff_completed::after { background: var( --pog-white ); } .fluentform ul.ff-step-titles > li > span { color: var( --pog-white ); } /* * There are times when we want to change the styling of an element, * but only in special one-off type of cases, so create class overrides * here that can optionally be used. */ /* BUTTONS */ /* theme-black */ .fluentform button[type=submit].ff-btn-submit.theme-black, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-black ), .fluentform div.ff-step-body > div.fluentform-step.theme-black .step-nav > button[type=button] { background-color: var( --pog-black ); color: var( --pog-white ); } .fluentform button[type=submit].ff-btn-submit.theme-black:focus, .fluentform button[type=submit].ff-btn-submit.theme-black:hover, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-black ):focus, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-black ):hover, .fluentform div.ff-step-body > div.fluentform-step.theme-black .step-nav > button[type=button]:focus, .fluentform div.ff-step-body > div.fluentform-step.theme-black .step-nav > button[type=button]:hover { background-color: var( --pog-black-off ); color: var( --pog-white ); } /* theme-olive */ .fluentform button[type=submit].ff-btn-submit.theme-olive, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-olive ), .fluentform div.ff-step-body > div.fluentform-step.theme-olive .step-nav > button[type=button] { background-color: var( --pog-olive-light ); color: var( --pog-black ); } .fluentform button[type=submit].ff-btn-submit.theme-olive:focus, .fluentform button[type=submit].ff-btn-submit.theme-olive:hover, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-olive ):focus, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-olive ):hover, .fluentform div.ff-step-body > div.fluentform-step.theme-olive .step-nav > button[type=button]:focus, .fluentform div.ff-step-body > div.fluentform-step.theme-olive .step-nav > button[type=button]:hover { background-color: var( --pog-brown ); color: var( --pog-white-off ); } /* theme-peach */ .fluentform button[type=submit].ff-btn-submit.theme-peach, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-peach ), .fluentform div.ff-step-body > div.fluentform-step.theme-peach .step-nav > button[type=button] { background-color: var( --pog-peach ); color: var( --pog-white ); } .fluentform button[type=submit].ff-btn-submit.theme-peach:focus, .fluentform button[type=submit].ff-btn-submit.theme-peach:hover, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-peach ):focus, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-peach ):hover, .fluentform div.ff-step-body > div.fluentform-step.theme-peach .step-nav > button[type=button]:focus, .fluentform div.ff-step-body > div.fluentform-step.theme-peach .step-nav > button[type=button]:hover { background-color: var( --pog-peach-dark ); color: var( --pog-white ); } /* theme-white */ .fluentform button[type=submit].ff-btn-submit.theme-white, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-white ), .fluentform div.ff-step-body > div.fluentform-step.theme-white .step-nav > button[type=button] { background-color: var( --pog-white-off ); color: var( --pog-black ); } .fluentform button[type=submit].ff-btn-submit.theme-white:focus, .fluentform button[type=submit].ff-btn-submit.theme-white:hover, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-white ):focus, .fluentform span.ff_upload_btn:has( ~input[type=file].theme-white ):hover, .fluentform div.ff-step-body > div.fluentform-step.theme-white .step-nav > button[type=button]:focus, .fluentform div.ff-step-body > div.fluentform-step.theme-white .step-nav > button[type=button]:hover { background-color: var( --pog-white ); color: var( --pog-black ); } .fluentform .ff-btn { margin-bottom: 0 !important; } /* CONTAINER */ .fluentform .ff-t-container.centered { align-items: center; } /* GROUP */ .fluentform .ff-el-group.marginless { margin-bottom: 0; } /*///////////////////////// * PLUGIN: WOOCOMMERCE * https://woocommerce.com/ */ /* * There is a known bug where the 'em' sizing is not being respected for WC buttons. * https://generate.support/topic/woocommerce-add-to-cart-font-size/ * * Additionally, there are at least six WC buttons that cannot be completely/properly * styled in the Customizer AND additionally are a real PITA to style with needless and * ridiculously specific CSS selectors. * * As a result, this seems like a good place to give all WC buttons a default style. * Downside to this is that because the CSS selectors are not necessarily the most * specific, the '!important' adjustment will need to be added in some cases. * * Also note that we are adding the Comments Area (not just WC) here since it suffers * from something similar that needs the manual styling like this. */ /*DAN-TEST .comments-area input[type=submit], .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page input.submit { clip-path: var( --morph-3-shape ) !important; font-size: 1.25em !important; padding: 1em 1.25em !important; } @media ( max-width: 1024px ) { .comments-area input[type=submit], .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page input.submit { font-size: 1.1em !important; } } @media ( max-width: 767px ) { .comments-area input[type=submit], .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page input.submit { font-size: 1em !important; } } */ /* * Fake the container concept on the Product-related Pages. * Note: The below section of CSS is a subset of the Container CSS. * I was tempted to add directly to that CSS, but figured that * keeping it separate would make it more clear at the expense * of additional maintenance. * * Note: Also, #page acts as the outer and #content acts as the inner. */ /*DAN-TEST .woocommerce div#content { margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: var( --inner-padding-x ); padding-right: var( --inner-padding-x ); width: 100%; } .woocommerce div#page { overflow: hidden; padding: var( --outer-xs-padding-y ) var( --outer-xs-padding-x ); } @media ( max-width: 1024px ) { .woocommerce div#page { padding: var( --outer-xs-padding-y-tablet ) var( --outer-xs-padding-x-tablet ); } } @media ( max-width: 767px ) { .woocommerce div#content { padding-left: var( --inner-padding-x-mobile ); padding-right: var( --inner-padding-x-mobile ); } .woocommerce div#page { padding: var( --outer-xs-padding-y-mobile ) var( --outer-xs-padding-x-mobile ); } } */ /* There is a Mini-Cart Block that WC provides. It needs some attention to make it look right. */ /*DAN-TEST .wc-block-mini-cart { font-size: 1em; } */ .wc-block-mini-cart .wc-block-mini-cart__button { /* Uncomment this to give the cart button a background. */ /*background: var( --pog-olive-light );*/ /*DAN-TEST padding: 0.5em; transform: skew( var( --slant-skew-right ), 0 ); */ } /*DAN-TEST .wc-block-mini-cart .wc-block-mini-cart__button:focus, .wc-block-mini-cart .wc-block-mini-cart__button:hover:not([disabled]) { background: var( --pog-brown ); opacity: 1; } */ .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount { /* Intentionally empty. */ } .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount:focus, .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__amount:hover { /* Intentionally empty. */ } .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge { /* Intentionally empty. */ } /*DAN-TEST .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__icon { color: var( --pog-white ); } .wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge { background-color: var( --pog-white ); border-radius: 0; color: var( --pog-black ); } */ /* * WC sets the visibility of the Mini-Cart to "hidden" on the Cart/Checkout Pages. * However, this continues to take up the space and just leave it blank, so it looks * weird when the other icons in the top bar do not adjust. Thus, use display. */ /*DAN-TEST .woocommerce-cart .wc-block-mini-cart, .woocommerce-checkout .wc-block-mini-cart { display: none; } */ /* When the Mini-Cart is clicked, there is a drawer that slides out. * The default styling is largely white-on-white. */ /*DAN-TEST .wp-block-woocommerce-mini-cart-contents { background: var( --black ); border-left: solid 0.5em var( --white ); } */ .wp-block-woocommerce-mini-cart-contents .wp-block-woocommerce-mini-cart-shopping-button-block { /*DAN-NOTE: Custom Morph Button */ /*DAN-TEST border-radius: 0; clip-path: var( --morph-1-shape ); */ } /* * Style up the Product Archive Pages. * Note: We are specifically styling up the Archives; not intending to * style up places like the Related Products and such here. */ .woocommerce.woocommerce-page ul.products li.product .wc-product-image { /*DAN-TEST padding: 1em; */ /*DAN-NOTE: Keeping the below snippet around for now - uncomment to surround product image in a morphed frame. */ /* background: var( --blue-dark ); clip-path: var( --morph-4-shape ); padding: 2em; position: relative; */ } /*DAN-TEST .woocommerce.woocommerce-page span.onsale { background: var( --purple-dark ); clip-path: var( --morph-3-shape ); } .woocommerce.woocommerce-page ul.products li.product .woocommerce-loop-product__title { color: var( --orange ); font-size: 1.8em; text-wrap: balance; } */ .woocommerce.woocommerce-page ul.products li.product .woocommerce-product-details__short-description { /* Note: I tried "text-wrap: balance;", but did not look great. Keeping stub around for future. */ } /*DAN-TEST .woocommerce.woocommerce-page ul.products li.product .price { color: var( --blue ); font-size: 1.2em; } .woocommerce.woocommerce-page ul.products li.product .price del { color: var( --blue-dark ); font-weight: normal; opacity: 1; } .woocommerce.woocommerce-page ul.products li.product .price ins { color: var( --green ); font-size: 1.2em; font-weight: bold; } */ /* * No need to show the default Product Tax Archive Description. */ /*DAN-TEST .woocommerce.woocommerce-page .woocommerce-products-header { display: none; } */ /* Show the first product in the first row by itself, as a sort of featured product. */ /*DAN-NOTE: Does not look great, but leave it around just in case. .woocommerce.archive .woocommerce-products-header+div ul > li:first-child { grid-column: 1 / -1; } */ /* * WC bases the icons of the ATC AJAX button on the 'button' class; however, we do not want to use * the 'button' class due to the look, so we need to implement a special icon solution. Specifically: * - There are two states for the ATC button - 'loading' (processing) and 'added' (done) * - Prepopulate the button (in GB) with both icons side-by-side as SVGs. * - When processing, gray the button (optionally), disable clicks, and spin the load icon. * - Hide the "View Cart" that normally appears after the button; the header/alert are enough. */ /*DAN-TEST .ajax_add_to_cart { transition: all 0.25s ease-out; } .ajax_add_to_cart:not(.added, .loading) { column-gap: 0em; } .ajax_add_to_cart svg { display: none; } .ajax_add_to_cart.added svg.check { animation: heartBeat 2s ease 0s 1 normal both; display: inline; } .ajax_add_to_cart.loading { pointer-events: none; position: relative; } .ajax_add_to_cart.loading::after { background-color: var( --pink-dark ); content: ''; height: 100%; inset: 0; opacity: 0.25; position: absolute; width: 100%; } .ajax_add_to_cart.loading svg.spin { animation: rotate 2s ease 0s infinite normal both; display: inline; } @keyframes rotate { from { rotate: 0; } to { rotate: 1turn; } } */ /* * Style up the Single Product Pages. * Note: There are several bits on these Pages that need some specific * attention. In the case of buttons, it may just be a color and * the rest of the styling of the buttons happens across all WC * buttons earlier in this CSS. */ /* Thumbnails are not wrapping properly. */ /*DAN-TEST .woocommerce.single-product div.product div.images .flex-control-thumbs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 0.5em; } .woocommerce.single-product div.product div.images .flex-control-thumbs li { padding: 0; } */ /* Adjust the Product title - it is huge. */ /*DAN-TEST .product_title { font-size: 2.4em; line-height: 1em; margin-bottom: 0.5em; } */ /* Take care of all the Single Product ATC button. */ .woocommerce .button.single_add_to_cart_button { /*DAN-NOTE: Custom Morph Button */ /*DAN-TEST background-color: var( --blue-dark ); */ } .woocommerce .button.single_add_to_cart_button:focus, .woocommerce .button.single_add_to_cart_button:hover { /*DAN-NOTE: Custom Morph Button */ /*DAN-TEST background-color: var( --blue ); */ } /* * Tabs for things like "Description" and "Reviews". * Note: Seriously, everything in WC is so weird and difficult to style. */ /*DAN-TEST .woocommerce div.product .woocommerce-tabs { margin-bottom: 5em; } .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li { font-weight: 700; padding: 1em 1.25em; text-transform: uppercase; } .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a { color: var( --white ); } .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:focus, .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a:hover { color: var( --green-light ); } */ .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active { /*DAN-NOTE: Custom Morph Button */ /*DAN-TEST background: var( --green-dark ); clip-path: var( --morph-2-shape ); */ } /*DAN-TEST .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a { color: var( --white ); } .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active:focus, .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active:hover { background: var( --green ); } */ /* Review bits can look better. */ /*DAN-TEST .woocommerce #review_form p.stars a { color: var( --orange-light ); opacity: 1; } .woocommerce #review_form #respond textarea { height: 5em; } */ /* * There is a sticky panel that WC displays when scrolling down on * Single Product pages - style this bit. */ /*DAN-TEST .woocommerce .add-to-cart-panel { border-bottom: 0.25em solid var( --white ); } */ /* * Fix up some of the Cart/Checkout elements. */ /*DAN-TEST .wc-block-cart__submit-button { background: var( --green-dark ); color: var( --white ); text-decoration: none; } .wc-block-cart__submit-button:focus, .wc-block-cart__submit-button:hover { background: var( --green ); color: var( --white ); } .wc-block-components-checkout-place-order-button { background: var( --pink-dark ); color: var( --white ); } .wc-block-components-checkout-place-order-button:focus, .wc-block-components-checkout-place-order-button:hover { background: var( --pink ); color: var( --white ); } */ /* Make the form labels a bit smaller, as they are currently encroaching a bit. */ /*DAN-TEST .woocommerce-page label { font-size: 0.75em !important; } */ /* * WC uses the WP columns, which have hardcoded breakpoints. In the case * of the Checkout Page, the two columns stack <= 730px. Unfortunately, * the Checkout Block that WC uses in Gutenberg is locked and GB Containers * cannot be swapped out, so instead we need to align the breakpoint instead. * * Reference: * https://wordpress.org/support/topic/change-responsive-beak-point-on-columns/ */ /*DAN-TEST @media (max-width: 768px){ .wp-column-breakpoint { flex-basis: 100% !important; } .wp-column-stack-first { order: 0; margin-bottom: 2em; } .wp-column-stack-last { order: 99; } } @media (min-width: 769px){ .wp-column-breakpoint { flex-basis: 0 !important; flex-grow: 1 !important; } } */ /* * The WC messages need to be aligned properly. Test this by using ATC on non-AJAX (e.g. on Single Pages). */ /*DAN-TEST .woocommerce-message { align-items: center; display: flex; flex-direction: row-reverse; gap: 3em; justify-content: space-between; } .woocommerce-message::after { content: none; } .woocommerce-page .woocommerce-message a.button { background: var( --white ); color: var( --black ); } .woocommerce-page .woocommerce-message a.button:focus, .woocommerce-page .woocommerce-message a.button:hover { background: var( --black ); color: var( --white ); } */ /* * If purchasing from outside the US (with a different currency), WC pops up * a notice at the top of the screen indicating that the pricing is changing * to the customer's local currency. This needs a little styling. * * Demo: * https://squazzed.com/wp-admin/admin.php?page=wc-settings&tab=wcpay_multi_currency */ /*DAN-TEST p.woocommerce-store-notice { background: var( --purple-dark ); font-weight: bold; text-wrap: balance; } p.woocommerce-store-notice > a { font-weight: normal; margin-left: 0.5em; } */ /*///////////////////////// * CLASS: CONTAINERS */ /* * We use a concept of Outer/Inner Containers on almost every Page/Post. * Unfortunately, GP does not offer a nice way to pad or otherwise style * these type of Containers in the Customizer or Elements. To prevent * manually setting values in every GB Block instance, we are using the * Global Styles system to assign the apprpriate class to each Container * and styling it in exactly one place, here. * * Why is this necessary? * Several reasons: * - Without this, the content within Inner Containers would be * butt-up against the left and right edges of the viewport. * - A bunch of the floaters are going outside the bounds of the * Containers and causing the site to scroll horizontally. * * Note * - If the below is empty, there is a chance that the CSS Properties * were set through the GB class styling GUI, not here. * - The "1200" max-width must match the value set in the Customizer. */ :root { --inner-padding-x: 1em; --inner-padding-x-tablet: 1em; --inner-padding-x-mobile: 0.5em; --outer-padding-x: 1em; --outer-padding-y: 7em; --outer-xl-padding-x: var( --outer-padding-x ); --outer-xl-padding-y: 10em; --outer-xs-padding-x: var( --outer-padding-x ); --outer-xs-padding-y: 3em; --outer-padding-x-tablet: 1em; --outer-padding-y-tablet: 4em; --outer-xl-padding-x-tablet: var( --outer-padding-x-tablet ); --outer-xl-padding-y-tablet: 7em; --outer-xs-padding-x-tablet: var( --outer-padding-x-tablet ); --outer-xs-padding-y-tablet: 2em; --outer-padding-x-mobile: 1em; --outer-padding-y-mobile: 5em; --outer-xl-padding-x-mobile: var( --outer-padding-x-mobile ); --outer-xl-padding-y-mobile: 5em; --outer-xs-padding-x-mobile: var( --outer-padding-x-mobile ); --outer-xs-padding-y-mobile: 1em; } .container-inner { display: flex; flex-direction: column; margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: var( --inner-padding-x ); padding-right: var( --inner-padding-x ); row-gap: 3em; width: 100%; } .container-outer-0 { padding: 0; } .container-outer, .container-outer-xl, .container-outer-xs { overflow: hidden; padding: var( --outer-padding-y ) var( --outer-padding-x ); } .container-outer-xl { padding: var( --outer-xl-padding-y ) var( --outer-xl-padding-x ); } .container-outer-xs { padding: var( --outer-xs-padding-y ) var( --outer-xs-padding-x ); } @media ( max-width: 1024px ) { .container-outer { padding: var( --outer-padding-y-tablet ) var( --outer-padding-x-tablet ); } .container-outer-xl { padding: var( --outer-xl-padding-y-tablet ) var( --outer-xl-padding-x-tablet ); } .container-outer-xs { padding: var( --outer-xs-padding-y-tablet ) var( --outer-xs-padding-x-tablet ); } } @media ( max-width: 767px ) { .container-inner { padding-left: var( --inner-padding-x-mobile ); padding-right: var( --inner-padding-x-mobile ); } .container-outer { padding: var( --outer-padding-y-mobile ) var( --outer-padding-x-mobile ); } .container-outer-xl { padding: var( --outer-xl-padding-y-mobile ) var( --outer-xl-padding-x-mobile ); } .container-outer-xs { padding: var( --outer-xs-padding-y-mobile ) var( --outer-xs-padding-x-mobile ); } } /*///////////////////////// * CLASS: DESIGNS */ /* * Dashed - Horizontal borders representing a road. * Note: This is a GB Global Class with additional styling that cannot be * done through the GUI. Styles through the GUI take precedence. */ :root { --dashed-padding-stretch-x: 2em; /* Double the button-padding width. */ --dashed-padding-stretch-y: 0.25em; /* Third the button-padding height. */ } .design-dashed { align-self: center; border: 0.1em 0; border-color: currentColor transparent; border-style: dashed none; } .design-dashed-hover { transition: all 0.25s ease; } .design-dashed-hover:focus, .design-dashed-hover:hover { padding: var( --dashed-padding-stretch-y ) var( --dashed-padding-stretch-x ); } /* * Slant - Parallelograms leaning left and right. * Note: This is a GB Global Class with additional styling that cannot be * done through the GUI. Styles through the GUI take precedence. */ :root { --slant-skew-left: 10deg; --slant-skew-right: -10deg; } .design-slant-left { align-items: center; transform: skew( var( --slant-skew-left ), 0 ); } .design-slant-right { align-items: center; transform: skew( var( --slant-skew-right ), 0 ); } .design-slant-hover { transition: all 0.25s ease; } .design-slant-left.design-slant-hover:focus, .design-slant-left.design-slant-hover:hover { transform: skew( var( --slant-skew-right ), 0 ); } .design-slant-right.design-slant-hover:focus, .design-slant-right.design-slant-hover:hover { transform: skew( var( --slant-skew-left ), 0 ); } /* * Trail - Double lines prepended to the Text. * Note: This class is shared with a GB Global Class. */ :root { --trail-shift-major: -1400px; --trail-shift-minor: -0.5em; --trail-skew: -10deg; } .design-trail { align-items: center; display: flex; position: relative; } .design-trail::before { background-image: repeating-linear-gradient( to bottom, transparent 0%, transparent 20%, currentColor 20%, currentColor 40%, transparent 40%, transparent 60%, currentColor 60%, currentColor 80%, transparent 80%, transparent 100% ); content: ''; height: 0.75em; margin-right: 0.1em; transform: skew( var( --trail-skew ), 0 ); transition: all 0.25s ease; width: 1.25em; } .design-trail-hover:hover::before { transform: skew( var( --trail-skew ), 0 ) translateX( var( --trail-shift-minor ) ); } .design-trail-animate { animation: trail-animation 0.75s ease-out 0s 1 normal backwards; } @keyframes trail-animation { from { transform: skew( var( --trail-skew ), 0 ) translateX( var( --trail-shift-major ) ); opacity: 0; } 50% { opacity: 0; } to { transform: skew( var( --trail-skew ), 0 ) translateX( 0 ); opacity: 1; } } /*///////////////////////// * CLASS: LAYOUTS */ /* * The Bento grids are great for displaying groupings of photos or boxes. * Note: These classes may be particularly good with dynamic data (e.g. Query Block); * however, consider NOT using these classes for static data since static data * may require special styling to make sense with the content. * DAN-DEBUG: These classes are temporary. Not sure if we actually want this. Working through some use cases. */ /* .layout-bento { display: grid; gap: 1em; grid-auto-columns: auto-fit; grid-auto-rows: auto-fit; } .layout-bento > * { align-items: center; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; object-fit: cover; text-align: center; } .layout-bento > a > figure, .layout-bento > a > img { flex-grow: 1; height: 100%; object-fit: cover; width: 100%; } */ /* 5-way Bento. */ /* .layout-bento { grid-template-areas: "box-01 box-01 box-02 box-02" "box-03 box-04 box-04 box-05"; } @media ( max-width: 1024px ) { .layout-bento { grid-template-areas: "box-01 box-01 box-02" "box-01 box-01 box-03" "box-04 box-05 box-05"; } } @media ( max-width: 767px ) { .layout-bento { grid-template-areas: "box-01 box-02" "box-03 box-02" "box-03 box-04" "box-05 box-04"; } } .layout-bento > *:nth-child(1) { grid-area: box-01; } .layout-bento > *:nth-child(2) { grid-area: box-02; } .layout-bento > *:nth-child(3) { grid-area: box-03; } .layout-bento > *:nth-child(4) { grid-area: box-04; } .layout-bento > *:nth-child(5) { grid-area: box-05; } */ .layout-bento > *:nth-child(n) { grid-area: box1; } .layout-bento > *:nth-child(2n) { grid-area: box2; } .layout-bento > *:nth-child(3n) { grid-area: box3; } .layout-bento > *:nth-child(4n) { grid-area: box4; } .layout-bento > *:nth-child(5n) { grid-area: box5; } .layout-bento > *:nth-child(6n) { grid-area: box6; } .layout-bento > *:nth-child(7n) { grid-area: box7; } .layout-bento > *:nth-child(8n) { grid-area: box8; } .layout-bento > *:nth-child(9n) { grid-area: box9; } /* .layout-bento > a:nth-child(1) > img { grid-area: box1; } .layout-bento > a:nth-child(2) > img { grid-area: box2; } .layout-bento > a:nth-child(3) > img { grid-area: box3; } .layout-bento > a:nth-child(4) > img { grid-area: box4; } .layout-bento > a:nth-child(5) > img { grid-area: box5; } .layout-bento > a:nth-child(6) > img { grid-area: box6; } .layout-bento > a:nth-child(7) > img { grid-area: box7; } .layout-bento > a:nth-child(8) > img { grid-area: box8; } .layout-bento > a:nth-child(9) > img { grid-area: box9; } */ /* * Masonry is not supported by the Grid Block or in the Query Loop, so we must support * it manually in this manner. * * Reference: * https://www.gmitropapas.com/generatepress-tips-and-tricks/generateblocks/generateblocks-query-loop-and-grid-masonry-layout/ * * Note: * One suggestion from the original author is to change the selectors from 'x-masonry' to '#page .x-masonry'. However, * I prefer to not limit the use of masonry to pages and do not want to dirty this up with other selectors, so I am * intentionally using '!important' where necessary. */ :root { --masonry-gap: 1em; --masonry-columns: 3; --masonry-columns-tablet: 2; --masonry-columns-mobile: 1; } .layout-masonry-less { --masonry-columns: 2; } .layout-masonry-more { --masonry-columns: 4; } .layout-masonry, .layout-masonry-less, .layout-masonry-more { column-count: var( --masonry-columns ); column-gap: var( --masonry-gap ); display: block !important; } .layout-masonry > div, .layout-masonry-less > div, .layout-masonry-more > div { display: inline-block; margin-bottom: var( --masonry-gap ); width: unset !important; } @media ( max-width: 1024px ) { .layout-masonry, .layout-masonry-less, .layout-masonry-more { column-count: var( --masonry-columns-tablet ); } } @media ( max-width: 767px ) { .layout-masonry, .layout-masonry-less, .layout-masonry-more { column-count: var( --masonry-columns-mobile ); } } /* * The Polaroid layout is intended to place a photo or some sort of content, typically in a square aspect ratio, * towards the top of a white rectangle. There is large padding at the bottom for text. Since we use this layout * in several places on the site, we are standardizing through the CSS. For use on a Container. */ :root { --polaroid-padding: 1.25em; --polaroid-padding-tablet: 1em; --polaroid-padding-mobile: 0.75em; } .layout-polaroid { display: flex; flex-direction: column; flex-wrap: nowrap; padding: var( --polaroid-padding ); row-gap: var( --polaroid-padding ); } @media ( max-width: 1024px ) { .layout-polaroid { padding: var( --polaroid-padding-tablet ); row-gap: var( --polaroid-padding-tablet ); } } @media ( max-width: 767px ) { .layout-polaroid { padding: var( --polaroid-padding-mobile ); row-gap: var( --polaroid-padding-mobile ); } } /*///////////////////////// * CLASS: PATTERNS */ /* * Band - A striping design. * Note: This class is shared with a GB Global Class. */ .pattern-band { background-image: linear-gradient( to bottom, var( --pog-black-off ) 0%, var( --pog-black-off ) 30%, var( --pog-olive-dark ) 30%, var( --pog-olive-dark ) 38%, var( --pog-olive-light ) 38%, var( --pog-olive-light ) 42%, var( --pog-white-off ) 42%, var( --pog-white-off ) 56%, var( --pog-peach ) 56%, var( --pog-peach ) 70%, var( --pog-black-off ) 70%, var( --pog-black-off ) 100% ); } .pattern-band-full { background-image: linear-gradient( to bottom, var( --pog-olive-dark ) 0%, var( --pog-olive-dark ) 20%, var( --pog-olive-light ) 20%, var( --pog-olive-light ) 30%, var( --pog-white-off ) 30%, var( --pog-white-off ) 65%, var( --pog-peach ) 65%, var( --pog-peach ) 100% ); } /* * Dither - a dotted pattern with a retro feel, largely for use with Containers. * Note: This class is shared with a GB Global Class. * References: * https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/ * https://css-irl.info/css-halftone-patterns/ * https://codepen.io/thebabydino/pen/gOpMeWv */ :root { --dither-color: currentColor; --dither-mask-alpha: 1.0; --dither-pitch-100: 1em; --dither-pitch-75: 0.75em; --dither-pitch-50: 0.5em; --dither-pitch-25: 0.25em; --dither-pos: calc( var( --dither-pitch-100 ) / 2 ); --dither-stop-1: 0.1em; --dither-stop-2: 0.7em; --dither-stop-2-alt: 0.1em; } .pattern-dither, .pattern-dither-25, .pattern-dither-50, .pattern-dither-75, .pattern-dither-100 { background-image: radial-gradient( circle at center, var( --dither-color ) var( --dither-stop-1 ), transparent var( --dither-stop-2 ) ); background-position: 0 0, var( --dither-pos ) var( --dither-pos ); background-repeat: round; background-size: var( --dither-pitch-100 ) var( --dither-pitch-100 ); mask-image: linear-gradient( var( --dither-color ), rgb( 0 0 0 / var( --dither-mask-alpha ) ) ); } .pattern-dither-25, .pattern-dither-50, .pattern-dither-75, .pattern-dither-100 { background-image: radial-gradient( circle at center, var( --dither-color ) var( --dither-stop-1 ), transparent var( --dither-stop-2-alt ) ); } .pattern-dither-25 { background-size: var( --dither-pitch-25 ) var( --dither-pitch-25 ); } .pattern-dither-50 { background-size: var( --dither-pitch-50 ) var( --dither-pitch-50 ); } .pattern-dither-75 { background-size: var( --dither-pitch-75 ) var( --dither-pitch-75 ); } .pattern-dither-100 { background-size: var( --dither-pitch-100 ) var( --dither-pitch-100 ); } /* * Icon - A stripe of repeating icons. * Note: This class is shared with a GB Global Class. */ .pattern-icon, .pattern-icon-pin, .pattern-icon-plane { background-position: center; background-repeat: repeat-x; } .pattern-icon, .pattern-icon-plane { background-image: url('data:image/svg+xml,'); } .pattern-icon-plane-white { background-image: url('data:image/svg+xml,'); } .pattern-icon-pin { background-image: url('data:image/svg+xml,'); } .pattern-icon-animate { animation: icon-animation 600s linear 0s infinite normal none; } @keyframes icon-animation { from { background-position: 0 0; } to { background-position: 10000% 0; } } /* * Ribbon - a striped pattern with a retro feel, largely for use with Containers. * Note: This class is shared with a GB Global Class. * References: * https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/ */ :root { --ribbon-angle: 135deg; --ribbon-color: currentColor; --ribbon-stop-1: 0.2em; --ribbon-stop-2: 0.2em; } .pattern-ribbon, .pattern-ribbon-alt, .pattern-ribbon-alt-2 { background-image: repeating-linear-gradient( var( --ribbon-angle ), transparent calc( ( var( --ribbon-stop-1 ) * 0 ) + ( var( --ribbon-stop-2 ) * 0 ) ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) ) ); } .pattern-ribbon-alt, .pattern-ribbon-alt-2 { --ribbon-stop-1: 2em; --ribbon-stop-2: 2em; } .pattern-ribbon-alt-2 { --ribbon-angle: -135deg; } .pattern-ribbon-rainbow { /* Note: The two stop variables must add to 16.67% (or 1/6) since there are 6 colors involved. */ --ribbon-stop-1: 15%; --ribbon-stop-2: 1.67%; background: repeating-linear-gradient( var( --ribbon-angle ), var( --pink-dark ) calc( ( var( --ribbon-stop-1 ) * 0 ) + ( var( --ribbon-stop-2 ) * 0 ) ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 0 ) ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) ), var( --orange-dark ) calc( ( var( --ribbon-stop-1 ) * 1 ) + ( var( --ribbon-stop-2 ) * 1 ) ) calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 1 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 1 ) ) calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 2 ) ), var( --yellow-dark ) calc( ( var( --ribbon-stop-1 ) * 2 ) + ( var( --ribbon-stop-2 ) * 2 ) ) calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 2 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 2 ) ) calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 3 ) ), var( --green-dark ) calc( ( var( --ribbon-stop-1 ) * 3 ) + ( var( --ribbon-stop-2 ) * 3 ) ) calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 3 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 3 ) ) calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 4 ) ), var( --blue-dark ) calc( ( var( --ribbon-stop-1 ) * 4 ) + ( var( --ribbon-stop-2 ) * 4 ) ) calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 4 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 4 ) ) calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 5 ) ), var( --purple-dark ) calc( ( var( --ribbon-stop-1 ) * 5 ) + ( var( --ribbon-stop-2 ) * 5 ) ) calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 5 ) ), var( --ribbon-color ) calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 5 ) ) calc( ( var( --ribbon-stop-1 ) * 6 ) + ( var( --ribbon-stop-2 ) * 6 ) ) ); } /* * Slant - A striping design, but angled. * Note: This class is shared with a GB Global Class. * References: * https://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/ */ :root { --slant-angle: 120deg; --slant-color: currentColor; /* Note: The two stop variables must add to 16.67% (or 1/6) since there are 6 colors involved. */ --slant-stop-1: 15%; --slant-stop-2: 1.67%; } .pattern-slant { background-image: repeating-linear-gradient( var( --slant-angle ), transparent calc( ( var( --slant-stop-1 ) * 0 ) + ( var( --slant-stop-2 ) * 0 ) ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 1 ) ) ); } .pattern-slant-rainbow { background: repeating-linear-gradient( var( --slant-angle ), var( --pog-peach-light ) calc( ( var( --slant-stop-1 ) * 0 ) + ( var( --slant-stop-2 ) * 0 ) ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 0 ) ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 1 ) ), var( --pog-peach ) calc( ( var( --slant-stop-1 ) * 1 ) + ( var( --slant-stop-2 ) * 1 ) ) calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 1 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 1 ) ) calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 2 ) ), var( --pog-peach-dark ) calc( ( var( --slant-stop-1 ) * 2 ) + ( var( --slant-stop-2 ) * 2 ) ) calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 2 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 2 ) ) calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 3 ) ), var( --pog-olive-light ) calc( ( var( --slant-stop-1 ) * 3 ) + ( var( --slant-stop-2 ) * 3 ) ) calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 3 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 3 ) ) calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 4 ) ), var( --pog-olive ) calc( ( var( --slant-stop-1 ) * 4 ) + ( var( --slant-stop-2 ) * 4 ) ) calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 4 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 4 ) ) calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 5 ) ), var( --pog-olive-dark ) calc( ( var( --slant-stop-1 ) * 5 ) + ( var( --slant-stop-2 ) * 5 ) ) calc( ( var( --slant-stop-1 ) * 6 ) + ( var( --slant-stop-2 ) * 5 ) ), var( --slant-color ) calc( ( var( --slant-stop-1 ) * 6 ) + ( var( --slant-stop-2 ) * 5 ) ) calc( ( var( --slant-stop-1 ) * 6 ) + ( var( --slant-stop-2 ) * 6 ) ) ); } /*///////////////////////// * CLASS: _COMMON */ /* * GB does not support several positions in their backend due to Gutenberg difficulties. * The suggested solution is to create a class until they can figure out how to make * Gutenberg respond properly. * https://generate.support/topic/how-to-position-absolute/ */ .x-absolute { position: absolute; } /* GB does not have a GUI to balance multi-line headlines. */ .x-balance { text-wrap: balance; } /* * Visually count a number between two ends of a range. * https://css-tricks.com/animating-number-counters/ * * Since attr() is not supported on all browsers, options * must be added through custom variables, as follows: * --counter-delay (the amount of time to wait until the counter starts) * --counter-duration (how long it takes to perform the counting animation) * --counter-stop-1 (the starting value of the counter) * --counter-stop-2 (the ending value of the counter) */ @property --counter-num { syntax: ''; initial-value: 1; inherits: false; } .x-counter { --counter-delay: 0s; --counter-duration: 5s; --counter-stop-1: 434; --counter-stop-2: 5; animation: counter-animation var( --counter-duration ) linear var( --counter-delay ) 1 forwards; counter-reset: counter-num var( --counter-num ); } .x-counter::after { content: counter( counter-num ); } @keyframes counter-animation { from { --counter-num: var( --counter-stop-1 ); } to { --counter-num: var( --counter-stop-2 ); } } /* Truncate text and append an ellipsis. */ .x-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .x-ellipsis-multi { box-orient: vertical; -webkit-box-orient: vertical; display: -webkit-box; line-claamp: 2; -webkit-line-clamp: 2; overflow: hidden; } /* * At first, I thought that Conditions did not work for GB Blocks in GB, but then * I found a setting to activate them under GenerateBlocks >> Settings. So, might * as well keep these classes here. */ body:not(.wp-admin).logged-in .x-hide-when-logged-in { display: none; } body:not(.wp-admin):not(.logged-in) .x-hide-when-logged-out { display: none; } /* * Force something to not wrap. * Note: I did not initally comment this and do not remember what it was for. */ .x-nowrap { white-space: nowrap; } /* Animate crossing out text. */ .x-strike { position: relative; } .x-strike::after { animation: strike-animation 100ms linear 0.3s 1 forwards; background-color: var( --pink-light ); content: ''; height: 0.15em; left: -3%; opacity: 100%; position: absolute; top: 50%; transform: translateY( -50% ); width: 0; z-index: 99; } @keyframes strike-animation { to { width: 106%; } } /* Some of the regular

/ text can be adjusted from regular body copy. */ .x-subheading { line-height: 1.1em; text-transform: uppercase; } /* In some cases, the default wavy line on links can look strange. */ .x-underline-none a { text-decoration: none; } /*///////////////////////// * SPECIAL */ /* * Visually change up the ranking headline. */ .rank-headline { --rank-headline-background-color: var( --yellow-dark ); --rank-headline-shadow-blur: 0; --rank-headline-shadow-color: var( --pink ); --rank-headline-shadow-offset: 4px; --rank-headline-text-color: var( --white ); background-color: var( --rank-headline-background-color ); color: var( --rank-headline-text-color ); text-shadow: var( --rank-headline-shadow-color ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-blur ); } .rank-headline .start { font-size: 0.8em; vertical-align: bottom; } .rank-headline .prefix { font-size: 0.67em; vertical-align: bottom; } .rank-headline .end { position: relative; } .rank-headline .end-world { animation-name: headShake, hinge; animation-delay: 5s, 5.5s; animation-duration: 0.5s, 2s; animation-fill-mode: both; display: inline-block; font-size: 0.95em; transform-origin: center left; vertical-align: bottom; } .rank-headline .end-mom { animation-name: fadeIn, tada; animation-delay: 7.5s, 9s; animation-duration: 1.5s, 2s; animation-fill-mode: both; color: var( --rank-headline-shadow-color ); display: inline-block; font-weight: bold; left: 0; position: absolute; text-shadow: var( --rank-headline-text-color ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-offset ) var( --rank-headline-shadow-blur ); } /* * The Bonus soundboard needs a little love. */ .sound-trigger { cursor: pointer; } /*///////////////////////// * FIXES */ /* The off-canvas panel is being forced to have white text. */ .slideout-navigation .off-canvas-social-bar a { color: var( --black ); } /* * Featherlight has security issues and is no longer updated by the author. As such, the popup * video now goes through GB Overlay Panels. Assuming a YT Embed Video with class "pop-video" * (can be in an optional parent GB Container), the following code makes it so that the video * displays in a 16:9 ratio on all device widths - tested especially on the extremes. * * Note: This was very challenging to make work. The YT Embed Block hardcodes width=1200 and * height=675 as HTML attributes - not as CSS. As such, the heights of all child elements * that YT Embed Block produces must be explicitly set to ignore those HTML attributes. * * Note: Also, the "85dvh" is a magic number wrt the X close button not going outside the screen. */ .pop-video { aspect-ratio: 16 / 9; height: 100%; max-height: 85dvh; max-width: 85vw; overflow: clip; } .pop-video > div { height: 100%; } .pop-video > div > iframe { height: 100%; max-height: 85dvh; } /* * Browsers use their own default black on the when the color is not set; so set it here for the patterns. * Note: Search for "css currentColor on is always black" on Google. */ body.pattern-dither, body.pattern-dither-25, body.pattern-dither-50, body.pattern-dither-75, body.pattern-dither-100 { --dither-color: var( --pog-white-off ); } body.pattern-slant { --slant-color: var( --pog-white-off ); }