/* =============================================================================== GEDIAN SPORTS Shared standard profile banner and avatar header =============================================================================== */ /* =============================================================================== AUTHORITATIVE LANGUAGE DIRECTION =============================================================================== Profile pages must inherit the active site language direction from _Layout. Expected layout examples: Arabic: English: The profile pages no longer calculate or set their own dir attribute. =============================================================================== */ .gedian-standard-profile-page { direction: inherit !important; text-align: start !important; } .gedian-standard-profile-page :is( .gedian-standard-profile-header, .gedian-standard-profile-cover, .gedian-standard-profile-header-content, .gedian-standard-profile-avatar-area, .gedian-standard-profile-avatar, .gedian-standard-profile-identity ) { direction: inherit !important; } /* Explicit layout-direction selectors take priority over any old page-specific direction declarations. */ html[dir="rtl"] .gedian-standard-profile-page, body[dir="rtl"] .gedian-standard-profile-page { direction: rtl !important; text-align: right !important; } html[dir="ltr"] .gedian-standard-profile-page, body[dir="ltr"] .gedian-standard-profile-page { direction: ltr !important; text-align: left !important; } /* Language fallback for layouts that set lang but have not yet added dir. The explicit [dir] rules above remain the preferred and authoritative rules. */ html:not([dir]):lang(ar) .gedian-standard-profile-page, html:not([dir]):lang(fa) .gedian-standard-profile-page, html:not([dir]):lang(ur) .gedian-standard-profile-page { direction: rtl !important; text-align: right !important; } html:not([dir]):not(:lang(ar)):not(:lang(fa)):not(:lang(ur)) .gedian-standard-profile-page { direction: ltr !important; text-align: left !important; } /* Apply direction to the existing page-specific layouts as well, including statistics, main/sidebar grids, navigation, profile header and identity. */ .gedian-standard-profile-page :is( .container, .profile-header-content, .coach-header-content, .referee-header-content, .public-coach-header-content, .public-referee-header-content, .profile-layout, .coach-profile-layout, .referee-profile-layout, .public-coach-layout, .public-referee-layout, .profile-main, .coach-profile-main, .referee-profile-main, .public-coach-main, .public-referee-main, .profile-sidebar, .coach-profile-sidebar, .referee-profile-sidebar, .public-coach-sidebar, .public-referee-sidebar, .profile-navigation, .public-coach-navigation, .public-referee-navigation, .profile-statistics, .public-coach-statistics, .public-referee-statistics ) { direction: inherit !important; } /* Logical start alignment: RTL -> right LTR -> left */ .gedian-standard-profile-avatar-area { justify-self: start !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; } .gedian-standard-profile-identity, .gedian-standard-profile-page :is( h1, h2, h3, h4, p, .profile-summary-line, .coach-summary, .referee-summary, .public-coach-summary, .public-referee-summary, .profile-name-row, .coach-name-row, .referee-name-row, .public-coach-name-row, .public-referee-name-row ) { text-align: start !important; } /* Arrange the avatar first on the logical start side and identity next to it. The rule works for both RTL and LTR because grid direction is inherited. */ .gedian-standard-profile-header-content { grid-auto-flow: row !important; } /* Preserve LTR rendering only for explicitly marked English names, usernames, account numbers, URLs and other Latin identifiers. */ .gedian-standard-profile-page [dir="ltr"] { direction: ltr !important; unicode-bidi: isolate; } .gedian-standard-profile-page { --gedian-profile-cover-height: 310px; --gedian-profile-avatar-size: 152px; --gedian-profile-avatar-overlap: 82px; --gedian-profile-card-radius: 24px; --gedian-profile-avatar-border: 6px; } /* Do not clip the overlapping profile picture at the header-card level. */ .gedian-standard-profile-header { position: relative !important; z-index: 0 !important; overflow: visible !important; isolation: isolate; border-radius: var(--gedian-profile-card-radius) !important; background: #fff; } /* The cover is the rear layer and is the only element that clips the banner. */ .gedian-standard-profile-cover { position: relative !important; z-index: 1 !important; height: var(--gedian-profile-cover-height) !important; min-height: var(--gedian-profile-cover-height) !important; overflow: hidden !important; border-radius: var(--gedian-profile-card-radius) var(--gedian-profile-card-radius) 0 0; background: #0b284b; isolation: isolate; } .gedian-standard-profile-cover :is( .profile-cover-image, .coach-cover-image, .referee-cover-image, .public-coach-cover-image, .public-referee-cover-image, .profile-cover-fallback, .coach-cover-fallback, .referee-cover-fallback, .public-coach-cover-fallback, .public-referee-cover-fallback ) { position: relative; z-index: 0; display: block; width: 100% !important; height: var(--gedian-profile-cover-height) !important; min-height: var(--gedian-profile-cover-height) !important; } .gedian-standard-profile-cover :is( .profile-cover-image, .coach-cover-image, .referee-cover-image, .public-coach-cover-image, .public-referee-cover-image ) { object-fit: cover !important; } /* Keep existing banner gradients behind the avatar. */ .gedian-standard-profile-cover::before, .gedian-standard-profile-cover::after { z-index: 1 !important; pointer-events: none !important; } /* The white information area is above the cover. */ .gedian-standard-profile-header-content { position: relative !important; z-index: 10 !important; overflow: visible !important; min-height: 150px; border-radius: 0 0 var(--gedian-profile-card-radius) var(--gedian-profile-card-radius); background: #fff; } /* inline-start automatically means: RTL = right LTR = left */ .gedian-standard-profile-avatar-area { position: relative !important; z-index: 30 !important; width: var(--gedian-profile-avatar-size) !important; max-width: var(--gedian-profile-avatar-size) !important; margin-block-start: calc( -1 * var(--gedian-profile-avatar-overlap) ) !important; margin-inline: 0 !important; justify-self: start !important; align-self: start !important; overflow: visible !important; isolation: isolate; } /* The profile picture is always the top visual layer. */ .gedian-standard-profile-avatar { position: relative !important; z-index: 40 !important; display: grid !important; width: var(--gedian-profile-avatar-size) !important; height: var(--gedian-profile-avatar-size) !important; min-width: var(--gedian-profile-avatar-size) !important; min-height: var(--gedian-profile-avatar-size) !important; overflow: hidden !important; place-items: center; border: var(--gedian-profile-avatar-border) solid #fff !important; border-radius: 50% !important; background: #eaf3e5; box-shadow: 0 14px 34px rgba(7, 26, 51, .22) !important; transform: translateZ(0); isolation: isolate; } .gedian-standard-profile-avatar > img { position: relative; z-index: 2; display: block; width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover !important; } .gedian-standard-profile-avatar > span { position: relative; z-index: 2; } .gedian-standard-profile-identity { position: relative; z-index: 12; min-width: 0; text-align: start !important; } .gedian-standard-profile-identity :is( .profile-name-row, .coach-name-row, .referee-name-row, .public-coach-name-row, .public-referee-name-row ) { justify-content: flex-start !important; text-align: start !important; } /* Keep authenticated image-edit controls usable above all visual layers. */ .gedian-standard-profile-page :is( .avatar-upload-form, .coach-avatar-upload-form, .referee-avatar-upload-form, .cover-upload-form, .coach-cover-upload-form, .referee-cover-actions, .profile-banner-position-form, .referee-banner-position-form ) { z-index: 50 !important; } @media (max-width: 767.98px) { .gedian-standard-profile-page { --gedian-profile-cover-height: 220px; --gedian-profile-avatar-size: 118px; --gedian-profile-avatar-overlap: 62px; --gedian-profile-card-radius: 17px; --gedian-profile-avatar-border: 5px; } .gedian-standard-profile-header-content { direction: inherit !important; justify-items: stretch !important; padding-block-start: 18px !important; } /* Override the old centered PlayerDetails mobile rule. The logical start side follows the selected language direction. */ .gedian-standard-profile-avatar-area { grid-column: 1 / -1 !important; grid-row: 1 !important; justify-self: start !important; margin-inline: 0 !important; } .gedian-standard-profile-identity { text-align: start !important; } } @media (max-width: 420px) { .gedian-standard-profile-page { --gedian-profile-avatar-size: 108px; --gedian-profile-avatar-overlap: 57px; } } /* ========================================================= English profile name alignment ========================================================= The English name keeps LTR text direction, but its physical alignment follows the active website language. */ .player-english-name, .coach-english-name, .referee-english-name, .public-coach-name-en, .public-referee-name-en { display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important; unicode-bidi: isolate; justify-self: stretch !important; align-self: stretch !important; } /* Arabic interface: keep English name with details on the right */ html[dir="rtl"] .player-english-name, html[dir="rtl"] .coach-english-name, html[dir="rtl"] .referee-english-name, html[dir="rtl"] .public-coach-name-en, html[dir="rtl"] .public-referee-name-en, body[dir="rtl"] .player-english-name, body[dir="rtl"] .coach-english-name, body[dir="rtl"] .referee-english-name, body[dir="rtl"] .public-coach-name-en, body[dir="rtl"] .public-referee-name-en { text-align: right !important; } /* English interface: keep English name with details on the left */ html[dir="ltr"] .player-english-name, html[dir="ltr"] .coach-english-name, html[dir="ltr"] .referee-english-name, html[dir="ltr"] .public-coach-name-en, html[dir="ltr"] .public-referee-name-en, body[dir="ltr"] .player-english-name, body[dir="ltr"] .coach-english-name, body[dir="ltr"] .referee-english-name, body[dir="ltr"] .public-coach-name-en, body[dir="ltr"] .public-referee-name-en { text-align: left !important; }