/**
* Rebs Curtis-Moss — site-specific brand styling.
*
* Loaded by the `rebs-site-styles` mu-plugin at wp_enqueue_scripts priority 100,
* so this file lands AFTER Quiosco's stylesheets (priority 99) and overrides
* naturally via load order — no `!important` anywhere in this file.
*
* Scope:
* - Quiosco product grid (.qsc-grid*) — used in /training, /resources, /shop archive override
* - Quiosco cart link in nav (.qsc-cart-link*)
* - Quiosco notices (.qsc-thankyou-notice*, .qsc-protected-notice*)
* - Native WooCommerce pages (single product, cart, checkout, my-account)
*
* Out of scope (intentional):
* - Typography family (Poppins/Mulish are loaded by Consus theme already).
* - Header / footer / global theme chrome (Kubio Pro handles that).
* - Quiosco core layout (we restyle, not relayout).
*
* Accessibility:
* The Rebs primary teal `#0097b2` only reaches WCAG AA Large (3.06:1 vs white).
* For body / small text on white we use `#006d82` (~5.34:1 → AA Normal).
* Mint `#0cdfc6` and lime `#7ed957` are decorative-only — never text on white.
* Hover/focus states preserve visible focus rings for keyboard a11y.
*/
/* -------------------------------------------------------------------------
* Brand tokens
* ------------------------------------------------------------------------- */
:root {
/* Brand palette */
--rebs-teal: #0097b2; /* Primary teal — backgrounds, large bold text only (AA Large vs white) */
--rebs-teal-dark: #006d82; /* Darker teal — body / small text on white (5.34:1 → AA Normal) */
--rebs-teal-darker: #00566a; /* Hover state for teal buttons (>7:1 → AAA Normal) */
--rebs-mint: #0cdfc6; /* Mint accent — decorative borders, backgrounds. NEVER as text color. */
--rebs-mint-soft: #e6fbf7; /* Mint tinted background (notices) */
--rebs-lime: #7ed957; /* Lime accent — decorative only */
/* Neutrals */
--rebs-text: #262E38; /* Body text (~13.6:1 vs white → AAA) */
--rebs-text-muted: #5a6472; /* Secondary text (~6.5:1 → AA Normal) */
--rebs-surface: #ffffff;
--rebs-surface-alt: #f7f9fa; /* Card hover / input backgrounds */
--rebs-border: #e2e8ec;
/* Geometry */
--rebs-radius: 0.75rem; /* 12px — soft, modern */
--rebs-radius-sm: 0.5rem; /* 8px — buttons, inputs */
--rebs-shadow: 0 1px 3px rgba(38, 46, 56, 0.06), 0 1px 2px rgba(38, 46, 56, 0.04);
--rebs-shadow-hover: 0 8px 24px rgba(0, 109, 130, 0.12), 0 2px 6px rgba(38, 46, 56, 0.06);
/* Motion */
--rebs-transition: 200ms ease;
}
/* -------------------------------------------------------------------------
* Quiosco product grid — brand override via public token API (v0.6+).
* Markup ref: /Users/danielatrinchero/Caniche Studio/quiosco/includes/ProductGrid/Renderer.php
*
* Quiosco v0.6 ships a defensive design system: layout (equal heights,
* CTA at the bottom, padding in rem, button color reset for all link
* states) is guaranteed by the plugin. Branding is done by overriding
* the public CSS variables — no specificity fights, no !important.
*
* Anything beyond pure tokens (hover lift, image scale, focus ring
* color) lives below as small additions, since they are brand-opinion
* UX (not part of Quiosco core's design contract).
* ------------------------------------------------------------------------- */
:root,
.qsc-grid,
.qsc-grid__card {
/* Token API — Quiosco picks these up through `var()` references in its
`:where(.qsc-grid)` AND `:where(.qsc-grid__card)` defaults (the second
was added in v0.8.0 to support isolated cards rendered outside a grid
wrapper, e.g. related-products on single-product).
Custom properties resolve by closest-ancestor inheritance, NOT by
specificity across siblings. The v0.8.0 `:where(.qsc-grid__card)`
declaration sits CLOSER to the button than `:root`, so a `:root`-only
override silently loses to Quiosco's neutral defaults (#1a1a1a black).
We therefore declare on three scopes — `:root` (anchors the page),
`.qsc-grid` (closer than `:where(.qsc-grid)`, specificity 0,1,0 wins),
and `.qsc-grid__card` (closer than `:where(.qsc-grid__card)`, same
specificity bump). All three sit in the same rule, so the value is
identical wherever the cascade picks it up.
Look target: `/services .custom-card` on the live Rebs site —
rectangular cards (no radius), 16:9 hero, solid teal pill at top-left,
teal-tinted body panel, hover lift -5px + image scale 1.05 +
gradient overlay on body. Source CSS extracted via Playwright on the
same DB (`http://localhost:8888/services/`). */
--qsc-grid-gap: 2rem; /* 32px — uniform across viewports to match /services card-grid */
--qsc-card-bg: var(--rebs-surface);
--qsc-card-text: var(--rebs-text);
--qsc-card-text-muted: var(--rebs-text-muted);
--qsc-card-border: 0; /* /services has no border */
--qsc-card-radius: 0; /* rectangular corners — match /services */
--qsc-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* /services .custom-card */
--qsc-card-padding: 0; /* body owns its own padding */
/* 16:9 hero — exposed via Quiosco v0.7 token. */
--qsc-media-aspect-ratio: 16 / 9;
/* Title sized to match `/services .custom-card h3` and Cani's review
2026-04-29 — 1.75rem (was 1.125rem). The defensive selector below
re-asserts `font-size` on `.qsc-grid__title` because the Consus
theme + Kubio child selectors (`.products h3`, `.woocommerce h3`)
target product titles with specificity 0,1,1, beating the variable
default declared on `:where(.qsc-grid)` (specificity 0). */
--qsc-title-size: 1.75rem;
--qsc-title-weight: 700;
--qsc-title-line-height: 1.3;
/* Price — Cani's call 2026-04-29: bigger + pure teal (NOT teal-dark).
Pure `#0097b2` is 3.06:1 vs white → AA Large only. At 1.5rem (24px)
with `font-weight: 700`, this satisfies AA Large (≥18pt regular OR
≥14pt bold = ~18.7px). The defensive `font-weight: 700` rule below
is what locks in the AA Large compliance — without it, the theme's
default 400 weight would silently downgrade the price to AA fail. */
--qsc-price-color: var(--rebs-teal);
--qsc-price-size: 1.5rem;
/* CTA: mint bg + white text + flat 0 radius. Single button style used
everywhere on the site (cart Proceed, Add to basket, Quiosco grid
CTA, notice CTAs). Matches the Rebs nav buttons verbatim. Hover
shifts to teal — same brand transition Rebs uses across the site. */
--qsc-button-bg: var(--rebs-mint);
--qsc-button-text: var(--rebs-surface);
--qsc-button-bg-hover: var(--rebs-teal);
--qsc-button-radius: 0; /* flat — match Rebs */
--qsc-button-padding: 15px 23px; /* match nav links */
/* Category pill — verbatim values from `/services .card-header-overlay`
measured via Playwright on this same DB:
- bgImage: gradient teal→lime
- color: white
- padding: 12px 20px
- radius: 0 0 8px 0 (asymmetric)
- fontFamily: Mulish (NOT Poppins — measured 19.2px Mulish 700)
- fontSize: 1.2rem (=19.2px)
- fontWeight: 700 */
--qsc-category-bg: linear-gradient(135deg, #0097b2 0%, #7ed957 100%);
--qsc-category-text: #ffffff;
--qsc-category-padding: 12px 20px;
--qsc-category-font-size: 1.2rem; /* match /services badge — was 1.1rem */
--qsc-category-font-weight: 700;
--qsc-category-radius-tl: 0;
--qsc-category-radius-tr: 0;
--qsc-category-radius-bl: 0;
--qsc-category-radius-br: 8px;
}
@media (min-width: 768px) {
:root {
--qsc-title-size: 2rem; /* desktop — Cani's call 2026-04-29 */
/* `--qsc-grid-gap` stays at 2rem (32px) at all viewports — uniform
spacing across services / shop / training / related-products. */
}
}
/* -------------------------------------------------------------------------
* Brand-opinion rules (NOT part of the Quiosco core contract):
* body bg, hover lift, image scale, full-card gradient overlay. These
* rules specialize the look to match `/services .custom-card` exactly
* and intentionally live in the mu-plugin (theme-agnostic plugin core
* stays neutral).
* ------------------------------------------------------------------------- */
/* Body panel: teal at 10% (matches `.card-content` rgba(80, 167, 194, 0.1)).
The CTA wrapper carries the SAME bg so the body+cta region reads as one
continuous teal-tinted panel — without it, the CTA strip looks like a
white seam under the body. */
.qsc-grid__body {
background-color: rgba(80, 167, 194, 0.1);
padding: 24px;
}
.qsc-grid__cta {
background-color: rgba(80, 167, 194, 0.1);
padding: 0 24px 24px;
}
/* Defensive selectors against theme/Kubio rules that beat the variable
defaults on `:where(.qsc-grid)` (specificity 0):
- Title: Consus / Kubio set `.products h3 { font-size: … }` with
specificity 0,1,1 (beats specificity 0). We re-assert with our own
class selector (specificity 0,1,0) PLUS a doubled-class selector
(`.qsc-grid .qsc-grid__title`, specificity 0,2,0) so we beat any
theme-side `.products h3.qsc-grid__title` (would also be 0,2,0 but
lose by cascade order — our stylesheet enqueues at priority 100,
after Quiosco core at 99 and after most theme styles).
- Price: same story — bumped to bold for AA Large compliance at
`#0097b2` (3.06:1 vs white needs ≥18pt or ≥14pt bold; 1.5rem bold
satisfies the latter).
- Button color: Kubio Pro injects an inline rule
`[data-kubio] a:not([class*=wp-block-button]) { color: kubio-color-4 }`
with specificity (0,2,1) — the `` carries `with-kubio-global-style`
so the rule matches our ``. A bare
`.qsc-grid__button:link` is only (0,2,0) and loses. We scope every
button selector under `.qsc-grid` (so the chain becomes (0,3,1)) AND
match the `a` element to also out-specify `.woocommerce a.button`
(0,2,1) should the page ever be rendered as a WC archive. */
.qsc-grid__title,
.qsc-grid .qsc-grid__title {
font-size: var(--qsc-title-size);
font-weight: var(--qsc-title-weight);
line-height: var(--qsc-title-line-height);
color: var(--rebs-text);
}
.qsc-grid__price,
.qsc-grid .qsc-grid__price {
font-size: var(--qsc-price-size);
color: var(--qsc-price-color);
font-weight: 700; /* AA Large compliance for #0097b2 vs white at ≥1.17rem bold */
}
/* Button + card-link absorb the brand even when Kubio's inline link-color
rule applies. Kubio injects `[data-kubio] a:not([class*="wp-block-button"])
{ color: var(--kubio-color-4) }` (specificity 0,2,1) — equal to a bare
`.qsc-grid a.qsc-grid__button`, but pseudoclass evaluation makes the
`:link/:visited` chain unreliable. Prefixing with `[data-kubio]` raises
us to (0,3,1) and wins on every state without relying on order or
pseudo-resolution. The card-link uses `inherit` so it tracks the
surrounding card text color (no dedicated link color = no Kubio override). */
[data-kubio] a.qsc-grid__button {
background: var(--qsc-button-bg);
color: var(--qsc-button-text);
text-decoration: none;
}
[data-kubio] a.qsc-grid__card-link {
color: inherit;
text-decoration: none;
}
@media (hover: hover) {
[data-kubio] a.qsc-grid__button:hover {
background: var(--qsc-button-bg-hover);
color: var(--qsc-button-text); /* explicit — defends against `a:hover { color: … }` */
}
}
/* Category badge — matches `/services .card-header-overlay` exactly:
gradient teal→lime, white text, 12/20 padding, asymmetric bottom-right
radius only. Defensive against any theme rule that targets
`.qsc-grid__category` directly (e.g. spans nested in WC product loops).
Most properties also flow through the variable API (set on `:root`
above) — these explicit selectors lock in the geometry/typography
that the variable surface doesn't expose (e.g. `position`, the exact
asymmetric radius). */
.qsc-grid__category,
.qsc-grid .qsc-grid__category {
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin: 0;
padding: 12px 20px;
background-color: #0097b2; /* solid fallback for browsers w/o gradient */
background-image: linear-gradient(135deg, #0097b2 0%, #7ed957 100%);
color: #fff;
font-family: 'Mulish', Helvetica, Arial, sans-serif; /* match /services badge */
font-size: 1.2rem; /* 19.2px — match /services badge */
font-weight: 700;
line-height: 1.2;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 8px;
pointer-events: none;
}
/* Full-card hover gradient overlay (Quiosco v0.7.1 contract).
Mounted on `.qsc-grid__card::after` — NOT `.qsc-grid__body::after`
like pre-v0.7.1 — so it covers the entire card surface (media + body
+ CTA), since the CTA is a sibling of the card-link, not a descendant
of `__body`. Quiosco v0.7.1 guarantees `.qsc-grid__card` is
`position: relative; overflow: hidden`, and `.qsc-grid__cta` has no
`background` in core, so this overlay reads through every region.
Stacking strategy (mirrors `/services .card-content::after`):
- The overlay has NO `z-index` — it stacks naturally as the last
child of the positioned `.qsc-grid__card`, landing ABOVE the
body's background-color and ABOVE the CTA's background-color.
- Alpha is 0.2 on each gradient stop, so text + image + button
remain perfectly legible through the wash. Same alpha as the
Services page so the hover feel matches.
- `pointer-events: none` keeps the card-link `` clickable
through the overlay (and the CTA `` clickable too, since
it's a sibling, but `pointer-events: none` on `::after` is
defense-in-depth across browsers).
Why no `z-index` on card-link / CTA: lifting them would push the
text ABOVE the overlay (defeating the wash effect — same reason
`/services` doesn't lift its text). The 0.2 alpha is what keeps
things legible. */
.qsc-grid__card {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.qsc-grid__card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(0, 151, 178, 0.2),
rgba(126, 217, 87, 0.2)
);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.qsc-grid__image {
transition: transform 0.4s ease;
}
@media (hover: hover) {
.qsc-grid__card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.qsc-grid__card:hover .qsc-grid__image {
transform: scale(1.05);
}
.qsc-grid__card:hover::after {
opacity: 1;
}
}
/* Branded focus ring (Quiosco core uses currentColor; we ensure the
teal-dark even on cards with light text). */
.qsc-grid__card-link:focus-visible,
.qsc-grid__button:focus-visible {
outline: 2px solid var(--rebs-teal-dark);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.qsc-grid__card,
.qsc-grid__image,
.qsc-grid__card::after {
transition: none;
}
.qsc-grid__card:hover {
transform: none;
}
.qsc-grid__card:hover .qsc-grid__image {
transform: none;
}
/* Don't reveal the overlay at all when motion is reduced — the lift
transform is already disabled, and a static color shift on hover
is itself motion-perceptible to some users. */
.qsc-grid__card:hover::after {
opacity: 0;
}
}
/* -------------------------------------------------------------------------
* Quiosco notices — thank-you + protected content gate
* Markup ref:
* /Users/danielatrinchero/Caniche Studio/quiosco/includes/WooCommerce/ThankYouNotice.php
* /Users/danielatrinchero/Caniche Studio/quiosco/includes/Shortcodes/ProtectedContent.php
* ------------------------------------------------------------------------- */
.qsc-thankyou-notice,
.qsc-protected-notice {
background: var(--rebs-mint-soft);
border: 1px solid var(--rebs-mint);
border-left: 4px solid var(--rebs-teal);
border-radius: 0; /* flat — match the rest of the site */
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
color: var(--rebs-text);
}
.qsc-thankyou-notice__title {
font-family: 'Mulish', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: var(--rebs-teal-dark); /* AA Normal vs mint-soft (#e6fbf7) — ~5.0:1 */
margin: 0 0 0.5rem;
}
.qsc-thankyou-notice__body,
.qsc-protected-notice__text {
margin: 0;
color: var(--rebs-text);
line-height: 1.55;
}
.qsc-thankyou-notice__cta,
.qsc-protected-notice__cta {
margin: 1rem 0 0;
}
/* Thank-you + protected notice CTAs — mint flat, same pattern as the
rest of the site's buttons (cart Proceed, Add to basket, etc.).
`[data-kubio]` prefix to outrank Kubio's link-color rule. */
[data-kubio] a.qsc-thankyou-notice__link,
[data-kubio] a.qsc-protected-notice__link {
display: inline-block;
padding: 15px 23px;
background: var(--rebs-mint);
color: var(--rebs-surface);
border-radius: 0;
font-weight: 500;
text-decoration: none;
transition: background var(--rebs-transition);
}
@media (hover: hover) {
[data-kubio] a.qsc-thankyou-notice__link:hover,
[data-kubio] a.qsc-protected-notice__link:hover {
background: var(--rebs-teal);
color: var(--rebs-surface);
}
}
[data-kubio] a.qsc-thankyou-notice__link:focus-visible,
[data-kubio] a.qsc-protected-notice__link:focus-visible {
outline: 2px solid var(--rebs-teal-dark);
outline-offset: 2px;
}
/* "Locked" variant of protected-notice gets a slightly warmer surface. */
.qsc-protected-notice--locked {
background: var(--rebs-surface-alt);
border-left-color: var(--rebs-teal-dark);
}
/* -------------------------------------------------------------------------
* Quiosco cart link in nav
* Markup ref: /Users/danielatrinchero/Caniche Studio/quiosco/includes/CartLink/CartLink.php
*
* Color stays inherited (currentColor) so it tracks the navbar's text color
* across light/dark backgrounds. The badge gets the teal pop.
* ------------------------------------------------------------------------- */
.qsc-cart-link__count {
min-width: 1.1rem;
padding: 0.35rem;
background: var(--rebs-lime);
color: var(--rebs-surface);
border-radius: 999px;
text-align: center;
}
/* -------------------------------------------------------------------------
* Native WooCommerce — single product page
* ------------------------------------------------------------------------- */
.single-product .product .price,
.single-product .product .price .amount,
.single-product .product .price ins .amount {
color: var(--rebs-text); /* match body text — Cani 2026-05-07 */
font-weight: 700;
}
/* Strikethrough sale price — keep muted. */
.single-product .product .price del,
.single-product .product .price del .amount {
color: var(--rebs-text-muted);
font-weight: 400;
}
.single-product .product .summary .stock {
color: var(--rebs-teal-dark);
font-weight: 600;
}
.single-product .product .summary .out-of-stock {
color: #b03a2e; /* warm red — AA Normal vs white */
}
/* Add-to-cart button on single product is fully covered below by the
generic WC button block (`#kubio .woocommerce button.single_add_to_cart_button`).
No standalone rule here — kept consolidated to a single set of WC button
tokens so look stays uniform across all WC pages. */
/* -------------------------------------------------------------------------
* Native WooCommerce — cart + checkout pages (classic + block)
* ------------------------------------------------------------------------- */
/* Generic WC button treatment — solid teal flat, single style across the
whole site (cart Proceed, Place order, View basket, etc.). Matches what
the Quiosco grid CTA tokens (`--qsc-button-bg: var(--rebs-teal)`) ship
above so every button reads the same.
We need to outrank TWO Kubio rules:
1. Inline link-color: `[data-kubio] a:not([class*=wp-block-button])`
(0,2,1) — covered by adding the `[data-kubio]` prefix below.
2. WC button bg: `#kubio .woocommerce a.button.add_to_cart, ...`
(1,3,2) — covered by ALSO selectors prefixed with `#kubio`.
We declare both prefixes as separate selector groups so each one wins
in its own context. */
[data-kubio] .woocommerce a.button,
[data-kubio] .woocommerce button.button,
[data-kubio] .woocommerce input.button,
[data-kubio] .woocommerce-page a.button,
[data-kubio] .woocommerce-page button.button,
[data-kubio] .woocommerce-page input.button,
[data-kubio] a.wc-block-components-button.contained,
[data-kubio] button.wc-block-components-button.contained,
[data-kubio] .woocommerce a.woocommerce-button,
[data-kubio] .woocommerce-page a.woocommerce-button,
[data-kubio] .woocommerce a.woocommerce-MyAccount-downloads-file,
#kubio .woocommerce a.button,
#kubio .woocommerce button.button,
#kubio .woocommerce input.button,
#kubio .woocommerce a.button.add_to_cart,
#kubio .woocommerce a.button.add_to_cart_button,
#kubio .woocommerce button.button.single_add_to_cart_button,
#kubio .woocommerce button.single_add_to_cart_button.alt,
#kubio .woocommerce a.woocommerce-button.button,
#kubio .woocommerce a.woocommerce-button.button.invoice {
background: var(--rebs-mint);
color: var(--rebs-surface);
border: 1px solid var(--rebs-mint);
border-radius: 0; /* flat — Rebs has zero rounded corners */
padding: 15px 23px; /* match Rebs nav padding rhythm */
font-weight: 500; /* match Rebs nav typography */
letter-spacing: 0.01em;
text-decoration: none;
transition:
background var(--rebs-transition),
border-color var(--rebs-transition);
}
@media (hover: hover) {
[data-kubio] .woocommerce a.button:hover,
[data-kubio] .woocommerce button.button:hover,
[data-kubio] .woocommerce input.button:hover,
[data-kubio] .woocommerce-page a.button:hover,
[data-kubio] .woocommerce-page button.button:hover,
[data-kubio] .woocommerce-page input.button:hover,
[data-kubio] a.wc-block-components-button.contained:hover,
[data-kubio] button.wc-block-components-button.contained:hover,
#kubio .woocommerce a.button:hover,
#kubio .woocommerce button.button:hover,
#kubio .woocommerce input.button:hover,
#kubio .woocommerce a.button.add_to_cart:hover,
#kubio .woocommerce button.single_add_to_cart_button:hover {
background: var(--rebs-teal);
border-color: var(--rebs-teal);
color: var(--rebs-surface); /* lock white through hover */
}
}
[data-kubio] .woocommerce a.button:focus-visible,
[data-kubio] .woocommerce button.button:focus-visible,
[data-kubio] .woocommerce input.button:focus-visible,
[data-kubio] .woocommerce-page a.button:focus-visible,
[data-kubio] .woocommerce-page button.button:focus-visible,
[data-kubio] .woocommerce-page input.button:focus-visible,
[data-kubio] a.wc-block-components-button.contained:focus-visible,
[data-kubio] button.wc-block-components-button.contained:focus-visible,
#kubio .woocommerce a.button:focus-visible,
#kubio .woocommerce button.button:focus-visible,
#kubio .woocommerce a.button.add_to_cart:focus-visible,
#kubio .woocommerce button.single_add_to_cart_button:focus-visible {
outline: 2px solid var(--rebs-teal-dark);
outline-offset: 2px;
}
/* WC `.alt` (primary CTA in classic templates) — same mint. */
[data-kubio] .woocommerce a.button.alt,
[data-kubio] .woocommerce button.button.alt,
#kubio .woocommerce a.button.alt,
#kubio .woocommerce button.button.alt {
background: var(--rebs-mint);
color: var(--rebs-surface);
border-color: var(--rebs-mint);
}
@media (hover: hover) {
[data-kubio] .woocommerce a.button.alt:hover,
[data-kubio] .woocommerce button.button.alt:hover,
#kubio .woocommerce a.button.alt:hover,
#kubio .woocommerce button.button.alt:hover {
background: var(--rebs-teal);
border-color: var(--rebs-teal);
}
}
/* Single-product meta + WC account form links (.posted_in, lost-password,
register, etc.) + WC order tables (thank-you, view order, my-account).
Kubio's link rule paints these orange — defensive override aligned with
the rest of the site links. */
[data-kubio] .product_meta a,
[data-kubio] .posted_in a,
[data-kubio] .tagged_as a,
[data-kubio] .lost_password a,
[data-kubio] .woocommerce-LostPassword a,
[data-kubio] .woocommerce-form-login a,
[data-kubio] .woocommerce-form-register a,
[data-kubio] .woocommerce-form-row a,
[data-kubio] table.woocommerce-table--order-details a,
[data-kubio] table.woocommerce-orders-table a,
[data-kubio] table.woocommerce-MyAccount-orders a,
[data-kubio] .woocommerce-order-details a,
[data-kubio] .order_details a,
[data-kubio] td.woocommerce-table__product-name a,
[data-kubio] td.product-name a {
color: var(--rebs-teal-dark);
text-decoration: underline;
}
@media (hover: hover) {
[data-kubio] .product_meta a:hover,
[data-kubio] .posted_in a:hover,
[data-kubio] .tagged_as a:hover,
[data-kubio] .lost_password a:hover,
[data-kubio] .woocommerce-LostPassword a:hover,
[data-kubio] .woocommerce-form-login a:hover,
[data-kubio] .woocommerce-form-register a:hover,
[data-kubio] .woocommerce-form-row a:hover {
color: var(--rebs-teal-darker);
}
}
/* WC account / login form submit buttons — Kubio scopes them under
`#kubio .woocommerce button.button.woocommerce-form-login__submit`
(specificity 1,4,2). Match that exactly so we win by load order. */
#kubio .woocommerce button.button.woocommerce-form-login__submit,
#kubio .woocommerce a.button.woocommerce-form-login__submit,
#kubio .woocommerce button.button.woocommerce-form-register__submit,
#kubio .woocommerce a.button.woocommerce-form-register__submit,
#kubio .woocommerce button.button.woocommerce-Button {
background: var(--rebs-mint);
color: var(--rebs-surface);
border: 1px solid var(--rebs-mint);
border-radius: 0;
padding: 15px 23px;
font-weight: 500;
letter-spacing: 0.01em;
}
@media (hover: hover) {
#kubio .woocommerce button.button.woocommerce-form-login__submit:hover,
#kubio .woocommerce a.button.woocommerce-form-login__submit:hover,
#kubio .woocommerce button.button.woocommerce-form-register__submit:hover,
#kubio .woocommerce a.button.woocommerce-form-register__submit:hover,
#kubio .woocommerce button.button.woocommerce-Button:hover {
background: var(--rebs-teal);
border-color: var(--rebs-teal);
color: var(--rebs-surface);
}
}
/* Form controls (inputs, textareas, selects) — brand-aligned to match the
rest of the site: flat (0 radius), Poppins (theme inherits), brand border,
padding rhythm consistent with buttons. WC + WC archive sort dropdown +
contact form get the same treatment so every control looks uniform. */
[data-kubio] .woocommerce input[type="text"],
[data-kubio] .woocommerce input[type="email"],
[data-kubio] .woocommerce input[type="password"],
[data-kubio] .woocommerce input[type="tel"],
[data-kubio] .woocommerce input[type="number"],
[data-kubio] .woocommerce input[type="search"],
[data-kubio] .woocommerce input[type="url"],
[data-kubio] .woocommerce textarea,
[data-kubio] .woocommerce select,
[data-kubio] .woocommerce-page input[type="text"],
[data-kubio] .woocommerce-page input[type="email"],
[data-kubio] .woocommerce-page input[type="password"],
[data-kubio] .woocommerce-page textarea,
[data-kubio] .woocommerce-page select,
[data-kubio] form.woocommerce-ordering select,
[data-kubio] .wc-block-components-text-input input,
[data-kubio] .wc-block-components-textarea {
background-color: var(--rebs-surface);
color: var(--rebs-text);
border: 1px solid var(--rebs-border);
border-radius: 0; /* flat — match Rebs */
padding: 12px 16px; /* slightly tighter than buttons (15/23) — inputs are denser by convention */
font-family: inherit; /* Poppins from theme — match nav */
font-size: 1rem;
line-height: 1.5;
transition:
border-color var(--rebs-transition),
box-shadow var(--rebs-transition);
}
[data-kubio] .woocommerce input[type="text"]:focus,
[data-kubio] .woocommerce input[type="email"]:focus,
[data-kubio] .woocommerce input[type="password"]:focus,
[data-kubio] .woocommerce input[type="tel"]:focus,
[data-kubio] .woocommerce input[type="number"]:focus,
[data-kubio] .woocommerce input[type="search"]:focus,
[data-kubio] .woocommerce textarea:focus,
[data-kubio] .woocommerce select:focus,
[data-kubio] .woocommerce-page input:focus,
[data-kubio] .woocommerce-page textarea:focus,
[data-kubio] .woocommerce-page select:focus,
[data-kubio] form.woocommerce-ordering select:focus {
outline: none;
border-color: var(--rebs-teal);
box-shadow: 0 0 0 2px rgba(0, 151, 178, 0.2);
}
/* WC Blocks grid (cross-sells "New in store" on cart-empty / checkout-empty,
`[products]` shortcode in pages, etc.). Different markup than Quiosco grid:
uses `.wc-block-grid__product*` selectors and `.wp-block-button__link` for
the CTA. Brand them to match the rest of the site. */
[data-kubio] li.wc-block-grid__product a,
[data-kubio] .wc-block-grid__product-title,
[data-kubio] .wc-block-grid__product-link {
color: var(--rebs-text);
text-decoration: none;
font-weight: 600;
}
[data-kubio] .wc-block-grid__product-price,
[data-kubio] .wc-block-grid__product-price .amount,
[data-kubio] .wc-block-grid__product-price ins .amount {
color: var(--rebs-teal); /* match Quiosco grid price */
font-weight: 700;
}
[data-kubio] .wc-block-grid__product-price del,
[data-kubio] .wc-block-grid__product-price del .amount {
color: var(--rebs-text-muted);
font-weight: 400;
}
/* WC Blocks "Add to basket" — uses `.wp-block-button__link` instead of
`.button`. WP core ships it with bg #32373c + border-radius 9999px (pill).
Brand it to mint flat to match the rest of the site CTAs. */
[data-kubio] a.wp-block-button__link.add_to_cart_button,
[data-kubio] .wc-block-grid__product .wp-block-button__link {
background: var(--rebs-mint);
color: var(--rebs-surface);
border: 1px solid var(--rebs-mint);
border-radius: 0;
padding: 15px 23px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
}
@media (hover: hover) {
[data-kubio] a.wp-block-button__link.add_to_cart_button:hover,
[data-kubio] .wc-block-grid__product .wp-block-button__link:hover {
background: var(--rebs-teal);
border-color: var(--rebs-teal);
color: var(--rebs-surface);
}
}
/* Cart totals — order total amount in teal-dark bold. */
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount,
.wc-block-components-totals-footer-item-tax-value,
.wc-block-components-totals-item__value {
color: var(--rebs-teal-dark); /* AA Normal */
font-weight: 700;
}
/* Cart-row product name link (block-based cart — what this site actually
renders). Kubio's link rule pushes the title to color-4 orange; matching
`[data-kubio]` and adding the element selector raises us to (0,3,0) +
element = (0,3,1), winning over Kubio (0,2,1). */
[data-kubio] a.wc-block-components-product-name {
color: var(--rebs-text);
text-decoration: none;
font-weight: 600;
}
@media (hover: hover) {
[data-kubio] a.wc-block-components-product-name:hover {
color: var(--rebs-teal-dark);
text-decoration: underline;
}
}
/* -------------------------------------------------------------------------
* Native WooCommerce — my-account / login / register
* ------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation a {
color: var(--rebs-text);
text-decoration: none;
font-weight: 500;
transition: color var(--rebs-transition);
}
@media (hover: hover) {
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
color: var(--rebs-teal-dark);
}
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
color: var(--rebs-teal-dark);
font-weight: 700;
}
/* ----------------------------------------------------------------
* Cart page — hide the filled-cart cross-sells grid when the cart is
* empty. WC blocks render shortcodes at the cart-wrapper level (one
* step outside their owning `wp:woocommerce/filled-cart-block`
* comment), so the cross-sells `[quiosco_product_grid]` we added in
* the filled-cart section keeps rendering even when the cart is empty
* — producing two stacked grids ("cross-sells" + "New in store").
*
* `body:has(.wc-block-cart__empty-cart__title)` is true only when the
* empty-cart heading is present (i.e., cart is empty). Then the
* `.wp-block-woocommerce-cart > .qsc-grid` selector targets ONLY the
* top-level grid (direct child of the cart wrapper), leaving the one
* inside `.wp-block-woocommerce-empty-cart-block` visible.
* ---------------------------------------------------------------- */
body:has(.wc-block-cart__empty-cart__title) .wp-block-woocommerce-cart > .qsc-grid,
body:has(.wc-block-cart__empty-cart__title) .wp-block-woocommerce-cart > .wp-block-heading {
display: none;
}
/* ----------------------------------------------------------------
* Cart empty state — shrink the WC default sad-emoji + heading so
* they don't dwarf the "New in store" Quiosco grid below them.
* WC defaults: 100px emoji + ~3em heading. Reduced to ~48px emoji +
* 1.5rem heading to feel like a friendly micro-message instead of
* a sad poster.
* ---------------------------------------------------------------- */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
width: 48px;
height: 48px;
margin-bottom: 1rem;
background-size: 48px 48px;
}
h2.wc-block-cart__empty-cart__title,
.wc-block-cart__empty-cart__title.wp-block-heading {
font-size: 1.5rem;
margin: 0 0 1rem;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
margin: 1rem auto 1.5rem;
}
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
font-size: 1.5rem;
margin: 1.5rem 0 1rem;
}
/* ----------------------------------------------------------------
* Shop archive — collapse the empty Kubio sidebar column.
*
* The Kubio archive template ships with a 300px sidebar column to the left
* of the product grid that renders an empty "Widget area not found"
* placeholder. Until Rebs decides to populate it (filters, search, etc.)
* it just shrinks the grid container to ~872px and breaks visual parity
* with `/services/` and other full-width pages.
*
* We hide that specific column (Kubio assigns a stable per-template
* `style-XXXX_xN-container` class — regenerates only on template edit)
* and let the sibling main column flex to 100% of the row.
* ---------------------------------------------------------------- */
body .style-PsLKFk_x3-container {
display: none;
}
body .style-DbkmkmgSJj-container {
flex-basis: 100%;
max-width: 100%;
}
/* ---------------------------------------------------------------- */
/* Coming Soon holding — auto-hides the theme's page-title hero on */
/* any page that contains a `.rebs-coming-soon` marker. The actual */
/* content uses native WP/Kubio blocks (heading + paragraph + */
/* button) so it inherits Rebs's brand styles automatically — no */
/* custom typography or button overrides live here on purpose. */
/* ---------------------------------------------------------------- */
body:has(.rebs-coming-soon) .wp-block-kubio-hero:has(.wp-block-kubio-page-title) {
display: none;
}
/* Reduced-motion guard for everything in this stylesheet that uses transitions
* (defensive — most are already inside `@media (hover: hover)` blocks that
* don't fire on touch devices, but reduced-motion users on desktop deserve
* static states too). */
@media (prefers-reduced-motion: reduce) {
.qsc-grid__button,
.qsc-thankyou-notice__link,
.qsc-protected-notice__link,
.single-product button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button.contained,
.woocommerce-account .woocommerce-MyAccount-navigation a {
transition: none;
}
}