diff --git a/frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx b/frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx index 80c2ff285..479369533 100644 --- a/frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx +++ b/frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.tsx @@ -14,10 +14,11 @@ import mobileCardCls from '@/shared/ui/v2/MobileCard/ui/MobileCard.module.scss'; import { PageTitle } from '@/shared/ui/PageTitle'; import { SearchBar } from '../ClanLayout/ClanLayout'; import cls from './ClanAllSubPage.module.scss'; -import clanLogo from '@/shared/assets/images/clanLogos/CommonSelectHeart 1.png'; +import clanLogo from '@/shared/assets/images/clanLogos/ClanLogo_Placeholder.png'; import iconLeaderboard from '@/shared/assets/images/clanLogos/LeaderboardWinFirstPlace.png'; -import iconFlagFi from '@/shared/assets/images/clanLogos/CommonFlagFinland 1.png'; -import starGray from '@/shared/assets/images/clanLogos/TopPanelMatchmakingPorvarit.png'; +import iconFlagFi from '@/shared/assets/images/clanLogos/CommonFlagFinland.png'; +import iconCommonLockOpen from '@/shared/assets/images/clanLogos/CommonLockOpen.png'; +import iconClanAgeTeenages from '@/shared/assets/images/clanLogos/ClanAgeTeenages.png'; type ClanItem = GetClansResponse['data']['Clan'][number]; @@ -118,11 +119,6 @@ const ClansViewMobile = ({ clans }: MobileProps) => { className={cls.MobileCardItem} > - - { />
- score - - {clan.gameCoins} + + leaderboard + lock + teenage + flag
-
- {t('members')} {clan.playerCount} / 30 +
+

+ {t('members')} {clan.playerCount} / 30 +

+

+ {t('position')} {clan.positionLeaderboard ?? '-'} +

+
+ +
+ {clan.labels?.slice(0, 3).map((label) => ( + + {label} + + ))}
@@ -189,20 +218,29 @@ const ClansViewDesktop = ({ clans, onClickToClan }: DesktopProps) => { alt="leaderboard" className={cardCls.ClanInfoIcon} /> + lock + teenage flag - - - - {t('members')} {clan.playerCount} / 30 - - - {clan.gameCoins} - +
+
+ + {t('members')} {clan.playerCount} / 30 + + + {t('position')} {clan.positionLeaderboard ?? '-'}
@@ -218,7 +256,6 @@ const ClansViewDesktop = ({ clans, onClickToClan }: DesktopProps) => { alt={label} className={cardCls.ClanLabelIcon} /> - {label} ))}
diff --git a/frontend-next-migration/src/shared/assets/images/clanLogos/ClanAgeTeenages.png b/frontend-next-migration/src/shared/assets/images/clanLogos/ClanAgeTeenages.png new file mode 100644 index 000000000..48219cd33 Binary files /dev/null and b/frontend-next-migration/src/shared/assets/images/clanLogos/ClanAgeTeenages.png differ diff --git a/frontend-next-migration/src/shared/assets/images/clanLogos/ClanLogo_Placeholder.png b/frontend-next-migration/src/shared/assets/images/clanLogos/ClanLogo_Placeholder.png new file mode 100644 index 000000000..6f94dbc08 Binary files /dev/null and b/frontend-next-migration/src/shared/assets/images/clanLogos/ClanLogo_Placeholder.png differ diff --git a/frontend-next-migration/src/shared/assets/images/clanLogos/CommonFlagFinland 1.png b/frontend-next-migration/src/shared/assets/images/clanLogos/CommonFlagFinland.png similarity index 100% rename from frontend-next-migration/src/shared/assets/images/clanLogos/CommonFlagFinland 1.png rename to frontend-next-migration/src/shared/assets/images/clanLogos/CommonFlagFinland.png diff --git a/frontend-next-migration/src/shared/assets/images/clanLogos/CommonLockOpen.png b/frontend-next-migration/src/shared/assets/images/clanLogos/CommonLockOpen.png new file mode 100644 index 000000000..3be3c2f79 Binary files /dev/null and b/frontend-next-migration/src/shared/assets/images/clanLogos/CommonLockOpen.png differ diff --git a/frontend-next-migration/src/shared/i18n/locales/en/clan.json b/frontend-next-migration/src/shared/i18n/locales/en/clan.json index 1a85a3bfb..f6e5bb949 100644 --- a/frontend-next-migration/src/shared/i18n/locales/en/clan.json +++ b/frontend-next-migration/src/shared/i18n/locales/en/clan.json @@ -9,8 +9,9 @@ "search_btn_text": "Search", "no_result": "No clans found for your search.", "rating": "Rating", + "position": "Position:", "clan": "Clan", - "clans": "Clans", + "clans": "Clans", "clans_title": "All Clans", "coins": "Coins", "tag": "Tag", diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/clan.json b/frontend-next-migration/src/shared/i18n/locales/fi/clan.json index 5ae55e7fc..2afbb7509 100644 --- a/frontend-next-migration/src/shared/i18n/locales/fi/clan.json +++ b/frontend-next-migration/src/shared/i18n/locales/fi/clan.json @@ -6,6 +6,7 @@ "clan_deleted": "Klaani poistettiin onnistuneesti", "clan_delete_cancelled": "Poisto peruutettiin", "rating": "Rating", + "position": "Sijoitus:", "clan": "Klaani", "clans": "Klaanit", "clans_title": "Kaikki Klaanit", diff --git a/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.module.scss b/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.module.scss index 22c36f727..2fbe66fb8 100644 --- a/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.module.scss +++ b/frontend-next-migration/src/shared/ui/v2/MobileCard/ui/MobileCard.module.scss @@ -1,309 +1,367 @@ @mixin card-dimensions { - --gap: 0.5rem; - width: calc(33.333% - 2 * var(--gap) / 3); - height: calc(33.333vh - 2 * var(--gap) / 3); + --gap: 0.5rem; + width: calc(33.333% - 2 * var(--gap) / 3); + height: calc(33.333vh - 2 * var(--gap) / 3); } -.MobileCard.DefenseGalleryCard { - @include card-dimensions; - overflow: hidden; - border-radius: var(--corner-radius-web); - background-color: var(--base-card-background); - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: center; - border: var(--border-mobile) solid var(--black); - box-shadow: var(--black) 4px 6px 0; +.MobileCard.DefenseGalleryCard { + @include card-dimensions; + overflow: hidden; + border-radius: var(--corner-radius-web); + background-color: var(--base-card-background); + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; + border: var(--border-mobile) solid var(--black); + box-shadow: var(--black) 4px 6px 0; } .withScalableLink { - transition: border-color ease .4s; - .TextContainer { - transition: height ease .4s; - } - .ImageContainer{ - transition: height ease .4s; - } - &:active { - .MobileCard { - border-color: var(--primary-color); - } + transition: border-color ease 0.4s; .TextContainer { - height: 20% !important; + transition: height ease 0.4s; } .ImageContainer { - height: 80% !important; + transition: height ease 0.4s; } - } - &:hover { - .MobileCard { - border-color: var(--primary-color); + &:active { + .MobileCard { + border-color: var(--primary-color); + } + .TextContainer { + height: 20% !important; + } + .ImageContainer { + height: 80% !important; + } } - .TextContainer { - height: 20% !important; + &:hover { + .MobileCard { + border-color: var(--primary-color); + } + .TextContainer { + height: 20% !important; + } + .ImageContainer { + height: 80% !important; + } } - .ImageContainer { - height: 80% !important; - } - } } .MobileCard { - transition: border-color ease .4s; + transition: border-color ease 0.4s; } .AppLink { - @include card-dimensions; + @include card-dimensions; } .AppLink .MobileCard { - width: 100% !important; + width: 100% !important; } .MobileCard.DefenseGalleryCard > .ImageContainer { - height: 70%; - width: 100%; - overflow: hidden; - clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); - padding-top: 20%; - display: flex; - justify-content: center; - align-items: center; + height: 70%; + width: 100%; + overflow: hidden; + clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); + padding-top: 20%; + display: flex; + justify-content: center; + align-items: center; } .MobileCard.DefenseGalleryCard > .TextContainer { - margin-top: 10%; + margin-top: 10%; } .MobileCard.DefenseGalleryCard > .TextContainer > .Title1 { - color:var(--white); - @media (max-width: breakpoint(sm)) { - font: var(--font-sw-m); - } - @media (max-width: breakpoint(xs)) { - font: var(--font-sw-s); - } + color: var(--white); + @media (max-width: breakpoint(sm)) { + font: var(--font-sw-m); + } + @media (max-width: breakpoint(xs)) { + font: var(--font-sw-s); + } } .MobileCard.DefenseGalleryCard > .TextContainer > .Title2 { - color:var(--primary-color); - @media (max-width: breakpoint(sm)) { - font: var(--font-sw-m); - } - @media (max-width: breakpoint(xs)) { - font: var(--font-sw-s); - } - + color: var(--primary-color); + @media (max-width: breakpoint(sm)) { + font: var(--font-sw-m); + } + @media (max-width: breakpoint(xs)) { + font: var(--font-sw-s); + } } // FurnitureCollectionsCard @mixin furniture-card-dimensions { - --gap: 2em; - width: 100%; - height: 400px; + --gap: 2em; + width: 100%; + height: 400px; } -.MobileCard.FurnitureCollectionsCard { - @include furniture-card-dimensions; - overflow: hidden; - border-radius: var(--corner-radius-web); - background-color: var(--base-card-background); - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: center; - border: var(--border-mobile) solid var(--black); - box-shadow: var(--black) 4px 6px 0; - position: relative; +.MobileCard.FurnitureCollectionsCard { + @include furniture-card-dimensions; + overflow: hidden; + border-radius: var(--corner-radius-web); + background-color: var(--base-card-background); + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; + border: var(--border-mobile) solid var(--black); + box-shadow: var(--black) 4px 6px 0; + position: relative; } -.FurnitureCollectionsCard.MobileCard { - transition: border-color ease .4s; +.FurnitureCollectionsCard.MobileCard { + transition: border-color ease 0.4s; } -.FurnitureCollectionsCard.AppLink { - @include furniture-card-dimensions; +.FurnitureCollectionsCard.AppLink { + @include furniture-card-dimensions; } .AppLink .MobileCard { - width: 100% !important; + width: 100% !important; } .MobileCard.FurnitureCollectionsCard > .ImageContainer { - width: 100%; - height: 70%; - background-color: transparent; - overflow: hidden; - clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); - display: flex; - justify-content: center; - align-items: flex-end; - position: relative; - - .Image { - object-fit: cover !important; - object-position: center bottom; width: 100%; - height: auto; - max-height: none; - } + height: 70%; + background-color: transparent; + overflow: hidden; + clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%); + display: flex; + justify-content: center; + align-items: flex-end; + position: relative; + + .Image { + object-fit: cover !important; + object-position: center bottom; + width: 100%; + height: auto; + max-height: none; + } } .MobileCard.FurnitureCollectionsCard > .TextContainer { - margin-top: 10%; + margin-top: 10%; } .MobileCard.FurnitureCollectionsCard > .TextContainer > .Title1 { - color:var(--white); - font-family: var(--font-family-title); - font-size: 1.5rem; - font-weight: 400; - @media (max-width: breakpoint(sm)) { - font-size: 1.2rem; - } - @media (max-width: breakpoint(xs)) { - font-size: .9rem; - } + color: var(--white); + font-family: var(--font-family-title); + font-size: 1.5rem; + font-weight: 400; + @media (max-width: breakpoint(sm)) { + font-size: 1.2rem; + } + @media (max-width: breakpoint(xs)) { + font-size: 0.9rem; + } } .MobileCard.FurnitureCollectionsCard > .TextContainer > .Title2 { - color:var(--primary-color); - font-family: var(--font-family-title); - font-size: 1.5rem; - font-weight: 400; - @media (max-width: breakpoint(sm)) { - font-size: 1rem; - } - @media (max-width: breakpoint(xs)) { - font-size: .8rem; - } - + color: var(--primary-color); + font-family: var(--font-family-title); + font-size: 1.5rem; + font-weight: 400; + @media (max-width: breakpoint(sm)) { + font-size: 1rem; + } + @media (max-width: breakpoint(xs)) { + font-size: 0.8rem; + } } // ClanCard .MobileCard.ClanCard { - @include card-dimensions; - position: relative; - overflow: hidden; - border-radius: var(--corner-radius-web); - background-color: var(--base-card-background); - display: flex; - flex-direction: column; - border: var(--border-mobile) solid var(--black); - box-shadow: var(--black) 4px 6px 0; - padding: 0.5rem; - - > .TextContainer:first-of-type { - height: 24%; - padding: 0.25rem 0.25rem 0; + @include card-dimensions; + position: relative; + overflow: hidden; + border-radius: var(--corner-radius-web); + background-color: var(--base-card-background); display: flex; flex-direction: column; - justify-content: center; - gap: 0.25rem; align-items: center; - position: relative; - z-index: 1; + justify-content: flex-start; + border: var(--border-mobile) solid var(--black); + box-shadow: 4px 8px 0px 0px var(--black); + padding: 0.625rem; + cursor: pointer; + transition: border-color 0.3s ease-out; - .Title1 { - color: var(--white); - font: var(--font-sw-l); - line-height: 1.1; - margin: 0; - text-align: center; - max-width: 100%; - white-space: normal; - word-break: break-word; - } + /* Fluid Variables */ + --label-font-size: clamp(0.6rem, 2.5vw, 0.75rem); + --label-icon-box: 1.375rem; + --label-icon-scale: 2.2em; + --label-gap: 0.313rem; + --label-pad-y: 0.2em; + --label-pad-x: 0.4em; + --label-border: 1px; + --label-radius: 6px; + --info-font-size: clamp(0.65rem, 2.2vw, 0.75rem); + --info-col-gap: 0.188rem; - .Text { margin: 0; } - } + > .TextContainer:first-of-type { + width: 100%; + height: auto; + padding: 0.2rem 0.1rem; + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.625rem; + align-items: center; + position: relative; + z-index: 1; - > .ImageContainer { - height: 48%; - display: flex; - justify-content: center; - align-items: center; - padding: 0.25rem 0; - position: relative; - z-index: 0; + .Text { + margin: 0; + } + } - .Image { - height: auto; - max-width: 100%; - object-fit: contain !important; - transform-origin: center; + > .TextContainer > .Title1 { + font: var(--font-sw-xs); + color: var(--primary-color); + margin: 0; + text-align: center; + max-width: 100%; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; } - } - > .TextContainer:last-of-type { - height: 28%; - padding: 0.25rem; - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.25rem; - align-items: stretch; - text-align: center; + > .ImageContainer { + width: 100%; + height: 80px; + max-height: 80px; + display: flex; + justify-content: center; + align-items: center; + padding: 0.25rem 0 0.4rem; + position: relative; + z-index: 0; - .ClanInfoRow { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 0 0.25rem; + .Image { + max-height: 100% !important; + width: auto !important; + object-fit: contain !important; + transform-origin: center; + } } - .ClanInfoIcon { - width: 20px; - height: 20px; - flex: 0 0 auto; - } + > .TextContainer:last-of-type { + flex: 1; + height: 100%; + padding: 0.2rem 0.2rem 0.3rem; + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.25rem; + align-items: center; + text-align: center; - .ClanInfoValue { - color: var(--white); - font-size: 0.98rem; - line-height: 1.05; - flex: 0 0 auto; - text-align: right; - } + .ClanInfoRow { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 0 0.125rem; + } - .ClanMembersRow { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - margin-inline: auto; - color: var(--white); - font-size: 0.92rem; - line-height: 1.15; - } - } -} + .ClanInfoBadges { + display: flex; + align-items: center; + justify-content: center; + gap: 0.313rem; + flex-wrap: nowrap; + width: 100%; + max-width: 100%; + } -@media (min-width: 768px) and (max-width: 1024px) { - .MobileCard.ClanCard > .ImageContainer .Image { - width: 80%; - } -} + .ClanInfoIcon { + width: clamp(14px, 4vw, 20px); + height: clamp(14px, 4vw, 20px); + } + + .ClanInfoStats { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.1rem; + width: 100%; + padding: 0; + } + + .ClanInfoValue { + color: var(--white); + font: var(--font-dm-xs); + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .ClanLabels { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + width: 100%; + height: auto; + gap: 0.313rem; + margin-top: 0.2rem; + padding: 0 0.2rem; + } -@media (max-width: 400px) { - .MobileCard.ClanCard > .TextContainer:first-of-type .Title1 { - font-size: 1.15rem; - } + .ClanLabel { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--label-gap); + background: var(--primary-color); + color: var(--black); + border: var(--label-border) solid var(--black); + border-radius: var(--label-radius); + padding: var(--label-pad-y) var(--label-pad-x); + font-size: var(--label-font-size); + line-height: 1; + white-space: nowrap; + min-width: 0; + max-width: 100%; + font-weight: 700; + + img, + svg { + width: clamp(12px, 3.5vw, 21px); + height: clamp(12px, 3.5vw, 21px); + } + } + } } -@media (max-width: 360px) { - .MobileCard.ClanCard > .TextContainer:first-of-type .Title1 { - font-size: 1rem; - } +@media (max-width: $breakpoint-md) { + .MobileCard.ClanCard { + width: 100%; + height: auto; + padding: 0.5rem; + } } // Override withScalableLink behaviour for ClanCard only .withScalableLink { - .MobileCard.ClanCard { - > .TextContainer:first-of-type { - height: 24% !important; - } + .MobileCard.ClanCard { + > .TextContainer:first-of-type { + height: auto !important; + } - > .ImageContainer { - height: 48% !important; - } + > .ImageContainer { + height: 60px !important; + max-height: 60px !important; + } - > .TextContainer:last-of-type { - height: 28% !important; + > .TextContainer:last-of-type { + height: auto !important; + } } - } } diff --git a/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.module.scss b/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.module.scss index 5f4c69ac4..589e68f49 100644 --- a/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.module.scss +++ b/frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.module.scss @@ -13,16 +13,14 @@ --small-size-desktop: 14px; --border-desktop: 4px; --border-mobile: 2px; - --primary-color: #FFA100; - --primary-border: #FFA100; - --background: #1E3544; - --white: #FAF9F6; + --primary-color: #ffa100; + --primary-border: #ffa100; + --background: #1e3544; + --white: #faf9f6; --black: #121212; } - .withScalableLink { - .ModularCardTexts { transition: all ease-in-out; transition-duration: 0.3s; @@ -32,23 +30,22 @@ flex-basis: 40% !important; } } - } // NewsImageCard -.Card.NewsImageCard { - position:relative; +.Card.NewsImageCard { + position: relative; background-color: var(--background); - height:203px; + height: 203px; border: var(--border-desktop) solid var(--black); border-radius: var(--border-radius-md); display: flex; box-shadow: 4px 8px 0 var(--black); - @media (max-width:breakpoint(xxl)) { + @media (max-width: breakpoint(xxl)) { height: 155px; } - @media (max-width:breakpoint(md)) { - height:127px; + @media (max-width: breakpoint(md)) { + height: 127px; border: var(--border-mobile) solid var(--black); box-shadow: 2px 4px 0 var(--black); } @@ -61,13 +58,13 @@ display: flex; flex-direction: column; align-content: center; - padding-left:.5em; - padding-right:.5em; + padding-left: 0.5em; + padding-right: 0.5em; } .Card.NewsImageCard > .ModularCardTexts > .ModularCardTitle { - padding-left:0 !important; - padding-right:0 !important; - margin-bottom: .5em; + padding-left: 0 !important; + padding-right: 0 !important; + margin-bottom: 0.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -75,13 +72,12 @@ overflow: hidden; h2 { font: var(--font-sw-l); - color:var(--primary-color); + color: var(--primary-color); } - @media (max-width:breakpoint(md)) { + @media (max-width: breakpoint(md)) { h2 { - font: var(--font-sw-l); - margin-top:.7em; + margin-top: 0.7em; } -webkit-line-clamp: 2; line-clamp: 2; @@ -92,15 +88,14 @@ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; - line-clamp:5; - @media (max-width:breakpoint(xxl)) { + line-clamp: 5; + @media (max-width: breakpoint(xxl)) { -webkit-line-clamp: 3; line-clamp: 3; } - @media (max-width:breakpoint(md)) { + @media (max-width: breakpoint(md)) { display: none; } - } .Card.NewsImageCard > .ModularCardTexts > .ModularCardFootnote { font: var(--font-dm-s); @@ -108,19 +103,19 @@ display: flex; flex-direction: column; justify-content: flex-end; - padding-left:0; - padding-right:0; - margin-top: .5em; - margin-bottom: .3em; + padding-left: 0; + padding-right: 0; + margin-top: 0.5em; + margin-bottom: 0.3em; } .Card.NewsImageCard > .ModularCardImageSection { overflow: hidden; - flex-grow:1; + flex-grow: 1; } .Card.NewsImageCard > .ModularCardImageSection > .ModularCardImage { - object-fit:contain; - height:100%; - width:100%; + object-fit: contain; + height: 100%; + width: 100%; } .Card.NewsImageCard > .ModularCardImageSection > .ModularCardTriangle { position: absolute; @@ -128,17 +123,16 @@ height: 0; border-bottom: 195px solid var(--background); border-right: 157px solid transparent; - @media (max-width:breakpoint(xxl)) { + @media (max-width: breakpoint(xxl)) { border-bottom: 147px solid var(--background); border-right: 130px solid transparent; } - @media (max-width:breakpoint(md)) { + @media (max-width: breakpoint(md)) { border-bottom: 123px solid var(--background); border-right: 80px solid transparent; } } - // TItleImageCard .Card.TitleImageCard { position: relative; @@ -148,8 +142,8 @@ border-radius: var(--border-radius-md); display: flex; box-shadow: 4px 8px 0 var(--black); - @media (max-width:breakpoint(md)) { - height:160px; + @media (max-width: breakpoint(md)) { + height: 160px; box-shadow: 2px 4px 0 var(--black); } } @@ -160,20 +154,20 @@ display: flex; flex-direction: column; justify-content: center; - padding-left:.5em; - padding-right:.5em; + padding-left: 0.5em; + padding-right: 0.5em; } .Card.TitleImageCard > .ModularCardTexts > .ModularCardTitle { - padding-left:0 !important; - padding-right:0 !important; - margin-top: .3em; - margin-bottom: .5em; + padding-left: 0 !important; + padding-right: 0 !important; + margin-top: 0.3em; + margin-bottom: 0.5em; h2 { font: var(--font-sw-xl); - color:var(--primary-color); + color: var(--primary-color); margin-left: 30px; } - @media (max-width:breakpoint(md)) { + @media (max-width: breakpoint(md)) { h2 { font: var(--font-sw-l); } @@ -182,9 +176,9 @@ .Card.TitleImageCard > .ModularCardImageSection > .ModularCardImage { height: 100%; - width:min-content; + width: min-content; object-fit: contain; - margin-left:auto; + margin-left: auto; } .Card.TitleImageCard > .ModularCardImageSection > .ModularCardTriangle { position: absolute; @@ -192,7 +186,7 @@ height: 0; border-bottom: 212px solid var(--background); border-right: 140px solid transparent; - @media (max-width:breakpoint(md)) { + @media (max-width: breakpoint(md)) { border-bottom: 152px solid var(--background); border-right: 85px solid transparent; } @@ -215,21 +209,19 @@ @media (max-width: breakpoint(xl)) { height: 184px; } - @media (max-width:breakpoint(md)) { + @media (max-width: breakpoint(md)) { height: 152px; box-shadow: 2px 4px 0 var(--black); } @media (max-width: 640px) { height: 144px; } - @media (max-width:breakpoint(sm)) { + @media (max-width: breakpoint(sm)) { height: 120px; box-shadow: 1px 2px 0 var(--black); } - } - .Card.DefenseCard > .ModularCardTexts { flex-basis: 45%; display: flex; @@ -242,7 +234,7 @@ h2 { line-height: var(--font-line-l) !important; font: var(--font-sw-m); - color:var(--white); + color: var(--white); } @media (max-width: breakpoint(xl)) { //margin-top: var(--spacing-600); @@ -250,7 +242,7 @@ font: var(--font-sw-m); } } - @media (max-width: breakpoint(md)) { + @media (max-width: breakpoint(md)) { padding-left: var(--spacing-200); h2 { line-height: var(--font-line-m) !important; @@ -282,7 +274,7 @@ .Card.DefenseCard > .ModularCardTexts > .ModularCardBody { line-height: calc(var(--font-line-xl) + 6px) !important; - color:var(--primary-color); + color: var(--primary-color); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; @@ -314,13 +306,13 @@ } .Card.DefenseCard > .ModularCardImageSection::before { - content: ""; + content: ''; position: absolute; left: 0; top: 0; width: 150%; height: 100%; - transform: skewX(20deg); + transform: skewX(20deg); background-color: var(--before-color, red); } @@ -347,209 +339,216 @@ // ClanCard .Card.ClanCard { - position: relative; - display: flex; - align-items: stretch; - justify-content: space-between; - background-color: var(--background); - border: var(--border-desktop) solid var(--black); - border-radius: var(--border-radius-md); - box-shadow: 4px 8px 0 var(--black); - overflow: hidden; - cursor: pointer; - transition: border-color .3s ease-out; - - //Labels - --label-font-size: 0.95rem; - --label-icon-box: 1.10em; - --label-icon-scale: 1.35; - --label-gap: 0.2rem; - --label-pad-y: 0.45rem; - --label-pad-x: 0.25rem; - --label-border: 1px; - --label-radius: 4px; - - // Info row - --info-font-size: 0.9rem; - --info-col-gap: 0.75rem; - - // Logo - --logo-lane-w: clamp(96px, 10.5vw, 150px); - --logo-max-h: 64%; - min-height: 180px; - - &:hover { - border-color: var(--primary-border); - } - - @media (max-width: 1280px) { - --logo-lane-w: clamp(92px, 10vw, 140px); - --logo-max-h: 60%; - --label-font-size: 0.9rem; - } - - @media (max-width: breakpoint(md)) { - border-width: var(--border-mobile); - box-shadow: 2px 4px 0 var(--black); - min-height: 152px; - - --label-font-size: 0.85rem; - - --logo-lane-w: clamp(88px, 18vw, 132px); - --logo-max-h: 58%; - } - - @media (max-width: breakpoint(sm)) { - box-shadow: 1px 2px 0 var(--black); - height: 280px; - min-height: unset; - --logo-lane-w: clamp(84px, 26vw, 120px); - --logo-max-h: 56%; - --label-font-size: 0.8rem; - } + position: relative; + display: flex; + align-items: stretch; + justify-content: space-between; + background-color: var(--background); + border: var(--border-desktop) solid var(--black); + border-radius: var(--border-radius-lg); + box-shadow: 6px 12px 0px 0px var(--ShadowblackShadow); + overflow: hidden; + cursor: pointer; + transition: border-color 0.3s ease-out; + + //Labels + --label-font-size: 0.95rem; + --label-icon-box: 2.5em; + --label-icon-scale: 3.5em; + --label-gap: 0.5rem; + --label-pad-y: 0.5rem; + --label-pad-x: 0.5rem; + --label-border: 2px; + --label-radius: 12px; + + // Info row + --info-font-size: 1.125rem; + --info-col-gap: 0.625rem; + + // Logo + --logo-lane-w: clamp(215px, 10.5vw, 222px); + --logo-max-h: 64%; + min-height: 180px; + + &:hover { + border-color: var(--primary-border); + } + + @media (max-width: 1280px) { + --logo-lane-w: clamp(92px, 10vw, 140px); + --logo-max-h: 60%; + --label-font-size: 0.9rem; + } + + @media (max-width: breakpoint(md)) { + border-width: var(--border-mobile); + box-shadow: 2px 4px 0 var(--black); + min-height: 152px; + + --label-font-size: 0.85rem; + + --logo-lane-w: clamp(88px, 18vw, 132px); + --logo-max-h: 58%; + } + + @media (max-width: breakpoint(sm)) { + box-shadow: 1px 2px 0 var(--black); + height: 280px; + min-height: unset; + --logo-lane-w: clamp(84px, 26vw, 120px); + --logo-max-h: 56%; + --label-font-size: 0.8rem; + } } .Card.ClanCard > .ModularCardTexts { - flex: 1 1 auto; - display: flex; - flex-direction: column; - gap: .35rem; - padding: 1rem; - min-width: 0; - - h2 { - font: var(--font-sw-l); - line-height: var(--font-line-l); - color: var(--white); - margin: 0 0 .18rem 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - > .ModularCardBody { + flex: 1 1 auto; display: flex; flex-direction: column; - gap: .28rem; + gap: 0.35rem; + padding: 1rem; min-width: 0; - } - - @media (max-width: breakpoint(md)) { - padding: .75rem; - gap: .28rem; h2 { - font: var(--font-sw-m); - margin-bottom: .12rem; + font: var(--font-sw-xxxl); + + color: var(--primary-color); + margin: 0 0 0.18rem 0; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + } + + > .ModularCardBody { + display: flex; + flex-direction: column; + gap: 0.28rem; + min-width: 0; } - } - @media (max-width: breakpoint(sm)) { - padding: .5rem; - gap: .24rem; + @media (max-width: breakpoint(md)) { + padding: 0.75rem; + gap: 0.28rem; - h2 { - font: var(--font-sw-s); - margin-bottom: .1rem; + h2 { + font: var(--font-sw-m); + margin-bottom: 0.12rem; + } + } + + @media (max-width: breakpoint(sm)) { + padding: 0.5rem; + gap: 0.24rem; + + h2 { + font: var(--font-sw-s); + margin-bottom: 0.1rem; + } } - } } .Card.ClanCard > .ModularCardImageSection { - flex: 0 0 var(--logo-lane-w); - min-width: var(--logo-lane-w); - display: flex; - align-items: center; - justify-content: flex-end; - overflow: hidden; - - .ModularCardImage { - max-height: var(--logo-max-h); - object-fit: contain; - pointer-events: none; - user-select: none; - } + flex: 0 0 var(--logo-lane-w); + min-width: var(--logo-lane-w); + display: flex; + align-items: center; + justify-content: flex-end; + overflow: hidden; + + .ModularCardImage { + max-height: var(--logo-max-h); + object-fit: contain; + pointer-events: none; + user-select: none; + } } .ClanInfoRow { - display: flex; - flex-wrap: nowrap; - align-items: center; - gap: var(--info-col-gap); - color: var(--white); - font-size: var(--info-font-size); - line-height: 1.28; - min-width: 0; - overflow: hidden; -} - -.ClanInfoBadges, + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: var(--info-col-gap); + color: var(--white); + font-size: var(--info-font-size); + min-width: 0; + overflow: hidden; +} + +.ClanInfoBadges { + display: inline-flex; + align-items: center; + gap: 10px; + min-width: 0; + white-space: nowrap; + flex: 0 1 auto; +} + .ClanInfoStats { - display: inline-flex; - align-items: center; - gap: 6px; - min-width: 0; - white-space: nowrap; - flex: 0 1 auto; + display: inline-flex; + align-items: center; + gap: 10px; + min-width: 0; + white-space: nowrap; + margin-top: 0.5rem; } .ClanInfoIcon { - width: 1.2em; - height: 1.2em; - flex: 0 0 auto; + width: 1.2em; + height: 1.2em; + flex: 0 0 auto; } .ClanInfoValue { - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; } .ClanLabels { - display: flex; - flex-wrap: wrap; - gap: 4px; - margin-top: 4px; - align-items: flex-start; - justify-content: flex-start; - min-width: 0; + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 4px; + align-items: flex-start; + justify-content: flex-start; + min-width: 0; } @media (max-width: breakpoint(sm)) { - .ClanLabels { - flex-wrap: nowrap; - flex-direction: column; - } + .ClanLabels { + flex-wrap: nowrap; + flex-direction: column; + } } .ClanLabel { - display: inline-flex; - align-items: center; - gap: var(--label-gap); - background: var(--primary-color); - color: var(--black); - border: var(--label-border) solid var(--black); - border-radius: var(--label-radius); - padding: var(--label-pad-y) var(--label-pad-x); - font-size: var(--label-font-size); - font-weight: 700; - line-height: 1; - max-width: 100%; - - .ClanLabelText { - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + display: inline-flex; + align-items: center; + gap: var(--label-gap); + background: var(--primary-color); + color: var(--black); + border: var(--label-border) solid var(--black); + border-radius: var(--label-radius); + padding: var(--label-pad-y) var(--label-pad-x); + font-size: var(--label-font-size); + font-weight: 700; + line-height: 1; + max-width: 100%; + + .ClanLabelText { + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } - img, - svg { - width: var(--label-icon-box); - height: var(--label-icon-box); - flex: 0 0 var(--label-icon-box); - transform: scale(var(--label-icon-scale)); - } + img, + svg { + width: var(--label-icon-box); + height: var(--label-icon-box); + flex: 0 0 var(--label-icon-box); + transform: scale(var(--label-icon-scale)); + } } // SectionCard .Card.SectionCard { @@ -569,7 +568,6 @@ margin: 0; margin-bottom: 30px; } - } .Card.SectionCard > .ModularCardTexts { @@ -627,7 +625,6 @@ height: auto; margin-top: -190px; } - } .Card.SectionCard > .ModularCardImageSection > .ModularCardImage {