Design → Dev Handover

01What runs where measured 2026-08-02

The map. The only thing that changes per breakpoint is size — no placement is desktop-only or mobile-only. That is an audit finding, not an assumption: the V8 exists in the tip card's DOM but is display:none at both breakpoints, which is why it is not here.

02V7 — brand pill with selection Both

Runs at 3 places: the hero CTA and the two in «Προοπτική αγώνα». The only desktop/mobile difference is width and 4px of height — same markup, same variant. The selection (.bodd-lbl) is the market, separated from the odd by .bodd-sep.

Desktop — 225×48 12.00 .bodd--pill.bodd--sel · 225 × 48

Mobile — 113×44 12.00 same classes · 113 × 44 · radius 12, padding 6, mark 28×16

Another operator 12.00 only the .bo-* class changes

03V6 — brand pill, bare Both

One place: the tip card. 197×48 at both breakpoints — it is the only control that does not change at all. It has no selection label: the pick «1 & Over 2.5» is already the card's title to its left, so repeating it inside the pill would be duplication.

Desktop & mobile — 197×48 3.10 .bodd--pill (without --sel) · 197 × 48

04V1 — neutral card, NO bookmaker No bookmaker

The control for «Πιθανότητες αγώνα» — 7 markets in a row. It names no bookmaker: a white card, 41px tall, and the width hugs its content (measured 69–98px desktop, 67–178px mobile — the wide one is a market with a long label). The odd is Roboto Bold 14 in #1A1A1A — not Mono, not orange: those were retired on 2026-07-30.

05Player card CTA — NO bookmaker No bookmaker

The CTA inside the player card (pitch → tap/hover a player). It is not .modd nor .bodd — it is its own row (.plpop-bet) with three parts: the «Πρόταση» label (9/700, Primary 600), the market, and the odd in a dark chip (Roboto Mono, bg #1A1A1A, radius 6). It runs at both breakpoints, but with different chrome around it: desktop = popover 232px, mobile = centred modal 320px (changed from a bottom sheet on 2026-08-01).

06Pinned slim banner — odd chip Both

When the bar pins, the wide offer becomes one line: label, the .ps-od chip with pick + odd, and «ΠΑΙΞΕ ΝΟΜΙΜΑ*». It carries no logo — the operator IS the colour of the bar itself (the .bo-<operator> supplies the --bk), because a wordmark on the brand fill said the same thing twice.

07Operator / sponsor rules

One sponsor per page, page-level config — never a user control. The operator is applied ONLY via the .bo-<operator> class, and the colour is never tinted in any state.

• The .bo-<operator> must match exactly the asset's filename (fonbet → plain-light/fonbet.svg). A mismatch = a visible seam.
• Light fills (interwetten, pamestoixima, winmasters) cannot carry white text: they take .is-lt + the logo from plain-dark/.
• Sportingbet: do not ship it on a brand fill — its #1E87C9 fails AA with both white and ink.
• Hover does not darken the brand colour — it deepens the bevel. Pressed is translateY(1px), not scale().

08Markup — copy/paste

Everything below is the real DOM from the page, as extracted on 2026-08-02 — not a rewritten example.

<!-- V7 — hero & «Προοπτική αγώνα». Ίδιο και στα δύο breakpoints. -->
<a class="bodd bodd--pill bodd--sel bo-fonbet" href="…" target="_blank" rel="noopener"
   title="Ολλανδία — fonbet" aria-label="Ολλανδία — fonbet">
  <span class="bodd-bk"><img src="logo-assets/plain-light/fonbet.svg" alt="fonbet"></span>
  <span class="bodd-in">
    <span class="bodd-lbl">1</span>
    <span class="bodd-sep" aria-hidden="true"></span>
    <span class="bodd-od">2.00</span>
  </span>
</a>

<!-- V6 — κάρτα προγνωστικού. Χωρίς .bodd-lbl / .bodd-sep. -->
<a class="bodd bodd--pill bo-fonbet" href="…" title="1 &amp; Over 2.5 — fonbet">
  <span class="bodd-bk"><img src="logo-assets/plain-light/fonbet.svg" alt="fonbet"></span>
  <span class="bodd-in"><span class="bodd-od">3.10</span></span>
</a>

<!-- V1 — «Πιθανότητες αγώνα». NO bookmaker, NO ΕΕΕΠ line. -->
<a class="modd" href="…" title="Ακριβές σκορ 1 - 0" aria-label="Ακριβές σκορ 1 - 0">
  <span class="modd-card"><span class="od">7.00</span></span>
</a>

<!-- Player card CTA — NO bookmaker. Τελευταία γραμμή του popover/modal. -->
<a class="plpop-bet" href="…" target="_blank" rel="noopener">
  <span class="plpop-bl">Πρόταση</span>
  <span class="plpop-bm">Clean sheet</span>
  <span class="plpop-bo">2.49</span>
</a>

<!-- Pinned slim banner chip. Ο operator είναι το χρώμα της μπάρας. -->
<a class="promo-slim bo-fonbet" href="…">
  <div class="ps-odds">
    <span class="ps-tiplbl">Το Προγνωστικό μας</span>
    <span class="ps-od" data-tipstick><span>1 &amp; Over 2.5</span>3.10</span>
  </div>
  <span class="ps-cta">ΠΑΙΞΕ ΝΟΜΙΜΑ*</span>
</a>

09Accessibility & regulatory

• Always title + aria-label on V6/V7: the control shows nothing but a number, so without them a screen reader hears «2.00» with no market and no operator. Format: <market> — <operator>.
• The separator .bodd-sep is aria-hidden — it is decorative.
• ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ mandatory wherever an operator is named (V6, V7, slim banner). V1 and the player CTA are exempt.
• Tap targets: the player CTA is 52px on mobile. V1 at 41px is below the 44px guideline — a deliberate decision by the DS, for dense odds rows.
• All controls are <a> with target="_blank" rel="noopener".

10What does NOT run (removed)

So nobody goes looking: these were in the previous handover and are not used on the analysis page. Their specs and CSS were removed.

11Build checklist

• Both pages: foxbet-responsive.html and foxbet-responsive-live.html — the CTA blocks are byte-identical.
• V7 in 3 places (hero + 2× Προοπτική), V6 in 1 (tip card), V1 across 7 markets.
• The .bo-<operator> matches the filename; logo from plain-light/.
• ΕΕΕΠ line under every branded control; not under V1 / the player CTA.
• title + aria-label on every control.
• Player CTA: 36px desktop / 52px mobile, inside a 232px popover / 320px modal.
• Slim chip: 26px tall, one font (Mono) for pick + odd.
• Sportingbet: do not ship on a brand fill (AA fail).