/* * KRG review page — shared block stylesheet. * * Ported from docs/krg-review-package/02-design/krg-review.css. Two changes * from the source, both required to live inside the theme rather than owning * a standalone page: * * 1. `body { margin: 0 }` is dropped. It fought the theme's Tailwind base. * 2. The design wraps the whole page in one `.krg-review` div. The blocks are * non-contiguous — editor prose sits between them — so each block root * carries `.krg-review` instead, and the page background moves to a * `body.krg-review-page` class added by krg_review_body_class(). * * Everything else is verbatim. All custom properties are `--krg-` prefixed, * so they collide with nothing else in the theme; keep them on :root so the * sticky bar, which renders outside the content wrapper, can still read them. * Add new values as custom properties here — never as inline styles. */ /* ========================================================================== Kitchen Review Guide — Review Page Stylesheet Converted from Cookware_Landing_Redesign_dc.html (all inline styles removed). Every colour, radius and font is a custom property: A/B style tests only need to override the :root block, never the component rules. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Brand */ --krg-primary: #0d6c68; --krg-primary-dark: #0a5854; --krg-accent: #c14425; --krg-accent-deep: #c14a2c; --krg-accent-deeper: #a63a20; --krg-peach: #e8ac89; --krg-peach-dark: #e2a075; --krg-star: #f0a93e; --krg-star-light: #f5c05a; /* Surfaces */ --krg-page-bg: #fbf9f5; --krg-panel: #f6f5f2; --krg-panel-alt: #f2f2f0; --krg-spotlight-bg: #fdf8f2; --krg-hero-start: #fff6ef; --krg-hero-end: #fdeee2; --krg-row-a: #f3f2ef; --krg-row-b: #fafaf8; --krg-row-top: #eef5f4; --krg-row-top-hover: #e2eeec; /* Text */ --krg-text: #1c1c1c; --krg-text-strong: #141414; --krg-text-body: #3a3a3a; --krg-text-muted: #4a4a4a; --krg-text-soft: #5a5a5a; --krg-text-faint: #6a6a6a; --krg-text-light: #8a8a8a; --krg-text-lighter: #9a9a9a; --krg-grey-chip: #7a7a7a; /* Lines */ --krg-line: rgba(0,0,0,0.08); --krg-line-strong: rgba(0,0,0,0.10); --krg-line-soft: rgba(0,0,0,0.06); --krg-line-invert: rgba(255,255,255,0.15); /* Shape */ --krg-radius: 12px; --krg-radius-lg: 16px; --krg-radius-md: 10px; --krg-radius-sm: 8px; --krg-radius-pill: 20px; /* Shadows */ --krg-shadow-cta: 0 4px 10px -2px rgba(0,0,0,0.25); --krg-shadow-img: 0 10px 20px -12px rgba(0,0,0,0.18); --krg-shadow-row: 0 4px 14px rgba(0,0,0,0.08); /* Type */ --krg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --krg-font-serif: "Source Serif 4", Georgia, serif; --krg-font-quote: Georgia, serif; /* Layout */ --krg-maxw: 1180px; /* The read sections line up with the pair of mini cards above them rather than with a ratio: two .krg-mini at their 400px cap plus the 20px flex gap is an 820px band, and the wrap adds a gutter either side. 820 + 64 = 884. */ --krg-maxw-narrow: 884px; --krg-gutter: 32px; /* Feature switches — flip to `none` to kill an effect site-wide */ --krg-anim-hero: glowPulse 3.5s ease-in-out infinite; --krg-anim-urgency: urgencyFlash 3s ease-in-out infinite; } /* -------------------------------------------------------------------------- 2. ANIMATIONS (respect reduced-motion — the mockup did not) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --krg-anim-hero: none; --krg-anim-urgency: none; } .krg-badge--sale, .krg-dot, .krg-sticky { animation: none !important; } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,140,102,0.35); } 50% { box-shadow: 0 0 0 10px rgba(226,140,102,0); } } @keyframes salePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(193,74,44,0.5); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(193,74,44,0); } } @keyframes barPulse { 0%, 100% { box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 0 rgba(232,172,137,0.55); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 9px rgba(232,172,137,0); } } @keyframes dotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } @keyframes urgencyFlash { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* -------------------------------------------------------------------------- 3. BASE + LAYOUT -------------------------------------------------------------------------- */ .krg-review { /* Adapted from the mockup, where this was the single page-level wrapper. Here it sits on every block root, including the position:fixed sticky bar, so it must carry only typography — `min-height: 100%` made the sticky bar a full-viewport block, and the page ground now lives on body.krg-review-page instead of being repainted per block. */ font-family: var(--krg-font); color: var(--krg-text); } .krg-review *, .krg-review *::before, .krg-review *::after { box-sizing: border-box; } /* Added for this site: EWWW Image Optimizer rewrites every image into . That wrapper becomes the flex/grid item while all the sizing rules below target the inside it, so without this the design's image layout never applies. `display: contents` drops the wrapper from layout and hands the box back to the . */ .krg-review picture { display: contents; } /* Two more EWWW side effects, both of which only show up as spacing. `display: contents` above promotes *both* of a 's children to flex/grid items — the and the — and EWWW adds a