Analysis page — design foundations

§Contents

• Assets used
• 01 · What this document is
• 02 · The token block
• 03 · Colour
• 04 · Typography
• 05 · Spacing
• 06 · Radius
• 07 · Elevation & focus
• 08 · Breakpoints & shell
• 09 · Primitives
• 10 · In-play delta
• 11 · Components with their own handover
• 12 · Regulatory
• 13 · Porting checklist

01What this document is — and what wins

This is the foundations handover for the analysis page: the values a developer binds once and then never types again. It is written from the shipped prototypes, so it describes what the page does, not what an earlier spec intended.

The pages this describes

02The token block — copy this verbatim

This is the literal :root of the pre-game page. Everything downstream reads through it; there are no second definitions of these values anywhere in the file.

/* ===== foxbet design system tokens ===== */
:root{
  --accent:#FD3A01;     /* Primary 500 */
  --accent2:#CB2F01;    /* Primary 600 — links / special text */
  --acc:#CB2F01;        /* alias the component handovers' CSS expects */
  --ember:#FF7700;      /* Secondary 500 */
  --gold:#FFB200;       /* Tertiary 500 */
  --dark:#1A1A1A;       /* Base 950 — dark surfaces */
  --ink:#1A1A1A;        /* Base 950 — primary text */
  --mut:#666666;        /* Base 700 — secondary text */
  --line:#E6E6E6;       /* Base 200 — borders */
  --fill:#F2F2F2;       /* Base 100 — fills */
  --page:#FFFFFF;       /* Base 50  — page */
  --win:#027A48;        /* Success 700 */
  --winsoft:#D1FADF;    /* Success 100 */
  --err:#D92D20;        /* Error 600 */
  --errdark:#912018;    /* Error 800 */
  --live:#D92D20;       /* IN-PLAY PAGE ONLY — live-state red (Error 600) */
  --eeep:#1A3362;       /* ΕΕΕΠ regulatory navy */
  /* featured bookmaker (Stoiximan) — swap per featured operator */
  --stoix:#0055FF; --stoix700:#003399; --stoix800:#002266; --stoixlt:#99BBFF;
  /* families */
  --disp:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --num :'Roboto Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
/* declared later, next to the tips component it serves */
:root{--prd-disp:'Roboto Condensed','Roboto Condensed Fallback',var(--body)}

03Colour — every token maps to a ramp step

No token is an invented hex. Each one is a step of the Foxbet ramps, so binding them to your design-system variables is a rename, not a translation.

The one gradient that matters

Every primary action on the page is the same brand gradient. It appears at two angles and that is deliberate — 135deg on boxes, 90deg on the wide sign-in pill:

background:linear-gradient(135deg,var(--ember),var(--accent));  /* Prim-Sec 45 — buttons, chips, active tabs */
background:linear-gradient(90deg,#FD3A01,#FF7700);           /* Prim-Sec 90 — sign-in pill */
background:linear-gradient(180deg,#333333,var(--dark));      /* dark chrome: desktop nav, overlays */

Non-tokenised colours that are still design-system steps

These appear as literal hexes in the page because they are used once or twice each. They are all real ramp steps — bind them, don't re-pick them:

Primary ramp — #FFEBE6/#FFD8CC are the soft peach card backgrounds and borders (promo cards, «Σχόλια αγώνα», the empty-state medallion).

Base ramp — the full grey range is in use. #CCCCCC is the placeholder hatch and the desktop footer text, #B3B3B3 the breadcrumb separator, #4D4D4D/#333333 the dark-chrome gradient stops.

Semantic. Text on a semantic background always uses the Dark step (#912018 / #7A2E0E / #054F31), never the 500/600 fill colour.

04Typography

Three families are loaded, and each has exactly one job. There is no fourth.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700
      &family=Roboto+Condensed:wght@700&family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">

The type ramp, as actually used

Counted across the pre-game stylesheet. The page lives at the small end of the scale on purpose — it is a dense data page, and 12px (Text Tiny) is its workhorse:

Weights — four, and only four

font-weight:800 appears once, on the winner's goals in the in-play final score — Roboto 700 is the heaviest weight loaded, so that renders as synthetic bold. Treat it as an emphasis flag, not a fifth weight.

Line-height & letter-spacing

Off-ramp sizes — the complete list

Eight declarations use non-integer or off-ramp sizes. All eight are intentional and each has an owner; there are no others, so anything else off-ramp in your port is a bug:

05Spacing — a 4px grid with three sanctioned exceptions

Name = px ÷ 4. The page uses the bottom of the scale almost exclusively, because everything is a dense row or a chip.

Structural padding you must reproduce

• Sections — .sec{padding:16px 0 0}. No side gutters on the section itself; the content inside pads to 12px, and to 16px on phones ≥430px, back to 12px ≤340px.
• Sub-panels — 12px left/right, matching the section content.
• First panel section — top padding drops to 4px so content tucks under the tab strip; the first Ανάλυση block instead gets 20px because it follows the verdict card.

06Radius

07Elevation & focus

Four of the page's shadows are design-system styles; the rest are two page-local elevations reused consistently. Both are worth binding as variables because they recur.

08Breakpoints & the desktop shell

One responsive page, one breakpoint that matters. Below it the page is the mobile design at full width; at and above it the same content gets the foxbet.gr shell around it.

Desktop geometry — the numbers are exact, not approximate

09Primitives — the shapes every section is built from

Section title (.secttl) — the page's signature

.secttl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin:0 0 12px;padding:0 12px;}
.secttl::before{content:"";width:4px;height:14px;border-radius:4px;
  background:linear-gradient(var(--ember),var(--accent));}   /* vertical brand rib */

The optional «more» affordance on the right is 12px/700 in --accent, text-transform:none and letter-spacing:.2px — it opts out of the uppercase treatment.

Tabs — primary is a pill strip, secondary is a rectangle strip

The 33px mobile button rule

/* every action/CTA on mobile is exactly 33px tall — a deliberate brand choice,
   below the 44px touch-target guideline. Text is centred by flex, not by padding. */
.signin,.sheet-btn,.tab,.allgroups,.formbtn,.readmore{
  height:33px;min-height:33px;padding-top:0;padding-bottom:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;}

Sticky stack — --stickyH

• The tab strip pins under the app bar; JS publishes the pinned bar's measured height to --stickyH on <html> (0 when unpinned).
• Sub-tabs, table headers and jump-links all offset from that one variable — top:var(--stickyH,140px) on mobile, top:calc(64px + var(--stickyH,0px)) on desktop where the nav is also fixed.
• Tab and sub-tab jumps re-measure after layout settles and correct the scroll position. Drop that and every jump lands short.
• When pinned, the bar reveals a compact teams strip (.stickteams, 12px/700, 20×14 crests).

10In-play delta — the complete list

The in-play page is the pre-game page with the countdown replaced by a live state. Foundations-wise it adds one token and 17 class names; there is nothing else. Anything else that differs between the two files is drift and should be reconciled.

11Components with their own handover

These are not specified here. Each link is the single source of truth for that component's geometry, states and variants — read the deployed handover before building, and when it disagrees with any other document, it wins.

12Regulatory — non-negotiable

• The ΕΕΕΠ · 21+ · ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ row is mandatory wherever gambling content appears. It is present on both pages and must survive the port.
• Palette: white text on --eeep #1A3362, 12px/700, letter-spacing .3px, padding 8px 12px. In the content column the box is radius 8px with a 22px age circle (1.5px white border); the compact .eeep-sm variant drops the circle to 18px.
• In the desktop fixed 42px footer the same label is reduced to radius 4px with a 17px circle, and the full regulatory sentence sits beside it as plain footer text.
• The full mandated string is carried verbatim on both pages: ΑΡΜΟΔΙΟΣ ΡΥΘΜΙΣΤΗΣ ΕΕΕΠ | ΚΙΝΔΥΝΟΣ ΕΘΙΣΜΟΥ & ΑΠΩΛΕΙΑΣ ΠΕΡΙΟΥΣΙΑΣ | ΕΟΠΑΕ – ΓΡΑΜΜΗ ΣΥΜΒΟΥΛΕΥΤΙΚΗΣ: 1114 | ΠΑΙΞΕ ΥΠΕΥΘΥΝΑ. Do not shorten it.
• The verdict card's regulatory line keeps its Verdana 12.27px rendering (§4) — that specific rendering is what was signed off.

13Porting checklist

• [ ] The §2 token block is bound to design-system variables — no raw hexes in component CSS. The only literal colours allowed are the featured-bookmaker palette, the ΕΕΕΠ navy, and feed-supplied team colours.
• [ ] Roboto (400/500/600/700), Roboto Condensed (700) and Roboto Mono (400/500/700) are loaded, and every number is Roboto Mono.
• [ ] The type ramp matches §4, including that it does not step down at the desktop breakpoint. Only the eight §4 off-ramp sizes exist.
• [ ] All spacing is a 4px multiple except the three sanctioned exceptions in §5.
• [ ] Radius aliases normalised to Small / Regular / Large / Pill / Circle (§6).
• [ ] The brand focus ring 0 0 0 2px rgba(253,58,1,.40) is present on every interactive element — it is the page's only focus affordance.
• [ ] Desktop shell measures 1180 = 876 + 12 + 292, nav 64, footer 42, skins native 400×1000 and never resampled (§8).
• [ ] Mobile action/CTA height is exactly 33px (§9).
• [ ] --stickyH drives every sticky offset, and tab jumps re-measure after layout settles.
• [ ] All 14 prefers-reduced-motion blocks ported, including the live pulse.
• [ ] The in-play page differs from pre-game by §10 and nothing else.
• [ ] Every component in §11 is built from its own handover, not from this page.
• [ ] ΕΕΕΠ row present on both pages, both breakpoints.
• [ ] Prototype furniture removed: phone frame, status bar, dev remotes, placeholder hatch, Super League demo button, goal-effect demo.
• [ ] Asset paths are all lowercase assets/….