/* ----------------------------------------------------------------------------- * Template: AUTOOL * * The structure of autoGenFile/docs/autool_product_card.html, with its type and * rhythm audited against this site's design system rather than copied pixel for * pixel. See PLAN.md §13.2 for the reasoning; the short version: * * - The mockup's 17px/400 category above a 20px title is a hierarchy inversion — * an overline at 85% of its heading's size. It is now 12px/600/uppercase/ * 0.08em, which is also what the theme's own card_product_categories_font * option says. * - The mockup's 20px/700 title competes with the page h1 (34px) at a ~276px * card and reads as a heading rather than a card label. It is now 17px/600 on * a 24px line, matching the theme's card title option. * - Price takes 700 weight at 17px: one *weight* step above the title rather * than a size step, so it still leads without inflating the card. * - Gaps move onto the theme's 4px scale and group by proximity — the mockup's * near-uniform 11/17/21/18/19 spaces unrelated things the same as related * ones. * * WHAT IS STILL THE MOCKUP: the whole structure and sequence, the square * contain-fitted image on white, the frosted amber SALE chip (geometry and all * five of its shadows), the amber star row, and a full-width square CTA with a * cart icon. * * WHAT CHANGED FROM v0.1.0 BESIDES TYPE: the CTA is no longer amber. It follows * the theme's button colours — #005EA8 → #004A85 with white text, read live from * the Customizer by Support\ThemeDefaults — because a card's call to action * should look like every other button on the site. The amber lives on where it * carries meaning: the star row and the sale chip. That is what * --gooek-pc-accent now means. * * Type family is the site's IBM Plex stack, not the mockup's Roboto/Arial: * loading Roboto would mean an external font request this site does not make. * -------------------------------------------------------------------------- */ [data-products][data-gooek-card="autool"] { /* --- Card shell ------------------------------------------------------- */ --gooek-pc-surface: #ffffff; --gooek-pc-border: 1px solid #f2f2f2; --gooek-pc-radius: 0px; --gooek-pc-shadow: 0 2px 4px rgba(26, 29, 32, 0.1); --gooek-pc-shadow-hover: 0 6px 18px rgba(26, 29, 32, 0.14); --gooek-pc-pad: 16px; --gooek-pc-pad-bottom: 16px; /* image ──16── [ category ─6─ title ─10─ rating ─10─ price ] ──16── CTA */ --gooek-pc-gap-media: 16px; --gooek-pc-gap-eyebrow: 6px; --gooek-pc-gap: 10px; --gooek-pc-gap-price: 16px; /* --- Ink -------------------------------------------------------------- */ --gooek-pc-ink: #1a1d20; --gooek-pc-muted: #526078; --gooek-pc-review: #8a94a3; /* --- Media ------------------------------------------------------------ */ /* `contain` on white, as in the mockup: a product photographed end-on is * letterboxed rather than cropped. */ --gooek-pc-media-bg: #ffffff; --gooek-pc-media-radius: 0px; --gooek-pc-fit: contain; /* --- Category eyebrow ------------------------------------------------- */ --gooek-pc-eyebrow-size: 12px; --gooek-pc-eyebrow-lh: 1.35; --gooek-pc-eyebrow-weight: 600; --gooek-pc-eyebrow-transform: uppercase; --gooek-pc-eyebrow-spacing: 0.08em; --gooek-pc-eyebrow-color: var(--gooek-pc-muted); /* --- Title ------------------------------------------------------------ */ --gooek-pc-title-size: 17px; --gooek-pc-title-lh: 24px; --gooek-pc-title-weight: 600; --gooek-pc-title-spacing: 0; --gooek-pc-title-reserve: 1; /* --- Rating ----------------------------------------------------------- */ /* 16px, down from the mockup's 18px, so the star row sits between the 12px * eyebrow and the 17px title instead of matching the title's weight on screen. */ --gooek-pc-star-size: 16px; --gooek-pc-star-gap: 2px; --gooek-pc-star: var(--gooek-pc-accent); --gooek-pc-star-empty: rgba(26, 29, 32, 0.16); --gooek-pc-review-size: 13px; --gooek-pc-rating-gap: 6px; /* --- Price ------------------------------------------------------------ */ --gooek-pc-price-size: 17px; --gooek-pc-price-lh: 24px; --gooek-pc-price-weight: 700; --gooek-pc-was-size: 0.8em; /* "From US$999.00" is one phrase in the reference design, so the prefix does * not shrink or grey out. */ --gooek-pc-from-size: 1em; --gooek-pc-from-weight: inherit; --gooek-pc-from-color: inherit; /* --- Call to action --------------------------------------------------- */ /* Colour, size, weight, tracking, case, height and radius are all left to * Support\ThemeDefaults — deliberately not declared here, because declaring * them would win over the theme (layer 3 beats layer 2) and break the whole * point. Only the two the theme has no opinion about are set. */ --gooek-pc-btn-gap: 9px; --gooek-pc-icon-size: 16px; /* --- Sale chip -------------------------------------------------------- */ --gooek-pc-badge-top: 16px; --gooek-pc-badge-left: 16px; --gooek-pc-badge-height: 32px; --gooek-pc-badge-min-width: 64px; --gooek-pc-badge-radius: 9px; --gooek-pc-badge-pad: 0 10px; --gooek-pc-badge-size: 12px; --gooek-pc-badge-weight: 700; --gooek-pc-badge-spacing: 0.06em; --gooek-pc-badge-transform: uppercase; --gooek-pc-badge-color: #17191c; /* --- Focus ------------------------------------------------------------ */ --gooek-pc-focus: #1a1d20; --gooek-pc-focus-width: 2px; } /* ----------------------------------------------------------------------------- * The frosted amber chip * * Blocksy applies --badge-background-color through `background-color`, which * cannot hold a gradient, so the fill is set here instead and the property is * left transparent. Everything else is the mockup's .sale-label rule: a * translucent warm gradient, a light inner border, a blur-and-saturate backdrop * filter and three shadows — one cast, two inset — that give the chip its edge. * * Only .onsale gets this. The out-of-stock and Companion custom badges keep the * base layer's flat treatment, because a frosted amber "OUT OF STOCK" would read * as a promotion. * -------------------------------------------------------------------------- */ [data-products][data-gooek-card="autool"] .product > figure { --badge-background-color: transparent; } [data-products][data-gooek-card="autool"] .product > figure .onsale { border: 1px solid rgba(255, 255, 255, 0.58); background: linear-gradient( 135deg, rgba(255, 239, 198, 0.72) 0%, rgba(255, 204, 82, 0.58) 100% ); -webkit-backdrop-filter: blur(12px) saturate(165%); backdrop-filter: blur(12px) saturate(165%); box-shadow: 0 8px 18px rgba(26, 29, 32, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(255, 181, 17, 0.16); } /* Without backdrop-filter support the gradient alone is too pale to read as a * badge over a light product photo, so it falls back to the solid accent. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-products][data-gooek-card="autool"] .product > figure .onsale { background: var(--gooek-pc-accent); } } /* The out-of-stock badge keeps its own dark treatment rather than inheriting the * transparent --badge-background-color set above. */ [data-products][data-gooek-card="autool"] .product > figure :is(.out-of-stock-badge, [class*="ct-woo-badge-"]) { border-radius: var(--gooek-pc-badge-radius); background-color: rgba(26, 29, 32, 0.82); color: #ffffff; } /* ----------------------------------------------------------------------------- * Regions that need more than a token * -------------------------------------------------------------------------- */ /* The eyebrow is a single line; the base layer already clips it. */ [data-products][data-gooek-card="autool"] .product > .entry-meta { white-space: nowrap; } [data-products][data-gooek-card="autool"] .product > .woocommerce-loop-product__title { color: var(--gooek-pc-ink); } [data-products][data-gooek-card="autool"] .product > .woocommerce-loop-product__title a:hover { color: var(--gooek-pc-btn-bg); } /* The CTA meets the card's clipped edge, so its focus ring is drawn inside — as * the mockup does with `outline-offset: -3px`. Colour comes from the token so it * stays legible if the button colour is changed. */ [data-products][data-gooek-card="autool"] .product .ct-woo-card-actions .button:focus-visible { outline: var(--gooek-pc-focus-width) solid var(--gooek-pc-focus); outline-offset: -3px; } /* ----------------------------------------------------------------------------- * Narrower viewports * * A smaller step than v0.1.0 needed, because the audited desktop scale is * already close to the phone one — which is itself a sign the original values * were too large for the space. * -------------------------------------------------------------------------- */ @media (max-width: 999.98px) { [data-products][data-gooek-card="autool"] { --gooek-pc-title-size: 16px; --gooek-pc-title-lh: 22px; --gooek-pc-price-size: 16px; --gooek-pc-gap-media: 14px; --gooek-pc-gap-price: 14px; } } @media (max-width: 689.98px) { [data-products][data-gooek-card="autool"] { --gooek-pc-pad: 14px; --gooek-pc-pad-bottom: 14px; --gooek-pc-eyebrow-size: 11px; --gooek-pc-title-size: 15px; --gooek-pc-title-lh: 21px; --gooek-pc-price-size: 16px; --gooek-pc-star-size: 15px; --gooek-pc-review-size: 12px; --gooek-pc-gap-media: 12px; --gooek-pc-gap: 8px; --gooek-pc-gap-price: 13px; --gooek-pc-badge-top: 12px; --gooek-pc-badge-left: 12px; --gooek-pc-badge-height: 28px; --gooek-pc-badge-min-width: 58px; --gooek-pc-badge-size: 11px; } }