/* GENERATED by tools/lib/header-css.js -- do not edit. The header on the mirrored pages, cut from site-src/css/event.css so the two can never drift apart. Change the header there. */ :root { --crs-border: #3a3a3a; --crs-container: 1480px; --crs-font: "Rajdhani", "Helvetica Neue", Helvetica, Arial, sans-serif; --crs-gutter: 60px; --crs-gutter-mobile: 20px; --crs-radius: 5px; --crs-red: #de0b14; --crs-red-bright: #f1062c; --crs-red-text: #ff4d55; --crs-space-m: 1.25rem; --crs-space-s: 0.75rem; --crs-space-xs: 0.5rem; --crs-step--1: 0.875rem; --crs-step-0: 1rem; --crs-surface: #1d1d1d; --crs-surface-raised: #2d2d2d; --crs-text: #ffffff; --crs-text-muted: #a8a8a7; --crs-weight-bold: 600; --crs-weight-light: 300; --crs-weight-medium: 500; } .wrap { width: 100%; max-width: var(--crs-container); margin-inline: auto; padding-inline: var(--crs-gutter-mobile); } @media (min-width: 60rem) { .wrap { padding-inline: var(--crs-gutter); } } /* ---------- Header ---------- */ .site-header { /* Sticky, not fixed. The vendor uses fixed with a hardcoded body offset, which only works because its bar is a constant 43px. Sticky behaves the same on scroll and reserves its own space at whatever height it ends up, so no offset can drift out of step with the bar. The figure that used to be in this comment was wrong twice over. It said a fixed bar "hid 77px of every page"; the wrapped header actually measured 135px. Both numbers are history now that the menu is a single scrolling row rather than a wrapping one. Sticky stays anyway: it is still the version that cannot go out of step with its own height. */ position: sticky; top: 0; z-index: 99; background: var(--crs-surface-raised); /* #2d2d2d, as the existing header is */ padding-block: var(--crs-space-xs); /* Restated here rather than inherited from body, because on the mirrored pages this header sits inside the vendor's body, not ours. There it is `line-height: 1.5em` -- an em value, so it inherits as a fixed pixel figure instead of scaling with each element's own size -- and a shorter font stack. Same values our body has; on a generated page these change nothing. */ font-family: var(--crs-font); font-weight: var(--crs-weight-light); line-height: 1.5; } /* THE VENDOR'S RESET, ANSWERED ONCE FOR THE WHOLE BAR. On the mirrored pages (the home pages above all) site/dist/style.css loads before site-header.css, and three of its element rules land in this header: a, img, li, ul, ... { line-height: 1; font-weight: inherit; ... } a { font-weight: 600 } nav ul:before, nav ul:after { display: table; content: " " } The first two shrank every menu line from 24px to 16px and made the logo and the language links bold. The third is the one a tester saw. It is a float clearfix, and our list is a flex container, so the two pseudo-elements become two empty flex items -- each still owed the 20px column gap. At 390px the first row therefore started 20px in, "Events" no longer fitted on it, and the menu wrapped as "Pro Rider Experience / Track Events" over "Events / Circuits / FAQ" on the home page against three-over-two everywhere else. Measured, not read: x=40 for the first item on /en/, x=20 on /en/experience-track-riding/. Every selector here outranks the vendor's (one class beats bare elements), and these come before the header's own rules, so `.site-nav a` and the language menu's bold current item still win where they mean to. On a generated page they restate what inheritance already gives. */ .site-header :is(a, ul, li, img) { line-height: inherit; font-weight: inherit; } .site-header ul::before, .site-header ul::after { content: none; } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--crs-space-s) var(--crs-space-m); } /* The logo shrinks, and it has to. It used to be a flat `height: 2.25rem` with no reason written down, which rendered 123x36 at EVERY width -- 31.5% of a 390px viewport, against the existing site's 50x15 on the same phone. That single line was the largest part of why our header stood 138px tall there where theirs stands 43. 1.5rem on a phone is 82x24: still comfortably legible, and it lets the bar come down to something close to the one visitors meet on the home page. */ .site-header img { display: block; height: 1.5rem; width: auto; } @media (min-width: 46rem) { .site-header img { height: 2.25rem; } } /* The menu that makes these pages reachable from each other. TWO LINES ON A PHONE, one row from 56rem up. (46rem until 2026-10-24: the renamed products, #393, no longer fit one row below 56rem. Between 46 and 56rem the logo already grows to 2.25rem while the menu still wraps.) The history is worth keeping because both extremes were tried this week and both were wrong for a different reason. It wrapped originally, and the bar stood 135px tall at 390px -- 16% of the screen against 43px for the header on the home page. So it was made a single row that scrolled horizontally: 51px, everything on one line. Jimmy, 2026-09-30, on that version: "On mobile the menu should be back 2 lines. One line is not usable." He is right, and it is not a matter of taste. In a 390px viewport the row shows "Pro Rider Experience" and the first letter of "Track Events". The other four items exist behind a horizontal swipe most people will never make, on a menu whose whole job is to prove those pages are there. A menu you have to discover is not a menu. So it wraps again, deliberately, and the height is the price. It is a much smaller price than it was: the logo now shrinks to 24px, so the bar is far below the 135px of the first version. Measured numbers are on the media query that compensates for it in header-css.js -- the mirrored pages reserve room for this bar, and that reservation has to track its height or the first line of the privacy page hides underneath. A collapsing
menu was also tried and abandoned: a closed
gives its content no usable box, so the desktop row measured zero wide. The reasoning and the numbers are in site-nav.js, above the nav markup. */ .site-nav { flex: 1 1 100%; order: 3; min-width: 0; display: flex; align-items: center; gap: var(--crs-space-s); } .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--crs-space-m); margin: 0; padding: 0; list-style: none; } .site-nav li { flex: none; } /* 16px at weight 500 in white, not 14px at 300 in grey: the existing menu is the same size as its body copy and fully opaque. */ .site-nav a { display: inline-block; padding-block: 0.35rem; text-decoration: none; font-size: var(--crs-step-0); font-weight: var(--crs-weight-medium); color: var(--crs-text); border-bottom: 2px solid transparent; } /* Hover had no effect at all: this rule set the colour the link already had, white on white, so a pointer over the menu changed nothing. The existing site fades both hover and the active item to 50% white; fading is wrong here because our current item is marked with a red underline and a fade would read as "disabled", so hover borrows the same underline at half strength instead. Keyboard focus gets it too -- a menu that only answers to a mouse is a menu half the people cannot see themselves moving through. */ .site-nav a:hover, .site-nav a:focus-visible { border-bottom-color: var(--crs-red-text); } /* The account item: an icon among words, so it needs its own sizing. Inheriting the nav's font-size would scale the SVG to the line box and give a 16px glyph beside 16px text, which reads as a mistake rather than a control. 1.25rem sits on roughly the same optical line as the cap height next to it. It is no longer inside the