Design → Dev Handover

01Δύο μορφές, ένα markup measured 2026-08-02

Το DOM είναι το ίδιο στα δύο breakpoints — ουδεμία αλλαγή markup, μόνο CSS. Η κάρτα αλλάζει από μία σειρά (desktop: pick αριστερά, CTA δεξιά) σε στήλη (mobile: pick κεντραρισμένο, CTA κάτω).

02Desktop ≥1200px

Μία σειρά: pick + αριθμοί αριστερά, CTA + ΕΕΕΠ δεξιά. Το pick είναι ο hero της κάρτας (24px), οι αριθμοί σε Roboto Mono με tabular figures, και μια 3px μπάρα Primary→Secondary σημαδεύει την επιλογή.

Desktop · open · tip card 808×126

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Πιθανή επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

.vp-bet · 808 × 126 · padding 20/22 · DS colour shadow

03Mobile ≤1199px

Στήλη: label + pick κεντραρισμένα, μετά η σειρά πονταρίσματος χωρισμένη αριστερά/δεξιά, μετά το CTA και τέλος η γραμμή ΕΕΕΠ. Το pick μένει 16px — σε οθόνη 390px ένα 24px τίτλος σπάει σε δύο σειρές.

Mobile · open · tip card 324×187

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Πιθανή επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

.vp-bet · 324 × 187 · padding 17 · χωρίς accent bar

04Τα τρία states Και τα δύο

Κάθε state αλλάζει τρία πράγματα και τίποτα άλλο: class στην κάρτα, σήμα μέσα στον τίτλο, και το label+χρώμα του δεύτερου αριθμού. Κάθε label συμφωνεί με το νούμερό του — γι' αυτό το lost λέει «Κουβάς» και όχι «Πιθανή επιστροφή» δίπλα σε −10.00.

Desktop · won

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

Desktop · lost

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Κουβάς: −10.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

Mobile · won

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

Mobile · lost

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Κουβάς: −10.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

05Το block γύρω από το tip

Το tip δεν ζει μόνο του: κάθεται μέσα στο .vpred, με header αναλυτών και το κείμενο εκτίμησης πάνω από αυτό. Η σειρά ορίζεται με order, ώστε το DOM (και η σειρά για screen readers) να μείνει header → tip → κείμενο.

• Header: δύο φωτογραφίες (56/44px, radius 12/10) χωρίς overlap, χωρισμένες με 1px --line · eyebrow «ΕΚΤΙΜΗΣΗ ΕΙΔΙΚΩΝ» 12/700 uppercase σε --accent · ονόματα 18/700 (links) · «Αναλυτές Foxbet» 14/400 --mut.
• Κείμενο: 14/400, line-height 22.68px, clamp σε 3 σειρές με «Δες περισσότερα». Ευθυγραμμισμένο με τις φωτογραφίες (--tipinset:0, 2026-08-02) — το παλιό 12px inset δεν ευθυγραμμιζόταν πλέον με τίποτα.
• Φλόγα: ένα conic-gradient spark τρέχει στο περίγραμμα όσο η κάρτα είναι στο viewport (.is-lit από IntersectionObserver) και σταματά μόλις ανοίξει το κείμενο (.is-reading) · prefers-reduced-motion τη σβήνει.

Όλο το block · desktop · 842×345

Εκτίμηση ειδικών

Κώστας Φίλιος & Γιάννης Μάρκουλας

Αναλυτές Foxbet

Η Ολλανδία μπαίνει φαβορί με δεδομένη την ποιότητα στην επίθεση και τη συνεχή πίεση ψηλά στο γήπεδο. Η Ιαπωνία ωστόσο δείχνει συνέπεια στο σκοράρισμα εκτός έδρας, στοιχείο που ανεβάζει αισθητά την πιθανότητα για γκολ και στις δύο εστίες.

Δες περισσότερα

Το προγνωστικό

1 & Over 2.5

Ποντάρισμα: 10.00Πιθανή επιστροφή: 31.00

3.10

ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

06Markup — copy/paste

