/** * TRRegistrationSection / TRRegistrationCard Styles * * Registration-entry screen (provider row, OPPURE divider, primary CTA, * existing-account line), reached from a role-detail screen's CONTINUA. * Reuses the question screen's zone shell verbatim (.tr-hero-question- * scroll / .tr-hero-question-content / .tr-question-section / .tr- * question-content / .tr-question-bottom-action(--split) / .tr-question- * back, all in tr-question.css) -- nothing in this file re-implements * positioning, scrolling or the back button. This file styles the * registration card's own content and the NON ORA button's fixed * outline coloring only -- the outer card/shell/scroll architecture is * unchanged from the first pass. */ /* ========================================= REGISTRATION — DESIGNER CONTROLS ========================================= ONE place for registration-card visual calibration. Two kinds of control live here, and each entry says which it is: A) ALIASES of an existing global TennisRoots token -- the value MUST stay identical to that global system (e.g. REGISTRATI/ACCEDI, or SALTA/CONTINUA/NON ORA). Never a duplicated number: if the aliased global token is itself responsive, the alias is too, automatically. Only override the right-hand side here if you deliberately want to break that relationship. B) EXPLICIT registration-specific geometry -- has no equivalent elsewhere in the app (there is no other "OAuth badge" or "column separator" anywhere), so it is a plain, directly-tunable value. No responsive curve is attached to these unless noted. */ :root { /* ---- REGISTRAZIONE VELOCE (ALIAS) ---- Identical, by construction, to the header buttons (REGISTRATI/ ACCEDI -- see .tr-header .tr-button in tr-header.css): same family, same responsive size, same tracking. Since --tr-header-button-text-size is itself viewport-responsive, this heading scales with it automatically -- no separate curve. */ --tr-registration-title-font-family: var(--tr-font-franklin-demi); --tr-registration-title-font-size: var(--tr-header-button-text-size); --tr-registration-title-tracking: var(--tr-header-button-tracking); /* ---- OAuth provider icon size (EXPLICIT) ---- One simple px value, no responsive curve for now (deliberately -- see the file-level comment on .tr-registration-provider-icon below). Every provider icon reads this one value; changing it resizes all three and nothing else. */ --tr-registration-provider-icon-size: 64px; /* ---- OAuth provider icon color (EXPLICIT) ---- The SVG artwork's own fill is untouched -- this recolors the rendered image via CSS filter (brightness(0) turns any opaque pixel black, invert(1) turns that black white), not by editing the source files. Override this if a different treatment (e.g. a tint) is ever wanted; the default renders solid white. */ --tr-registration-provider-icon-filter: brightness(0) invert(1); /* ---- Provider column separators (EXPLICIT) ---- height/width are independent of the provider column's own content height (see the pseudo-element implementation below) -- changing either only changes the line itself, never the column layout. Color defaults to the same light/white UI tone the card's own border already uses. */ --tr-registration-provider-separator-height: 36px; --tr-registration-provider-separator-width: 1px; --tr-registration-provider-separator-color: rgba(255, 255, 255, 1); /* Vertical offset of both separator lines only: 0px = centered in the column (current position), negative = up, positive = down. */ --tr-registration-provider-separator-y: -14px; /* ---- Primary CTA: "Registrati con Email o Telefono" ---- Intentionally NO appearance controls here: this button is the shared questionnaire option button (.tr-option-button, see tr-question.css), so retune it there. Only its vertical spacing (VERTICAL SPACING below) is a registration control. */ /* ---- Existing-account line (mixed) ---- Font families are ALIASES of the actual project font tokens (Franklin Book for the question, Franklin Demi for Accedi). Font-size is a deliberate EXPLICIT designer-facing value (not aliased to the global helper-text token) so it can be tuned directly -- both pieces read this same value, only family/weight/ color differ. Gap is EXPLICIT, calibrated to match the previous plain-text-space width by default. */ --tr-registration-account-font-family: var(--tr-font-franklin-book); --tr-registration-account-font-size: 14px; --tr-registration-account-gap: 0.3em; --tr-registration-login-font-family: var(--tr-font-franklin-demi); --tr-registration-login-color: var(--tr-color-green); /* ---- VERTICAL SPACING (EXPLICIT) ---- Five independently-tunable distances inside the card, each consumed by exactly one selector (see below) so changing one never redistributes the others. Replaces the single uniform --tr-registration-card-gap that previously drove all four inter-element gaps via flex `gap`, plus the card's own generic padding-bottom that previously drove the fifth (account-to- bottom) distance -- see the file-level comment on .tr- registration-card for why that implicit distribution was removed. All five default to 18px, the exact current-equivalent value (var(--tr-space-lg), what --tr-registration-card-gap and --tr-question-card-padding's own bottom side both already resolved to) -- so this refactor is visually a no-op until these are manually retuned. Plain explicit px, no responsive curve yet (see this task's own note: viewport scaling is a later decision). */ --tr-registration-title-to-providers-gap: 18px; --tr-registration-providers-to-divider-gap: 18px; --tr-registration-divider-to-primary-gap: 18px; --tr-registration-primary-to-account-gap: 18px; --tr-registration-account-to-card-bottom: 18px; } /* Registration-specific tokens NOT part of this calibration task -- untouched, kept exactly as the previous pass left them (see AGENTS- facing task history). Left outside the designer-control block above since that block is scoped to this task's five corrections only. (--tr-registration-card-gap, formerly here too, was removed: it was the single uniform value driving ALL FOUR inter-element gaps via .tr-registration-card's flex `gap`, which is exactly the implicit distribution the five VERTICAL SPACING controls above now replace -- see .tr-registration-card below. It has no remaining consumer.) */ :root { --tr-registration-provider-gap: var(--tr-space-sm); --tr-registration-divider-gap: var(--tr-space-sm); --tr-registration-provider-label-font-size: 14px; } /* ─── Registration card ─── Same glass surface as .tr-question-card (background/border/radius/ backdrop-filter/padding all read the identical --tr-question-card-* tokens) -- one shared visual language, not a second copy of these values. Height is never fixed -- it hugs its content, and only shrinks (min-height: 0, same shrink-cascade participation as .tr- question-card) if the available space genuinely runs out, at which point .tr-hero-question-scroll's own overflow-y:auto is the safety fallback -- exactly as it already is for the question screens. */ .tr-registration-card { width: 100%; box-sizing: border-box; background: var(--tr-question-card-bg); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1px solid var(--tr-question-card-border-color); border-radius: var(--tr-question-card-radius); padding: var(--tr-question-card-padding); /* Overrides just the bottom side of the shared card padding above -- top/left/right still come from --tr-question-card-padding (unchanged, still shared with .tr-question-card) -- so this one distance (account row -> card's inside bottom edge) is independently tunable without touching that shared token or any other side of this card's own padding. */ padding-bottom: var(--tr-registration-account-to-card-bottom); display: flex; flex-direction: column; align-items: stretch; /* No flex `gap` here (deliberately removed -- see the VERTICAL SPACING controls above): each inter-element distance below is now an explicit margin-top on that element, driven by its own dedicated token, so changing one can never redistribute another. */ min-height: 0; } /* Compact uppercase UI heading, aliasing the header-button typography system -- see --tr-registration-title-* above. */ .tr-registration-card-title { margin: 0; text-align: center; font-family: var(--tr-registration-title-font-family); font-size: var(--tr-registration-title-font-size); letter-spacing: var(--tr-registration-title-tracking); text-transform: uppercase; white-space: nowrap; color: var(--tr-hero-title-color); } /* ─── Provider row ─── Any number of providers renders as equal-width columns (flex:1 1 0). position:relative so each column can host its own separator pseudo-element (see below) without extra DOM. Unchanged from the first pass (not part of this task). */ .tr-registration-providers { margin-top: var(--tr-registration-title-to-providers-gap); display: flex; align-items: stretch; width: 100%; } .tr-registration-provider { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tr-registration-provider-gap); background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tr-registration-provider:active { opacity: 0.6; } /* Separator: an absolutely-positioned, explicitly-sized line, centered vertically in the column via top:50%/translateY(-50%) -- NOT a border on the column, so its height/width are fully decoupled from the column's own content height/layout (see --tr-registration-provider- separator-* above). */ .tr-registration-provider:not(:first-child)::before { content: ''; position: absolute; top: 50%; left: 0; width: var(--tr-registration-provider-separator-width); height: var(--tr-registration-provider-separator-height); background: var(--tr-registration-provider-separator-color); transform: translate(-50%, calc(-50% + var(--tr-registration-provider-separator-y))); } /* Large circular OAuth badge. Size is the explicit --tr-registration-provider-icon-size (no responsive curve for now -- deliberately removed from the first pass's proportional system per this task). Color is CSS-only (filter, see --tr-registration- provider-icon-filter above) -- the SVG source files themselves (assets/icons/mobile/*-icon.svg) are never edited. */ .tr-registration-provider-icon { width: var(--tr-registration-provider-icon-size); height: var(--tr-registration-provider-icon-size); display: block; filter: var(--tr-registration-provider-icon-filter); } /* Provider label typography -- unchanged from the first pass, not part of this task (see --tr-registration-provider-label-font-size above, and its own @media rules further down this file). */ .tr-registration-provider-label { font-family: var(--tr-font-franklin-demi); font-size: var(--tr-registration-provider-label-font-size); letter-spacing: 0.01em; text-align: center; white-space: nowrap; color: var(--tr-color-text-dim); } /* ─── OPPURE divider ─── Compact UI typography (the header-button text system). Unchanged from the first pass, not part of this task. */ .tr-registration-divider { margin-top: var(--tr-registration-providers-to-divider-gap); display: flex; align-items: center; gap: var(--tr-registration-divider-gap); width: 100%; } .tr-registration-divider-line { flex: 1 1 auto; height: 1px; background: var(--tr-color-green); } .tr-registration-divider-label { flex: 0 0 auto; font-family: var(--tr-font-franklin-demi); font-size: var(--tr-header-button-text-size); letter-spacing: var(--tr-header-button-tracking); text-transform: uppercase; white-space: nowrap; color: var(--tr-color-green); } /* ─── Primary CTA ─── "Registrati con Email o Telefono" is the shared questionnaire option button itself (TROptionButton / .tr-option-button in tr-question.css, lime-filled via its existing --selected look) -- height, radius, font, weight, responsive size, tracking, padding and vertical text alignment all come from that component. Nothing about its appearance is declared here. This class is only a layout hook for the divider-to-button spacing control. */ .tr-registration-primary { margin-top: var(--tr-registration-divider-to-primary-gap); } /* ─── Existing-account line ─── "Hai già un profilo?" reads --tr-registration-account-font-family (Franklin Book) + --tr-registration-account-font-size (explicit, designer-facing). "Accedi" inherits that same font-size (so both pieces always match in size by construction) but overrides family (Franklin Demi) and color (lime) via its own alias tokens. The gap between them is a real, independently-tunable margin (see --tr-registration-account-gap above and .tr-registration-existing- question below) instead of a literal text space, calibrated to match the previous spacing by default. */ .tr-registration-existing { margin: var(--tr-registration-primary-to-account-gap) 0 0 0; text-align: center; font-family: var(--tr-registration-account-font-family); font-size: var(--tr-registration-account-font-size); line-height: var(--tr-hero-cta-description-leading); letter-spacing: var(--tr-hero-cta-description-tracking); color: var(--tr-hero-cta-description-color); } .tr-registration-existing-question { margin-right: var(--tr-registration-account-gap); } .tr-registration-login-link { display: inline; margin: 0; padding: 0; border: none; background: none; font-size: inherit; font-family: var(--tr-registration-login-font-family); color: var(--tr-registration-login-color); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* ─── NON ORA button ─── Same shared --tr-header-button-* geometry (height, font size, tracking, vertical AND horizontal padding) and content-sized width behavior as .tr-question-continue.tr-button (flex:0 0 auto, since it is paired with BACK, not alone like SALTA) -- but its own class, since unlike CONTINUA it has no enabled/disabled toggle: it always renders SALTA's permanent outline look (dark interior, lime border, lime text), never a filled state. Unchanged from the first pass. */ .tr-registration-secondary.tr-button { flex: 0 0 auto; height: var(--tr-header-button-height); padding: var(--tr-header-button-padding-top) var(--tr-header-button-padding-x) var(--tr-header-button-padding-bottom) var(--tr-header-button-padding-x); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-family: var(--tr-font-franklin-demi); font-size: var(--tr-header-button-text-size); letter-spacing: var(--tr-header-button-tracking); text-transform: uppercase; white-space: nowrap; border: var(--tr-button-border-width) solid var(--tr-color-green); border-radius: var(--tr-button-radius); background: #000000; color: var(--tr-color-green); } .tr-registration-secondary.tr-button:active { background: var(--tr-color-green); color: #10160c; } /* ─── Provider LABEL proportional scale-down: 320px → 430px ─── Unchanged from the first pass -- not part of this task (see section 10 of the calibration task: "Do NOT change provider labels, provider- label typography"). The provider ICON no longer has a responsive rule here (removed per this task -- see --tr-registration-provider-icon- size above, now a single explicit value with no curve); only the label's own font-size is still overridden per range. */ @media (max-width: 360px) { .tr-registration-provider-label { font-size: calc(var(--tr-registration-provider-label-font-size) * 0.785714 + (100vw - 320px) * 0.032143); } } @media (min-width: 360px) and (max-width: 375px) { .tr-registration-provider-label { font-size: calc(var(--tr-registration-provider-label-font-size) * 0.892857 + (100vw - 360px) * 0.028571); } } @media (min-width: 375px) and (max-width: 430px) { .tr-registration-provider-label { font-size: calc(var(--tr-registration-provider-label-font-size) * 0.928571 + (100vw - 375px) * 0.0155844); } } @media (min-width: 430px) { .tr-registration-provider-label { font-size: var(--tr-registration-provider-label-font-size); } }