Handover · Predictions (Tips)

01Οι παραλλαγές

Τρεις άξονες: data-variant (επιφάνεια) × data-bet (τύπος στοιχήματος) × data-cta (ποιο CTA μπαίνει στην υποδοχή). Η δηλωμένη παραλλαγή αποφασίζει — ΟΧΙ το πλάτος του viewport, όπως και στο Form Bubbles.

02Επαληθευμένα ύψη

Κάθε παραλλαγή αποδίδεται στο ακριβές ύψος του frame της στο Figma. Μέτρηση σε Chromium στο πλάτος του frame, μόνο ορατό περιεχόμενο.

03Συμβόλαιο δεδομένων — οι υποδοχές

Το component.html είναι template με {{key}}. Ο renderer είναι σκόπιμα χωρίς λογική: ό,τι τελειώνει σε _html είναι έτοιμο κομμάτι markup. Κενή τιμή = η ενότητα δεν εμφανίζεται.

04Εξάρτηση από το odds-cta

Το CTA δεν υλοποιείται εδώ. Έρχεται από το odds-cta μέσα στην υποδοχή .prd-cta. Απαιτείται odds-cta >= 4.0.0. Μοναδική πηγή αλήθειας: foxbet-odds-cta.pages.dev.

• Το cta_html κουβαλά το δικό του class="bo" wrapper, γιατί η οικογένεια V4/V5 είναι scoped κάτω από .bo — και το predictions δεν επιτρέπεται να δηλώσει κλάση bo (κανόνας prefix).
• Το V1 είναι σκέτο .modd — καμία επιπλέον κλάση — και η απόδοση μπαίνει σε .od, όχι .modd-od. Έτσι το δημοσιεύει το handover: κάρτα 41px που μεγαλώνει από 88.67px. Ένα V1 χωρίς label (bet builder) δεν θέλει τίποτα άλλο: το .modd-card κεντράρει από μόνο του και χωρίς .modd-sel δεν υπάρχει hairline να χωρίσει τίποτα.
• Στο desktop η υποδοχή τεντώνει το V4 στα 48px· το φυσικό του ύψος είναι 40 (4+4+24+4+4) και έτσι το δείχνει το sidebar.
• Στο bet builder μπαίνει V1. Το Figma εκεί ζωγραφίζει ένα δικό του block γεμάτο #1C1F56, χρώμα που δεν αντιστοιχεί σε καμία στοιχηματική και δεν είναι μία από τις 5 παραλλαγές — αντικαταστάθηκε με V1 ώστε το tip να χρησιμοποιεί μόνο πραγματικές παραλλαγές του component.

05Καταστάσεις

Η κατάσταση διεκπεραίωσης μπαίνει ως κλάση στην κάρτα και βάφει την αριστερή γραμμή.

06Tokens & αποκλίσεις

Χρησιμοποιούμενα tokens: --ink --mut --line --fill --body --win --err · instance var --prd-disp (Roboto Condensed — δεν υπάρχει token στο tokens.css).

• Figma uses text-primary #000000; mapped to --ink #1A1A1A
• Figma uses text-secondary #4A4A4A; mapped to --mut #666666
• Figma league chip uses greys/gray-200 #E0E0E0 and gray-100 #F2F2F2; mapped to --line #E6E6E6 and --fill #F2F2F2
• Figma league label uses blacks/black-300 #2E2E2E; mapped to --ink
• Roboto Condensed has no token in tokens/tokens.css - carried as instance var --prd-disp pending a token decision
• left-stroke colours measured in Figma are open #444444, won #4CAF50, lost #EF5350; mapped onto --ink, --win #027A48 and --err #D92D20. The won/lost mappings are noticeably darker than Figma - confirm before shipping
• sidebar surface #F9F9FE and its white league chip have no tokens; carried as literals
• V1 hugs its content at every breakpoint (odds-cta 3.0.0 replaced the fixed 100px card on 2026-07-30); on desktop it is centred in the 240px slot rather than stretched to fill it.
• the outright CTA fill is #202735 in Figma, which is neither novibet #303540 nor any other operator colour; rendered with bo-novibet
• League chip icons REVERSED from Figma on request (2026-07-30): the league mark leads and is the larger of the two (20px cell / 18px art, carrying the -4px overlap and z-index above the sport), the sport is a small indicator behind it (14px cell / 10px art). Figma had them equal at 16px with the sport first and larger.
• Bet-builder title is «Bet Builder» on BOTH devices (Vasilis, 2026-07-30). The mobile rendition 8329:310752 shows «Τελικο αποτέλεσμα - Κόμο» there, but the desktop master 4036:171714 has «Bet Builder» — the desktop one is right; a bet builder is not a single market.
• Figma's bet-builder CTA is a bespoke block filled #1C1F56, a colour matching no operator and not one of the five handover variants — replaced with V1 so the tip only uses real CTA variants.

