/* Page-level structure: container, header, footer, section rhythm. * * The mockup has no layoutGrids: the container is the frame width minus the * section padding. Most pages pad 48px, Help Centre 80px, the legal pages and * the bet slip 120px — a page sets --container-pad on where it differs. */ .container { width: 100%; max-width: calc(var(--container) + var(--container-pad) * 2); margin-inline: auto; padding-inline: var(--container-pad); } /* ── utility bar (1440×31, pad 8/48) ──────────────────────────────────── */ .header-wrapper { position: sticky; top: 0; z-index: var(--z-header); } .utility-bar { background: var(--color-bg-deep); box-shadow: inset 0 -1px 0 var(--color-border); /* strokeAlign INSIDE, bottom only */ } .utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 31px; padding-block: var(--space-8); } .utility-bar__rg { display: flex; align-items: center; gap: var(--space-16); } .tag-18 { display: inline-flex; align-items: center; padding: 2px 6px; background: var(--color-danger); color: var(--color-bg); /* 5.6:1 on the red; the frame's white gives 3.6 */ font-family: var(--font-display); font-weight: 900; font-size: var(--fs-4xs); line-height: 11.16px; white-space: nowrap; } .utility-bar__help { color: var(--color-muted); font-size: var(--fs-2xs); line-height: 14.3px; } .utility-bar__tel { text-decoration: none; transition: color var(--dur-fast) var(--ease); } .utility-bar__tel:hover { color: var(--color-brand); } .utility-bar__tagline { color: var(--color-brand); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xs); line-height: 12.4px; letter-spacing: .1em; text-transform: uppercase; text-align: right; } /* ── main nav (1440×80, pad 16/48) ────────────────────────────────────── */ .main-nav { background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border); } .main-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); min-height: 80px; padding-block: var(--space-16); } .logo { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; } .logo__mark { color: var(--color-text); font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 30px; letter-spacing: -.06em; } .logo__badge { display: inline-flex; align-items: center; padding: 4px 6px; background: var(--color-brand); color: var(--color-on-brand); font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 20px; transition: background var(--dur-fast) var(--ease); } .logo:hover .logo__badge { background: var(--color-brand-hover); } .nav-links { display: flex; align-items: center; gap: var(--space-8); } .nav-links__link { display: inline-flex; align-items: center; padding: 10px 20px; color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); line-height: 15px; letter-spacing: .08em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .nav-links__link:hover { color: var(--color-brand); background: var(--color-surface-hover); } .nav-links__link.is-current { color: var(--color-brand); } .auth-ctas { display: flex; align-items: center; gap: var(--space-16); } .bet-slip-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; color: var(--color-text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-border); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .09em; text-transform: uppercase; transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .bet-slip-btn:hover { box-shadow: inset 0 0 0 1px var(--color-brand); color: var(--color-brand); } .bet-slip-btn__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; padding: 2px 6px; background: var(--color-brand-deep); color: var(--color-surface); font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .09em; } .btn__short { display: none; } .burger { display: none; } /* ── footer ───────────────────────────────────────────────────────────── */ /* Section order of the mockup's shared "Group 5": player protection → safety band → payment strip → footer. Per TZ.md the band is the only place that carries the risk warning, the helpline and the BetStop link; the footer bottom carries the legal data and the age notice, with nothing repeated. */ .rg-section { padding-block: var(--section-pad-y); } .rg-section__head { display: flex; flex-direction: column; gap: var(--space-8); } .rg-section__tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); margin-top: var(--space-40); } .rg-tool { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-32); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); transition: background var(--dur-fast) var(--ease); } .rg-tool:hover { background: var(--color-surface-hover); } .rg-tool__title { color: var(--color-brand); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17.36px; text-transform: uppercase; } .rg-tool__text { color: var(--color-muted); font-size: var(--fs-sm); line-height: 20px; } .rg-tool__link { align-self: flex-start; padding-block: var(--space-8); color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xs); line-height: 12.4px; letter-spacing: .1em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease); } .rg-tool__link:hover { color: var(--color-brand); } .safety-band { padding-block: var(--space-48); background: var(--color-band); text-align: center; } .safety-band__title { color: var(--color-brand); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: 35px; } .safety-band__text { max-width: 900px; margin-inline: auto; margin-top: var(--space-16); color: var(--color-text); font-size: var(--fs-sm); line-height: 21px; } .safety-band__text a { color: var(--color-brand); text-underline-offset: 3px; } .safety-band__text a:hover { text-decoration: none; } .payment-strip { padding-block: var(--space-16); background: var(--color-surface); } .payment-strip__inner { display: flex; align-items: center; gap: var(--space-16); } .payment-strip__label { color: var(--color-muted); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xs); line-height: 12.4px; text-transform: uppercase; } .payment-strip__logos { width: 300px; height: 40px; object-fit: contain; object-position: left center; } .payment-strip__note { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: auto; color: var(--color-muted); font-weight: 600; font-size: var(--fs-2xs); line-height: 14px; } .payment-strip__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); flex: none; } .site-footer { background: var(--color-bg); padding: var(--space-80) 0 var(--space-48); } .site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-64); } .site-footer__brand { display: flex; flex-direction: column; gap: var(--space-20); max-width: 300px; } .site-footer__about { color: var(--color-muted); font-size: var(--fs-xs); line-height: 18px; } /* The footer logo is a size down from the header one: 20/25 and 14/17.36. */ .site-footer .logo__mark { font-size: var(--fs-h5); line-height: 25px; } .site-footer .logo__badge { font-weight: 400; font-size: var(--fs-base); line-height: 17.36px; } .site-footer__cols { display: flex; align-items: flex-start; gap: var(--space-64); } .site-footer__col { display: flex; flex-direction: column; gap: var(--space-16); } .site-footer__title { color: var(--color-brand); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-3xs); line-height: 12.4px; text-transform: uppercase; } .site-footer__list { display: flex; flex-direction: column; gap: var(--space-16); } .site-footer__list a { display: block; color: var(--color-muted); text-decoration: none; font-size: var(--fs-xs); line-height: 16px; transition: color var(--dur-fast) var(--ease); } .site-footer__list a:hover { color: var(--color-brand); } /* The frame draws the rule as a 1px filled line, not a stroke. */ .site-footer__rule { height: 1px; margin: var(--space-64) 0; border: 0; background: var(--color-border); } .site-footer__legal { display: flex; flex-direction: column; gap: var(--space-16); } .site-footer__legal-group { display: flex; flex-direction: column; gap: var(--space-8); } .site-footer__legal p { color: var(--color-muted); font-size: var(--fs-2xs); line-height: 17px; } .site-footer__legal a { color: var(--color-muted); text-underline-offset: 3px; } .site-footer__legal a:hover { color: var(--color-brand); } .site-footer__age { color: var(--color-brand); font-weight: 700; font-size: var(--fs-2xs); line-height: 17px; } /* ── back to top ──────────────────────────────────────────────────────── */ .to-top { position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: var(--z-header); width: 44px; height: 44px; border: 0; background: var(--color-brand); color: var(--color-on-brand); cursor: pointer; opacity: 0; transition: opacity var(--dur-base) var(--ease), background var(--dur-fast) var(--ease); } .to-top:not([hidden]) { opacity: 1; } .to-top:hover { background: var(--color-brand-hover); } .to-top::before { content: "↑"; font-size: 18px; } /* ── mobile: the 390 frame ────────────────────────────────────────────── */ @media (max-width: 1199px) { /* utility bar 390×48: column, gap 6, pad 8/16 */ .utility-bar__inner { flex-direction: column; align-items: stretch; gap: var(--space-8); min-height: 54px; padding-block: var(--space-10); } .utility-bar__rg { gap: var(--space-8); } .utility-bar__help { font-size: var(--fs-3xs); line-height: 13px; } /* 11px wraps next to the longer 18+ tag */ .utility-bar__tagline { font-weight: 700; font-size: var(--fs-4xs); line-height: 11.16px; letter-spacing: .08em; text-align: left; } /* main nav 390×53: pad 12/16 */ .main-nav__inner { min-height: 64px; padding-block: var(--space-12); gap: var(--space-8); } .logo__mark { font-size: 18px; line-height: 22px; letter-spacing: -1px; } .logo__badge { padding: 2px 4px; font-weight: 900; font-size: var(--fs-xs); line-height: 15px; } .nav-links { display: none; } .auth-ctas { gap: var(--space-8); } /* .btn sets display in components.css, which loads later — the modifier has to out-specify it, not just come first. */ .btn.btn--login, .btn.btn--account { display: none; } .btn__long { display: none; } .btn__short { display: inline; line-height: 11.16px; letter-spacing: .09em; text-transform: uppercase; } .btn.btn--join { min-height: 40px; padding: 8px 10px; font-size: var(--fs-4xs); line-height: 11.16px; } .bet-slip-btn { gap: var(--space-4); padding: 8px; background: var(--color-chip); font-size: var(--fs-4xs); line-height: 11.16px; box-shadow: none; } .bet-slip-btn__label { display: inline-flex; align-items: center; line-height: 13px; } .bet-slip-btn__badge { min-width: 17px; padding: 1px 4px; font-size: var(--fs-4xs); line-height: 11px; letter-spacing: 0; } .burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 10px; background: none; border: 0; box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-light); cursor: pointer; } /* 24×24 in the mockup; the touch area is grown to 44×44 by the pseudo-element of .tap-target, which does not move anything. */ .burger.tap-target::after { inset: 50% 50% auto auto; translate: 50% -50%; width: 44px; height: 44px; min-height: 44px; } .bet-slip-btn { min-height: 40px; } .burger__box, .burger__box::before, .burger__box::after { content: ""; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); } .burger__box { position: relative; } .burger__box::before { position: absolute; top: -5px; } .burger__box::after { position: absolute; top: 5px; } .burger[aria-expanded="true"] .burger__box { background: transparent; } .burger[aria-expanded="true"] .burger__box::before { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] .burger__box::after { transform: translateY(-5px) rotate(-45deg); } /* footer zone on the 390 frame */ .rg-section { padding-block: var(--space-48); } .rg-section__head { gap: var(--space-8); } .rg-section__head .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .2em; } .rg-section .rg-section__title { font-size: var(--fs-h5); line-height: 25px; } .rg-section__tools { grid-template-columns: 1fr; gap: var(--space-16); margin-top: var(--space-24); } .rg-tool { padding: var(--space-20); gap: var(--space-12); background: var(--color-bg-deep); } .rg-tool__title { font-size: var(--fs-xs); line-height: 15px; } .rg-tool__text { font-size: var(--fs-sm); line-height: 20px; } .safety-band { padding-block: var(--space-24); text-align: left; } .safety-band__inner { padding-inline: var(--space-8); } .safety-band__title { font-size: var(--fs-lead); line-height: 22px; } .safety-band__text { margin-inline: 0; margin-top: var(--space-12); font-size: var(--fs-xs); line-height: 18px; } .payment-strip { padding-block: var(--space-20); background: var(--color-bg-deep); } .payment-strip__inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label note" "logos logos"; align-items: center; gap: var(--space-12) var(--space-8); } .payment-strip__label { grid-area: label; font-size: var(--fs-4xs); line-height: 11.16px; } .payment-strip__inner > picture { grid-area: logos; } .payment-strip__note { grid-area: note; margin-left: 0; font-size: var(--fs-2xs); line-height: 14px; } .site-footer { background: var(--color-bg-deep); padding: var(--space-48) 0 var(--space-32); } .site-footer__top { flex-direction: column; gap: var(--space-40); } .site-footer__brand { gap: var(--space-16); max-width: none; } .site-footer__about { font-size: var(--fs-xs); line-height: 18px; } .site-footer .logo__mark { font-size: var(--fs-h5); line-height: 25px; letter-spacing: -1.5px; color: var(--color-light); } .site-footer .logo__badge { font-weight: 400; font-size: var(--fs-base); line-height: 17px; padding: 4px 6px; } .site-footer__cols { flex-direction: column; gap: var(--space-32); } .site-footer__col { gap: var(--space-12); } .site-footer__title { font-size: var(--fs-4xs); line-height: 11px; } .site-footer__list { gap: var(--space-12); } .site-footer__list a { font-size: var(--fs-sm); line-height: 17px; } .site-footer__rule { margin: var(--space-40) 0; } .site-footer__legal { gap: var(--space-20); } .site-footer__legal p { font-size: var(--fs-3xs); line-height: 15px; } .site-footer__age { font-size: var(--fs-3xs); line-height: 15px; } } @media (max-width: 479px) { .payment-strip__logos { width: 100%; max-width: 300px; } } /* ── wider than the 1440 frame ───────────────────────────────────────── The split sections (text column / gutter / photo panel) are drawn edge to edge in a 1440 frame with fixed column widths. On a wider screen they stay a 1440 band centred on the page, so their left edge lines up with the .container of the sections around them instead of running off to the viewport edges. */ @media (min-width: 1441px) { .hero, .racing, .page-hero, .hiw-hero, .contact-hero, .contact-form, .help-hero, .rg-hero, .bs-hero, .bs-official { max-width: 1440px; margin-inline: auto; } /* the RG hero paints a darker band than its page: keep that full-bleed */ .rg-hero { position: relative; isolation: isolate; } .page--rg { overflow-x: clip; } /* the band pseudo-element must not widen the page */ .rg-hero::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: var(--color-bg); } }