Ένα markup για τα δύο breakpoints. Το state μπαίνει με class στο .vp-bet και οι δύο αριθμοί είναι ζευγάρια label+value σε .vp-kv — χωρίς αυτό, στο desktop flex row κάθε λέξη γίνεται ξεχωριστό flex item και το gap πέφτει ανάμεσα στο label και τον αριθμό του.

<!-- ΤΟ TIP. Το state είναι is-open | is-won | is-lost. -->
<div class="vp-bet is-open">
  <div class="vp-bet-in">
    <div class="vp-bet-l">
      <div class="vp-sel">
        <p class="vp-kicker">Το προγνωστικό</p>
        <!-- settled: το σήμα μπαίνει ΜΕΣΑ στο h3, πριν το κείμενο -->
        <h3 class="vp-ttl">1 &amp; Over 2.5</h3>
      </div>
      <p class="vp-stake">
        <span class="vp-kv">Ποντάρισμα: <b>10.00</b></span>
        <span class="vp-kv">Πιθανή επιστροφή: <b>31.00</b></span>
      </p>
    </div>
    <div class="vp-odds">
      <!-- odds-cta V6: .bodd.bodd--pill.bo-<operator> — 197×48 -->
    </div>
  </div>
  <p class="vp-reg">ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ</p>
</div>

<!-- SETTLED — τι αλλάζει στο won: -->
<h3 class="vp-ttl"><span class="vp-ic"><img src="assets/won.svg" alt="Κέρδισε"
     width="14" height="14"></span>1 &amp; Over 2.5</h3>
<span class="vp-kv">Επιστροφή: <b class="vp-v--win">31.00</b></span>
<!-- και στο lost: «Κουβάς» + <b class="vp-v--loss">−10.00</b> -->

07Accessibility & regulatory

• ΕΕΕΠ | 21+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ υποχρεωτικό — το tip ονομάζει operator στο CTA. Η γραμμή είναι Verdana 12.27px / line-height 19 — αυτό είναι το Figma αυτούσιο και δεν το ομογενοποιούμε: είναι regulatory copy και υπογράφεται όπως ρεντάρει.
• Το σήμα αποτελέσματος έχει πραγματικό alt («Κέρδισε» / «Έχασε»): το χρώμα δεν είναι ο μόνος φορέας του αποτελέσματος (SC 1.4.1).
• Τα ονόματα των αναλυτών είναι links στο ίδιο weight με τον τίτλο — underline μόνο στο hover.
• Το «Δες περισσότερα» είναι <button>, όχι link, και στο κλείσιμο επαναφέρει το scroll στην κορυφή της κάρτας με scroll-margin-top.
• Οι αριθμοί στο desktop είναι font-variant-numeric: tabular-nums — χωρίς αυτό το «10.00» και το «31.00» δεν έχουν ίδιο οπτικό πλάτος.

08Τι αφαιρέθηκε

Το προηγούμενο handover (v1.4.0) περιέγραφε το .prd card σε 10 renditions — mobile/desktop × open/lost × single/bet-builder/outright + sidebar. Κανένα από αυτά δεν ρεντάρει στη σελίδα ανάλυσης.

09Build checklist

• Ένα markup, δύο μορφές με CSS. Μην διπλασιάσετε το DOM ανά breakpoint.
• Desktop: pick 24px, αριθμοί Roboto Mono 16 tabular, 3px accent bar, DS colour shadow. Mobile: pick 16px κεντραρισμένο, χωρίς bar, αριθμοί Roboto 12.
• Τα ζευγάρια πονταρίσματος σε .vp-kv — όχι γυμνά text nodes.
• State = class στο .vp-bet + σήμα μέσα στο .vp-ttl + label/χρώμα στον 2ο αριθμό. Το ύψος δεν αλλάζει.
• CTA = odds-cta V6 (197×48) μέσα στο .vp-odds. ΕΕΕΠ γραμμή πάντα.
• Κείμενο και φωτογραφίες στην ίδια κάθετη γραμμή (inset 0).
• Και οι δύο σελίδες (pregame + live) — byte-identical.
• Μην σβήσετε το κρυμμένο #tipCard — βλ. §08.