Λυμένα

• ART-378 records V4 at 40px and the Tip appeared to render it at 48px. V4 is 40px by construction; the desktop Tip slot stretches it. The sidebar renders it at its natural 40px, which confirms this.
• the 2px white stroke must be an inset ring, not a CSS border - Figma draws it inside the frame, so a real border put every card 3-4px over its frame height.
• read Figma children with a visibility filter. The sidebar's Description and outright's Description + Icon Container are present but toggled OFF; rendering them put those two cards 36px over and 20px under.
• the divider must take zero layout space - as a real border-top it put both divider-bearing cards 1px over. Same rule as the V4/V5 hairline.

07Προσβασιμότητα

• Ο τίτλος είναι <h3> — η κάρτα ζει μέσα σε λίστα/ενότητα, οπότε το επίπεδο προσαρμόζεται στη σελίδα υποδοχής.
• Η αριστερή γραμμή και ο connector rail των σκελών είναι διακοσμητικά: aria-hidden="true".
• Τα V4/V5 δεν έχουν label μέσα στο control, άρα title + aria-label στο <a> είναι υποχρεωτικά.
• Τα εικονίδια αποτελέσματος κουβαλούν κείμενο («Κέρδισε» / «Έχασε») στο alt — η κατάσταση δεν επικοινωνείται μόνο με χρώμα.
• Τα εμβλήματα ομάδων είναι alt="": το όνομα της ομάδας υπάρχει ήδη ως κείμενο δίπλα.

08Τι ΔΕΝ περιλαμβάνεται

• «_Tip header», «betting facts», «offers» — είναι instances εξωτερικής library στο Figma, σβηστά σε κάθε rendition, και τα παιδιά τους δεν εκτίθενται. Δεν μετρήθηκαν, δεν υλοποιήθηκαν. Χρειάζεται να ανοίξουν στο Figma ή spec.
• «Buttons» — η γεωμετρία διαβάζεται (336×36, δύο 164×36, radius 8, padding 6/16, περίγραμμα 1px #4A4A4A) αλλά τα labels είναι instances, άρα άγνωστα.
• Το V2/V3 ως CTA μέσα σε tip — υπάρχει στο odds-cta, δεν χρησιμοποιείται εδώ.
• JavaScript. Το component είναι καθαρό CSS + markup· δεν έχει συμπεριφορά.

09Build checklist

• Φόρτωσε tokens/tokens.css, μετά odds-cta/component.css, μετά odds-cta/component-brand.css (για V4/V5), μετά predictions/component.css. Η σειρά έχει σημασία.
• Όρισε το --prd-disp σε Roboto Condensed στη σελίδα υποδοχής μέχρι να μπει token.
• Δήλωσε data-variant, data-bet, data-cta στο .prd — μη βασίζεσαι στο viewport.
• Στο V1: σκέτο .modd + .od. Στα V4/V5: βάλε το class="bo" wrapper.
• Μέτρα το ύψος της κάρτας στο πλάτος του frame και σύγκρινε με τον πίνακα 02 — delta 0.
• Έλεγξε ότι δεν υπάρχει σπασμένη εικόνα: [...document.images].filter(i => !i.complete || !i.naturalWidth).