Design → Dev Handover

01Πού τρέχει τι measured 2026-08-02

Ο χάρτης. Το μόνο που αλλάζει ανά breakpoint είναι μέγεθος — καμία τοποθέτηση δεν είναι desktop-only ή mobile-only. Αυτό είναι εύρημα του audit, όχι υπόθεση: το V8 υπάρχει στο DOM της κάρτας προγνωστικού αλλά είναι display:none και στα δύο breakpoints, γι' αυτό δεν είναι εδώ.

02V7 — brand pill με selection Και τα δύο

Τρέχει σε 3 σημεία: το hero CTA και τα δύο της «Προοπτικής αγώνα». Η μόνη διαφορά desktop/mobile είναι πλάτος και 4px ύψος — ίδιο markup, ίδιο variant. Το selection (.bodd-lbl) είναι η αγορά, χωρισμένη από την απόδοση με .bodd-sep.

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

Mobile — 113×44 12.00 ίδιες classes · 113 × 44 · ραδιό 12, padding 6, mark 28×16

Άλλος operator 12.00 αλλάζει μόνο η .bo-* class

03V6 — brand pill, bare Και τα δύο

Ένα σημείο: η κάρτα προγνωστικού. 197×48 και στα δύο breakpoints — είναι το μόνο control που δεν αλλάζει καθόλου. Δεν έχει selection label: η επιλογή «1 & Over 2.5» είναι ήδη ο τίτλος της κάρτας αριστερά, οπότε μέσα στο pill θα ήταν διπλή.

Desktop & mobile — 197×48 3.10 .bodd--pill (χωρίς --sel) · 197 × 48

04V1 — neutral card, ΧΩΡΙΣ bookmaker No bookmaker

Το control των «Πιθανοτήτων αγώνα» — 7 markets στη σειρά. Δεν ονομάζει στοιχηματική: λευκή κάρτα, 41px ύψος, και το πλάτος κάνει hug στο περιεχόμενο (μετρημένο 69–98px desktop, 67–178px mobile — το φαρδύ είναι market με μεγάλο label). Η απόδοση είναι Roboto Bold 14 σε #1A1A1A — όχι Mono, όχι πορτοκαλί: αυτά αποσύρθηκαν στις 2026-07-30.

05Player card CTA — ΧΩΡΙΣ bookmaker No bookmaker

Το CTA μέσα στην κάρτα παίκτη (γήπεδο → tap/hover σε παίκτη). Δεν είναι .modd ούτε .bodd — είναι δική του γραμμή (.plpop-bet) με τρία μέρη: label «Πρόταση» (9/700, Primary 600), το market, και η απόδοση σε σκούρο chip (Roboto Mono, bg #1A1A1A, radius 6). Τρέχει και στα δύο breakpoints, αλλά με άλλο chrome γύρω του: desktop = popover 232px, mobile = centred modal 320px (άλλαξε από bottom sheet στις 2026-08-01).

06Pinned slim banner — odd chip Και τα δύο

Όταν καρφιτσώνεται η μπάρα, η φαρδιά προσφορά γίνεται μία γραμμή: label, το .ps-od chip με pick + απόδοση, και το «ΠΑΙΞΕ ΝΟΜΙΜΑ*». Δεν έχει logo — ο operator είναι το χρώμα της ίδιας της μπάρας (το .bo-<operator> δίνει το --bk), γιατί wordmark πάνω στο brand fill έλεγε δύο φορές το ίδιο.

07Operator / sponsor rules

Ένας sponsor ανά σελίδα, page-level config — ποτέ user control. Ο operator μπαίνει ΜΟΝΟ με .bo-<operator> class και το χρώμα δεν τιντάρεται σε κανένα state.

• Το .bo-<operator> πρέπει να ταιριάζει ακριβώς με το filename του asset (fonbet → plain-light/fonbet.svg). Αναντιστοιχία = ορατή ραφή.
• Light fills (interwetten, pamestoixima, winmasters) δεν σηκώνουν λευκό κείμενο: παίρνουν .is-lt + logo από plain-dark/.
• Sportingbet: μην το κάνετε ship σε brand fill — το #1E87C9 αποτυγχάνει AA και με λευκό και με ink.
• Hover δεν σκουραίνει το brand χρώμα — βαθαίνει το bevel. Pressed είναι translateY(1px), όχι scale().

08Markup — copy/paste

Όλα τα παρακάτω είναι το πραγματικό DOM από τη σελίδα, όπως εξήχθη στις 2026-08-02 — όχι ξαναγραμμένο παράδειγμα.

<!-- 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

• Πάντα title + aria-label στα V6/V7: το control δείχνει μόνο αριθμό, οπότε χωρίς αυτά ένα screen reader ακούει «2.00» χωρίς αγορά ή operator. Μορφή: <market> — <operator>.
• Ο διαχωριστής .bodd-sep είναι aria-hidden — είναι διακοσμητικός.
• ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ υποχρεωτικό όπου ονομάζεται operator (V6, V7, slim banner). V1 και player CTA εξαιρούνται.
• Tap targets: το player CTA είναι 52px σε mobile. Το V1 στα 41px είναι κάτω από το 44px guideline — συνειδητή απόφαση του DS για πυκνές σειρές αποδόσεων.
• Όλα τα controls είναι <a> με target="_blank" rel="noopener".

10Τι ΔΕΝ τρέχει (αφαιρέθηκε)

Για να μην ψάχνει κανείς: αυτά ήταν στο προηγούμενο handover και δεν χρησιμοποιούνται στη σελίδα ανάλυσης. Τα specs και το CSS τους αφαιρέθηκαν.

11Build checklist

• Και οι δύο σελίδες: foxbet-responsive.html και foxbet-responsive-live.html — τα CTA blocks είναι byte-identical.
• V7 σε 3 σημεία (hero + 2× Προοπτική), V6 σε 1 (κάρτα προγνωστικού), V1 σε 7 markets.
• Το .bo-<operator> ταιριάζει με το filename· logo από plain-light/.
• ΕΕΕΠ line κάτω από κάθε branded control· όχι κάτω από V1 / player CTA.
• title + aria-label σε κάθε control.
• Player CTA: 36px desktop / 52px mobile, μέσα σε popover 232px / modal 320px.
• Slim chip: 26px ύψος, ένα font (Mono) για pick + απόδοση.
• Sportingbet: μη ship σε brand fill (AA fail).