dembrandt 0.12.3 → 0.12.6

package/README.md

@@ -45,11 +45,12 @@ Or add to your project's `.mcp.json`:
 
 ## What to expect from extraction?
 
-- Colors (semantic, palette, CSS variables)
+- Colors (semantic, palette, CSS variables, gradients)
 - Typography (fonts, sizes, weights, sources)
 - Spacing (margin/padding scales)
 - Borders (radius, widths, styles, colors)
 - Shadows
+- Motion (duration scale, easing curves, hover patterns per component type)
 - Components (buttons, badges, inputs, links)
 - Breakpoints
 - Icons & frameworks
@@ -134,13 +135,15 @@ The DTCG format is an industry-standard JSON schema that can be consumed by desi
 
 ### DESIGN.md
 
-Use `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file, a plain-text design system document readable by AI agents.
+Use `--design-md` to generate a [DESIGN.md](https://stitch.withgoogle.com/docs/design-md) file, a plain-text design system document readable by AI agents. The export follows Google's DESIGN.md draft format: YAML design tokens in front matter plus ordered Markdown guidance sections.
 
 ```bash
 dembrandt example.com --design-md
 # Saves to: output/example.com/DESIGN.md
 ```
 
+DESIGN.md reports only what Dembrandt observed on the source site. Exact values (colors, typography, spacing, radii, shadows) live in the YAML front matter when available, and the Markdown body adds human-readable context. Sections with no extracted evidence are omitted rather than filled with invented defaults. For example, the elevation section is dropped when the site uses no box-shadow tokens.
+
 ### WCAG Contrast Analysis
 
 Use `--wcag` to check accessibility contrast ratios across the page. Unlike palette-based checkers, dembrandt walks the actual DOM and finds what color is rendered on top of what background — per element.
@@ -151,6 +154,24 @@ dembrandt stripe.com --wcag
 
 Returns every text/background pair with contrast ratio and WCAG 2.1 grade (AA, AA-Large, AAA, or fail), sorted by how often each pair appears. Results are shown in terminal and included in JSON output as `wcag`.
 
+Also captures **interactive state contrast**: dembrandt simulates hover, focus, and disabled states on buttons, links, and inputs and checks contrast on each state. State pairs are tagged `[hover]`, `[focus]`, or `[disabled]` in output so you can catch contrast failures that only appear on interaction.
+
+### Motion Tokens
+
+Motion tokens are extracted automatically on every run — no flag needed. Dembrandt analyzes CSS transitions and animations across the page and returns a structured motion profile.
+
+```bash
+dembrandt stripe.com
+```
+
+Returns:
+- **Duration scale**: all unique animation durations found on the page
+- **Easing curves**: named easing types (ease-out, spring, custom cubic-bezier) with usage counts
+- **Per-context profiles**: motion behavior by component type (button, nav, card, modal, hero)
+- **Hover interaction deltas**: which properties animate on hover (transform, opacity, background, color) and the pattern (scale-up, fade-in, color-shift, slide-y)
+
+Motion data is included in JSON output as `motion` and printed in terminal under a dedicated Motion section.
+
 ### Brand Guide PDF
 
 Use `--brand-guide` to generate a printable PDF summarizing the extracted design system: colors, typography, components, and logo on a single document.

package/lib/extractors/breakpoints.js

@@ -249,3 +249,184 @@ export async function extractGradients(page) {
       .slice(0, 20);
   });
 }
+
+export async function extractMotion(page) {
+  // Phase 1: static pass — collect durations, easings, animations per semantic context
+  const staticMotion = await page.evaluate(() => {
+    function getContext(el) {
+      const tag = el.tagName.toLowerCase();
+      const role = el.getAttribute('role') || '';
+      const cls = (typeof el.className === 'string' ? el.className : '').toLowerCase();
+      const id = (el.id || '').toLowerCase();
+      const hint = cls + ' ' + id + ' ' + role;
+      if (tag === 'button' || role === 'button' || hint.includes('btn')) return 'button';
+      if (tag === 'a' || role === 'link') return 'link';
+      if (tag === 'nav' || role === 'navigation' || hint.includes('nav') || hint.includes('menu')) return 'nav';
+      if (hint.includes('modal') || hint.includes('dialog') || hint.includes('overlay') || hint.includes('drawer')) return 'modal';
+      if (hint.includes('card') || hint.includes('tile') || hint.includes('item')) return 'card';
+      if (hint.includes('hero') || hint.includes('banner') || hint.includes('header')) return 'hero';
+      if (hint.includes('tooltip') || hint.includes('popover') || hint.includes('dropdown')) return 'overlay';
+      if (tag === 'input' || tag === 'textarea' || tag === 'select') return 'input';
+      if (hint.includes('image') || hint.includes('img') || hint.includes('media') || hint.includes('video')) return 'media';
+      return 'other';
+    }
+
+    function parseDurationMs(val) {
+      if (!val || val === '0s') return 0;
+      return val.endsWith('ms') ? parseFloat(val) : parseFloat(val) * 1000;
+    }
+
+    function classifyEasing(val) {
+      if (!val) return null;
+      if (val === 'linear') return 'linear';
+      if (val === 'ease') return 'ease';
+      if (val === 'ease-in') return 'ease-in';
+      if (val === 'ease-out') return 'ease-out';
+      if (val === 'ease-in-out') return 'ease-in-out';
+      // detect spring-like: high y1/y2 overshoot
+      const m = val.match(/cubic-bezier\(([\d.]+),\s*([\d.-]+),\s*([\d.]+),\s*([\d.-]+)\)/);
+      if (m) {
+        const y1 = parseFloat(m[2]), y2 = parseFloat(m[4]);
+        if (y1 < 0 || y1 > 1 || y2 < 0 || y2 > 1) return 'spring';
+        const x1 = parseFloat(m[1]);
+        if (x1 < 0.2) return 'ease-out'; // fast start
+        if (x1 > 0.6) return 'ease-in';  // slow start
+        return 'custom';
+      }
+      return 'custom';
+    }
+
+    // per-context motion profiles
+    const contexts = {};
+    const globalDurations = new Map();
+    const globalEasings = new Map();
+    const globalAnimations = new Map();
+
+    const els = document.querySelectorAll('*');
+    let checked = 0;
+    for (const el of els) {
+      if (checked++ > 3000) break;
+      if (el.offsetWidth === 0 && el.offsetHeight === 0) continue;
+      const s = getComputedStyle(el);
+
+      const rawDurations = (s.transitionDuration || '').split(',').map(v => v.trim()).filter(v => v && v !== '0s');
+      const rawEasings = (s.transitionTimingFunction || '').split(/,(?![^(]*\))/).map(v => v.trim()).filter(Boolean);
+      const rawProps = (s.transitionProperty || '').split(',').map(v => v.trim());
+      const animName = s.animationName;
+
+      if (rawDurations.length === 0 && (!animName || animName === 'none')) continue;
+
+      const ctx = getContext(el);
+
+      // global tallies
+      rawDurations.forEach(d => {
+        const ms = parseDurationMs(d);
+        if (ms <= 0) return;
+        const e = globalDurations.get(d) || { value: d, ms, count: 0 };
+        e.count++; globalDurations.set(d, e);
+      });
+      rawEasings.forEach(e => {
+        const entry = globalEasings.get(e) || { value: e, type: classifyEasing(e), count: 0 };
+        entry.count++; globalEasings.set(e, entry);
+      });
+
+      // per-context profile
+      if (ctx !== 'other' && rawDurations.length > 0) {
+        if (!contexts[ctx]) contexts[ctx] = { durations: new Map(), easings: new Map(), props: new Map(), count: 0 };
+        const cx = contexts[ctx];
+        cx.count++;
+        rawDurations.forEach(d => { const e = cx.durations.get(d) || { value: d, ms: parseDurationMs(d), count: 0 }; e.count++; cx.durations.set(d, e); });
+        rawEasings.forEach(e => { const entry = cx.easings.get(e) || { value: e, type: classifyEasing(e), count: 0 }; entry.count++; cx.easings.set(e, entry); });
+        rawProps.forEach(p => { if (p && p !== 'all' && p !== 'none') { const e = cx.props.get(p) || { value: p, count: 0 }; e.count++; cx.props.set(p, e); } });
+      }
+
+      // animations
+      if (animName && animName !== 'none') {
+        for (const name of animName.split(',').map(v => v.trim())) {
+          if (name === 'none') continue;
+          const e = globalAnimations.get(name) || { name, duration: s.animationDuration?.split(',')[0]?.trim(), easing: s.animationTimingFunction?.split(',')[0]?.trim(), count: 0, contexts: new Set() };
+          e.count++; e.contexts.add(ctx);
+          globalAnimations.set(name, e);
+        }
+      }
+    }
+
+    // serialize
+    const serializeCtx = (cx) => ({
+      count: cx.count,
+      durations: Array.from(cx.durations.values()).sort((a, b) => b.count - a.count).slice(0, 3).map(d => d.value),
+      easing: Array.from(cx.easings.values()).sort((a, b) => b.count - a.count)[0]?.value || null,
+      easingType: Array.from(cx.easings.values()).sort((a, b) => b.count - a.count)[0]?.type || null,
+      props: Array.from(cx.props.values()).sort((a, b) => b.count - a.count).slice(0, 4).map(p => p.value),
+    });
+
+    const ctxOut = {};
+    for (const [k, v] of Object.entries(contexts)) ctxOut[k] = serializeCtx(v);
+
+    return {
+      durations: Array.from(globalDurations.values()).sort((a, b) => a.ms - b.ms),
+      easings: Array.from(globalEasings.values()).sort((a, b) => b.count - a.count).slice(0, 8),
+      animations: Array.from(globalAnimations.values()).sort((a, b) => b.count - a.count).slice(0, 8).map(a => ({ ...a, contexts: Array.from(a.contexts) })),
+      contexts: ctxOut,
+    };
+  });
+
+  // Phase 2: hover interaction deltas on a sample of interactive elements
+  const interactiveDeltas = [];
+  try {
+    const els = await page.$$('button, a, [role="button"]');
+    const sampled = els.slice(0, 12);
+    for (const el of sampled) {
+      try {
+        const visible = await el.evaluate(e => {
+          const r = e.getBoundingClientRect();
+          const s = getComputedStyle(e);
+          return r.width > 0 && r.height > 0 && s.display !== 'none' && s.visibility !== 'hidden';
+        });
+        if (!visible) continue;
+
+        const before = await el.evaluate(e => {
+          const s = getComputedStyle(e);
+          return { transform: s.transform, opacity: s.opacity, bg: s.backgroundColor, color: s.color, tag: e.tagName.toLowerCase(), text: (e.textContent || '').trim().slice(0, 30) };
+        });
+
+        await el.hover({ timeout: 800 }).catch(() => {});
+        await page.waitForTimeout(120);
+
+        const after = await el.evaluate(e => {
+          const s = getComputedStyle(e);
+          return { transform: s.transform, opacity: s.opacity, bg: s.backgroundColor, color: s.color };
+        }).catch(() => null);
+
+        if (!after) continue;
+
+        const delta = {};
+        if (after.transform !== before.transform && after.transform !== 'none') delta.transform = after.transform;
+        if (after.opacity !== before.opacity) delta.opacity = { from: before.opacity, to: after.opacity };
+        if (after.bg !== before.bg) delta.background = { from: before.bg, to: after.bg };
+        if (after.color !== before.color) delta.color = { from: before.color, to: after.color };
+
+        if (Object.keys(delta).length > 0) {
+          // classify pattern
+          let pattern = 'color-shift';
+          if (delta.transform) {
+            const t = delta.transform;
+            if (/scale\(([\d.]+)/.test(t)) {
+              const s = parseFloat(t.match(/scale\(([\d.]+)/)[1]);
+              pattern = s > 1 ? 'scale-up' : 'scale-down';
+            } else if (/translateY/.test(t)) pattern = 'slide-y';
+            else if (/translateX/.test(t)) pattern = 'slide-x';
+            else pattern = 'transform';
+          } else if (delta.opacity) {
+            pattern = parseFloat(delta.opacity.to) > parseFloat(delta.opacity.from) ? 'fade-in' : 'fade-out';
+          }
+
+          interactiveDeltas.push({ tag: before.tag, text: before.text, pattern, delta });
+        }
+      } catch { /* stale element */ }
+    }
+    await page.mouse.move(0, 0).catch(() => {});
+  } catch { /* skip */ }
+
+  return { ...staticMotion, interactiveDeltas };
+}

package/lib/extractors/colors.js

@@ -9,8 +9,10 @@ export async function extractColors(page) {
     function normalizeColor(color) {
       if (_colorMemo.has(color)) return _colorMemo.get(color);
       let result;
-      const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+      const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
       if (rgbaMatch) {
+        const alpha = rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1;
+        if (alpha < 0.05) { result = color.toLowerCase(); _colorMemo.set(color, result); return result; }
         const r = parseInt(rgbaMatch[1]).toString(16).padStart(2, "0");
         const g = parseInt(rgbaMatch[2]).toString(16).padStart(2, "0");
         const b = parseInt(rgbaMatch[3]).toString(16).padStart(2, "0");

package/lib/extractors/index.js

@@ -5,7 +5,7 @@ import { extractColors } from './colors.js';
 import { extractTypography } from './typography.js';
 import { extractSpacing, extractBorderRadius, extractBorders, extractShadows } from './spacing.js';
 import { extractButtonStyles, extractInputStyles, extractLinkStyles, extractBadgeStyles } from './components.js';
-import { extractBreakpoints, detectIconSystem, detectFrameworks, extractGradients } from './breakpoints.js';
+import { extractBreakpoints, detectIconSystem, detectFrameworks, extractGradients, extractMotion } from './breakpoints.js';
 import { extractWcagPairs } from './colors.js';
 
 /** @typedef {import('../types.js').BrandingResult} BrandingResult */
@@ -185,6 +185,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       frameworks,
       siteName,
       gradients,
+      motion,
     ] = await Promise.all([
       extractLogo(page, url),
       extractColors(page),
@@ -202,6 +203,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       detectFrameworks(page),
       extractSiteName(page),
       extractGradients(page),
+      extractMotion(page),
     ]);
 
     spinner.stop();
@@ -220,6 +222,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     console.log(iconSystem.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Icon systems: ${iconSystem.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Icon systems: 0 detected`));
     console.log(frameworks.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Frameworks: ${frameworks.length} detected`) : chalk.hex('#FFB86C')(`  ⚠ Frameworks: 0 detected`));
     console.log(gradients.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Gradients: ${gradients.length} found`) : chalk.hex('#8BE9FD')(`  · Gradients: 0 found`));
