/* Theme Name: Pointbreak Dynamics Theme URI: https://pointbreakdynamics.com Author: Pointbreak Dynamics, LLC Description: Standalone theme for Pointbreak Dynamics, built from the homepage's dark/gold design system and applied natively across the whole site. Version: 1.0.0 Requires PHP: 8.0 Text Domain: pbd */ /* ========================================================================== Design tokens ========================================================================== */ :root { --pbd-black: #0C0D10; --pbd-bg: oklch(0.16 0.006 260); --pbd-border: oklch(0.27 0.01 260); --pbd-card: oklch(0.19 0.007 260); --pbd-tile: oklch(0.2 0.007 260); --pbd-stripe-a: oklch(0.24 0.008 260); --pbd-stripe-b: oklch(0.21 0.008 260); --pbd-input: #1B1D22; --pbd-input-border: #3A3D44; --pbd-text: #EDEEF0; --pbd-text-soft: oklch(0.62 0.01 260); --pbd-text-muted: oklch(0.62 0.01 260); --pbd-text-faint: oklch(0.60 0.01 260); --pbd-accent: #F2A700; --pbd-accent-hover: #FFB600; --pbd-accent-oklch: oklch(0.78 0.17 78); --pbd-accent-oklch-hover: oklch(0.83 0.18 78); --pbd-font-display: 'Alumni Sans', sans-serif; --pbd-font-body: 'Inter', system-ui, sans-serif; --pbd-radius-card: 4px; --pbd-radius-pill: 49px; --pbd-content-width: 1200px; --pbd-content-width-wide: 1400px; } /* ========================================================================== Light mode ========================================================================== */ /* Three states, driven by the footer THEME toggle + a tiny inline script in header.php that sets data-theme on before first paint. Dark is the hard default — a first-time visitor with no stored choice gets dark regardless of their OS setting; they have to actively pick Auto or Light to get anything else: - no localStorage entry (never chosen): no data-theme attribute — :root's dark values apply as-is, OS preference is not consulted. - "auto" (explicitly chosen): [data-theme="auto"] is set, which is what the media query below keys off — this is the only state that follows the OS, and it stays live if the OS setting changes without a page reload. - "light": [data-theme="light"] always applies this block, regardless of OS. - "dark" (explicitly chosen): behaves the same as the unset default, just recorded so the toggle shows Dark as the active choice. --pbd-black and the button-fill accent (--pbd-accent / -hover) stay the same gold/near-black in both modes — they're used as fixed on-accent text and solid fills, not page text, so the contrast math doesn't change. --pbd-accent-oklch (plain link/text color) gets a deeper gold here specifically because F2A700 fails contrast against a light background even though it reads fine against the dark one. */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --pbd-bg: oklch(0.97 0.003 260); --pbd-border: oklch(0.87 0.006 260); --pbd-card: oklch(1 0 0); --pbd-tile: oklch(0.94 0.004 260); --pbd-stripe-a: oklch(0.93 0.004 260); --pbd-stripe-b: oklch(0.89 0.004 260); --pbd-input: oklch(0.96 0.004 260); --pbd-input-border: oklch(0.82 0.008 260); --pbd-text: oklch(0.16 0.006 260); --pbd-text-soft: oklch(0.42 0.01 260); --pbd-text-muted: oklch(0.5 0.01 260); --pbd-text-faint: oklch(0.52 0.01 260); --pbd-accent-oklch: oklch(0.55 0.16 78); --pbd-accent-oklch-hover: oklch(0.48 0.17 78); } } [data-theme="light"] { --pbd-bg: oklch(0.97 0.003 260); --pbd-border: oklch(0.87 0.006 260); --pbd-card: oklch(1 0 0); --pbd-tile: oklch(0.94 0.004 260); --pbd-stripe-a: oklch(0.93 0.004 260); --pbd-stripe-b: oklch(0.89 0.004 260); --pbd-input: oklch(0.96 0.004 260); --pbd-input-border: oklch(0.82 0.008 260); --pbd-text: oklch(0.16 0.006 260); --pbd-text-soft: oklch(0.42 0.01 260); --pbd-text-muted: oklch(0.5 0.01 260); --pbd-text-faint: oklch(0.52 0.01 260); --pbd-accent-oklch: oklch(0.55 0.16 78); --pbd-accent-oklch-hover: oklch(0.48 0.17 78); } /* Flat-white ghost-mark logo, inverted to flat-black so it stays a faint watermark instead of vanishing against a light page. */ @media (prefers-color-scheme: light) { [data-theme="auto"] .pbd-logo-mark { filter: invert(1); } } [data-theme="light"] .pbd-logo-mark { filter: invert(1); } /* ========================================================================== Fonts (self-hosted — avoids ad-blockers silently dropping Google Fonts) ========================================================================== */ @font-face { font-family: 'Alumni Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/alumni-sans-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/inter-variable.woff2') format('woff2'); } /* ========================================================================== Reset + base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--pbd-bg); color: var(--pbd-text); font-family: var(--pbd-font-body); font-size: 16px; line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { color: var(--pbd-accent-oklch); text-decoration: none; } a:hover { color: var(--pbd-accent-oklch-hover); } /* Keyboard focus indicator. Nothing upstream (theme or plugins) was supplying one, which left keyboard-only users with no way to see where they were on the page — this is the single most common failure these ADA site-accessibility lawsuits cite. :focus-visible skips the ring for mouse/touch clicks and shows it only for keyboard navigation. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--pbd-accent-oklch); outline-offset: 2px; } /* Skip link: visually hidden until it receives keyboard focus, letting keyboard/screen-reader users jump past the repeated header and nav straight to the page's main content. */ .pbd-skip-link { position: absolute; top: -100px; left: 12px; z-index: 999999; background: var(--pbd-accent); color: var(--pbd-black); font-family: var(--pbd-font-body); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--pbd-radius-card); transition: top 0.15s ease; } .pbd-skip-link:focus { top: 12px; color: var(--pbd-black); } h1, h2, h3, h4, h5, h6 { font-family: var(--pbd-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; color: var(--pbd-text); margin: 0 0 0.6em; } p { margin: 0 0 1.2em; } .pbd-container { max-width: var(--pbd-content-width); margin: 0 auto; padding: 0 24px; } .pbd-container-wide { max-width: var(--pbd-content-width-wide); margin: 0 auto; padding: 0 24px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ========================================================================== Buttons — pill, gold fill, used site-wide (theme buttons + WooCommerce) ========================================================================== */ .pbd-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-checkout-place-order-button, .wc-block-cart__submit, .single_add_to_cart_button, button[type="submit"], input[type="submit"], .ffl-locator-submit { display: inline-block; background: var(--pbd-accent); color: var(--pbd-black); font-family: var(--pbd-font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; border: 1px solid var(--pbd-accent); border-radius: var(--pbd-radius-pill); padding: 12px 28px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; text-align: center; } .pbd-button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-cart__submit:hover, .single_add_to_cart_button:hover, button[type="submit"]:hover, input[type="submit"]:hover, .ffl-locator-submit:hover { background: var(--pbd-accent-hover); border-color: var(--pbd-accent-hover); color: var(--pbd-black); } /* Secondary / outline button variant (e.g. FFL locator "select dealer") */ .pbd-button-outline, .ffl-locator-select-dealer { background: transparent; color: var(--pbd-accent); border: 1px solid var(--pbd-accent); } .pbd-button-outline:hover, .ffl-locator-select-dealer:hover:not(:disabled) { background: var(--pbd-accent); color: var(--pbd-black); } /* ========================================================================== Forms — inputs/selects/textareas used across contact/checkout/account/ffl ========================================================================== */ input:not([type="submit"]):not([type="button"]), textarea, select { background: var(--pbd-input); color: var(--pbd-text); border: 1px solid var(--pbd-input-border); border-radius: 3px; padding: 10px 12px; font-family: var(--pbd-font-body); font-size: 15px; } label { color: var(--pbd-text); } /* ========================================================================== Utility bar (My Account / Find an FFL Dealer / Contact) — every page ========================================================================== */ .pbd-utility-bar-wrap { background: var(--pbd-black); border-bottom: 1px solid var(--pbd-border); padding: 10px 24px; display: flex; justify-content: center; } .pbd-utility-bar { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px; gap: 28px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .pbd-utility-bar a { color: var(--pbd-text-soft); } .pbd-utility-bar a:hover { color: var(--pbd-accent-oklch); } /* ========================================================================== Site banner (announcement bar) — rendered from pbd_banner_* options ========================================================================== */ #pbd-site-banner-wrap { position: sticky; top: 0; z-index: 999999; background: var(--pbd-accent-oklch); color: var(--pbd-black); font-family: var(--pbd-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 6px 12px; transition: opacity 0.4s ease; } #pbd-site-banner-text { display: inline-block; transition: opacity 0.4s ease; } #pbd-site-banner-text a { color: inherit; text-decoration: underline; } /* ========================================================================== Header — hero (homepage) + compact (everywhere else) ========================================================================== */ .pbd-header-hero { display: flex; flex-direction: column; align-items: center; padding: 36px 24px 20px; border-bottom: 1px solid var(--pbd-border); text-align: center; } .pbd-header-hero .pbd-logo-link { position: relative; display: flex; align-items: center; justify-content: center; } .pbd-logo-mark { position: absolute; height: 220px; width: auto; opacity: 0.25; left: 50%; top: 75%; transform: translate(-50%, -50%); pointer-events: none; /* The source image is a flat white mark, meant to sit as a faint ghost on the dark background. Inverted, that same flat white becomes flat black, which reads the same way against a light page — cheaper and more consistent than shipping/maintaining a second logo asset. */ } .pbd-header-hero .pbd-wordmark { position: relative; font-family: var(--pbd-font-display); font-weight: 800; font-size: 88px; line-height: 0.78; letter-spacing: 0.02em; color: var(--pbd-text); text-transform: uppercase; } .pbd-header-hero .pbd-tagline { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pbd-text-muted); margin-top: 6px; } .pbd-header-hero .pbd-nav-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--pbd-font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .pbd-header-hero .pbd-nav-menu a { color: var(--pbd-accent-oklch); } .pbd-header-compact { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--pbd-border); flex-wrap: wrap; } .pbd-header-compact .pbd-logo-link { display: flex; align-items: center; gap: 10px; } .pbd-header-compact .pbd-wordmark { font-family: var(--pbd-font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: 0.02em; color: var(--pbd-text); text-transform: uppercase; } .pbd-header-compact .pbd-logo-img { height: 34px; width: auto; } .pbd-header-compact .pbd-nav-menu-desktop { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; font-family: var(--pbd-font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .pbd-header-compact .pbd-nav-menu-desktop a { color: var(--pbd-accent-oklch); } .pbd-nav-toggle { display: none; background: transparent; border: 1px solid var(--pbd-border); border-radius: 3px; color: var(--pbd-text); padding: 8px 10px; font-size: 20px; line-height: 1; cursor: pointer; } .pbd-nav-menu-mobile { display: none; width: 100%; flex-direction: column; gap: 4px; margin: 16px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--pbd-border); font-family: var(--pbd-font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; order: 3; } .pbd-nav-menu-mobile a { color: var(--pbd-text); display: block; padding: 8px 0; } .pbd-nav-menu-mobile a:hover { color: var(--pbd-accent-oklch); } @media (max-width: 780px) { .pbd-header-compact .pbd-nav-menu-desktop { display: none; } .pbd-nav-toggle { display: inline-block; } .pbd-header-compact.pbd-nav-open .pbd-nav-menu-mobile { display: flex; } } /* ========================================================================== Front page — hero tile grid + popular categories ========================================================================== */ .pbd-placeholder-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, var(--pbd-stripe-a) 0 10px, var(--pbd-stripe-b) 10px 20px); color: var(--pbd-text-muted); font-family: monospace; font-size: 12px; text-align: center; padding: 8px; box-sizing: border-box; } .pbd-hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--pbd-border); max-width: var(--pbd-content-width-wide); margin: 0 auto; } .pbd-tile { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--pbd-tile); overflow: hidden; } .pbd-tile img { width: 100%; height: 100%; object-fit: cover; } .pbd-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.1 0.005 260 / 0.9), transparent 55%); pointer-events: none; } .pbd-tile-caption { position: absolute; left: 18px; right: 18px; bottom: 16px; pointer-events: none; } .pbd-tile-title { font-family: var(--pbd-font-display); font-weight: 700; font-size: 22px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.03em; color: oklch(0.97 0.002 260); white-space: pre-line; } .pbd-tile-cta { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pbd-accent-oklch); margin-top: 4px; } .pbd-section { max-width: var(--pbd-content-width); margin: 0 auto; padding: 60px 24px 70px; } .pbd-section-heading { text-align: center; font-family: var(--pbd-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 22px; color: var(--pbd-text); margin: 0 0 8px; } .pbd-section-rule { width: 48px; height: 2px; background: var(--pbd-accent-oklch); margin: 0 auto 40px; } .pbd-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pbd-cat { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 12px; background: var(--pbd-card); border: 1px solid var(--pbd-border); border-radius: var(--pbd-radius-card); } .pbd-cat img { width: 100%; height: 100%; object-fit: cover; } .pbd-cat-thumb { width: 100%; aspect-ratio: 1; border-radius: 3px; overflow: hidden; } .pbd-cat-name { font-family: var(--pbd-font-display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pbd-text); text-align: center; } .pbd-cat-empty { text-align: center; color: var(--pbd-text-muted); } /* The desktop watermark position (top: 75%, 220px tall) is hand-tuned for "POINTBREAK DYNAMICS" fitting on a single line — it only looks right because the text box it's centered against is short. Below ~900px the wordmark wraps to two lines, which roughly doubles that text box's height, so the same fixed offset instead sits low and off-balance against it (and, further down, tall enough to overlap the utility bar above the header). This tier re-centers on the actual (now taller) text box and shrinks the mark to match, for every width where wrapping is likely — not just the narrowest ones. */ @media (max-width: 900px) { .pbd-header-hero .pbd-wordmark { font-size: 64px; } /* Same top:75% base as the desktop rule above, nudged up 10px. */ .pbd-logo-mark { height: 160px; transform: translate(-50%, calc(-50% + 2px)); } } @media (max-width: 640px) { .pbd-hero-grid { grid-template-columns: repeat(2, 1fr); } .pbd-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .pbd-tile-title { font-size: 26px; } .pbd-tile-cta { font-size: 13px; } .pbd-cat-name { font-size: 14px; } .pbd-header-hero .pbd-wordmark { font-size: 56px; } .pbd-logo-mark { height: 143px; top: 50%; transform: translate(-50%, calc(-50% + 10px)); } .pbd-utility-bar { gap: 18px; } } /* ========================================================================== Generic page content (Contact, Custom Order, FFL Finder, Privacy, etc.) ========================================================================== */ .pbd-page { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; } .pbd-page .entry-title { text-align: center; font-size: 28px; margin-bottom: 0.8em; } .pbd-page p, .pbd-page li { color: var(--pbd-text); font-family: var(--pbd-font-body); } /* Jetpack / giveaway / generic forms read in Inter, not the display face */ .contact-form, .contact-form label, .pbd-page form, .pbd-page form label, .pbd-giveaway-form, .pbd-giveaway-form label { font-family: var(--pbd-font-body); } .pbd-page form p { margin-bottom: 14px; } /* ========================================================================== FFL Locator plugin compatibility ========================================================================== */ .ffl-locator-form { display: flex; gap: 12px; flex-wrap: wrap; /* The ffl-locator plugin's own CSS sets align-items: flex-end here, bottom-aligning each field. That reads fine when every field is the same height, but the ZIP field has an extra "Use My Current Location" button the other two don't, so it's taller — bottom-aligning against it pushed the shorter fields' labels down out of line. */ align-items: flex-start; } .ffl-locator-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; } .ffl-locator-field label { font-size: 13px; } .ffl-locator-use-location { background: none; border: none; padding: 0; align-self: flex-start; color: var(--pbd-accent-oklch); text-decoration: underline; font-size: 13px; font-family: var(--pbd-font-body); cursor: pointer; } .ffl-locator-use-location:hover { color: var(--pbd-accent-oklch-hover); } /* The plugin's own CSS hardcodes #444 here, which only reads against a light page background (2.0:1 against ours — fails WCAG AA's 4.5:1). */ .ffl-locator-status { color: var(--pbd-text-soft); } /* Highlighted result row: gray instead of the plugin's default near-white (#f5f7fb hover / #eef2ff selected), so it reads as "raised" against the dark page instead of a jarring light patch. Name/addr/phone go back to the theme's normal light text now that the row isn't light itself; distance and the selected-row accent line switch from the plugin's default blue to the site's gold accent to match everything else. */ .ffl-locator-result:hover { background-color: var(--pbd-tile); } .ffl-locator-result.is-selected { background-color: var(--pbd-input); border-left-color: var(--pbd-accent); } .ffl-locator-result-name { color: var(--pbd-text); } .ffl-locator-result-addr, .ffl-locator-result-phone { color: var(--pbd-text-soft); } .ffl-locator-result-distance { color: var(--pbd-accent); } .gm-style-iw, .gm-style-iw * { color: var(--pbd-black); } @media (max-width: 640px) { /* flex-basis's 200px above sizes the *main axis* — once the form switches to a column direction, that's height, not width, which is what was forcing every field into a fixed 200px-tall box regardless of its actual content. Reset it back to auto here. */ .ffl-locator-form { flex-direction: column; align-items: stretch; gap: 16px; max-width: 420px; } .ffl-locator-field { flex: 0 0 auto; width: 100%; } } /* ========================================================================== Subscribe popup (rendered by pbd-age-gate) keeps its own light card regardless of the page's dark text color — don't let it wash out. ========================================================================== */ #pbd-subscribe-popup, #pbd-subscribe-popup h2, #pbd-subscribe-popup p { color: #1A1D22; } /* ========================================================================== Footer ========================================================================== */ .pbd-footer { border-top: 1px solid var(--pbd-border); padding: 40px 24px; text-align: center; } .pbd-footer-brand { font-family: var(--pbd-font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 22px; color: var(--pbd-text); } .pbd-footer-address { max-width: 640px; /* Match the 20px gap the 1.6 line-height already produces between the wrapped lines below (Charlotte/CAGE), so the gap after the company name isn't visually tighter than the rest. */ margin: 17px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--pbd-text-muted); } .pbd-footer-tagline { text-transform: uppercase; letter-spacing: 0.03em; } .pbd-footer-copyright { font-size: 11px; color: var(--pbd-text-faint); margin-top: 18px; } .pbd-footer-links { font-size: 11px; margin-top: 6px; } .pbd-footer-links a { color: var(--pbd-text-muted); } .pbd-theme-toggle-wrap { font-size: 11px; letter-spacing: 0.04em; color: var(--pbd-text-faint); margin-top: 6px; } .pbd-theme-toggle-sep { color: var(--pbd-text-faint); margin: 0 2px; } .pbd-theme-toggle { background: none; border: none; padding: 0; margin: 0 2px; font: inherit; font-size: 11px; letter-spacing: 0.04em; color: var(--pbd-text-muted); cursor: pointer; } .pbd-theme-toggle:hover { color: var(--pbd-accent-oklch-hover); } .pbd-theme-toggle.is-active { color: var(--pbd-accent-oklch); font-weight: 600; } /* ========================================================================== WooCommerce — default markup/classes, styled directly (no theme-specific wrapper classes like Kadence's .product-details). WooCommerce's own stylesheets are dequeued entirely (functions.php), so everything below — including layout pieces like the checkout/product columns, quantity input, star rating, and notices that its stylesheet would normally provide — is defined here, once, with nothing to fight and no !important needed. ========================================================================== */ .woocommerce, .woocommerce-page { color: var(--pbd-text); } /* Product grid (shop archive, related/upsell products) */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .woocommerce ul.products li.product { background: repeating-linear-gradient(45deg, var(--pbd-stripe-a) 0 10px, var(--pbd-stripe-b) 10px 20px); border: 1px solid var(--pbd-border); border-radius: var(--pbd-radius-card); overflow: hidden; padding: 0 0 18px; text-align: left; position: relative; } .woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1; object-fit: cover; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--pbd-font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--pbd-text); margin: 14px 16px 4px; } .woocommerce ul.products li.product .price { font-family: var(--pbd-font-body); color: var(--pbd-accent); font-weight: 700; margin: 0 16px; } .woocommerce ul.products li.product .price del { color: var(--pbd-text-muted); opacity: 0.7; } .woocommerce ul.products li.product .price ins { text-decoration: none; } .woocommerce ul.products li.product .button { margin: 12px 16px 0; display: inline-block; width: calc(100% - 32px); } .woocommerce span.onsale { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--pbd-accent); color: var(--pbd-black); font-family: var(--pbd-font-body); font-weight: 700; border-radius: 3px; padding: 4px 10px; line-height: 1.4; } @media (max-width: 980px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } } /* Single product: gallery + summary, stacked on narrow screens, side by side on wider ones (this two-column split was previously coming from WooCommerce's own float-based layout CSS). */ .woocommerce div.product { display: grid; grid-template-columns: 1fr; gap: 32px; /* The onsale badge renders as a direct child of this element (before the gallery, not inside it), and with no positioned ancestor anywhere up to , its position:absolute was escaping all the way to the page's top-left corner instead of anchoring here. */ position: relative; } @media (min-width: 768px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; align-items: start; } } /* Product gallery: the flexslider JS (wc-product-gallery-slider support) computes the main-image viewport and slide positions itself via inline styles, but the thumbnail strip underneath (.flex-control-nav) is a plain
    with no layout of its own — that row layout, plus the zoom-trigger icon's corner position, previously came from WooCommerce's stylesheet. */ .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__trigger { position: absolute; top: 10px; right: 10px; z-index: 2; } .woocommerce-product-gallery .flex-control-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; } .woocommerce-product-gallery .flex-control-nav li { width: 64px; } .woocommerce-product-gallery .flex-control-nav img { width: 100%; display: block; cursor: pointer; border: 1px solid var(--pbd-border); border-radius: 3px; opacity: 0.6; } .woocommerce-product-gallery .flex-control-nav img.flex-active { opacity: 1; border-color: var(--pbd-accent); } .woocommerce div.product .product_title { font-size: 30px; text-align: left; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--pbd-accent); font-family: var(--pbd-font-body); font-weight: 700; font-size: 22px; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--pbd-text); } .woocommerce form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .woocommerce div.product form.cart .quantity { margin-right: 0; } .quantity .qty { width: 4.5em; text-align: center; } .woocommerce-tabs ul.tabs { padding-left: 0; list-style: none; display: flex; gap: 10px; border-bottom: 1px solid var(--pbd-border); } .woocommerce-tabs ul.tabs li { background: var(--pbd-card); border: 1px solid var(--pbd-border); border-bottom: none; border-radius: 3px 3px 0 0; padding: 10px 18px; } .woocommerce-tabs ul.tabs li a { color: var(--pbd-text); } .woocommerce-tabs ul.tabs li.active a { color: var(--pbd-accent-oklch); } .woocommerce-tabs .panel { font-family: var(--pbd-font-body); padding-top: 24px; } .woocommerce-Tabs-panel--description, .woocommerce-Tabs-panel--description p, .woocommerce-Tabs-panel--description li { font-family: var(--pbd-font-body); color: var(--pbd-text); } /* Star rating (average rating + reviews). A lightweight two-layer text overlay — full row of hollow stars underneath, filled stars clipped to the earned-rating width on top — replacing WooCommerce's font-icon CSS. */ .star-rating { position: relative; width: 5.4em; font-size: 14px; line-height: 1.2; letter-spacing: 2px; overflow: hidden; } .star-rating::before { content: "\2605\2605\2605\2605\2605"; display: block; color: var(--pbd-border); } .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; } .star-rating span::before { content: "\2605\2605\2605\2605\2605"; display: block; color: var(--pbd-accent); } /* Cart / Checkout / My Account tables & panels. Previously only had a border-color with no border-style/-width, so nothing actually drew — a ledger needs a real rule to divide each line. */ .woocommerce table.shop_table, .woocommerce-MyAccount-content { background: transparent; color: var(--pbd-text); width: 100%; border-collapse: collapse; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border: none; border-bottom: 1px solid var(--pbd-border); padding: 14px 12px; vertical-align: middle; text-align: left; } .woocommerce table.shop_table thead th { border-bottom: 2px solid var(--pbd-border); text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; color: var(--pbd-text-muted); font-family: var(--pbd-font-body); font-weight: 600; } /* Cart table specifically: small fixed-size thumbnail (in px, not % — so it never scales up with the viewport), clean line-by-line ledger rows. */ .woocommerce table.shop_table.cart td.product-thumbnail img { width: 60px; height: 60px; object-fit: cover; border-radius: 3px; border: 1px solid var(--pbd-border); } .woocommerce table.shop_table.cart td.product-name a { color: var(--pbd-text); font-weight: 600; } .woocommerce table.shop_table.cart td.product-price, .woocommerce table.shop_table.cart td.product-subtotal { color: var(--pbd-accent); font-weight: 700; white-space: nowrap; } .woocommerce table.shop_table.cart td.product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--pbd-text-muted) !important; background: transparent !important; font-size: 18px; } .woocommerce table.shop_table.cart td.product-remove a.remove:hover { background: var(--pbd-card) !important; color: var(--pbd-accent) !important; } .woocommerce table.shop_table.cart td.actions .coupon { display: flex; gap: 10px; align-items: center; } .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code { width: auto; } /* Cart table on narrow screens: stack each line item into a small card instead of cramming the same six columns into a too-narrow row. Each value cell gets its label from WooCommerce's own data-title attribute (already on the markup, previously unused since it was WC's stylesheet driving this transform). */ @media (max-width: 600px) { .woocommerce table.shop_table.cart thead { display: none; } .woocommerce table.shop_table.cart, .woocommerce table.shop_table.cart tbody, .woocommerce table.shop_table.cart tr, .woocommerce table.shop_table.cart td { display: block; width: 100%; } .woocommerce table.shop_table.cart tr { position: relative; border-bottom: 1px solid var(--pbd-border); padding: 16px 36px 16px 0; } .woocommerce table.shop_table.cart td { border: none; padding: 4px 0; } .woocommerce table.shop_table.cart td.product-remove { position: absolute; top: 16px; right: 0; width: auto; padding: 0; } .woocommerce table.shop_table.cart td.product-thumbnail { display: inline-block; width: auto; vertical-align: middle; margin-right: 12px; } .woocommerce table.shop_table.cart td.product-name { display: inline-block; width: calc(100% - 76px); vertical-align: middle; } .woocommerce table.shop_table.cart td.product-price, .woocommerce table.shop_table.cart td.product-quantity, .woocommerce table.shop_table.cart td.product-subtotal { display: flex; justify-content: space-between; margin-top: 8px; } .woocommerce table.shop_table.cart td.product-price::before, .woocommerce table.shop_table.cart td.product-quantity::before, .woocommerce table.shop_table.cart td.product-subtotal::before { content: attr(data-title); font-weight: 600; color: var(--pbd-text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; } } /* Cart totals / order review panel */ .woocommerce-cart .cart_totals, .woocommerce-checkout-review-order { background: var(--pbd-card); border: 1px solid var(--pbd-border); border-radius: var(--pbd-radius-card); padding: 20px 24px; } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td, .woocommerce-checkout-review-order table.shop_table th, .woocommerce-checkout-review-order table.shop_table td { padding: 10px 0; vertical-align: top; } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-checkout-review-order table.shop_table th { padding-right: 16px; } .woocommerce-cart .cart_totals .order-total .amount, .woocommerce-checkout-review-order .order-total .amount { color: var(--pbd-accent); font-weight: 700; font-size: 18px; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-MyAccount-navigation a { color: var(--pbd-text); } .woocommerce-MyAccount-navigation li.is-active a { color: var(--pbd-accent-oklch); } /* Checkout billing/shipping columns — stacked on narrow screens, side by side on wider ones (previously WooCommerce's own float-based #col-1/#col-2 layout). */ #customer_details.col2-set { display: grid; grid-template-columns: 1fr; gap: 32px; /* Without this, grid stretches both columns to match whichever is taller — billing (8 fields) vs. shipping (often just a checkbox) are rarely close in height, so the shorter column was left with a large empty gap under its content instead of just ending there. */ align-items: start; } @media (min-width: 768px) { #customer_details.col2-set { grid-template-columns: 1fr 1fr; } } /* Paired fields within a form (checkout name/address rows, account edit forms) — full width on narrow screens, side by side on wider ones. */ .woocommerce form .form-row { margin: 0 0 14px; } @media (min-width: 560px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { display: inline-block; width: calc(50% - 10px); vertical-align: top; } .woocommerce form .form-row-first { margin-right: 20px; } } .woocommerce-error, .woocommerce-info, .woocommerce-message { list-style: none; margin: 0 0 24px; padding: 14px 18px; border-radius: 3px; border-top: 3px solid var(--pbd-accent); background: var(--pbd-card); color: var(--pbd-text); font-family: var(--pbd-font-body); } .woocommerce-error li, .woocommerce-info li, .woocommerce-message li { margin: 0; } /* AJAX loading overlay (add to cart, cart/shipping updates). jQuery's blockUI plugin sets its own background as an inline style, so this is the one override in the file that has to be !important — there's no cascade order that beats an inline style, WooCommerce's stylesheet or not. */ .blockUI.blockOverlay { background: oklch(0.11 0.005 260 / 0.65) !important; } .blockUI.blockOverlay::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid var(--pbd-border); border-top-color: var(--pbd-accent); border-radius: 50%; animation: pbd-spin 0.8s linear infinite; } @keyframes pbd-spin { to { transform: rotate(360deg); } } .pbd-page-woocommerce { max-width: var(--pbd-content-width); margin: 0 auto; padding: 50px 24px 80px; } .pbd-page-woocommerce .page-title { text-align: center; font-size: 26px; margin-bottom: 40px; }