/* Theme Name: Alkaline7 Theme URI: https://alkaline7.herich.tech Author: Matthew Herich Author URI: https://herich.tech Description: Fresh block theme for the Alkaline7 storefront. Version: 0.4.7 Requires at least: 6.9 Tested up to: 6.9 Requires PHP: 8.1 Text Domain: alkaline7 */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap"); :root { --a7-ink: #1f1a14; --a7-muted: #6b5f52; --a7-paper: #fbf8f1; --a7-paper-2: #f5efe1; --a7-white: #ffffff; --a7-red: #c8332a; --a7-red-deep: #9e2620; --a7-yellow: #f2b33d; --a7-moss: #4f6238; --a7-moss-deep: #2e3c20; --a7-berry: #7a2a3f; --a7-mango: #e89b3c; --a7-border: rgba(31, 26, 20, 0.12); --a7-shadow: 0 12px 32px rgba(31, 26, 20, 0.10), 0 2px 6px rgba(31, 26, 20, 0.05); } html { scroll-behavior: smooth; } body { background: radial-gradient(circle at 8% 4%, rgba(242, 179, 61, 0.16), transparent 28rem), var(--a7-paper); color: var(--a7-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body .is-layout-constrained > * + * { margin-block-start: 1.25rem; } a { text-underline-offset: 0.18em; } .wp-site-blocks { overflow-x: clip; } /* Root padding lives on in WP; we removed it (theme.json) so section backgrounds bleed edge-to-edge. The content gutter is re-established here on .alignwide. The body-prefixed selector beats WP's `.is-layout-constrained > .alignwide { max-width: wide-size }` at all widths. */ .alignwide, body .is-layout-constrained > .alignwide { margin-inline: auto; max-width: min(1200px, calc(100vw - 2.5rem)); } /* Same idea for default (content-width) constrained children: add a viewport floor so post/page body copy keeps a gutter at narrow widths. No change on desktop (content-size stays 760px); only kicks in below ~810px. */ body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) { max-width: min(var(--wp--style--global--content-size, 760px), calc(100vw - 2.5rem)); } .wp-block-columns { max-width: 100%; } .wp-block-column { min-width: 0; } .a7-header { backdrop-filter: blur(16px); background: rgba(251, 248, 241, 0.90); border-bottom: 1px solid var(--a7-border); position: sticky; top: 0; z-index: 20; } .a7-header .a7-announce { background: var(--a7-red); margin-block: 0.6rem 0; padding-block: 0.4rem; } .a7-announce__text { color: var(--a7-white); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; margin: 0; } .a7-announce__text strong { font-weight: 700; } .a7-logo img { display: block; height: 46px; max-width: none; width: auto; } .a7-nav a { text-decoration: none; } .a7-nav a:hover { color: var(--a7-moss-deep); } .a7-button .wp-block-button__link, .wp-block-button.is-style-fill .wp-block-button__link { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px rgba(31, 26, 20, 0.08); transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .a7-button .wp-block-button__link:hover, .wp-block-button.is-style-fill .wp-block-button__link:hover { background: var(--a7-red-deep); box-shadow: 0 12px 28px rgba(31, 26, 20, 0.14); transform: translateY(-1px); } .a7-button .wp-block-button__link:active, .wp-block-button.is-style-fill .wp-block-button__link:active { transform: scale(0.98); } .a7-pill { border: 1px solid var(--a7-border); border-radius: 999px; color: var(--a7-moss); display: inline-flex; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.45rem 0.8rem; text-transform: uppercase; width: fit-content; } .a7-script { color: var(--a7-berry); font-family: Caveat, "Brush Script MT", cursive; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.9; } .a7-signature { color: var(--a7-berry); font-family: Caveat, "Brush Script MT", cursive; font-size: 1.75rem; font-weight: 600; margin-top: 1.25rem; } .a7-review-stars { color: var(--a7-yellow); font-size: 1.05rem; letter-spacing: 0.08em; line-height: 1; margin-bottom: 0.85rem; } .a7-hero-card, .a7-card { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 20px; box-shadow: var(--a7-shadow); } .a7-hero-card { position: relative; } .a7-hero-sticker { background: var(--a7-yellow); border-radius: 12px; box-shadow: 0 8px 20px rgba(31, 26, 20, 0.18); color: var(--a7-ink); font-family: Caveat, "Brush Script MT", cursive; font-size: 1.5rem; font-weight: 700; line-height: 1; padding: 0.5rem 1rem; position: absolute; right: 1rem; top: -0.85rem; transform: rotate(-6deg); z-index: 2; } .a7-hero-stamps { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; } .a7-stamp { align-items: center; color: var(--a7-muted); display: flex; font-size: 0.9rem; font-weight: 500; gap: 0.5rem; } .a7-stamp svg { color: var(--a7-moss); flex-shrink: 0; height: 18px; width: 18px; } .a7-hero-logo { margin: 0; } .a7-hero-logo img { border-radius: 16px; box-shadow: 0 16px 40px rgba(200, 51, 42, 0.20); display: block; width: 100%; } .a7-section { padding-block: clamp(4rem, 9vw, 7rem); } .a7-section-tight { padding-block: clamp(3rem, 7vw, 5rem); } .a7-page-intro { background: var(--a7-paper); padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 6vw, 4.5rem); } .a7-page-intro h1 { max-width: 11ch; } .a7-page-lede { color: #3a3128; font-size: 1.2rem; line-height: 1.7; max-width: 700px; } .a7-muted-copy { color: var(--a7-muted); font-size: 1.1rem; line-height: 1.7; } .a7-callout, .a7-contact-panel, .a7-info-card, .a7-faq-item, .a7-shop-note { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); } .a7-callout, .a7-contact-panel, .a7-info-card { padding: clamp(1.25rem, 2.4vw, 2rem); } .a7-info-card h3 { font-size: 1.45rem; margin-top: 0; } .a7-info-card p { color: var(--a7-muted); } .a7-shop-note { align-items: center; color: var(--a7-muted); display: flex; gap: 1rem; margin-bottom: 1.5rem; padding: 0.9rem 1rem; } .a7-shop-note p { margin: 0; } .a7-product-grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 2rem; } .a7-product-card { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 220ms ease, transform 220ms ease; } .a7-product-card:hover { box-shadow: var(--a7-shadow); transform: translateY(-2px); } .a7-product-card__image { aspect-ratio: 4 / 3; background: var(--a7-paper-2); overflow: hidden; } .a7-product-card__image img { height: 100%; object-fit: cover; transition: transform 420ms ease; width: 100%; } .a7-product-card:hover .a7-product-card__image img { transform: scale(1.02); } .a7-product-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.85rem; padding: 1.25rem; } .a7-product-card__kicker { color: var(--a7-moss); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .a7-product-card__title { font-family: Fraunces, Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1.15; margin: 0; } .a7-product-card__summary { color: var(--a7-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; } .a7-product-card__footer { align-items: center; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; margin-top: auto; } .a7-product-card__price { color: var(--a7-berry); font-weight: 800; } .a7-product-card__link { background: var(--a7-red); border-radius: 999px; color: #fff; font-size: 0.9rem; font-weight: 700; padding: 0.7rem 1.25rem; text-decoration: none; white-space: nowrap; } .a7-product-card__link:hover { background: var(--a7-red-deep); color: #fff; } .a7-product-card__link--preview, .a7-product-card__link--preview:hover { background: var(--a7-paper-2); color: var(--a7-muted); cursor: default; } .a7-faq-list { display: grid; gap: 0.85rem; } .a7-faq-item { padding: 1.1rem 1.25rem; } .a7-faq-item summary { color: var(--a7-ink); cursor: pointer; font-weight: 800; } .a7-faq-item p { color: var(--a7-muted); margin-bottom: 0; } .a7-contact-panel { min-height: 100%; } .a7-contact-list { display: grid; gap: 0.85rem; list-style: none; padding-left: 0; } .a7-contact-list li { align-items: baseline; border-bottom: 1px solid var(--a7-border); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; padding-bottom: 0.85rem; } .a7-contact-list strong { color: var(--a7-muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .a7-footer { background: var(--a7-ink); color: var(--a7-paper); } .a7-footer a { color: var(--a7-paper); } .a7-footer-logo { background: var(--a7-white); border-radius: 12px; display: inline-block; padding: 0.6rem 0.85rem; } .a7-footer-logo img { border-radius: 0; display: block; } .a7-footer-nav { list-style: none; margin: 0; padding-left: 0; } .a7-footer-nav li { margin: 0 0 0.4rem; } .a7-footer-nav li:last-child { margin-bottom: 0; } .a7-footer .a7-social { gap: 0.6rem; margin-top: 1.25rem; } .a7-footer .a7-social .wp-social-link { background: rgba(251, 248, 241, 0.08); border-radius: 50%; height: 38px; margin: 0; transition: background-color 180ms ease; width: 38px; } .a7-footer .a7-social .wp-social-link:hover { background: rgba(251, 248, 241, 0.18); } .a7-footer .a7-social .wp-social-link a { align-items: center; color: var(--a7-paper); display: flex; height: 100%; justify-content: center; padding: 0; width: 100%; } .a7-footer .a7-social .wp-social-link svg { height: 18px; width: 18px; } .a7-footer .a7-restock-btn .wp-block-button__link:hover { background: var(--a7-yellow); filter: brightness(0.94); } .a7-footer-disclaimer { color: var(--a7-paper); max-width: 46ch; opacity: 0.7; text-align: right; } @media (max-width: 1000px) { h1, .has-display-font-size { font-size: 2.75rem !important; line-height: 1.04 !important; } h2, .has-heading-2-font-size { font-size: 2.2rem !important; line-height: 1.12 !important; } .wp-block-columns { flex-wrap: wrap !important; } .wp-block-columns > .wp-block-column { flex-basis: 100% !important; width: 100% !important; } .a7-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .a7-section { padding-block: 3.5rem; } .a7-section-tight { padding-block: 3rem; } .alignwide { margin-left: auto !important; margin-right: auto !important; max-width: calc(100vw - 2.5rem) !important; width: calc(100vw - 2.5rem) !important; } .wp-site-blocks, .wp-block-group, .wp-block-columns, .wp-block-column { box-sizing: border-box; max-width: 100%; } .a7-header .wp-block-group { align-items: flex-start; flex-direction: column; } .a7-hero-card { overflow: visible; } .a7-product-grid { grid-template-columns: 1fr; } .a7-logo img { height: 38px; } } /* WooCommerce overrides */ /* ── Product collection grid ─────────────────────────────────────────────── */ .wp-block-woocommerce-product-collection .wc-block-product-template, .wc-block-grid__products { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } /* ── Product image aspect ratio 4:3 ──────────────────────────────────────── */ .wc-block-components-product-image, .wc-block-product-image, .wp-block-woocommerce-product-image { aspect-ratio: 4 / 3; background: var(--a7-paper-2); border-radius: 14px; overflow: hidden; } .wc-block-components-product-image img, .wc-block-product-image img, .wp-block-woocommerce-product-image img { height: 100%; object-fit: cover; width: 100%; } /* ── Price styling ───────────────────────────────────────────────────────── */ .wc-block-components-product-price, .woocommerce-Price-amount, .price, .price ins, .woocommerce-Price-amount.amount { color: var(--a7-berry); font-weight: 700; } .price del { color: var(--a7-muted); font-weight: 400; } /* ── Add-to-cart / product button pill ───────────────────────────────────── */ .wp-block-woocommerce-product-button .wp-block-button__link, .wc-block-components-button.wc-block-add-to-cart-button, .wc-block-components-product-button__button, .single_add_to_cart_button, .button.single_add_to_cart_button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--a7-red); border: none; border-radius: 999px; color: #fff; cursor: pointer; display: inline-block; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.9rem; font-weight: 700; padding: 0.85rem 1.6rem; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .wp-block-woocommerce-product-button .wp-block-button__link:hover, .wc-block-components-button.wc-block-add-to-cart-button:hover, .wc-block-components-product-button__button:hover, .single_add_to_cart_button:hover, .button.single_add_to_cart_button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--a7-red-deep); box-shadow: 0 8px 24px rgba(200, 51, 42, 0.22); color: #fff; transform: translateY(-1px); } /* ── Single product gallery ──────────────────────────────────────────────── */ .woocommerce-product-gallery__image img, .woocommerce-product-gallery .flex-viewport, .wp-block-woocommerce-product-image-gallery img { border-radius: 1rem; box-shadow: var(--a7-shadow); } /* lightbox overlay bg tweak */ .pswp__bg { background: rgba(31, 26, 20, 0.90); } /* ── Product details / tabs ──────────────────────────────────────────────── */ .woocommerce-tabs ul.tabs li.active a, .wc-block-product-details__summary-tabs .wc-tab-button--active { border-bottom: 2px solid var(--a7-red); color: var(--a7-ink); font-weight: 700; } /* ── Related products heading ────────────────────────────────────────────── */ .related.products h2, .wc-block-related-products h2 { font-family: Fraunces, Georgia, serif; font-size: 2rem; font-weight: 500; } /* ── Quantity + add-to-cart row ──────────────────────────────────────────── */ /* Verified 2026-06-01 (headless 360–768px + live computed styles): the PDP and shop-archive add-to-cart render cleanly — no "jammed qty/button" symptom. The WC `.wp-block-add-to-cart-form` wrapper is display:block, not a competing flex container, so `form.cart` below is the only flex layer (qty + button sit in a row above 640px, stacked at ≤640px). WooCommerce's block stylesheet overrides the `.qty` width below to ~76px; left as-is — functionally fine. */ .woocommerce form.cart { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; } .woocommerce form.cart .quantity input.qty { border: 1px solid var(--a7-border); border-radius: 8px; font-size: 1rem; padding: 0.6rem 0.75rem; width: 4rem; } /* ── Responsive grid breakpoints ─────────────────────────────────────────── */ @media (max-width: 1000px) { .wp-block-woocommerce-product-collection .wc-block-product-template, .wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .wp-block-woocommerce-product-collection .wc-block-product-template, .wc-block-grid__products { grid-template-columns: 1fr; } /* Stack quantity above the button on phones (verified clean at ≤640px). */ .woocommerce form.cart { flex-direction: column; align-items: flex-start; } } /* ── Related products: fix 5-column crush → 3 columns ────────────────────── */ .wc-block-product-template.is-flex-container.columns-5 > li, .wc-block-product-template.is-flex-container.columns-4 > li { width: calc(33.333% - 0.9em) !important; } @media (max-width: 1000px) { .wc-block-product-template.is-flex-container.columns-5 > li, .wc-block-product-template.is-flex-container.columns-4 > li { width: calc(50% - 0.625em) !important; } } @media (max-width: 640px) { .wc-block-product-template.is-flex-container.columns-5 > li, .wc-block-product-template.is-flex-container.columns-4 > li { width: 100% !important; } } /* ── Product card chrome (block product template items) ──────────────────── */ .wc-block-product-template .wc-block-product { background: var(--a7-white); border: 1px solid var(--a7-border); border-radius: 14px; box-shadow: 0 4px 12px rgba(31, 26, 20, 0.08), 0 1px 2px rgba(31, 26, 20, 0.04); overflow: hidden; padding: 1.25rem; transition: box-shadow 220ms ease, transform 220ms ease; } .wc-block-product-template .wc-block-product:hover { box-shadow: var(--a7-shadow); transform: translateY(-2px); } /* ── Product title: prevent crush / word-break ───────────────────────────── */ .wc-block-product-template .wc-block-product .wp-block-post-title { font-family: Fraunces, Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1.25; word-break: normal; overflow-wrap: break-word; text-align: left !important; } /* ── Product image: 4:3 aspect ratio ────────────────────────────────────── */ .wc-block-product-template .wc-block-product .wc-block-components-product-image, .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image { aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 0.85rem; overflow: hidden; } .wc-block-product-template .wc-block-product .wc-block-components-product-image img, .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-image img { height: 100%; object-fit: cover; width: 100%; } /* ── Fix circular buttons in product collection ──────────────────────────── */ .wc-block-product-template .wp-block-button.wc-block-components-product-button { align-items: flex-start; display: block; margin-top: 0.75rem; white-space: nowrap; } .wc-block-product-template .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button, .wc-block-product-template .wp-block-button.wc-block-components-product-button .wp-block-button__link { display: inline-block !important; padding: 0.75rem 1.4rem; white-space: nowrap; width: auto !important; } /* ── Out-of-stock badge: archive card ────────────────────────────────────── */ .woocommerce ul.products li.product.outofstock, .wc-block-product-template .wc-block-product.outofstock { position: relative; } .woocommerce ul.products li.product.outofstock::before, .wc-block-product-template .wc-block-product.outofstock::before { background: var(--a7-ink); border-radius: 999px; color: var(--a7-paper); content: "Sold out"; font-family: Inter, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.4rem 0.9rem; position: absolute; right: 1rem; text-transform: uppercase; top: 1rem; z-index: 2; } .woocommerce ul.products li.product.outofstock img, .wc-block-product-template .wc-block-product.outofstock img { filter: grayscale(0.35); opacity: 0.85; } .woocommerce ul.products li.product.outofstock .button, .wc-block-product-template .wc-block-product.outofstock .button, .wc-block-product-template .wc-block-product.outofstock .wp-block-button__link, .wc-block-product-template .wc-block-product.outofstock .wc-block-components-product-button__button { background: var(--a7-paper-2); color: var(--a7-muted); pointer-events: none; } /* ── Out-of-stock pill: PDP ──────────────────────────────────────────────── */ .woocommerce .stock.out-of-stock { background: var(--a7-ink); border-radius: 999px; color: var(--a7-paper); display: inline-block; font-family: Inter, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; padding: 0.45rem 0.9rem; text-transform: uppercase; }