siblings rather than
+
* because the previously held the larger/primary text — that
* inverts the semantic relationship ( is for stress emphasis,
* not block primary content). Decorative weight is now driven by class
* names, and the parent .hero-panel is aria-hidden so screen readers
* skip this region entirely.
*/
.hero-panel__brand-copy p {
display: block;
margin: 0;
color: #fff;
}
.hero-panel__brand-copy .hero-panel__brand-eyebrow {
margin-bottom: 0.3rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
.hero-panel__brand-copy .hero-panel__brand-lede {
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
}
.entry-card--page .entry-title {
margin-bottom: 1.5rem;
font-size: clamp(2.25rem, 5vw, 3.75rem);
}
.entry-card--page .entry-content {
color: var(--ch-ink);
}
/*
* .chiseiko-* content-page styles live in assets/css/content-pages.css
* and are conditionally enqueued by functions.php only on managed pages
* and the WooCommerce shop archive. The grid + section padding rules
* for .suite-outcomes-* / .route-* / .evidence-* now live in the parent
* theme's main.css alongside the markup that renders them.
*/
/*
* Aligned to the parent shell's 980px breakpoint so that the brand
* decorations shrink at the same point the hero collapses to one column.
* Earlier the brand stayed at desktop size from 901–980px while the
* hero was already stacked, producing an oversized brand block.
*/
@media (max-width: 980px) {
.site-title--brandmark {
max-width: min(16rem, 100%);
}
.site-header .site-title__mark {
height: 5.04rem;
}
.site-title__wordmark {
font-size: 1.56rem;
}
.hero-panel__brand {
grid-template-columns: 64px minmax(0, 1fr);
}
.hero-panel__brand-icon {
width: 64px;
height: 64px;
}
}
body:not(.woocommerce-page) .site-action-link--cart {
display: none;
}
.demo-banner {
margin: 0 0 1.5rem;
padding: 1.1rem 0;
background: linear-gradient(135deg, rgba(207, 139, 44, 0.18), rgba(86, 102, 79, 0.12));
border-top: 1px solid rgba(207, 139, 44, 0.4);
border-bottom: 1px solid rgba(86, 102, 79, 0.25);
}
.demo-banner__inner {
display: grid;
gap: 1rem;
align-items: center;
grid-template-columns: minmax(0, 1fr) auto;
}
.demo-banner__copy {
min-width: 0;
}
/*
* The demo banner heading uses the same visual treatment as the prior
* eyebrow but is now a real ) so the callout
* appears in the heading outline and gives the aside an accessible name
* via aria-labelledby. The so it appears in the page heading
* outline and gives the banner an accessible name via aria-labelledby.
*
* Color was --ch-amber-deep over the warm amber/moss banner gradient,
* which lands around 3.6:1 — below WCAG AA 4.5:1 for the small uppercase
* letter-spaced text. --ch-ink keeps the eyebrow visual rhythm while
* clearing AA on every gradient stop the banner can render against.
*/
.demo-banner__title {
margin: 0 0 0.35rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ch-ink);
font-family: inherit;
line-height: inherit;
}
.demo-banner__lead {
margin: 0;
color: var(--ch-ink);
max-width: 56ch;
}
.demo-banner__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: flex-end;
}
/*
* The demo banner uses a 720px breakpoint instead of the 980px shell
* breakpoint because the banner's two-column copy + actions layout
* remains scannable down to roughly 720px before the actions wrap onto
* an awkward second row. This is a deliberate component-scoped choice.
*/
@media (max-width: 720px) {
.demo-banner__inner {
grid-template-columns: 1fr;
}
.demo-banner__actions {
justify-content: flex-start;
}
}
/*
* Demo transaction notice — shown inside cart and checkout via the
* woocommerce_before_cart_totals and woocommerce_review_order_before_payment
* hooks. Intentionally lightweight: signals that orders are not real
* without injecting marketing CTAs into the conversion flow.
*/
.demo-transaction-notice {
margin: 0 0 1.25rem;
padding: 0.75rem 1rem;
border: 1px dashed rgba(17, 19, 25, 0.2);
border-radius: var(--ch-radius-md);
background: rgba(255, 253, 248, 0.6);
color: var(--ch-muted);
font-size: 0.92rem;
}
/*
* Demo ribbon — rendered on every WooCommerce loop card via the
* woocommerce_before_shop_loop_item hook. Provides a per-card demo
* signal so users entering via direct product URL or via the related
* carousel see the demo framing without scrolling back to the banner.
*/
.demo-loop-ribbon {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 1;
padding: 0.2rem 0.55rem;
border-radius: var(--ch-radius-pill);
background: rgba(17, 19, 25, 0.85);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.demo-product-callout {
margin: 1.25rem 0 0;
padding: 1rem 1.1rem;
border-radius: var(--ch-radius);
border: 1px solid rgba(207, 139, 44, 0.32);
background: rgba(207, 139, 44, 0.08);
}
/*
* .demo-product-callout__title is now an
(was
tag is reset to keep the prior compact
* inline-paragraph visual.
*/
.demo-product-callout__title {
margin: 0 0 0.35rem;
font-size: 1rem;
font-weight: 700;
font-family: inherit;
line-height: inherit;
color: var(--ch-ink);
}
.demo-product-callout__copy {
margin: 0 0 0.85rem;
color: var(--ch-muted);
}
.demo-product-callout__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.woocommerce-area .woocommerce-ordering,
.woocommerce-area .woocommerce-result-count {
margin-bottom: 1.5rem;
}
.woocommerce-area .chiseiko-page--shop {
margin-bottom: 2rem;
}
.woocommerce-area ul.products {
list-style: none;
padding: 0;
align-items: stretch;
}
.woocommerce-area ul.products li.product,
.woocommerce-area ul.products.columns-3 li.product,
.woocommerce-area ul.products[class*="columns-"] li.product {
float: none;
width: auto;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
min-width: 0;
padding: 1.15rem;
border-radius: 28px;
overflow: hidden;
position: relative;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(var(--ch-rec-surface-end), 0.92)),
radial-gradient(circle at top right, rgba(207, 139, 44, 0.18), transparent 38%);
box-shadow: 0 18px 42px rgba(17, 19, 25, 0.08);
}
.woocommerce-area ul.products li.product > a:first-child {
display: grid;
gap: 0.85rem;
color: inherit;
text-decoration: none;
flex: 1;
align-content: start;
}
.woocommerce-area ul.products li.product a img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: rgba(255, 255, 255, 0.82);
margin-bottom: 0;
border: 1px solid rgba(17, 19, 25, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.woocommerce-area ul.products li.product .woocommerce-loop-product__title {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.12;
letter-spacing: -0.03em;
color: var(--ch-ink);
min-height: 0;
}
.woocommerce-area ul.products li.product .price {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-items: baseline;
margin: 0;
font-size: 1rem;
}
.woocommerce-area ul.products li.product .button,
.woocommerce-area ul.products li.product .added_to_cart {
width: 100%;
justify-content: center;
text-align: center;
margin-top: auto;
}
.woocommerce-area ul.products li.product .chiseikoessw-loop-swatches__group,
.woocommerce-area ul.products li.product [aria-label="Linked Crewneck"] {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
margin: 0;
padding-top: 0.2rem;
min-height: 2.5rem;
}
.woocommerce-area ul.products li.product .chiseikoessw-swatch {
box-shadow: 0 0 0 1px rgba(17, 19, 25, 0.08);
transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.woocommerce-area ul.products li.product .chiseikoessw-swatch:not([aria-disabled="true"]):hover,
.woocommerce-area ul.products li.product .chiseikoessw-swatch:not([aria-disabled="true"]):focus-visible {
transform: translateY(-1px);
box-shadow: 0 0 0 2px rgba(86, 102, 79, 0.22);
}
.woocommerce-area ul.products li.product [aria-label="Linked Crewneck"] a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
padding: 0.2rem;
border-radius: 999px;
border: 1px solid rgba(17, 19, 25, 0.08);
background: rgba(255, 255, 255, 0.82);
overflow: hidden;
}
.woocommerce-area ul.products li.product [aria-label="Linked Crewneck"] a[href="#"] {
box-shadow: 0 0 0 2px rgba(207, 139, 44, 0.3);
border-color: rgba(207, 139, 44, 0.4);
}
.woocommerce-area ul.products li.product [aria-label="Linked Crewneck"] img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
@media (max-width: 640px) {
.woocommerce-area .woocommerce-ordering,
.woocommerce-area .woocommerce-result-count {
float: none;
width: 100%;
}
.woocommerce-area ul.products li.product,
.woocommerce-area ul.products.columns-3 li.product,
.woocommerce-area ul.products[class*="columns-"] li.product {
padding: 1rem;
}
.woocommerce-area ul.products li.product .woocommerce-loop-product__title {
font-size: 1.35rem;
}
}
/* Marketing UI polish: card affordance + tier emphasis */
.principle-card,
.evidence-card,
.route-card,
.suite-outcome-card {
transition: transform var(--ch-motion-slow) var(--ch-ease), box-shadow var(--ch-motion-slow) var(--ch-ease), border-color var(--ch-motion-slow) var(--ch-ease);
}
.principle-card:hover,
.evidence-card:hover,
.route-card:hover,
.suite-outcome-card:hover {
transform: translateY(-2px);
box-shadow: 0 22px 48px rgba(17, 19, 25, 0.10);
border-color: rgba(17, 19, 25, 0.14);
}
@media (prefers-reduced-motion: reduce) {
.principle-card,
.evidence-card,
.route-card,
.suite-outcome-card {
transition: none;
}
.principle-card:hover,
.evidence-card:hover,
.route-card:hover,
.suite-outcome-card:hover {
transform: none;
}
}
.pricing-card {
position: relative;
}
.pricing-card--featured {
box-shadow:
var(--ch-shadow),
0 0 0 1px rgba(207, 139, 44, 0.32),
0 24px 56px rgba(167, 108, 32, 0.18);
}
/*
* .pricing-card__badge is a real DOM element ("Recommended") rendered
* inside the featured pricing card. Previously this label lived in a
* .pricing-card--featured::before pseudo-element, which is not reliably
* exposed to assistive technology — sighted users got the recommendation
* cue but screen-reader users did not.
*
* Text was white on a flat amber/amber-deep gradient (~3.3:1 at the
* gradient midpoint), failing WCAG AA 4.5:1 for the 0.72rem uppercase
* letter-spaced label. Now uses --ch-ink on a flat amber surface so the
* badge clears AA against any rendering surface (cream page bg or the
* dark featured card behind it).
*/
.pricing-card__badge {
position: absolute;
top: -0.65rem;
right: 1.4rem;
padding: 0.32rem 0.85rem;
border-radius: var(--ch-radius-pill);
background: var(--ch-amber);
color: var(--ch-ink);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
box-shadow: 0 6px 14px rgba(167, 108, 32, 0.28);
}
@media (max-width: 640px) {
.pricing-card__badge {
right: 1rem;
font-size: 0.66rem;
padding: 0.28rem 0.7rem;
}
}
/*
* WooCommerce Brands swatch (Chiseiko Essential Swatches Pro Brands module) in the
* product meta. The Pro module emits semantic markup but ships no frontend CSS,
* so the theme owns presentation: a small, bulletless brand badge that sits
* tidily above the SKU / categories / brand lines instead of a raw 150px image
* with a stray list marker.
*/
.product_meta .chiseikoessw-brand-swatches {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.7rem;
padding: 0;
}
.product_meta .chiseikoessw-brand-swatch-item {
margin: 0;
padding: 0;
list-style: none;
}
.product_meta .chiseikoessw-brand-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 7px;
overflow: hidden;
border: 1px solid rgba(17, 19, 25, 0.12);
background: #fff;
box-shadow: var(--ch-shadow-sm, 0 1px 3px rgba(17, 19, 25, 0.1));
}
/*
* The Pro stylesheet sizes the brand logo to its own max (up to 80px) with
* width/height:auto !important, which overflows this small chip and — with
* overflow:hidden — shows only the cropped centre of the logo. Force the logo
* to fit fully inside the chip (contain) and centre it, with a slight inset so
* the mark has breathing room. Specificity (0,3,0) + !important beats the Pro
* rule (0,2,0) regardless of stylesheet load order.
*/
.product_meta .chiseikoessw-brand-swatch--image .chiseikoessw-brand-swatch__img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
padding: 3px;
box-sizing: border-box;
/* !important + centred position so the whole logo stays centred and is never
* cropped by the generic product-image `object-fit:cover` rule. */
object-fit: contain !important;
object-position: center !important;
}
/*
* Brand mark on the ARCHIVE product card (brands-archive 'loop' context).
* Out of the box the brand swatch renders as a full-size logo image that
* competes with the product photo for attention. Here it's reduced to a small,
* quiet brand mark beneath the title so the PRODUCT stays the protagonist.
* Only branded products emit this markup, so unbranded cards pay nothing.
*/
.chiseikoessw-brand-swatches--loop {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
margin: 0.5rem 0 0;
padding: 0;
}
.chiseikoessw-brand-swatches--loop .chiseikoessw-brand-swatch-item {
margin: 0;
padding: 0;
list-style: none;
}
.chiseikoessw-brand-swatches--loop .chiseikoessw-brand-swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(17, 19, 25, 0.1);
background: #fff;
box-shadow: var(--ch-shadow-sm, 0 1px 3px rgba(17, 19, 25, 0.1));
}
/* Force-fit the logo inside the card mark (see the PDP note above). On the brand
* (taxonomy) archive the mark sits inside `li.product a`, so the generic
* `.woocommerce-area ul.products li.product a img { object-fit:cover }` rule ties
* this one on specificity and — being later in source — would crop the logo.
* `!important` + centred position keeps the whole logo centred everywhere. */
.chiseikoessw-brand-swatches--loop .chiseikoessw-brand-swatch--image .chiseikoessw-brand-swatch__img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
padding: 5px;
box-sizing: border-box;
object-fit: contain !important;
object-position: center !important;
}
/*
* Single-product meta block (SKU / Categories / Brand). WooCommerce prints
* these as one run-on inline line, which reads as crowded clutter under the
* add-to-cart. Stack each on its own line behind a hairline divider, mute the
* labels, and keep links quiet so the block reads as calm supporting detail.
*/
.woocommerce div.product .product_meta {
margin-top: 1.4rem;
padding-top: 1.05rem;
border-top: 1px solid rgba(17, 19, 25, 0.1);
font-size: 0.82rem;
line-height: 1.5;
color: var(--ch-muted);
}
.woocommerce div.product .product_meta > span,
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in {
display: block;
margin: 0 0 0.3rem;
}
.woocommerce div.product .product_meta a {
color: var(--ch-ink);
text-decoration: none;
}
.woocommerce div.product .product_meta a:hover,
.woocommerce div.product .product_meta a:focus-visible {
text-decoration: underline;
}
/*
* Feature pills on loop cards — a quiet, wrapping row of the ESW modules /
* subfeatures each demo product exercises (rendered by
* chiseiko_theme_child_render_demo_feature_pill). A product using several
* modules shows several pills. Deliberately understated: small, low-contrast
* moss tint so they inform without pulling focus from the product.
*/
.chiseiko-feature-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3rem;
margin: 0.55rem 0 0;
}
.chiseiko-feature-pill {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: var(--ch-radius-pill);
background: rgba(124, 138, 110, 0.13);
color: var(--ch-moss);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.35;
text-transform: uppercase;
white-space: nowrap;
}
/*
* Storefront entrance motion (progressive enhancement).
*
* chiseiko-motion.js adds `js-reveal` to and `ch-reveal-target` to
* storefront cards/sections, then toggles `is-revealed` as each scrolls into
* view. The hidden state is scoped to `.js-reveal` AND gated behind
* prefers-reduced-motion: no-preference, so:
* - no JS / failed JS → no `js-reveal` class → content fully visible.
* - reduced motion → rule never applies + the script bails → no motion.
* Per-group stagger comes from the inline --ch-reveal-delay the script sets.
*/
@media (prefers-reduced-motion: no-preference) {
.js-reveal .ch-reveal-target {
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.55s var(--ch-ease),
transform 0.55s var(--ch-ease);
transition-delay: var(--ch-reveal-delay, 0ms);
}
.js-reveal .ch-reveal-target.is-revealed {
opacity: 1;
transform: none;
}
}