+    console.log(motion.durations.length > 0 ? chalk.hex('#50FA7B')(`  ✓ Motion: ${motion.durations.length} durations, ${motion.easings.length} easings`) : chalk.hex('#8BE9FD')(`  · Motion: none detected`));
     console.log();
 
     // Hover/focus state extraction
@@ -244,6 +247,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     `);
 
     const sampled = interactiveElements.slice(0, 20);
+    const interactiveStatePairs = []; // { fg, bg, state, tag } — raw rgb strings, normalized later
 
     for (const element of sampled) {
       try {
@@ -256,17 +260,35 @@ export async function extractBranding(url, spinner, browser, options = {}) {
         if (!isVisible) continue;
 
         const beforeState = await element.evaluate(el => {
+          function findBg(node) {
+            while (node && node.tagName !== 'HTML') {
+              const bg = getComputedStyle(node).backgroundColor;
+              if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+              node = node.parentElement;
+            }
+            return null;
+          }
           const computed = getComputedStyle(el);
-          return { color: computed.color, backgroundColor: computed.backgroundColor, borderColor: computed.borderColor, tag: el.tagName.toLowerCase() };
+          return { color: computed.color, backgroundColor: computed.backgroundColor, resolvedBg: findBg(el), borderColor: computed.borderColor, tag: el.tagName.toLowerCase() };
         });
 
-        await element.hover({ timeout: 1000 * timeoutMultiplier }).catch(() => {});
+        const hovered = await element.hover({ timeout: 1000 * timeoutMultiplier }).then(() => true).catch(() => false);
         await page.waitForTimeout(100 * timeoutMultiplier);
 
         const afterHover = await element.evaluate(el => {
+          function findBg(node) {
+            while (node && node.tagName !== 'HTML') {
+              const bg = getComputedStyle(node).backgroundColor;
+              if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+              node = node.parentElement;
+            }
+            return null;
+          }
           const computed = getComputedStyle(el);
-          return { color: computed.color, backgroundColor: computed.backgroundColor, borderColor: computed.borderColor };
-        });
+          return { color: computed.color, backgroundColor: computed.backgroundColor, resolvedBg: findBg(el), borderColor: computed.borderColor };
+        }).catch(() => null);
+
+        if (!afterHover) continue;
 
         if (afterHover.color !== beforeState.color && afterHover.color !== 'rgba(0, 0, 0, 0)' && afterHover.color !== 'transparent') {
           hoverFocusColors.push({ color: afterHover.color, property: 'color', state: 'hover', element: beforeState.tag });
@@ -284,13 +306,28 @@ export async function extractBranding(url, spinner, browser, options = {}) {
           });
         }
 
-        if (['input', 'textarea', 'select', 'button'].includes(beforeState.tag)) {
+        // Collect hover contrast pair only if hover actually changed styles
+        const hoverFg = afterHover.color;
+        const hoverBg = afterHover.resolvedBg;
+        if (hovered && hoverFg && hoverBg && (hoverFg !== beforeState.color || hoverBg !== beforeState.resolvedBg)) {
+          interactiveStatePairs.push({ fg: hoverFg, bg: hoverBg, state: 'hover', tag: beforeState.tag });
+        }
+
+        if (['input', 'textarea', 'select', 'button', 'a'].includes(beforeState.tag)) {
           try {
             await element.focus({ timeout: 500 * timeoutMultiplier });
             await page.waitForTimeout(100 * timeoutMultiplier);
             const afterFocus = await element.evaluate(el => {
+              function findBg(node) {
+                while (node && node.tagName !== 'HTML') {
+                  const bg = getComputedStyle(node).backgroundColor;
+                  if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+                  node = node.parentElement;
+                }
+                return null;
+              }
               const computed = getComputedStyle(el);
-              return { color: computed.color, backgroundColor: computed.backgroundColor, borderColor: computed.borderColor, outlineColor: computed.outlineColor };
+              return { color: computed.color, backgroundColor: computed.backgroundColor, resolvedBg: findBg(el), borderColor: computed.borderColor, outlineColor: computed.outlineColor };
             });
             if (afterFocus.outlineColor && afterFocus.outlineColor !== 'rgba(0, 0, 0, 0)' && afterFocus.outlineColor !== 'transparent' && afterFocus.outlineColor !== beforeState.color) {
               hoverFocusColors.push({ color: afterFocus.outlineColor, property: 'outline-color', state: 'focus', element: beforeState.tag });
@@ -304,11 +341,44 @@ export async function extractBranding(url, spinner, browser, options = {}) {
                 }
               });
             }
+
+            // Collect focus contrast pair
+            const focusFg = afterFocus.color;
+            const focusBg = afterFocus.resolvedBg;
+            if (focusFg && focusBg && (focusFg !== beforeState.color || focusBg !== beforeState.resolvedBg)) {
+              interactiveStatePairs.push({ fg: focusFg, bg: focusBg, state: 'focus', tag: beforeState.tag });
+            }
           } catch (e) {}
         }
       } catch (e) {}
     }
 
+    // Collect disabled element pairs
+    try {
+      const disabledPairs = await page.evaluate(() => {
+        function findBg(node) {
+          while (node && node.tagName !== 'HTML') {
+            const bg = getComputedStyle(node).backgroundColor;
+            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
+            node = node.parentElement;
+          }
+          return null;
+        }
+        const els = document.querySelectorAll('button[disabled], input[disabled], [aria-disabled="true"], [disabled]');
+        const pairs = [];
+        for (const el of Array.from(els).slice(0, 10)) {
+          const rect = el.getBoundingClientRect();
+          if (rect.width === 0 || rect.height === 0) continue;
+          const s = getComputedStyle(el);
+          const fg = s.color;
+          const bg = findBg(el);
+          if (fg && bg) pairs.push({ fg, bg, state: 'disabled', tag: el.tagName.toLowerCase() });
+        }
+        return pairs;
+      });
+      interactiveStatePairs.push(...disabledPairs);
+    } catch (e) {}
+
     await page.mouse.move(0, 0).catch(() => {});
 
     // Batch-normalize hover/focus colors via browser canvas to handle oklab/oklch/lab
@@ -425,9 +495,44 @@ export async function extractBranding(url, spinner, browser, options = {}) {
     if (options.wcag) {
       spinner.start("Analyzing WCAG contrast pairs...");
       try {
+        const { relativeLuminance } = await import('../colors.js');
+
+        function calcPair(fgRaw, bgRaw, extra = {}) {
+          const toHex = (c) => {
+            const m = c && c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+            if (!m) return null;
+            return `#${parseInt(m[1]).toString(16).padStart(2,'0')}${parseInt(m[2]).toString(16).padStart(2,'0')}${parseInt(m[3]).toString(16).padStart(2,'0')}`;
+          };
+          const fg = toHex(fgRaw) || fgRaw;
+          const bg = toHex(bgRaw) || bgRaw;
+          if (!fg || !bg || fg === bg) return null;
+          const l1 = relativeLuminance(fg);
+          const l2 = relativeLuminance(bg);
+          if (l1 === null || l2 === null) return null;
+          const lighter = Math.max(l1, l2);
+          const darker = Math.min(l1, l2);
+          const ratio = Math.round((lighter + 0.05) / (darker + 0.05) * 100) / 100;
+          return { fg, bg, ratio, aa: ratio >= 4.5, aaLarge: ratio >= 3, aaa: ratio >= 7, ...extra };
+        }
+
         wcag = await extractWcagPairs(page);
