` (the badge list and the
single-badge detail view), both hard-coded from the same IE-era style as
the .race-attributes-form-field fix above. Measured at 390px: document
632px wide, scrolling sideways with nothing that needs the width -- unlike
Team or Where To Race (doc/skiracing-open-issues.md item 32 / C8), this is
ordinary badge-icon/description/list content, not inherently wide data.
The global `img, svg, video { max-width:100% }` rule (nastar.css) already
lets the 80px badge icons shrink to fit their cell, so simply releasing the
forced width is enough: the table falls back to auto layout and shrinks to
its content instead of forcing 600px onto a 390px screen. Verified in a
real browser: 632px -> 383px document width, zero horizontal scroll, same
badge-icon/description grid and racer-list columns as at 600px, just
narrower.
Scoped to <=991px, same boundary as the block above, so desktop keeps the
existing fixed 600px table byte-for-byte. Class-scoped to `.badges-table`,
not a generic `table[width="600"]` rule, so this cannot reach any other
page's tables. */
@media (max-width: 991px) {
.badges-table {
width: 100%;
max-width: 600px;
}
}
/* ===========================================================================
Race record header (includes/comp2.jsp)
Replaces the old top zone, where three mutually exclusive controls sat
inline beside the racer's name in a float:left div with a hard-coded 28px
height -- the band the logo badge overhangs. See doc/skiracing-open-issues.md
items 1, 2 and 9 for the measurements behind each decision here.
px throughout, not rem: legacy nastar_2019.css carries `* { font-size:14px }`,
which lands on too, so rem cannot express sizes that match nastar.com.
Tokens (--nastar-*, --gray-*, --space-*) come from theme_2026/css/nastar.css.
=========================================================================== */
/* --- 2. Identity header --------------------------------------------------- */
.record-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4) var(--space-5);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--gray-200);
margin-bottom: var(--space-4);
}
.record-header__identity { min-width: 0; }
.record-header__name {
font-family: var(--font-heading);
font-size: 34px;
line-height: 1.1;
font-weight: 700;
color: var(--gray-900);
margin: 0 0 var(--space-1) 0;
}
.record-header__id {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gray-500);
}
/* The action slot. Right-aligned inside the content container, which also
keeps it clear of the badge horizontally: the badge is centered in the
viewport and only 286px wide, so a right-aligned control in a ~1180px
container never reaches it. */
.record-header__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
flex-shrink: 0;
}
.record-header__actions .btn { font-size: 14px; }
/* --- 3. Season stats + season picker -------------------------------------- */
.record-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-5);
margin-bottom: var(--space-5);
}
.record-meta__stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2) var(--space-5);
}
.record-stat { font-size: 14px; color: var(--gray-700); }
.record-stat strong {
font-family: var(--font-heading);
font-size: 19px;
font-weight: 700;
color: var(--gray-900);
margin-right: 4px;
}
/* --- 4. "Is this you?" claim banner ----------------------------------------
Replaces two separate bare yellow buttons ("This Competitor Is Me" and
"I am {name} and I would like to create a login!"). Both express the same
intent — this record is, or should be, mine — and differ only by whether
the viewer has a login. One component, two copy variants.
Full-width and wrapping, so it cannot be clipped by the badge the way a
fixed-width inline button is. */
.claim-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-5);
padding: var(--space-4) var(--space-5);
margin: 0 0 var(--space-5) 0;
background: #fdf8ea;
border: 1px solid #f0dfae;
border-left: 4px solid var(--nastar-gold);
border-radius: var(--radius);
}
.claim-banner__icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--nastar-gold);
color: var(--gray-900);
font-size: 17px;
font-weight: 700;
font-family: var(--font-heading);
display: flex;
align-items: center;
justify-content: center;
}
.claim-banner__text { flex: 1 1 300px; min-width: 0; }
.claim-banner__title {
display: block;
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 2px;
}
.claim-banner__body { font-size: 14px; line-height: 1.45; color: var(--gray-700); }
.claim-banner__action { flex: 0 0 auto; }
.claim-banner__action form { margin: 0; }
.claim-banner__action .btn { font-size: 14px; }
/* --- 6. Narrow screens ------------------------------------------------------
Below 992px the badge is display:none, so the collision is gone, but the
action still must not sit beside the name. Stacking is the default here
because the header is flex-wrap, so this only tightens type sizes. */
@media (max-width: 600px) {
.record-header__name { font-size: 27px; }
.record-header__actions { width: 100%; }
.record-header__actions .btn { width: 100%; }
/* --- Vertical budget on a phone ------------------------------------------
Measured at 390x844 before this block: the racer's own content began 571px
down on their own record and 758px down on someone else's -- 90% of the
screen. The claim banner alone was 245px: icon 28, three lines of body copy
115, a full-width button 44, plus padding.
The explanation does not need to live here. Clicking through lands on
compmergerequest.jsp, which shows both records, explains the merge and asks
for confirmation. The banner's job is to raise the question, not answer it,
so the body copy is now one short line and the button sits inline.
Note the ceiling: the tab strip below is 114px (8 tabs over 3 rows) and is
off-limits, so it is the largest single block on the page regardless. */
/* Single row on a phone: the question and the action, nothing else. The
body copy is suppressed rather than shortened -- on this width every extra
line costs more than it explains, and compmergerequest.jsp (or the
quick-registration page) gives the full explanation on arrival. The button
label carries the meaning: "This is me" / "Create your login". */
.claim-banner {
flex-wrap: nowrap;
align-items: center;
padding: var(--space-2) var(--space-3);
gap: var(--space-3);
}
.claim-banner__icon { display: none; }
.claim-banner__body { display: none; }
.claim-banner__text { flex: 1 1 auto; min-width: 0; }
.claim-banner__title { font-size: 16px; margin-bottom: 0; }
.claim-banner__action { width: auto; flex: 0 0 auto; }
.claim-banner__action .btn { width: auto; font-size: 13px; padding: 0 var(--space-3); }
.record-header { gap: var(--space-2) var(--space-4); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.record-meta { gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.record-meta__stats { gap: var(--space-1) var(--space-4); }
}
/* --- 7. Online race registration nudge -------------------------------------
Replaces the inline "Enter a Race" link, which measured 99.8x16px: italic,
14px (the legacy `* { font-size:14px }` rule shrinks it inside its own 28px
bold heading), default link colour, no weight, no icon, sitting after fifteen
entities. Smallest text on the biggest line, with nothing marking it
as an action.
Placed in the header action slot, which keeps two properties of the original:
it stays above the tab strip, so it is visible on every tab (TOOLS is in
comp2Personal.jsp and therefore PERSONAL-only), and it costs no vertical
space above the racer's own results.
Gold because on this page gold already means "actionable" -- the TOOLS box
and the active tab both use it -- while navy means "navigate". The old link
spoke neither language.
The label carries the count rather than naming an abstraction, and the whole
control is omitted when the count is zero, so it is never a dead end. It
points at ?pagename=register, not ?pagename=EnterARace: the two run the same
query, but register.jsp sorts correctly by `start` where enterARace.jsp sorts
by the formatted date *string*. */
.record-nudge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--tap-min);
padding: 0 var(--space-4);
border: 2px solid transparent;
border-radius: var(--radius-sm);
background: var(--nastar-gold);
color: var(--gray-900);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
cursor: pointer;
max-width: 320px;
}
.record-nudge:hover { background: var(--nastar-gold-dark); color: #fff; }
/* The count flows inline as part of the sentence rather than sitting as a
separate display-sized element. Emphasis is weight only, no size jump, so
the control reads as one line of text and wraps naturally. */
.record-nudge__label { font-weight: 600; }
.record-nudge__label b { font-weight: 700; }
.record-nudge__arrow { margin-left: auto; font-size: 15px; }
@media (max-width: 600px) {
.record-nudge { width: 100%; max-width: none; justify-content: flex-start; }
}
/* --- 8. Season picker promoted into the stats row --------------------------
Previously the season control sat at the far right of the meta row under
`justify-content: space-between`, which at 1440px put it ~700px from the
stats it modifies -- the corner of the page that gets looked at least, for
what is probably the most-used control on a racer's own record.
Here the season *is* the control: the thing you read is the thing you
change, so "Change to:" and the separate Go button are no longer needed.
The select already carries onchange="jumpPage(...)", so it navigates on
selection; Go was only a no-JS fallback, and comp2's tab content already
requires JS to render at all.
Implementing this for real means three small changes in
comp2Global.jsp's listLinksForOtherYears(): stop emitting the "Change to: "
text, drop the "Select a Year" placeholder, and mark the current season
`selected` so the control shows the season being viewed. */
.record-meta { justify-content: flex-start; }
.record-season {
display: flex;
align-items: baseline;
flex: 0 0 auto;
}
.record-season form { display: flex; align-items: center; margin: 0; }
.record-season select {
font-family: var(--font-heading) !important;
font-size: 19px !important;
font-weight: 700;
color: var(--gray-900);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 2px 4px 2px 6px;
margin: 0;
cursor: pointer;
max-width: 260px;
}
.record-season select:hover { border-color: var(--gray-300); background: var(--gray-100); }
.record-season select:focus { outline: 2px solid var(--nastar-blue); outline-offset: 1px; }
/* Gold, because on this site yellow simply means "button". Every submit on
e.g. the rankings page is legacy `input.buttons` at #ffd203 with black text,
including a "Go" directly analogous to this one. An outline button here was
the only one of its kind on the site and did not read as a button at all.
--nastar-gold (#eaaf1d) rather than the legacy #ffd203: same intent, and the
theme deliberately tightened that accent for contrast. Hierarchy against the
registration nudge comes from size and placement -- this is a small utility
control beside a select, that is a large one in the action slot -- not from
being the only gold element.
The Go button stays. It is the no-JS fallback -- the form posts properly
without it -- and, more importantly, the only thing that could ever make the
control usable from the keyboard: `onchange` navigates on every arrow press
while the select is closed, so a keyboard user cannot reach an option further
down the list. That is pre-existing and out of scope here, but removing Go
would foreclose the fix. Legacy `input.buttons` hard-codes height:22px and
line-height:22px, which clips the label once padding is added, so both reset. */
.record-season input[type="submit"] {
font-size: 13px;
font-weight: 700;
height: auto;
line-height: 1;
margin: 0 0 0 var(--space-2);
text-transform: none;
padding: 9px 16px;
border: 0;
border-radius: var(--radius-sm);
background: var(--nastar-gold);
color: var(--gray-900);
cursor: pointer;
}
.record-season input[type="submit"]:hover {
background: var(--nastar-gold-dark);
color: var(--white);
}
/* --- 9. Nudge sizing on small screens --------------------------------------
The earlier rule forced width:100% on phones, producing a full-width
two-line gold block ~52px tall that outweighed the racer's own name. The
button now sizes to its content and drops to a shorter label. */
@media (max-width: 600px) {
/* Full label kept -- it is what makes the control self-explaining, which is
the entire point of the nudge. Sized down and allowed to wrap to two lines.
Two lines is deliberate. Measured at 390px: the label needs 281px on one
line, plus 20px padding, a 13px arrow and an 8px gap = 322px against a
319px slot. Fitting it on one line requires dropping to 12px type, which
leaves about 1px of slack and breaks as soon as the count reaches two
digits. The sentence is simply longer than a phone is wide. */
.record-nudge {
width: auto;
max-width: 100%;
/* Back to the 44px tap minimum. The shorter label fits on one line here,
so the height is spent on the touch target rather than on wrapped text. */
min-height: var(--tap-min);
padding: 8px var(--space-3);
font-size: 13px;
line-height: 1.3;
align-items: center;
}
.record-nudge__arrow { margin-left: var(--space-2); }
}
/* --- 10. Touch targets on phones -------------------------------------------
Measured on the live record page at 390px: the season