/*
Theme Name: Effect Child Theme
Theme URI: https://www.theescapeeffect.com
Author: Dan Suleski
Author URI: https://dansuleski.com
Description: Theme for Effect client
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: 3.0.3
Tags: black
*/
/*/////////////////////////
* FORMAT: CAPTIONS
*/
/*
* The caption under and image is way too close.
*/
figcaption {
font-size: 0.75em;
margin-top: 0.5em;
}
/*/////////////////////////
* FORMAT: FONTS
*/
/*
* See the font sizes and styles under Customizer >> Typography.
* Note: There are base font styles for the whole site, but also
* specialized styles that fit better for Single Posts.
* Note: We are using :where for the Posts because it does not add
* specificity over the plain h1, h2, etc and local settings.
* https://developer.mozilla.org/en-US/docs/Web/CSS/:where
* Note: The commented code is here for reference, but does not
* include tablet/mobile and may is not guaranteed to be
* accurate with the values in the Customizer.
*/
/*
h1 { font-size: 5em; }
h2 { font-size: 3.5em; }
h3 { font-size: 3em; }
h4 { font-size: 2.5em; }
h5 { font-size: 2.25em; }
h6 { font-size: 2em; }
:where(article.type-post) h1 { font-size: 2.8em; }
:where(article.type-post) h2 { font-size: 2.2em; }
:where(article.type-post) h3 { font-size: 2em; }
:where(article.type-post) h4 { font-size: 1.8em; }
:where(article.type-post) h5 { font-size: 1.6em; }
:where(article.type-post) h6 { font-size: 1.4em; }
*/
/*/////////////////////////
* FORMAT: FORMS
*/
/*
* Checkboxes are so small, by default. They do not scale with font-size.
* https://stackoverflow.com/questions/4137255/checkboxes-in-web-pages-how-to-make-them-bigger
* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
* https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
*
* Note: The !important is necessary to cover edge cases like the WC Checkout "save to account" question.
*/
input[type='checkbox'] {
appearance: none;
background: var( --red-light );
border-radius: 0;
border-width: 0;
height: 0.9em !important;
outline-color: var( --black ) !important;
vertical-align: middle;
width: 0.9em !important;
}
input[type='checkbox']:checked {
background: var( --green-light );
border-radius: 1em;
}
@supports ( accent-color: black ) {
input[type='checkbox'] {
accent-color: var( --black );
appearance: auto;
}
}
/*
* Style the input fields (e.g. textboxes, dropdowns, etc).
*/
/*DAN-NOTE: Keep around, but know that I was mid-progress trying to figure out how to style all dropdowns.
select {
appearance: menulist-button;
background: var( --yellow );
color: var( --purple );
height: 2em;
padding: 1em;
}
*/
/*/////////////////////////
* FORMAT: LINKS
*/
/* Links should have a special underline. */
a {
text-decoration-skip-ink: auto;
text-decoration-style: solid;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.1em;
transition: all 100ms ease;
}
a:hover {
text-decoration-thickness: 0.15em;
text-underline-offset: 0.15em;
}
/*/////////////////////////
* FORMAT: LISTS
*/
/*
* Both ol and ul can share some common properties that we want to expose to the author.
*/
:root {
--list-bullet-color: var( --black );
--list-bullet-color-alt: var( --white );
}
/*
* Wrap the bullet numbers in a diamond.
*/
ol {
counter-reset: list-counter;
list-style: none;
margin-left: 2.5em;
}
ol > li {
counter-increment: list-counter;
position: relative;
}
ol > li:before {
background-color: var( --list-bullet-color-alt );
box-shadow: 0 0 0 2px var( --list-bullet-color-alt ), 0 0 0 3px var( --list-bullet-color );
content: '';
font-size: 1ch;
height: 1ch; /* The width should be the same value and should match font-size. */
left: -2.5em; /* The :after should be the same value, as long as font-size is 1ch. */
position: absolute;
rotate: 45deg ;
scale: 2; /* This makes a nice potential overlap when list items are single lines. */
top: 0.75em;
width: 1ch;
}
@media ( max-width: 1024px ) {
ol > li:before {
scale: 1.7;
}
}
@media ( max-width: 767px ) {
ol > li:before {
scale: 1.4;
}
}
ol > li:after {
color: var( --list-bullet-color );
content: counter( list-counter );
font-size: 1ch;
font-weight: bold;
left: -2.5em;
position: absolute;
top: 0.5em;
}
/*
* Give the bullets a diamond treatment.
* https://codepen.io/frezza61/pen/GzOedj
*/
ul {
list-style: none;
margin-left: 2em;
}
ul > li {
position: relative;
}
ul > li:before {
background-color: var( --list-bullet-color-alt );
box-shadow: 0 0 0 1px var( --list-bullet-color ), 0 0 0 2px var( --list-bullet-color-alt ), 0 0 0 3px var( --list-bullet-color );
content: '';
height: 0.15em; /* The width should be the same value. */
left: -0.75em;
position: absolute;
top: 0.575em;
rotate: 45deg;
width: 0.15em;
}
/*/////////////////////////
* FORMAT: SCROLLBAR
*/
/*
* Set a default scrollbar for every element (e.g. span, textarea, ul, etc).
*/
::-webkit-scrollbar {
width: 0.25em;
}
::-webkit-scrollbar-track {
background: var( --white );
}
::-webkit-scrollbar-thumb {
background: var( --black );
}
/*
* The give the browser scrollbar something a bit more special.
*/
body::-webkit-scrollbar {
width: 0.5em;
}
body::-webkit-scrollbar-track {
background: var( --white );
}
body::-webkit-scrollbar-thumb {
background: var( --black );
background: linear-gradient( var( --white ), var( --black ), var( --white ) );
}
/*/////////////////////////
* 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: 1em;
--pog-h1-size: 4.5em;
--pog-h2-size: 3.5em;
--pog-h3-size: 3em;
--pog-h4-size: 2.5em;
--pog-h5-size: 2.25em;
--pog-h6-size: 2em;
--pog-body-size-tablet: 1.1em;
--pog-button-size-tablet: 1em;
--pog-h1-size-tablet: 4.25em;
--pog-h2-size-tablet: 3.25em;
--pog-h3-size-tablet: 2.75em;
--pog-h4-size-tablet: 2.25em;
--pog-h5-size-tablet: 2em;
--pog-h6-size-tablet: 1.7em;
--pog-body-size-mobile: 1em;
--pog-button-size-mobile: 1em;
--pog-h1-size-mobile: 3.5em;
--pog-h2-size-mobile: 2.75em;
--pog-h3-size-mobile: 2.25em;
--pog-h4-size-mobile: 2em;
--pog-h5-size-mobile: 1.75em;
--pog-h6-size-mobile: 1.5em;
}
/*/////////////////////////
* 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. Note that the article is
* displays below the menubar on desktop, but the menubar floats over the article on tablet/mobile.
*/
.site-content:has( article.type-post ) {
margin-bottom: var( --box-padding );
margin-top: var( --outer-padding-y );
padding-left: calc( var( --inner-padding-x ) + var( --outer-padding-x ) );
padding-right: calc( var( --inner-padding-x ) + var( --outer-padding-x ) );
}
@media ( max-width: 1024px ) {
.site-content:has( article.type-post ) {
margin-bottom: 0;
margin-top: 0;
padding-left: calc( var( --inner-padding-x-tablet ) + var( --outer-padding-x-tablet ) );
padding-right: calc( var( --inner-padding-x-tablet ) + var( --outer-padding-x-tablet ) );
padding-top: var( --outer-padding-y-tablet );
}
}
@media ( max-width: 767px ) {
.site-content:has( article.type-post ) {
padding-left: calc( var( --inner-padding-x-mobile ) + var( --outer-padding-x-mobile ) );
padding-right: calc( var( --inner-padding-x-mobile ) + var( --outer-padding-x-mobile ) );
padding-top: var( --outer-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: 0;
row-gap: 3em;
}
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;
}
/*
* The tax buttons need styling.
*/
.tax-buttons {
display: flex;
flex-direction: row;
font-size: 0.9em;
flex-wrap: wrap;
gap: 0.25em;
}
a.tax-button,
a.tax-button:focus,
a.tax-button:link,
a.tax-button:visited,
a.tax-button:hover,
a.tax-button:active {
background: var( --black );
color: var( --white );
text-decoration: none;
}
a.tax-button:focus,
a.tax-button:hover {
background: var( --black-off );
}
/*
* The sidebar should only appear on the side for desktop mode;
* other devices should stack the sidebar under the content.
*/
@media ( max-width: 1024px ) {
.site-content {
flex-direction: column;
}
.site-content .content-area {
width: 100%;
}
.site-content .sidebar {
width: 100%;
}
}
/*/////////////////////////
* 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.
*/
body > header {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
body.logged-in > header {
top: 32px;
}
@media ( max-width: 782px ) { body.logged-in > header { top: 46px; } }
@media ( max-width: 600px ) {
html:has( body.logged-in ) { margin-top: 0 !important; }
body.logged-in > #wpadminbar { display: none; }
body.logged-in > header { top: 0; }
}
.announcement {
position: sticky;
bottom: 0;
z-index: 99;
}
/*
* Thin up the buttons in the navbar a bit so everything can fit.
*/
.main-nav .wc-block-mini-cart .wc-block-mini-cart__button,
.main-nav .wc-block-mini-cart .wc-block-mini-cart__button:hover {
padding: 1em;
padding-left: 0.5em;
}
.main-nav a.button-x,
.main-nav a.button-x:hover {
padding-left: 0.75em;
padding-right: 0.75em;
}
/*/////////////////////////
* 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: 100vw !important;
}
.slideout-exit {
display: none !important;
}
/*/////////////////////////
* AREA: SEARCH
*/
/*
* We want to show metadata on each of the Search Results, but the data changes a bit based on
* what kind of Result is being shown (e.g. Page, Post, or Products). Based on each of these
* individual Results, let's not display the irrelevant meta.
* - Title (pages, posts, products)
* - Author (posts)
* - Brand (products)
* - Excerpt (pages)
* - Date (posts)
* - Price (products)
*/
.search .page .meta > .brand { display:none; }
.search .page .meta > .price { display:none; }
.search .page .meta > .author { display: none; }
.search .page .meta > .date { display: none; }
.search .post .meta > .brand { display:none; }
.search .post .meta > .excerpt { display:none; }
.search .post .meta > .price { display:none; }
.search .product .meta > .author { display: none; }
.search .product .meta > .date { display: none; }
.search .product .meta > .excerpt { display: none; }
/*/////////////////////////
* AREA: SIDEBAR
*/
/* Stop the sidebar from squeezing as the viewport gets smaller. */
@media ( min-width: 769px ) {
.sidebar {
min-width: 300px;
}
}
/* Although the sidebar collapses at 1024px, it does remove the side gap until it hits 768px. */
@media ( max-width: 1024px ) {
#main {
margin-right: 0px;
}
}
/*/////////////////////////
* PLUGIN: NINJA FORMS
* https://ninjaforms.com/docs/custom-css/
*/
/*
* Update the look of the asterisks in the labels.
*/
.nf-form-content .nf-field .nf-field-label .ninja-forms-req-symbol,
.nf-form-fields-required .ninja-forms-req-symbol {
color: var( --orange );
font-weight: bold;
}
/*
* Adjust the padding of labels.
*/
.nf-form-content .nf-field .nf-field-label {
margin-bottom: 0.25em;
}
/*
* Descriptions do not need so much space between them and the label.
*/
.nf-form-content .nf-field .nf-field-description {
font-size: 0.75em;
margin-bottom: 0.25em;
}
/*
* Unnecessary to show the warning above forms about filling out asterisked fields.
*/
.nf-form-fields-required {
display: none;
/* DAN-NOTE: If we want to reshow the "Required" warning, the below commented lines should be uncommented.
font-style: italic;
margin-bottom: 1em;
*/
}
/*
* Style the validations.
*/
.nf-form-layout .nf-error-msg {
color: var( --red );
font-weight: bold;
}
.nf-error .nf-field-element .ninja-forms-field {
border-color: var( --orange );
border-width: 0.1em;
}
/*
* Style the submit message.
*/
/*
.nf-response-msg {
color: var( --blue-light );
font-weight: bold;
}
*/
/*
* NF lays out radio buttons as list items. No need to have
* the additional bullet styles used elsewhere on the site.
*/
.nf-field-element li:before {
content: none;
}
/*
* Fix the layout for the inline mailing list signup on mobile.
*/
.container-pin > div.buttons:has(.ninja-maillist-container) {
flex: 0 0 auto;
}
.ninja-maillist-submit {
width: 100% !important;
}
@media ( max-width: 600px ) {
.ninja-maillist-email {
margin-bottom: 0.25em !important;
}
}
/*
* The compact mailing list form needs some special attention to
* vertically-center the email textbox with the submit button.
* Note: Error messages are intentionally not shown for real estate.
* Note: NF implements layouts using block/inline instead of flex/grid.
*/
.ninja-maillist-container nf-field > div {
margin-bottom: 0;
}
.ninja-maillist-container .nf-field > .field-wrap {
display: inline !important;
vertical-align: middle !important;
}
.ninja-maillist-container .nf-field > .field-wrap > div {
margin: 0 !important;
}
.ninja-maillist-container .nf-after-field > nf-section > div {
display: none;
}
/*
* Normalize the Image Select Options.
* Note: The grid-template-columns property below will override the column
* setting in the NF backend to make all columns the same width.
*/
.listimage-wrap span {
font-weight: bold;
text-transform: uppercase;
}
.listimage-wrap ul {
display: flex;
grid-column-gap: 0.75em !important;
grid-row-gap: 0.75em !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
margin: 0.5em 0 0.5em 0;
}
.listimage-wrap li {
padding: 0.25em;
transition: all 0.25s ease;
}
.listimage-wrap li:has( > input.nf-checked ) {
background-color: var( --blue-light );
outline: 0.25em solid var( --blue );
}
.listimage-wrap li:focus, .listimage-wrap li:hover {
background-color: var( --blue-light );
outline: 0.25em solid var( --blue-dark );
}
.listimage-wrap li label {
display: flex;
flex-direction: column-reverse;
gap: 0.5em;
justify-content: flex-end;
}
.listimage-wrap li input.nf-checked+label {
border: 0;
}
.listimage-wrap.nf-error ul {
border: solid 0.25em var( --red-light ) !important;
}
.form-button {
background: var( --blue );
color: var( --white );
}
.form-button:focus, .form-button:hover {
background: var( --blue-dark );
color: var( --white );
}
.form-button-group {
column-gap: 1em;
display: flex;
margin-bottom: 2em;
margin-top: 0.5em;
}
/*
*
*
* DAN-CONTINUE: This bit needs to move up to the generic form-related styling, not just NF.
*
*
*/
/*
* Normalized the Form Fields.
*/
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea,
select {
border-width: 0.15em !important;
line-height: normal !important;
padding: var( --button-padding ) !important;
}
/*/////////////////////////
* PLUGIN: RANK MATH
* https://rankmath.com/
*/
/* RM supplies breadcrumbs, but they don't look nearly as good as WC. */
.rank-math-breadcrumb {
font-family: "Open Sans", sans-serif;
font-size: .92em;
font-weight: 400;
}
.rank-math-breadcrumb > p {
margin: 0 1em 0;
}
.rank-math-breadcrumb > p > span {
/* Intentionally empty. */
}
.rank-math-breadcrumb > p > a {
text-decoration: none;
}
/* Put the heading and breadcrumbs on the same level. */
.breadcrumb-bar {
align-items: center;
}
.breadcrumb-bar > .gb-inside-container {
align-items: center;
display: flex;
}
/*/////////////////////////
* PLUGIN: WOOCOMMERCE
* https://woocommerce.com/
* Note: The !important designation may be necessary as WC updates itself.
*/
/*
* 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 most 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.
*/
.comments-area input[type=submit],
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page input.submit {
background: var( --black ) !important;
color: var( --white ) !important;
font-size: 1.1em !important;
font-weight: 400 !important;
padding: 0.75em 1em !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: 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: 0.9em !important;
}
}
.woocommerce-page a.button:focus,
.woocommerce-page button.button:focus,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
background: var( --black-off ) !important;
color: var( --white ) !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.
* Note: The ":not(.woocommerce-shop)" is a distinction for Product Tax Archive
* Pages versus the main Shop Page.
*/
.woocommerce div#content {
margin-left: auto;
margin-right: auto;
max-width: 1400px;
padding-left: var( --inner-padding-x );
padding-right: var( --inner-padding-x );
width: 100%;
}
.woocommerce div#page {
overflow: hidden;
padding: var( --outer-padding-y ) var( --outer-xs-padding-x );
}
@media ( max-width: 1024px ) {
.woocommerce div#page {
padding: var( --outer-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-padding-y-mobile ) var( --outer-xs-padding-x-mobile );
}
}
.woocommerce.archive:not(.woocommerce-shop) div#page {
padding-top: 2em;
}
/*
* The WC messages need to be aligned properly and re-color the "View Cart"
* button to display with contrast.
* Note: Test this by using ATC on non-AJAX (e.g. on Single Pages).
* Note: The ".woocommerce-error" class is for the red error box, the ".woocommerce-message"
* class is for the green success box, and not sure what the blue info box is yet.
*/
.woocommerce-error li,
.woocommerce-info,
.woocommerce-message {
align-items: center;
display: flex;
flex-direction: row;
gap: 2em;
justify-content: center;
}
.woocommerce-error li::before {
content: none;
}
.woocommerce-page .woocommerce-error a.button,
.woocommerce-page .woocommerce-info a.button,
.woocommerce-page .woocommerce-message a.button {
background: var( --black );
color: var( --white );
white-space: nowrap;
}
.woocommerce-page .woocommerce-error a.button:focus,
.woocommerce-page .woocommerce-error a.button:hover,
.woocommerce-page .woocommerce-info a.button:focus,
.woocommerce-page .woocommerce-info a.button:hover,
.woocommerce-page .woocommerce-message a.button:focus,
.woocommerce-page .woocommerce-message a.button:hover {
background: var( --black-off );
}
/*
* There is a Mini-Cart Block that WC provides. It needs some attention to make it look right.
*
* There are a number of special case notes to list here.
* - Do not use ".wc-block-mini-cart.wp-block-woocommerce-mini-cart[data-cart-items-count="0"]" to determine if
* the cart is empty. This data attribute does not update to 0 after emptying the cart in the sidebar. Instead,
* use ".wc-block-mini-cart.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button[aria-label^="0"]" to test
* whether the ARIA starts with 0 (e.g. "0 items in cart").
* - The number of items in the cart was only appearing upon clicking somewhere on the screen, especially while
* on a mobile device. Turns out the issue is related to WP Rocket. Specifically, disable File Optimization >>
* Javascript Files >> Delay Javascript Execution. That setting is specifically there to "Improve performances
* by delaying the loading of Javascript files until user interaction (e.g. scroll, click)."
*/
/*
* Mini-cart background/padding.
* Note: The icon/price foreground colors are set in the Block.
* Note: The foreground needs to be applied directly to the SVG instead of the parent button.
*/
.wc-block-mini-cart .wc-block-mini-cart__button {
background: transparent;
opacity: 1;
padding: var( --button-padding );
}
.wc-block-mini-cart .wc-block-mini-cart__button:focus,
.wc-block-mini-cart .wc-block-mini-cart__button:hover {
background: var( --black-off );
}
.wc-block-mini-cart .wc-block-mini-cart__button:focus svg,
.wc-block-mini-cart .wc-block-mini-cart__button:hover svg {
/* Intentionally no change. */
}
/*
* Change up the shape of the mini-cart quantity badge.
*/
.wc-block-mini-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {
background: var( --black ) !important;
border: 0.15em solid var( --white );
border-radius: 0;
color: var( --white ) !important;
}
/*
* To avoid guest confusion about purchasing an escape room experience over retail products,
* do not show the mini-cart when there are no retail products in the cart.
*/
.wc-block-mini-cart.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button[aria-label$=" 0"] {
display: none;
}
/*
* There is no room on the main navbar on certain device widths.
* Guests can access the cart through the pull-out menu instead.
*/
@media ( max-width: 374px ) {
.wc-block-mini-cart.wp-block-woocommerce-mini-cart {
display: none;
}
}
/*
* WC sets the visibility of the Mini-Cart to "hidden" on the Cart/Checkout Pages.
* However, this seems to still take up space. Thus, use display.
*/
.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.
*/
.wp-block-woocommerce-mini-cart-contents {
background: var( --black ) !important;
border-left: 0.25em solid var( --white );
color: var( --white ) !important;
}
.wp-block-woocommerce-mini-cart-contents a {
text-decoration: none;
}
.wc-block-components-quantity-selector {
width: fit-content;
}
.wc-block-components-quantity-selector > button {
background: var( --white ) !important;
border-radius: 0 !important;
color: var( --black ) !important;
opacity: 1 !important;
}
.wc-block-components-quantity-selector > button:focus,
.wc-block-components-quantity-selector > button:hover {
background: var( --white-off ) !important;
}
.wc-block-components-product-name {
color: var( --orange-light );
}
.wc-block-mini-cart__shopping-button {
background: red;
color: yellow;
font-family: 'Oswald';
padding: var( --button-padding );
}
/*
* 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.
*/
/*
* Show the first X products a bit larger than the rest - treat as being "featured".
* Note: In order for this column/span-related styling to work, ensure that the
* following is set in Customizer >> Layout >> WooCommerce >> Product Columns
* - Desktop = 6
* - Tablet = 3
* - Mobile = 2
*/
.woocommerce.archive .products > li:first-child { grid-column: span 3; }
.woocommerce.archive .products > li:nth-child(2) { grid-column: span 3; }
.woocommerce.archive .products > li { grid-column: span 2; }
@media ( max-width: 1024px ) {
.woocommerce.archive .products > li:first-child { grid-column: span 2; }
.woocommerce.archive .products > li:nth-child(2) { grid-column: span 1; }
.woocommerce.archive .products > li { grid-column: span 1; }
}
@media ( max-width: 768px ) {
.woocommerce.archive .products > li:first-child { grid-column: span 2; }
.woocommerce.archive .products > li:nth-child(2) { grid-column: span 1; }
.woocommerce.archive .products > li { grid-column: span 1; }
}
@media ( max-width: 425px ) {
.woocommerce.archive .products > li:first-child { grid-column: span 2; }
.woocommerce.archive .products > li:nth-child(2) { grid-column: span 2; }
.woocommerce.archive .products > li { grid-column: span 2; }
}
/*
* Treat each product as a card. Each card includes a number of components, listed below.
* Note: Blank selectors are intentional placeholders.
*/
/* Card */
.woocommerce.archive .products .product {
background: var( --gray-light );
padding: 0.75em;
}
/* Image */
.woocommerce.woocommerce-page .products .product .wc-product-image {
}
/* Sale badge */
.woocommerce.woocommerce-page span.onsale {
background: var( --orange-light );
}
.woocommerce.woocommerce-page div.badges {
display: flex;
position: absolute;
gap: 0.25em;
right: 0;
text-transform: uppercase;
top: 0;
}
.woocommerce.woocommerce-page .badge {
color: var( --white );
font-size: 0.75em;
font-weight: bold;
padding: 0.25em 0.5em;
}
.woocommerce.woocommerce-page .badge.aux { background-color: var( --red ); }
/*DAN-NOTE: Removed DISCONTINUED Product Category/Tag in place of WC's intrinsic HIDDEN Visibility.
.woocommerce.woocommerce-page .badge.discontinued { background-color: var( --black ); }
*/
.woocommerce.woocommerce-page .badge.free { background-color: var( --blue ); }
.woocommerce.woocommerce-page .badge.nostock { background-color: var( --green ); }
.woocommerce.woocommerce-page .badge.save { background-color: var( --orange ); }
/* Title */
.woocommerce.woocommerce-page .products .product .woocommerce-loop-product__title {
color: var( --black );
font-size: 1.4em;
font-weight: 400;
}
/* Description */
.woocommerce.woocommerce-page .products .product .woocommerce-product-details__short-description {
}
/* Price */
.woocommerce.woocommerce-page .products .product .price {
color: var( --black );
font-weight: 400;
}
/* Note
* Discontinued Products are still LIVE products in the eyes of Google. GMC is complaining
* that these Discontinued products do not have Prices, so these Products need to be repriced,
* then those Prices can be hidden on the frontend of the site. This CSS handles the Shop
* Archive AND the Single Products.
*/
/*DAN-NOTE: Removed DISCONTINUED Product Category/Tag in place of WC's intrinsic HIDDEN Visibility.
.woocommerce.woocommerce-page .product.product_cat-discontinued .price {
display: none;
}
*/
/* Sale price */
.woocommerce.woocommerce-page .products .product .price del {
color: var( --gray-dark );
opacity: 1;
}
.woocommerce.woocommerce-page .products .product .price ins {
color: var( --orange );
font-size: 1.2em;
}
/* ATC button */
.woocommerce .products .product .button {
background-color: var( --black );
color: var( --white );
}
.woocommerce .products .product .button:focus,
.woocommerce .products .product .button:hover {
background-color: var( --black-off );
color: var( --white );
}
.woocommerce .products .product .atc-nostock {
font-size: 0.75em;
font-style: italic;
font-weight: bold;
margin-top: 1em;
text-transform: lowercase;
}
/*
* WC has a broken AJAX ATC button. It functions, but it is styled poorly.
*
* Specifically, when a user clicks the ATC button, it goes into a 'loading' state (processing, cog icon),
* then changes into an 'added' state (done, checkmark icon). The checkmark displays properly. However,
* the cog does not - instead, it overlaps the ATC text since it is set with absolute positioning. And,
* if trying to set the cog to relative positioning, the rotation animation does not work.
*
* So, the below code replaces the cog completely with a progress bar sort of thing that is just intended
* to show that the button is in the process of doing something.
*
* Reference: https://www.youtube.com/watch?v=eVM_W7K5uNU
*/
.woocommerce .products .product .ajax_add_to_cart.loading {
opacity: 0.75;
overflow: hidden;
pointer-events: none;
position: relative;
}
.woocommerce .products .product .ajax_add_to_cart.loading::after {
content: "";
inset: 0;
position: absolute;
background: var( --white );
height: 10%;
left: -25%;
width: 25%;
animation-delay: 0;
animation-direction: normal;
animation-duration: 0.75s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: animation-woo-atc;
animation-play-state: running;
animation-timing-function: ease;
}
@keyframes animation-woo-atc {
from { left: -25%; }
to { left: 100%; }
}
/*
* The Account/Cart/Checkout pages need some attention.
*/
/*
* Some of the data on the Account/Cart/Checkout pages are using , so get rid
* of the specialized default bullets. Take note that the !important is necessary
* for the Credit Card section - the selectors that WC is using is crazy.
*/
.woocommerce-page.woocommerce-account ul > li:before,
.woocommerce-page.woocommerce-cart ul > li:before,
.woocommerce-page.woocommerce-checkout ul > li:before {
content: none !important;
}
/*
* Clean up the "Credit Card" section a bit.
* - Get rid of the radio button because it looks weird AND is the only option.
* - Change up the rounded corners to square so that it matches the other inputs.
* - Vertically align the credit card brands.
*/
.woocommerce-page.woocommerce-checkout #payment #payment_method_square_credit_card+label::before {
content: none;
}
.woocommerce-page.woocommerce-checkout .sq-card-iframe-container {
border-radius: 0;
}
.woocommerce-page.woocommerce-checkout #payment #payment_method_square_credit_card+label {
align-items: center;
display: flex;
justify-content: flex-start;
}
.woocommerce-page.woocommerce-checkout #wc-square-credit-card-tokenize-payment-method+label {
vertical-align: middle;
}
/*
* Clean up some one-offs that need alignment.
* - Align the "ship to" checkbox to its label in Checkout.
* - Align the product thumbnail to the rest of the row in the Cart.
*/
.woocommerce-page.woocommerce-checkout #ship-to-different-address > label > input[type='checkbox'] {
vertical-align: bottom;
}
.woocommerce-page.woocommerce-cart .product-thumbnail img {
vertical-align: middle;
}
/*
* The thumbnails on the Cart Page are way too tiny. Enlarge them.
*/
.woocommerce-page.woocommerce-cart .product-thumbnail img {
height: 270px !important;
width: auto !important;
}
/*
* On the Checkout page, WC changes up the dropdowns to a bunch of spans to get around the
* OS-specific renderings that plague several of the input elements, especially the dropdowns.
* Note: The use of !important is intentional here. The selectors from WC are just ridiculous.
*/
.woocommerce-page span.select2-selection {
border: 1px solid var( --black ) !important;
border-radius: 0 !important;
}
.woocommerce-page span.select2-container,
.woocommerce-page span.select2-selection {
height: 3em !important;
}
.woocommerce-page span.select2-selection__rendered {
color: var( --black ) !important;
font-size: 1.25em !important;
line-height: calc( 3em / 1.25 ) !important;
padding-left: 15px !important;
}
.woocommerce-page span.select2-selection__arrow {
background-color: var( --black ) !important;
height: 3em !important;
right: 0 !important;
top: 0 !important;
}
.woocommerce-page span.select2-selection__arrow > b {
border-color: var( --white ) transparent transparent !important;
}
.woocommerce-page span.select2-container--open span.select2-selection__arrow > b {
border-color: transparent transparent var( --white ) transparent !important;
}
/*
* WC is oddly setting the Billing/Shipping Address sections of the Account page to 'fixed',
* which is causing the headings for those sections to underlay the floating navbar.
*/
.woocommerce-page.woocommerce-account .woocommerce-Address-title {
font-size: 0.75em;
margin-bottom: 2em;
position: static;
}
/*
* Adjustments for tablet/mobile device widths.
* - Account cart stacking nav over right side needs spacing.
* - Account addresses are too close together when stacked.
*/
@media (max-width: 768px) {
.woocommerce-MyAccount-navigation {
margin-bottom: 2em;
}
.woocommerce-Address {
margin-bottom: 4em;
}
}
/*
* 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.
*
* Note:
* 29 January 2025 - The demo URL is not working I believe that WooPayments is necessary to activate.
* Keeping this code around until we switch payments from WooCommerce Square to WooPayments.
*
* Demo:
* https://theescapeeffect.com/wp-admin/admin.php?page=wc-settings&tab=wcpay_multi_currency
*/
/*
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;
}
*/
/*
* 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.
*/
/*
* Product Image/Thumbnails need some custom styling.
* - Fix the wrapping.
* - Get rid of the bullets.
* - Prevent the zoom magnifying glass icon from appearing over the main navbar.
* - The quantity needs to be widened to show the number properly.
*/
.woocommerce.single-product div.product div.images .flex-control-thumbs {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
justify-content: flex-start;
margin-top: 0.5em;
}
@media ( max-width: 425px ) {
.woocommerce.single-product div.product div.images .flex-control-thumbs {
gap: 0;
}
}
.woocommerce.single-product div.product div.images .flex-control-thumbs li {
padding: 0;
}
.woocommerce.single-product div.product div.images .flex-control-thumbs li:before,
.woocommerce.single-product div.product div.images .flex-control-thumbs li:after {
content: none;
}
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__trigger {
z-index: 1;
}
/*
* The quantity controls have issues.
* - The Variation version is huge and not on the same line??
* - Input field needs to be widened to show the number properly.
* - The buttons need some color.
*/
.woocommerce.single-product div.quantity {
display: inline-flex;
gap: 0.25em;
}
.woocommerce.single-product div.quantity > input.qty {
-moz-appearance: textfield;
border: 0.15em solid var( --black );
padding: 0 !important;
/*width: 100%;*/
}
.woocommerce.single-product div.quantity > input.qty::-webkit-outer-spin-button,
.woocommerce.single-product div.quantity > input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.woocommerce.single-product div.quantity > a.minus,
.woocommerce.single-product div.quantity > a.plus {
background: var( --white-off );
border: 0;
color: var( --black );
font-weight: bold;
padding: var( --button-padding-small );
width: auto;
}
.woocommerce.single-product div.quantity > a.minus:hover,
.woocommerce.single-product div.quantity > a.plus:hover {
background: var( --black-off );
color: var( --white );
}
.woocommerce.single-product div.woocommerce-variation-add-to-cart {
gap: 0.5em;
}
/*
* Adjust the fonts on several titles - they are huge.
* - Product title
* - Description (or any headings under the tabs)
* - Related products
*/
.product_title {
font-size: 2.4em;
letter-spacing: unset;
line-height: 1em;
margin-bottom: 0.5em;
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
font-size: 2.4em;
}
.woocommerce div.product section.products > h2 {
font-size: 2.4em;
}
/*
* Space out the Product Meta a bit.
*/
.product_meta > .sku_wrapper, .product_meta > .tax-buttons, .product_meta > .posted_in {
margin-bottom: 0.5em;
}
/*
* Tabs for things like "Description" and "Additional Information" need some coloring/styling.
* Note: Seriously, everything in WC is so weird and difficult to style.
*/
.woocommerce div.product .woocommerce-tabs {
margin-bottom: 5em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs {
gap: 0.25em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li {
background: var( --white-off );
border-width: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li:hover {
background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
color: var( --gray );
}
.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( --gray-dark );
}
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active {
background: var( --black );
}
.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( --black-off );
}
.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 a:focus,
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a:hover {
color: var( --white );
}
/*
* It feels repetitive with the tabs, so hide the headings that appear under the tabs.
*/
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
display: none;
}
/*
* For the "Related Products" and Upsell Products ("You May Also Like"), control how many
* items we show per row (or at all) based on device width.
* Note: In order for this column/span-related styling to work, ensure that the following
* is set in Customizer >> Layout >> WooCommerce >> Related/Upsell Columns
* - Desktop = 4
* - Tablet = 2
* - Mobile = 2
* Note: There are two sections at the bottom of every Product Single page. The class
* selectors involve "section.related.products" and "section.upsells.products";
* however, it looks like we can merge into a single selector of "section.products".
*/
.woocommerce div.product section.products .products > li:first-child { grid-column: span 1; }
.woocommerce div.product section.products .products > li:nth-child(2) { grid-column: span 1; }
.woocommerce div.product section.products .products > li { grid-column: span 1; }
@media ( max-width: 1024px ) {
.woocommerce div.product section.products .products > li:first-child { grid-column: span 1; }
.woocommerce div.product section.products .products > li:nth-child(2) { grid-column: span 1; }
.woocommerce div.product section.products .products > li { grid-column: span 1; }
.woocommerce div.product section.products .products > li:nth-last-child(2) { display: none; }
.woocommerce div.product section.products .products > li:last-child { display: none; }
}
@media ( max-width: 768px ) {
.woocommerce div.product section.products .products > li:first-child { grid-column: span 1; }
.woocommerce div.product section.products .products > li:nth-child(2) { grid-column: span 1; }
.woocommerce div.product section.products .products > li { grid-column: span 1; }
.woocommerce div.product section.products .products > li:nth-last-child(2) { display: none; }
.woocommerce div.product section.products .products > li:last-child { display: none; }
}
@media ( max-width: 425px ) {
.woocommerce div.product section.products .products > li:first-child { grid-column: span 2; }
.woocommerce div.product section.products .products > li:nth-child(2) { grid-column: span 2; }
.woocommerce div.product section.products .products > li { grid-column: span 2; }
.woocommerce div.product section.products .products > li:nth-last-child(2) { display: none; }
.woocommerce div.product section.products .products > li:last-child { display: none; }
}
/*
* Give a little space between the Upsells and the Related Products.
*/
.woocommerce div.product section.upsells.products {
margin-bottom: 3em;
}
/*
* Use Cards for the "Related Products" and Upsells to match the main Shop.
*/
.woocommerce div.product section.products .products > li {
background: var( --gray-light );
padding: 0.75em;
}
/*
* There is a sticky panel that WC displays when scrolling down on
* Single Product pages - style this bit.
*/
.woocommerce .add-to-cart-panel {
background: var( --white );
border: 0;
border-bottom: 1.25em solid var( --black );
color: var( --black );
}
@media ( max-width: 768px ) {
.woocommerce .add-to-cart-panel {
border: 0;
border-top: 1.25em solid var( --black );
}
}
/*/////////////////////////
* 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.
* - To avoid using x-isolate all over, we are forming new stacking
* contexts on the outer containers. Helpful with styles like
* 'diamond' that use pseudo-elements to display behind.
* https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
*/
:root {
--cta-padding: 2em;
--hero-padding-bottom: 5em;
--hero-padding-top: 8em;
--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: 0.5em;
--outer-padding-y-tablet: 7em;
--outer-xl-padding-x-tablet: var( --outer-padding-x-tablet );
--outer-xl-padding-y-tablet: 9em;
--outer-xs-padding-x-tablet: var( --outer-padding-x-tablet );
--outer-xs-padding-y-tablet: 2em;
--outer-padding-x-mobile: 0.25em;
--outer-padding-y-mobile: 6em;
--outer-xl-padding-x-mobile: var( --outer-padding-x-mobile );
--outer-xl-padding-y-mobile: 8em;
--outer-xs-padding-x-mobile: var( --outer-padding-x-mobile );
--outer-xs-padding-y-mobile: 1em;
--pin-padding: 1.5em;
--quote-padding: 1.5em;
--sidebar-padding: 1em;
--tldr-padding: 1em;
}
.container-inner {
margin-left: auto;
margin-right: auto;
max-width: 1400px;
padding-left: var( --inner-padding-x );
padding-right: var( --inner-padding-x );
width: 100%;
}
.container-outer, .container-outer-xl, .container-outer-xs, .container-outer-0 {
isolation: isolate;
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 );
}
.container-outer-0 {
padding: 0 var( --outer-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 );
}
.container-outer-0 {
padding: 0 var( --outer-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 );
}
.container-outer-0 {
padding: 0 var( --outer-padding-x-mobile );
}
}
/*
* The CTAs get a touch of styling for consistency across the whole site.
*/
.container-cta {
align-items: center;
background: var( --black );
color: var( --white );
column-gap: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: var( --cta-padding );
row-gap: 1.5em;
}
.container-cta > h1, .container-cta > h2, .container-cta > h3,
.container-cta > h4, .container-cta > h5, .container-cta > h6 {
align-items: center;
column-gap: 0;
display: inline-flex;
flex-direction: column;
font-weight: 400;
margin-bottom: 0;
row-gap: 0.25em;
}
.container-cta > h1 .gb-shape svg, .container-cta > h2 .gb-shape svg, .container-cta > h3 .gb-shape svg,
.container-cta > h4 .gb-shape svg, .container-cta > h5 .gb-shape svg, .container-cta > h6 .gb-shape svg {
height: 3em;
width: 3em;
}
.container-cta > div.buttons {
align-items: center;
column-gap: 0.5em;
display: flex;
flex-direction: row;
justify-content: center;
row-gap: 0.5em;
}
.container-cta > div.buttons a { background: var( --white ); color: var( --black ); }
.container-cta > div.buttons a:focus, .container-cta > div.buttons a:hover { background: var( --white-off ); color: var( --black ); }
/*
* Because the main menu is floating over the hero, we need to account for some space
* so that the contents of the hero look balanced/centered. To avoid needing to change
* 200 instances by hand whenever we want to play with the settings here, we are placing
* the settings in a class and associating each hero with this class.
*/
.container-hero {
padding-bottom: var( --hero-padding-bottom );
padding-top: var( --hero-padding-top );
}
/*
* GBv2 deprecated links on Containers. As such, similar behavior must be implemented
* differently by using a pseudo-element. Details in this thread:
* https://generate.support/topic/creating-single-post-card-using-query-block/#post-144613
*/
.container-link {
position: relative;
}
.container-link a:before {
content: '';
inset: 0;
position: absolute;
}
/*
* The Pins get a touch of styling for consistency across the whole site.
*/
.container-pin {
align-items: center;
background: var( --black );
color: var( --white );
column-gap: 2em;
display: flex;
flex-direction: row;
justify-content: space-around;
padding: var( --pin-padding );
row-gap: 1em;
width: 100%;
}
.container-pin > h1, .container-pin > h2, .container-pin > h3,
.container-pin > h4, .container-pin > h5, .container-pin > h6 {
align-items: center;
column-gap: 0.5em;
display: inline-flex;
flex-direction: row;
font-weight: 400;
margin-bottom: 0;
row-gap: 0;
}
.container-pin > h1 .gb-shape svg, .container-pin > h2 .gb-shape svg, .container-pin > h3 .gb-shape svg,
.container-pin > h4 .gb-shape svg, .container-pin > h5 .gb-shape svg, .container-pin > h6 .gb-shape svg {
height: 1.5em;
width: 1.5em;
}
.container-pin > div.buttons {
align-items: center;
column-gap: 0.5em;
display: flex;
flex-direction: row;
justify-content: center;
row-gap: 0.5em;
}
.container-pin > div.buttons a { background: var( --white ); color: var( --black ); }
.container-pin > div.buttons a:focus, .container-pin > div.buttons a:hover { background: var( --white-off ); color: var( --black ); }
@media ( max-width: 1024px ) {
.container-pin { flex-direction: column; }
}
/*
* Quotes get a touch of styling for consistency across the whole site.
*/
.container-quote {
align-items: center;
background: var( --black );
color: var( --white );
column-gap: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: var( --quote-padding );
row-gap: 0.5em;
width: 100%;
}
.container-quote > h1, .container-quote > h2, .container-quote > h3,
.container-quote > h4, .container-quote > h5, .container-quote > h6 {
align-items: center;
column-gap: 0;
display: flex;
flex-direction: column;
font-style: italic;
font-weight: 400;
margin-bottom: 0;
row-gap: 0.5em;
text-align: center;
}
.container-quote > h1 .gb-shape svg, .container-quote > h2 .gb-shape svg, .container-quote > h3 .gb-shape svg,
.container-quote > h4 .gb-shape svg, .container-quote > h5 .gb-shape svg, .container-quote > h6 .gb-shape svg {
height: 1em;
width: 1em;
}
.container-quote > span {
font-weight: 100;
}
/*
* The Sidebars for Single Posts and Shop Archive get a bit of spacing to separate from the main content.
*/
.container-sidebar {
padding: var( --sidebar-padding );
}
/*
* In an effort to support GEO, Posts can have TL;DRs and Quick Summaries. We also style these so that they call out to the reader.
* Note: We tried using a :before, but did not since Google has limited capability processing those pseudo-classes.
*/
.container-summary, .container-tldr {
align-items: start;
background: var( --gray-light );
color: var( --black );
column-gap: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: var( --tldr-padding );
row-gap: 0.5em;
width: 100%;
}
.container-summary .summary, .container-tldr .tldr {
float: left;
font-size: 1.8em;
font-weight: bold;
padding-bottom: 0.1em;
padding-right: 0.25em;
}
.container-summary {
background: var( --white );
}
.container-summary > ul {
margin-bottom: 0;
}
.container-summary .summary {
font-size: 1.4em;
padding: 0;
}
/*/////////////////////////
* CLASS: ANIMATIONS
* Some animations can work across a number of different elements. There are some
* custom ones being defined here, but we can also use the library from animate.css.
* https://animate.style/
*/
/*
* Nudge - Wiggle an object just a tad and back again.
*/
@keyframes animation-nudge {
from { rotate: 0deg; }
to { rotate: -2deg; }
}
.animate-nudge {
--animate-nudge-duration: 1s;
animation-name: animation-nudge;
animation-duration: var( --animate-nudge-duration );
}
/*
* Rotate - Do one full turn.
*/
@keyframes animation-rotate {
from { rotate: 0deg; }
to { rotate: 1turn; }
}
.animate-rotate {
--animate-rotate-duration: 3s;
animation-name: animation-rotate;
animation-duration: var( --animate-rotate-duration );
}
/*/////////////////////////
* CLASS: EDGES
* Note: Edges appear before Buttons because Buttons can
* cascade properties from their Edge counterparts.
*/
/*
* Diamond - Decorates an element with a diamond behind it.
*/
:root {
--diamond-color: var( --white );
--diamond-color-alt: var( --black );
}
.edge-diamond,
.button-diamond {
aspect-ratio: 1;
--webkit-aspect-ratio: 1;
--moz-aspect-ratio: 1;
position: relative;
}
.edge-diamond:before, .edge-diamond:after,
.button-diamond:before, .button-diamond:after {
content: '';
position: absolute;
rotate: 45deg;
z-index: -1;
}
.edge-diamond:before,
.button-diamond:before {
background: var( --diamond-color );
border: 0.75em solid var( --diamond-color-alt );
inset: 0;
}
.edge-diamond:after,
.button-diamond:after {
background: var( --diamond-color );
border: 0.25em solid var( --diamond-color-alt );
inset: 1em;
}
/*
* Scallop - Old school silent film shape with scalloped corners.
* References:
* https://css-generators.com/custom-corners/
*/
:root {
--scallop-corner-radius: 1em;
}
.edge-scallop,
.button-scallop {
mask:
radial-gradient(
var( --scallop-corner-radius ) at var( --scallop-corner-radius ) var( --scallop-corner-radius ),
#0000 99%,
#000 100% )
calc( -1 * var( --scallop-corner-radius ) ) calc( -1 * var( --scallop-corner-radius ) );
}
/*
* Triple - Art Deco line art overlapping borders.
* References:
* https://jsfiddle.net/RenaissanceDesign/r8p05kg4/
* https://codepen.io/angelagiese/pen/mdMBYaM
* https://stackoverflow.com/questions/65758024/art-deco-style-border-in-css
*/
:root {
--triple-major: 0.5em;
--triple-minor: 0.25em;
--triple-offset-in: 0.5em;
--triple-offset-out: -1em;
}
.edge-triple,
.button-triple {
border: var( --triple-major ) solid;
position: relative;
}
.edge-triple:before, .edge-triple:after,
.button-triple:before, .button-triple:after {
border: var( --triple-minor ) solid;
content: '';
position: absolute;
}
.edge-triple:before,
.button-triple:before {
inset: var( --triple-offset-out ) var( --triple-offset-in );
}
.edge-triple:after,
.button-triple:after {
inset: var( --triple-offset-in ) var( --triple-offset-out );
}
/*/////////////////////////
* CLASS: BUTTONS
* Note: Several edges are the basis for buttons.
*/
/*
* _Default - The general, default look of buttons. Look for
* more settings below the specialized ones following.
*/
:root {
--button-padding: 1em 1.5em;
--button-padding-large: 1.5em 2.25em;
--button-padding-small: 0.33em 0.33em;
}
button, .gb-button, input[type=submit] {
border: 0;
padding: var( --button-padding );
white-space: nowrap;
}
/*
* Diamond - Decorates a button with a diamond behind it.
* Notes:
* Inherits properties from the border version;
* use area below to override and extend properties.
*/
:root {
--diamond-shadow: 0.25em;
--diamond-shadow-alt: 0.5em;
}
.button-diamond {
align-items: center;
box-shadow: 0 0 var( --diamond-shadow ) currentColor;
display: inline-flex; /* Must be inline-block or inline-flex to look correct. */
justify-content: center;
padding: var( --button-padding );
text-align: center;
}
.button-diamond:before {
border-width: 0.4em;
inset: -0.2em;
}
.button-diamond:after {
border-width: 0.2m;
inset: 0.3em;
}
.button-diamond-hover:before,
.button-diamond-hover:after {
transition: all 0.5s ease;
}
.button-diamond-hover:hover {
box-shadow: 0 0 var( --diamond-shadow-alt ) currentColor;
}
.button-diamond-hover:hover:before {
background-color: var( --diamond-color-alt );
}
.button-diamond-animate:before,
.button-diamond-animate:after {
animation-name: animation-diamond;
animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
.button-diamond-animate:after {
animation-direction: reverse;
}
@keyframes animation-diamond {
from { rotate: 45deg; }
40% { rotate: 45deg; }
60% { rotate: 405deg; }
to { rotate: 405deg; }
}
/*
* Scallop - Old school silent film shape with scalloped corners.
* Notes:
* Inherits properties from the border version;
* use area below to override and extend properties.
*/
.button-scallop {
--scallop-corner-radius: 0.5em;
align-items: center;
justify-content: center;
padding: var( --button-padding );
text-align: center;
}
.button-scallop-hover {
transition: all 0.5s ease;
}
.button-scallop-hover:hover {
transform: scale( 1.1 );
}
.button-scallop-animate {
animation-name: scallop-animation;
animation-duration: 30s;
animation-timing-function: ease;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
@keyframes scallop-animation {
from, 46.5% { rotate: 0deg; scale: 1; }
47% { rotate: 1deg; scale: 1.2; }
47.5% { rotate: -1deg; }
48% { rotate: 1deg; }
48.5% { rotate: -1deg; }
49% { rotate: 1deg; }
49.5% { rotate: -1deg; }
50% { rotate: 1deg; }
50.5% { rotate: -1deg; }
51% { rotate: 1deg; }
51.5% { rotate: -1deg; }
52% { rotate: 1deg; }
52.5% { rotate: -1deg; }
53% { rotate: 1deg; scale: 1.2; }
53.5%, to { rotate: 0deg; scale: 1; }
}
/*
* Triple - Art Deco line art overlapping borders.
* Notes:
* Inherits properties from the border version;
* use area below to override and extend properties.
*/
.button-triple {
--triple-major: 0.3em;
--triple-minor: 0.1em;
--triple-offset-in: 0.15em;
--triple-offset-out: -0.55em;
align-items: center;
justify-content: center;
padding: var( --button-padding );
text-align: center;
}
.button-triple:before, .button-triple:after {
transition: all 0.25s ease;
}
.button-triple-hover:hover:before {
inset: var( --triple-offset-out ) var( --triple-offset-out ) var( --triple-offset-in ) var( --triple-offset-in );
}
.button-triple-hover:hover:after {
inset: var( --triple-offset-in ) var( --triple-offset-in ) var( --triple-offset-out ) var( --triple-offset-out );
}
.button-triple-animate:before,
.button-triple-animate:after {
animation-name: triple-animation;
animation-duration: 30s;
animation-timing-function: linear;
animation-delay: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}
.button-triple-animate:after {
animation-direction: alternate-reverse;
}
@keyframes triple-animation {
from, 42% { translate: none; }
44% { translate: calc( 0 * var( --triple-offset-out ) ) calc( 1.5 * var( --triple-offset-out ) ); }
46% { translate: calc( 1.5 * var( --triple-offset-out ) ) calc( 1.5 * var( --triple-offset-out ) ); }
48% { translate: calc( 1.5 * var( --triple-offset-out ) ) calc( 0 * var( --triple-offset-out ) ); }
50% { translate: calc( 0 * var( --triple-offset-out ) ) calc( 0 * var( --triple-offset-out ) ); }
52% { translate: calc( -1.5 * var( --triple-offset-out ) ) calc( 0 * var( --triple-offset-out ) ); }
54% { translate: calc( -1.5 * var( --triple-offset-out ) ) calc( -1.5 * var( --triple-offset-out ) ); }
56% { translate: calc( 0 * var( --triple-offset-out ) ) calc( -1.5 * var( --triple-offset-out ) ); }
58%, to { translate: none; }
}
/*
* _Overall - Can apply these to any of the other buttons.
* Note: Reusing the tada animation for plain buttons; good for CTA.
*/
.button-x, .button-x-large, .button-x-small,
.button-x:hover, .button-x-large:hover, .button-x-small:hover {
align-items: center;
font-family: 'Oswald';
padding: var( --button-padding );
text-decoration: none;
text-transform: uppercase;
}
/*
*
*
* DAN-CONTINUE: Look at renaming the button animations to be generic and move up to the Animations section of this file.
* Then, reuse the animations; not just the diamond, scallop, and triple, but also the generic button.
*
*
*/
.button-x-large, .button-x-large:hover { padding: var( --button-padding-large ); }
.button-x-small, .button-x-small:hover { padding: var( --button-padding-small ); }
.button-x-animate {
animation-name: rubberBand;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
/*/////////////////////////
* CLASS: LAYOUTS
*/
/*
* The Diamond layout staggers the cells of a Grid Block and slots them together.
*
* Note:
* Current implementation works best when the children are either other Containers
* and/or Images. No other elements are recommended to go in the parent Container.
*
* The diamond size can be based on em/px, but not %/fr/vw, etc. We chose "em"
* because the size of the diamonds can be impacted by the font-size set on the
* Container directly in the GenerateBlock backend authoring workflow.
*
* The " of :not( style )" bit on several selectors makes it so that the backend
* is easier to visualize. If more succinct CSS becomes of higher value to us
* over a better-looking backend, then this clause can be omitted safely without
* affecting the frontend.
*
* EMERGENCY NOTE: It appears that the " of :not( style )" selector does not work
* on physical mobile devices (i.e. failed testing on Pixel 6). As such, I needed
* to take out that clause and just leave CSS selectors like "> *:nth-child(3)"
* in there. It came down to a choice between making the backend look accurate
* or making the mobile frontend look accurate. Of course, the frontend won.
*
* Unlike some other classes, ".layout-diamond" SHOULD NOT live on its own.
* It is necessary to apply one of the other diamond layouts alongside it.
* For example, ".layout-diamond-4-121" is stating that four children should
* be present and they will be laid out with one child on the top row, two
* in the middle, and one at the bottom.
*
* Additionally, there are some size-related classes available to shrink the
* size of the diamonds that can be also be used alongside ".layout-diamond".
*
* Reference:
* https://www.youtube.com/watch?v=A5GXdjEOvos
* https://codepen.io/alvaromontoro/pen/yLZVJRR
* https://codepen.io/kevinpowell/pen/NWmwYKr
*/
:root {
--diamond-size: 20em;
--diamond-size-tablet: 16em;
--diamond-size-mobile: 12em;
}
.layout-diamond {
--diamond-grid-cols: 6; /* Each diamond takes up 2 grid spaces, so make this number double than what is desired. */
--diamond-grid-rows: 4; /* Each diamond overflows into the grid space below it, so make this number 1 more than what is desired. */
--diamond-shape: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50% );
display: grid;
gap: 0.5em;
justify-content: center;
justify-items: center;
/* Each diamond takes up 2 grid spaces, so double the number of columns desired and halve each. */
grid-template-columns: repeat( var( --diamond-grid-cols ), calc( 0.5 * var( --diamond-size ) ) );
/* Each diamond pattern overflows into the grid space below it, so add 1 to the rows and halve each. */
grid-template-rows: repeat( var( --diamond-grid-rows ), calc( 0.5 * var( --diamond-size ) ) );
}
.layout-diamond > figure > img, .layout-diamond > figure > a > img, .layout-diamond > div,
.layout-diamond > img, .layout-diamond div:nth-child(2n) > img {
aspect-ratio: 1;
clip-path: var( --diamond-shape );
object-fit: cover;
width: var( --diamond-size );
}
.layout-diamond > * { grid-column: span 2; }
.layout-diamond-sm {
--diamond-size: 16em;
--diamond-size-tablet: 13em;
--diamond-size-mobile: 10em;
}
.layout-diamond-xs {
--diamond-size: 12em;
--diamond-size-tablet: 10em;
--diamond-size-mobile: 8em;
}
@media ( max-width: 1024px ) {
:root { --diamond-size: var( --diamond-size-tablet ); }
}
@media ( max-width: 767px ) {
:root { --diamond-size: var( --diamond-size-mobile ); }
}
.layout-diamond-2-11 { --diamond-grid-cols: 3; --diamond-grid-rows: 3; }
.layout-diamond-2-11 > *:nth-child(2) { grid-column: 2 / span 2; }
.layout-diamond-3-21 { --diamond-grid-cols: 4; --diamond-grid-rows: 3; }
.layout-diamond-3-21 > *:nth-child(3) { grid-column: 2 / span 2; }
.layout-diamond-4-121 { --diamond-grid-cols: 4; --diamond-grid-rows: 4; }
.layout-diamond-4-121 > *:nth-child(1) { grid-column: 2 / span 2; }
.layout-diamond-4-121 > *:nth-child(4) { grid-column: 2 / span 2; }
.layout-diamond-4-22 { --diamond-grid-cols: 5; --diamond-grid-rows: 3; }
.layout-diamond-4-22 > *:nth-child(3) { grid-column: 2 / span 2; }
.layout-diamond-5-131 { --diamond-grid-cols: 6; --diamond-grid-rows: 4; }
.layout-diamond-5-131 > *:nth-child(1) { grid-column: 4 / span 2; }
.layout-diamond-5-131 > *:nth-child(5) { grid-column: 2 / span 2; }
.layout-diamond-5-212 { --diamond-grid-cols: 4; --diamond-grid-rows: 4; }
.layout-diamond-5-212 > *:nth-child(3) { grid-column: 2 / span 2; }
.layout-diamond-5-32 { --diamond-grid-cols: 6; --diamond-grid-rows: 3; }
.layout-diamond-5-32 > *:nth-child(4) { grid-column: 2 / span 2; }
.layout-diamond-6-1221 { --diamond-grid-cols: 5; --diamond-grid-rows: 5; }
.layout-diamond-6-1221 > *:nth-child(1) { grid-column: 3 / span 2; }
.layout-diamond-6-1221 > *:nth-child(2) { grid-column: 2 / span 2; }
.layout-diamond-6-1221 > *:nth-child(6) { grid-column: 2 / span 2; }
.layout-diamond-6-33 { --diamond-grid-cols: 7; --diamond-grid-rows: 3; }
.layout-diamond-6-33 > *:nth-child(4) { grid-column: 2 / span 2; }
.layout-diamond-6-321 { --diamond-grid-cols: 6; --diamond-grid-rows: 4; }
.layout-diamond-6-321 > *:nth-child(4) { grid-column: 2 / span 2; }
.layout-diamond-6-321 > *:nth-child(6) { grid-column: 3 / span 2; }
.layout-diamond-7-232 { --diamond-grid-cols: 6; --diamond-grid-rows: 4; }
.layout-diamond-7-232 > *:nth-child(1) { grid-column: 2 / span 2; }
.layout-diamond-7-232 > *:nth-child(6) { grid-column: 2 / span 2; }
.layout-diamond-8-323 { --diamond-grid-cols: 6; --diamond-grid-rows: 4; }
.layout-diamond-8-323 > *:nth-child(4) { grid-column: 2 / span 2; }
.layout-diamond-9-12321 { --diamond-grid-cols: 6; --diamond-grid-rows: 6; }
.layout-diamond-9-12321 > *:nth-child(1) { grid-column: 3 / span 2; }
.layout-diamond-9-12321 > *:nth-child(2) { grid-column: 2 / span 2; }
.layout-diamond-9-12321 > *:nth-child(7) { grid-column: 2 / span 2; }
.layout-diamond-9-12321 > *:nth-child(9) { grid-column: 3 / span 2; }
/*
* Masonry is not supported by the Grid Block or in the Query Loop, so we must support
* it manually in this manner. This class can be applied to any Container or Grid.
*
* 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: 0.5em;
--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;
text-align: center;
}
.layout-masonry > *, .layout-masonry-less > *, .layout-masonry-more > * {
break-inside: avoid-column;
display: 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 WP backend inlines the styles - we do not want those to show. */
.layout-masonry > style, .layout-masonry-less > style, .layout-masonry-more > style {
display: none;
}
/*/////////////////////////
* CLASS: PATTERNS
*/
/*
* Aurora - Inspired by the northern lights.
* Reference:
* https://dev.to/oobleck/css-aurora-effect-569n
* https://codepen.io/ostylowany/pen/vYzPVZL
*
* Note:
* Originally, all xxx-gradient designs were considered "auroras", but ended up iterating
* quite a bit to create other designs like "glow" and "horizon". For now, keeping "aurora"
* as a stub in case a multi-color effect is implemented.
*/
:root {
/* TBD */
}
.pattern-aurora {
/* TBD */
}
/*
* Deco - Line art reminiscent of art deco.
* Notes:
* The SVG must be encoded. Do so here:
* https://yoksel.github.io/url-encoder/
*/
:root {
/* No variables defined - all must be hardcoded in the SVG. */
}
.pattern-deco, .pattern-deco-light {
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
}
.pattern-deco {
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 540'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='1655.47 0 51.05 411.41 50.77 413.94 1799.11 0 1655.47 0'/%3E%3Cpolygon class='cls-1' points='1920 39.64 386.62 350.46 386.23 352.62 1920 71.57 1920 39.64'/%3E%3Cpolygon class='cls-1' points='0 5.39 847.98 540 847.98 537.18 29.94 0 0 0 0 5.39'/%3E%3C/svg%3E");
}
.pattern-deco-light {
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 540'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23000000; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='1655.47 0 51.05 411.41 50.77 413.94 1799.11 0 1655.47 0'/%3E%3Cpolygon class='cls-1' points='1920 39.64 386.62 350.46 386.23 352.62 1920 71.57 1920 39.64'/%3E%3Cpolygon class='cls-1' points='0 5.39 847.98 540 847.98 537.18 29.94 0 0 0 0 5.39'/%3E%3C/svg%3E");
}
.pattern-deco-alt, .pattern-deco-alt-light {
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% auto;
}
.pattern-deco-alt {
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 540'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffffff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='1129.8 79.6 1129.8 77.48 176.92 540 224.37 540 1129.8 79.6'/%3E%3Cpolygon class='cls-1' points='1269.72 80.26 1269.72 77.48 1920 540 1891.54 540 1269.72 80.26'/%3E%3Cpolygon class='cls-1' points='0 533.3 0 540 53.67 540 1275.17 2.3 1275.17 0 0 533.3'/%3E%3Cpolygon class='cls-1' points='1920 324.31 398.56 180.48 398.75 182.42 1920 354.73 1920 324.31'/%3E%3Cpolygon class='cls-1' points='1920 416.05 476.62 219.53 475.8 221.28 1920 445.29 1920 416.05'/%3E%3C/svg%3E");
}
.pattern-deco-alt-light {
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 540'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23000000; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='1129.8 79.6 1129.8 77.48 176.92 540 224.37 540 1129.8 79.6'/%3E%3Cpolygon class='cls-1' points='1269.72 80.26 1269.72 77.48 1920 540 1891.54 540 1269.72 80.26'/%3E%3Cpolygon class='cls-1' points='0 533.3 0 540 53.67 540 1275.17 2.3 1275.17 0 0 533.3'/%3E%3Cpolygon class='cls-1' points='1920 324.31 398.56 180.48 398.75 182.42 1920 354.73 1920 324.31'/%3E%3Cpolygon class='cls-1' points='1920 416.05 476.62 219.53 475.8 221.28 1920 445.29 1920 416.05'/%3E%3C/svg%3E");
}
/*
* Diamond - A unique diamond pattern that uses that can use the
* background color of the container to peer through.
* Notes:
* The SVG must be encoded. Do so here:
* https://yoksel.github.io/url-encoder/
*
* Additionally, the two SVG we are using here are stored in
* the Media Library (diamond-dark.svg and diamond-light.svg).
* However, do not load these as files - it is faster to load
* on the front-end as an inline URL right here in the CSS.
*
* References:
* https://codepen.io/Archibald2/pen/WNmQPjV
*/
:root {
/* No variables defined - all must be hardcoded in the SVG. */
}
.pattern-diamond, .pattern-diamond-light {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- ROW %230 --%3E%3Cpolygon points='2 0 1 1 0 0' fill='%23000000' /%3E%3Cpolygon points='4 0 3 1 2 0' fill='%23000000' /%3E%3Cpolygon points='6 0 5 1 4 0' fill='%23000000' /%3E%3Cpolygon points='8 0 7 1 6 0' fill='%23000000' /%3E%3C!-- ROW %231 --%3E%3Cpolygon points='0 0 1 1 0 2' fill='%23222222' /%3E%3Cpolygon points='2 0 3 1 2 2 1 1' fill='%23333333' /%3E%3Cpolygon points='4 0 5 1 4 2 3 1' fill='%23000000' /%3E%3Cpolygon points='6 0 7 1 6 2 5 1' fill='%23333333' /%3E%3Cpolygon points='8 0 8 2 7 1' fill='%23222222' /%3E%3C!-- ROW %232 --%3E%3Cpolygon points='1 1 2 2 1 3 0 2' fill='%23000000' /%3E%3Cpolygon points='3 1 4 2 3 3 2 2' fill='%23222222' /%3E%3Cpolygon points='5 1 6 2 5 3 4 2' fill='%23222222' /%3E%3Cpolygon points='7 1 8 2 7 3 6 2' fill='%23000000' /%3E%3C!-- ROW %233 --%3E%3Cpolygon points='0 2 1 3 0 4' fill='%23222222' /%3E%3Cpolygon points='2 2 3 3 2 4 1 3' fill='%23333333' /%3E%3Cpolygon points='6 2 7 3 6 4 5 3' fill='%23333333' /%3E%3Cpolygon points='8 2 8 4 7 3' fill='%23222222' /%3E%3C!-- ROW %234 --%3E%3Cpolygon points='1 3 2 4 1 5 0 4' fill='%23000000' /%3E%3Cpolygon points='4 2 6 4 4 6 2 4' fill='%2300000000' /%3E%3Cpolygon points='7 3 8 4 7 5 6 4' fill='%23000000' /%3E%3C!-- ROW %235 --%3E%3Cpolygon points='0 4 1 5 0 6' fill='%23222222' /%3E%3Cpolygon points='2 4 3 5 2 6 1 5' fill='%23333333' /%3E%3Cpolygon points='6 4 7 5 6 6 5 5' fill='%23333333' /%3E%3Cpolygon points='8 4 8 6 7 5' fill='%23222222' /%3E%3C!-- ROW %236 --%3E%3Cpolygon points='1 5 2 6 1 7 0 6' fill='%23000000' /%3E%3Cpolygon points='3 5 4 6 3 7 2 6' fill='%23222222' /%3E%3Cpolygon points='5 5 6 6 5 7 4 6' fill='%23222222' /%3E%3Cpolygon points='7 5 8 6 7 7 6 6' fill='%23000000' /%3E%3C!-- ROW %237 --%3E%3Cpolygon points='0 6 1 7 0 8' fill='%23222222' /%3E%3Cpolygon points='2 6 3 7 2 8 1 7' fill='%23333333' /%3E%3Cpolygon points='4 6 5 7 4 8 3 7' fill='%23000000' /%3E%3Cpolygon points='6 6 7 7 6 8 5 7' fill='%23333333' /%3E%3Cpolygon points='8 6 8 8 7 7' fill='%23222222' /%3E%3C!-- ROW %238 --%3E%3Cpolygon points='1 7 2 8 0 8' fill='%23000000' /%3E%3Cpolygon points='3 7 4 8 2 8' fill='%23000000' /%3E%3Cpolygon points='5 7 6 8 4 8' fill='%23000000' /%3E%3Cpolygon points='7 7 8 8 6 8' fill='%23000000' /%3E%3C/svg%3E");
background-position: center;
background-repeat: repeat;
}
.pattern-diamond-light {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- ROW %230 --%3E%3Cpolygon points='2 0 1 1 0 0' fill='%23ffffff' /%3E%3Cpolygon points='4 0 3 1 2 0' fill='%23ffffff' /%3E%3Cpolygon points='6 0 5 1 4 0' fill='%23ffffff' /%3E%3Cpolygon points='8 0 7 1 6 0' fill='%23ffffff' /%3E%3C!-- ROW %231 --%3E%3Cpolygon points='0 0 1 1 0 2' fill='%23eeeeee' /%3E%3Cpolygon points='2 0 3 1 2 2 1 1' fill='%23dddddd' /%3E%3Cpolygon points='4 0 5 1 4 2 3 1' fill='%23ffffff' /%3E%3Cpolygon points='6 0 7 1 6 2 5 1' fill='%23dddddd' /%3E%3Cpolygon points='8 0 8 2 7 1' fill='%23eeeeee' /%3E%3C!-- ROW %232 --%3E%3Cpolygon points='1 1 2 2 1 3 0 2' fill='%23ffffff' /%3E%3Cpolygon points='3 1 4 2 3 3 2 2' fill='%23eeeeee' /%3E%3Cpolygon points='5 1 6 2 5 3 4 2' fill='%23eeeeee' /%3E%3Cpolygon points='7 1 8 2 7 3 6 2' fill='%23ffffff' /%3E%3C!-- ROW %233 --%3E%3Cpolygon points='0 2 1 3 0 4' fill='%23eeeeee' /%3E%3Cpolygon points='2 2 3 3 2 4 1 3' fill='%23dddddd' /%3E%3Cpolygon points='6 2 7 3 6 4 5 3' fill='%23dddddd' /%3E%3Cpolygon points='8 2 8 4 7 3' fill='%23eeeeee' /%3E%3C!-- ROW %234 --%3E%3Cpolygon points='1 3 2 4 1 5 0 4' fill='%23ffffff' /%3E%3Cpolygon points='4 2 6 4 4 6 2 4' fill='%2300000000' /%3E%3Cpolygon points='7 3 8 4 7 5 6 4' fill='%23ffffff' /%3E%3C!-- ROW %235 --%3E%3Cpolygon points='0 4 1 5 0 6' fill='%23eeeeee' /%3E%3Cpolygon points='2 4 3 5 2 6 1 5' fill='%23dddddd' /%3E%3Cpolygon points='6 4 7 5 6 6 5 5' fill='%23dddddd' /%3E%3Cpolygon points='8 4 8 6 7 5' fill='%23eeeeee' /%3E%3C!-- ROW %236 --%3E%3Cpolygon points='1 5 2 6 1 7 0 6' fill='%23ffffff' /%3E%3Cpolygon points='3 5 4 6 3 7 2 6' fill='%23eeeeee' /%3E%3Cpolygon points='5 5 6 6 5 7 4 6' fill='%23eeeeee' /%3E%3Cpolygon points='7 5 8 6 7 7 6 6' fill='%23ffffff' /%3E%3C!-- ROW %237 --%3E%3Cpolygon points='0 6 1 7 0 8' fill='%23eeeeee' /%3E%3Cpolygon points='2 6 3 7 2 8 1 7' fill='%23dddddd' /%3E%3Cpolygon points='4 6 5 7 4 8 3 7' fill='%23ffffff' /%3E%3Cpolygon points='6 6 7 7 6 8 5 7' fill='%23dddddd' /%3E%3Cpolygon points='8 6 8 8 7 7' fill='%23eeeeee' /%3E%3C!-- ROW %238 --%3E%3Cpolygon points='1 7 2 8 0 8' fill='%23ffffff' /%3E%3Cpolygon points='3 7 4 8 2 8' fill='%23ffffff' /%3E%3Cpolygon points='5 7 6 8 4 8' fill='%23ffffff' /%3E%3Cpolygon points='7 7 8 8 6 8' fill='%23ffffff' /%3E%3C/svg%3E");
}
/*
* Glow - Encroaches on the edges of the background.
* Reference:
* https://www.toptal.com/developers/css3maker/examples/aurora-blue-ui
*/
:root {
/* Intentionally no global variables defined. */
}
.pattern-glow {
--color: currentcolor;
background:
radial-gradient( 93% 93% at 8% 128%, var( --color ) 0%, rgba( 0, 0, 0, 0.2 ) 60%, rgba( 0, 0, 0, 0 ) 100% ),
radial-gradient( 49% 88% at 27% -14%, rgba( 0, 0, 0, 0.73 ) 0%, rgba( 0, 0, 0, 0.17 ) 60%, rgba( 0, 0, 0, 0) 100% ),
radial-gradient( 115% 156% at 90% 89%, var( --black-off ) 0%, rgba( 0, 0, 0, 0) 100% ),
linear-gradient( 234deg, var( --color ) 25%, rgba( 0, 0, 0, 0.77 ) 35%, rgba( 0, 0, 0, 0.4 ) 50%, rgba( 0, 0, 0, 0 ) 84% ),
radial-gradient( 119% 119% at 3% 26%, var( --black-off ) 0%, rgba( 0, 0, 0, 0 ) 74% ),
linear-gradient( 360deg, var( --black-off ) 0%, var( --black ) 100% );
}
.pattern-glow-light {
--color: currentcolor;
background:
radial-gradient( 93% 93% at 8% 128%, var( --color ) 0%, rgba( 255, 255, 255, 0.2 ) 60%, rgba( 255, 255, 255, 0 ) 100% ),
radial-gradient( 49% 88% at 27% -14%, rgba( 255, 255, 255, 0.73 ) 0%, rgba( 255, 255, 255, 0.17 ) 60%, rgba( 255, 255, 255, 0) 100% ),
radial-gradient( 115% 156% at 90% 89%, var( --white-off ) 0%, rgba( 255, 255, 255, 0) 100% ),
linear-gradient( 234deg, var( --color ) 25%, rgba( 255, 255, 255, 0.77 ) 35%, rgba( 255, 255, 255, 0.4 ) 50%, rgba( 255, 255, 255, 0 ) 84% ),
radial-gradient( 119% 119% at 3% 26%, var( --white-off ) 0%, rgba( 255, 255, 255, 0 ) 74% ),
linear-gradient( 360deg, var( --white-off ) 0%, var( --white ) 100% );
}
/*
* Horizon - Looks like the horizon on the sun or a shooting star.
* Reference:
* https://www.toptal.com/developers/css3maker/examples/aurora-boreal-ui
*/
:root {
/* Intentionally no global variables defined. */
}
.pattern-horizon {
--color: currentcolor;
background:
radial-gradient( 110.35% 80.79% at 6% 103.92%, var( --black-off ) 0%, rgba( 0, 0, 0, 0 ) 100% ),
linear-gradient( 169.3deg, var( --black ) 15%, rgba( 0, 0, 0, 0 ) 46% ),
radial-gradient( 123% 73% at 107% 96%, var( --black ) 20%, var( --black-off ) 60%, var( --color ) 75%, rgba( 0, 0, 0, 0 ) 100% ),
linear-gradient( 0deg, var( --black ) 0%, var( --black-off ) 100% );
}
.pattern-horizon-light {
--color: currentcolor;
background:
radial-gradient( 110.35% 80.79% at 6% 103.92%, var( --white-off ) 0%, rgba( 255, 255, 255, 0 ) 100% ),
linear-gradient( 169.3deg, var( --white ) 15%, rgba( 255, 255, 255, 0 ) 46% ),
radial-gradient( 123% 73% at 107% 96%, var( --white ) 20%, var( --white-off ) 60%, var( --color ) 75%, rgba( 255, 255, 255, 0 ) 100% ),
linear-gradient( 0deg, var( --white ) 0%, var( --white-off ) 100% );
}
/*/////////////////////////
* 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;
}
@media ( min-width: 1025px ) {
.x-balance-desktop {
text-wrap: balance;
}
}
@media ( max-width: 1024px ) {
.x-balance-tablet {
text-wrap: balance;
}
}
@media ( max-width: 767px ) {
.x-balance-mobile {
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 ); }
}
/*
* GB Conditions are not saving on the EE site. Thus, classes must be added to hide elements.
*/
body:not(.wp-admin):is(.woocommerce .woocommerce-account, .woocommerce-cart, .woocommerce-checkout) .x-hide-if-shop { display: none; }
body:not(.wp-admin):not(.woocommerce):not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .x-hide-if-not-shop { display: none; }
/*
* When trying to place a pseudo-element behind the parent,
* it may be necessary to isolate the parent's parent.
* https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
*/
.x-isolate {
isolation: isolate;
}
/*
* Remove or change out the bullets on a list.
*/
.x-list-none {
list-style: none;
margin-left: 1em;
}
.x-list-none > li:before, .x-list-none > li:after { content: none; }
.x-list-stock { margin-left: 2em; }
.x-list-stock > li:before, .x-list-stock > li:after { content: none; }
ol.x-list-stock { list-style: lower-roman; }
ol.x-list-stock > li::marker {
font-size: 0.75em;
font-weight: bold;
}
ul.x-list-stock { list-style: square; }
/*
* 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;
}
/* Force an element to take a square shape. */
.x-square {
aspect-ratio: 1/1;
}
/* 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%; }
}
/* Special underline curve to accentuate special terms. */
.x-underline-curved {
position: relative;
text-decoration: none;
white-space: nowrap;
}
.x-underline-curved:after {
content: '';
position: absolute;
top: calc(100% + 2px);
left: -10px;
right: -10px;
height: 20px;
border: solid 3px currentcolor;
border-color: currentcolor transparent transparent transparent;
border-radius: 50%/15px 10px 0 0;
}
/* In some cases, the default wavy line on links can look strange. */
.x-underline-none a {
text-decoration: none;
}
/*/////////////////////////
* SPECIAL
*/
/* For the comic book - avoid underlining secret links. */
.dark-secret > a {
text-decoration: none !important;
}
/*
* For the "Snippets (Post)" page, there are some special styles that help it
* look like a regular Single Post.
*/
.site-content:has( article#post-46784 ) {
padding: 2em;
}
/* The answers to the bonus greek WAR path need the first letter accentuated. */
.war-bonus-greek-reward-text:first-letter {
font-size: 2em;
line-height: 1em;
}
/*/////////////////////////
* FIXES
*/
/* Remove scrollbar from lightbox. */
.featherlight-iframe .featherlight-content {
overflow: hidden !important;
}
/*
* Woocommerce is overriding the height of the navbar logo with a more
* specific selector, so force it here.
* Note: Cannot use .woocommerce selector because it does not handle Cart/Checkout.
* Must use .woocommerce-page selector instead.
*/
body.woocommerce-page img.logo {
height: 96px;
width: auto;
}
@media ( max-width: 767px ) {
body.woocommerce-page img.logo {
height: 80px;
}
}
/*
* Images are being treated as "inline", which adds an extra 5 pixels to the bottom for descenders. Remove that.
* Search Google: "generateblocks image has extra 5 pixels under image"
*/
/*DAN-NOTE: Taking out temporarily. This is causing ![]()
s to left-justify and ignore all other alignment settings.
img {
display: block;
margin: auto;
}
*/
/*
* 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;
}
/*/////////////////////////
* PAGESPEED (PSI)
*/
/*
* [aria-hidden="true"] elements contain focusable descendents
* https://pagespeed.web.dev/analysis/https-theescapeeffect-com/n491cz9ieu?form_factor=mobile
*/
.nf-form-hp *[aria-hidden="true"] *,
.wc-block-mini-cart__drawer[aria-hidden="true"] * {
display: none !important;
visibility: hidden;
}