+
+        // Deduplicate and score interactive state pairs
+        const seenState = new Set();
+        for (const { fg, bg, state, tag } of interactiveStatePairs) {
+          const key = `${state}/${fg}/${bg}`;
+          if (seenState.has(key)) continue;
+          seenState.add(key);
+          const pair = calcPair(fg, bg, { state, tag, source: 'state' });
+          if (pair) wcag.push(pair);
+        }
+
         spinner.stop();
-        console.log(chalk.hex('#50FA7B')(`  ✓ WCAG: ${wcag.filter(p => p.aa).length}/${wcag.length} pairs pass AA`));
+        const staticPassing = wcag.filter(p => !p.source && p.aa).length;
+        const staticTotal = wcag.filter(p => !p.source).length;
+        const statesFailing = wcag.filter(p => p.source === 'state' && !p.aa).length;
+        console.log(chalk.hex('#50FA7B')(`  ✓ WCAG: ${staticPassing}/${staticTotal} pairs pass AA`) +
+          (statesFailing ? chalk.hex('#FFB86C')(` · ${statesFailing} state pair(s) fail`) : ''));
       } catch {
         spinner.stop();
       }
@@ -447,6 +552,7 @@ export async function extractBranding(url, spinner, browser, options = {}) {
       borders,
       shadows,
       gradients,
+      motion,
       components: { buttons, inputs, links, badges },
       breakpoints,
       iconSystem,

package/lib/extractors/logo.js

@@ -161,14 +161,16 @@ export async function extractLogo(page, url) {
 
       if (rect.top < 200) score += 10;
       if (rect.left < 400) score += 10;
+      if (rect.top > 800) score -= 30;   // deeply buried elements are unlikely primary logos
 
       // Penalize images hosted on a different domain (CDN paths on same domain are fine)
       if (el.tagName === 'IMG') {
         try {
           const srcHost = new URL(el.src).hostname.replace('www.', '')
           const pageHost = new URL(baseUrl).hostname.replace('www.', '')
-          // If neither is a subdomain/CDN of the other, it's third-party
-          if (!srcHost.endsWith(pageHost) && !pageHost.endsWith(srcHost)) score -= 60
+          const apexOf = h => h.split('.').slice(-2).join('.')
+          // Allow same apex domain (e.g. digitalhub.fifa.com and fifa.com share apex "fifa.com")
+          if (!srcHost.endsWith(pageHost) && !pageHost.endsWith(srcHost) && apexOf(srcHost) !== apexOf(pageHost)) score -= 60
         } catch {}
       }
 
@@ -205,7 +207,23 @@ export async function extractLogo(page, url) {
       if (el.tagName === 'IMG') {
         // Handle picture element -- prefer highest-res source
         const picture = el.closest('picture');
-        let src = el.src;
+        // Prefer currentSrc (browser-resolved after srcset/lazy), fallback to src attr, then parse srcset manually
+        let src = el.currentSrc || el.src;
+        const srcAttr = el.getAttribute('src') || '';
+        const srcsetAttr = el.getAttribute('srcset') || '';
+
+        // If src looks broken (just params, or resolves to baseUrl), parse srcset manually
+        if (!src || src === baseUrl || src === window.location.href || srcAttr.startsWith('width:') || srcAttr.startsWith('height:')) {
+          if (srcsetAttr) {
+            const entries = srcsetAttr.split(',').map(s => {
+              const parts = s.trim().split(/\s+/);
+              return { url: parts[0], w: parseFloat(parts[1]) || 0 };
+            }).filter(e => e.url && !e.url.startsWith('width:'));
+            entries.sort((a, b) => b.w - a.w);
+            if (entries[0]) src = new URL(entries[0].url, baseUrl).href;
+          }
+        }
+
         if (picture) {
           const sources = picture.querySelectorAll('source');
           for (const source of sources) {