Design → Dev Handover

01Two forms, one markup measured 2026-08-02

The DOM is identical at both breakpoints — no markup change at all, only CSS. The card goes from one row (desktop: pick left, CTA right) to a column (mobile: pick centred, CTA below).

02Desktop ≥1200px

One row: pick + numbers on the left, CTA + ΕΕΕΠ on the right. The pick is the card's hero (24px), the numbers are Roboto Mono with tabular figures, and a 3px Primary→Secondary bar marks the selection.

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

A column: label + pick centred, then the stake row split left/right, then the CTA and finally the ΕΕΕΠ line. The pick stays at 16px — on a 390px screen a 24px title breaks onto two lines.

Mobile · open · tip card 324×187

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

1 & Over 2.5

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

3.10

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

.vp-bet · 324 × 187 · padding 17 · no accent bar

04The three states Both

Each state changes three things and nothing else: a class on the card, a badge inside the title, and the label plus colour of the second number. Every label agrees with its own number — which is why lost says «Κουβάς» and not «Πιθανή επιστροφή» beside a −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+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ

05The block around the tip

The tip does not live alone: it sits inside .vpred, with the analyst header and the verdict copy above it. The order is set with order, so the DOM (and the screen-reader order) stays header → tip → copy.

• Header: two photos (56/44px, radius 12/10) with no overlap, separated by a 1px --line · eyebrow «ΕΚΤΙΜΗΣΗ ΕΙΔΙΚΩΝ» 12/700 uppercase in --accent · names 18/700 (links) · «Αναλυτές Foxbet» 14/400 --mut.
• Copy: 14/400, line-height 22.68px, clamped to 3 lines with «Δες περισσότερα». Aligned with the photos (--tipinset:0, 2026-08-02) — the old 12px inset no longer lined up with anything.
• Spark: a conic-gradient spark travels the border while the card is in the viewport (.is-lit from an IntersectionObserver) and stops the moment the copy is expanded (.is-reading) · prefers-reduced-motion disables it.

The whole block · desktop · 842×345

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

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

Αναλυτές Foxbet

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

Στον άξονα του κέντρου, η ολλανδική ομάδα έχει το πλεονέκτημα τόσο στην κατοχή όσο και στη δημιουργία φάσεων, με τους ακραίους μέσους να τροφοδοτούν συνεχώς την επίθεση. Η Ιαπωνία θα προσπαθήσει να απαντήσει με γρήγορες μεταβάσεις και πρεσάρισμα, κάτι που ιστορικά την έχει βοηθήσει απέναντι σε τεχνικά ανώτερους αντιπάλους. Παρ' όλα αυτά, η αμυντική γραμμή των Ασιατών δείχνει ευάλωτη στις στατικές φάσεις, σημείο στο οποίο οι Ολλανδοί υπερτερούν χάρη στο ύψος και την τοποθέτησή τους. Συνολικά, το σενάριο μιας νίκης της Ολλανδίας με τουλάχιστον τρία γκολ στο παιχνίδι παραμένει το πιθανότερο, με την αξία να εντοπίζεται στον συνδυασμό «1 & Over 2.5».

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

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

1 & Over 2.5

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

3.10

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

06Markup — copy/paste

One markup for both breakpoints. The state goes on as a class on .vp-bet and both numbers are label+value pairs in a .vp-kv — without it, in the desktop flex row every word becomes its own flex item and the gap lands between a label and its number.

<!-- ΤΟ 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+ | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ is mandatory — the tip names an operator in its CTA. The line is Verdana 12.27px / line-height 19 — that is Figma verbatim and we do not normalise it: it is regulatory copy and it is signed off exactly as it renders.
• The result badge has a real alt («Κέρδισε» / «Έχασε»): colour is not the only carrier of the outcome (SC 1.4.1).
• The analysts' names are links at the same weight as the title — underlined on hover only.
• «Δες περισσότερα» is a <button>, not a link, and on collapse it returns the scroll to the top of the card with scroll-margin-top.
• The numbers on desktop are font-variant-numeric: tabular-nums — without it «10.00» and «31.00» do not occupy the same visual width.

08What was removed

The previous handover (v1.4.0) documented the .prd card in 10 renditions — mobile/desktop × open/lost × single/bet-builder/outright + sidebar. None of them renders on the analysis page.

09Build checklist

• One markup, two forms via CSS. Do not duplicate the DOM per breakpoint.
• Desktop: pick 24px, numbers Roboto Mono 16 tabular, 3px accent bar, DS colour shadow. Mobile: pick 16px centred, no bar, numbers in Roboto 12.
• The stake pairs in .vp-kv — not bare text nodes.
• State = a class on .vp-bet + a badge inside .vp-ttl + the label/colour of the 2nd number. The height does not change.
• CTA = odds-cta V6 (197×48) inside .vp-odds. Always the ΕΕΕΠ line.
• Copy and photos on the same vertical line (inset 0).
• Both pages (pregame + live) — byte-identical.
• Do not delete the hidden #tipCard — see §08.