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 >= 3.0.0.

• Το cta_html κουβαλά το δικό του class="bo" wrapper, γιατί η οικογένεια V4/V5 είναι scoped κάτω από .bo — και το predictions δεν επιτρέπεται να δηλώσει κλάση bo (κανόνας prefix).
• Το V1 markup ΠΡΕΠΕΙ να έχει modd--solo. Εκεί ζει το design του V1 στο odds-cta 3.0.0 (frame 41px, radius 8, hug ≥88.67px). Χωρίς αυτό το control υποβαθμίζεται σιωπηλά στο διμερές κέλυφος V2/V3 και τίποτα δεν αποτυγχάνει, επειδή τα ύψη της κάρτας τα ορίζει η στήλη επιλογής, όχι το CTA.
• Στο 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
• Figma's bet-builder CTA is a bespoke odd-only block filled #1C1F56, which matches no operator and is not one of the five ART-378 variants. Replaced with V1 .is-bare on request 2026-07-30, so the tip only ever uses real CTA-component variants.
• 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.

Λυμένα

• 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--solo. Στα V4/V5: βάλε το class="bo" wrapper.
• Μέτρα το ύψος της κάρτας στο πλάτος του frame και σύγκρινε με τον πίνακα 02 — delta 0.
• Έλεγξε ότι δεν υπάρχει σπασμένη εικόνα: [...document.images].filter(i => !i.complete || !i.naturalWidth).