/** * TRAuthorizationsSection / TRAuthorizationCard Styles * * The post-DOB authorizations screen: a data-driven list of identical * cards (TRAuthorizationCard, one per entry in * sectionData.authorizations.cards -- see authorizations.data.js), * followed by the shared primary-action CONTINUA button (styled * entirely by .tr-primary-action in tr-question.css -- nothing about * its appearance is declared here) and INDIETRO. * * Every card renders from THIS ONE stylesheet's rules -- there is no * per-card CSS anywhere; four differently-worded cards today, and any * number tomorrow, all look identical because they share one class. * * This is a NEW visual family, deliberately not aliasing * .tr-question-card's own translucent glass look: a fully black card * with an opaque white border (reference: black card, white rounded * border, left title+description, vertical divider, right circular * status indicator + status text underneath). Radius aliases the same * global --tr-radius-lg other cards use; nothing else is shared with * .tr-question-card on purpose, since this is a visually distinct * component. */ :root { /* ─── Card box: ONE coordinated height-responsive system ─── Every token below that feeds this card's own internal geometry (height, padding-x, title/body/status font-size, status circle size, divider height, title<->body gap, circle<->status-label gap, divider's own side gaps) shares the EXACT same clamp(FLOOR, calc(FLOOR + (100vh - 568px) * SLOPE), CEILING) formula shape, keyed off the SAME two viewport-height reference points: 568px (a short real phone, e.g. iPhone SE) and 844px (this app's own reference/taller viewport). CEILING is always the card's original, already-calibrated value (so >=844px renders byte- identical to before -- the reference viewport is untouched); each property's own FLOOR is an independently-judged, moderate (~20- 25%) reduction, never one blind global scale factor, chosen so the title/body/status text + circle always have real breathing room inside the shrunken card's own padding at every height in between, verified directly in-browser (not just by the math). Moving them all off the SAME 568/844 pair is what makes the card scale as ONE coordinated component instead of drifting out of proportion with itself. */ --tr-auth-card-height: clamp(72px, calc(72px + (100vh - 568px) * 0.072464), 92px); --tr-auth-card-radius: var(--tr-radius-lg); --tr-auth-card-gap: var(--tr-space-sm); --tr-auth-card-padding-x: clamp(15px, calc(15px + (100vh - 568px) * 0.010870), 18px); /* ─── Title ─── */ --tr-auth-title-font-family: var(--tr-font-franklin-demi); --tr-auth-title-font-size: clamp(12px, calc(12px + (100vh - 568px) * 0.010870), 15px); --tr-auth-title-letter-spacing: normal; /* Was the browser's default

weight (bold/700), never previously exposed as its own property -- now explicit, same value. */ --tr-auth-title-font-weight: 700; /* Was a hardcoded var(--tr-color-text), never its own token -- now explicit. Set to the TennisRoots lime/accent color. */ --tr-auth-title-color: var(--tr-color-accent); /* Title <-> body gap inside .tr-auth-card-content -- was a plain hardcoded 4px on that rule, now its own token, same coordinated height curve. */ --tr-auth-card-content-gap: clamp(3px, calc(3px + (100vh - 568px) * 0.0036232), 4px); /* ─── Description ─── */ --tr-auth-text-font-family: var(--tr-font-franklin-book-condensed); --tr-auth-text-font-size: clamp(10.5px, calc(10.5px + (100vh - 568px) * 0.0090580), 13px); --tr-auth-text-line-height: 1.3; /* Was a hardcoded var(--tr-color-text-dimmer) inline on the rule, never its own token -- now explicit, same value/alias. */ --tr-auth-text-color: var(--tr-color-text-dimmer); /* Manual vertical nudge for the description ONLY -- a paint-only transform (not padding/margin), applied to .tr-auth-card-text alone, so it can never move the title, the card, the divider or the status area. Positive = down, negative = up. Currently 0px (no shift). */ --tr-auth-text-offset-y: 0px; /* ─── Divider ─── */ --tr-auth-divider-x: clamp(14px, calc(14px + (100vh - 568px) * 0.014493), 18px); /* Was 60% (of the card's own fixed height) -- now an explicit, independently-floored px value on the SAME coordinated curve, so it shrinks in step with the card instead of mechanically recomputing a percentage of an already-shrinking parent. 55px is the measured footprint 60% of the original 92px card produced. */ --tr-auth-divider-height: clamp(38px, calc(38px + (100vh - 568px) * 0.061594), 55px); /* ─── Status area (right side) ─── */ --tr-auth-status-area-width: 78px; --tr-auth-status-circle-size: clamp(22px, calc(22px + (100vh - 568px) * 0.021739), 28px); --tr-auth-status-font-family: var(--tr-font-franklin-demi-condensed); --tr-auth-status-font-size: clamp(10.5px, calc(10.5px + (100vh - 568px) * 0.0090580), 13px); --tr-auth-status-letter-spacing: 0.02em; /* Was the browser's default weight (normal/400), never previously exposed as its own property -- now explicit, same value. */ --tr-auth-status-font-weight: 400; /* Was the browser's default line-height ("normal", i.e. no explicit value at all), never previously exposed -- now explicit, same keyword/value. */ --tr-auth-status-line-height: normal; /* Set to the TennisRoots lime/accent color. Controls ONLY "Da leggere"/"Da autorizzare". */ --tr-auth-status-color: var(--tr-color-accent); /* Was a hardcoded flex gap on .tr-auth-card-status, never its own token -- now explicit, same coordinated height curve. Controls ONLY the vertical space between the status circle and its label underneath. */ --tr-auth-circle-to-status-gap: clamp(6px, calc(6px + (100vh - 568px) * 0.0072464), 8px); /* ─── Cards-to-CONTINUA gap ─── */ /* Independent override of the shared --tr-primary-action-gap-above (28px, in the .tr-primary-action block in tr-question.css, still used as-is by SÌ, SONO IO, the registration primary CTA and DOB's own --tr-dob-primary-action-gap) -- this is CONTINUA's current actual gap above on THIS screen (28px, currently inherited from that shared default), now its own separately-tunable value; see .tr-auth-continue's own override rule below for how this is applied without touching the shared rule/token itself. */ --tr-auth-cards-to-continue-gap: 12px; --tr-auth-card-background: rgba(0, 0, 0, 0.8); /* ─── Completed state ─── */ /* The real check-icon.svg asset already draws a complete lime- circle-with-checkmark icon (see TRAuthorizationCard's own note) -- this is its rendered footprint, aliased to the same size the empty outlined circle already occupies so swapping between the two states never shifts the status area's layout. */ --tr-auth-completed-check-icon-size: var(--tr-auth-status-circle-size); } /* ─── Cards list ─── The one flexible/scrollable region on this screen (responsive pass): flex:1 + min-height:0 lets it shrink below its own natural height when the screen is short (instead of pushing CONTINUA/the helper text/INDIETRO off-screen, or making the whole page scroll); overflow- y:auto then scrolls ONLY this list internally once it's shorter than its 4 cards' combined height. On a tall screen there is no shortage, so this has no visible effect -- the cards render at their normal height exactly as before. Same overflow technique (-webkit-overflow- scrolling/overscroll-behavior/hidden scrollbar) .tr-auth-detail- scroll and .tr-club-results-list already use elsewhere in this app. */ .tr-auth-cards { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: var(--tr-auth-card-gap); width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; } .tr-auth-cards::-webkit-scrollbar { display: none; } /* No gap here (see TRAuthorizationsSection's own note) -- CONTINUA's own margin-top (from the shared .tr-primary-action rule) is the only space between the cards list and the button. min-height:0 lets this group itself shrink below its natural content height, passing that constraint down to .tr-auth-cards above (same min-height:0 pass- through pattern .tr-question-section/.tr-question-content already use); CONTINUA stays flex-shrink:0 below so it's never compressed. */ .tr-auth-group { display: flex; flex-direction: column; width: 100%; min-height: 0; } /* ─── One authorization card ─── */ .tr-auth-card { width: 100%; height: var(--tr-auth-card-height); /* flex-shrink: 0 (geometry fix): without this, flexbox's default flex-shrink:1 was silently squishing all 4 cards proportionally whenever .tr-auth-cards' own available height ran short -- BYPASSING --tr-auth-card-height (and this whole coordinated height-responsive system) entirely and ignoring .tr-auth-cards' own overflow-y:auto, since flex-shrink runs before overflow ever gets a say. That silent squish -- not font-size alone -- was the actual root cause of text/status/icons crowding the card boundary. Each card now always renders at its own (responsive) --tr-auth-card-height; once the four together exceed the list's available height, .tr-auth-cards scrolls them instead of shrinking them. */ flex-shrink: 0; box-sizing: border-box; display: flex; align-items: center; padding: 0 var(--tr-auth-card-padding-x); background: var(--tr-auth-card-background); border: 1px solid #ffffff; border-radius: var(--tr-auth-card-radius); /* Neutralizes native