/* delete once repo updated */

/* standardizing fonts */

main .section :where(h1, h2, h3) {

font-family: 'oswald';

font-weight: 500;}

main .section :where(h4, h5, h6,) {

font-family: 'inter-variable';

font-weight: 500;}

main .section p {

font-family:"inter-variable";

font-weight: 400;

font-size: 1.6rem;

line-height: 1.375em;}

main .section {

--text-color: #151515;}

/* button branding */

main .section {

--button-border-radius: 0;

--button-padding: 8px 16px;

--button-primary-color: var(--clr-white);

--button-primary-background: #BD161C;

--button-primary-color-hover: #BD161C;

--button-primary-background-hover: var(--clr-white);

}

.button:is(.primary, .secondary, .tertiary) { font-family:"inter-variable"; font-weight: 400; font-size:1.4rem; max-width: unset;}

.button.x-large {

--button-padding: 24px 60px;

min-inline-size: min(200px, 100%);height: auto;}

@media (width >= 900px) {.button.x-large {min-inline-size: 300px; font-size:1.8rem;}}

@media (width >= 1200px) {.button:is(.primary, .secondary, .tertiary) {font-size:1.8rem;}}

/* layout spacing */

main > .section {margin-block-end: 5.2rem;}

THE ORIGINAL SPORTSWEAR BRAND

[{<span class=button primary x-large>DISCOVER THE STYLES

</span>}]

DISCOVER THE STYLES

.chpw-hero .block-copy {place-self: end center;text-align: center;}

h1#the-original-sportswear-brand {color: #fff;font-size: 235%;max-width: 17ch;margin-inline: auto;}

@media (min-width:640px) {

.chpw-hero .block-copy { place-self: center; padding-inline:7% 0; text-align: left;}

h1#the-original-sportswear-brand {font-size: 300%;max-width: 12ch;margin-inline: 0;}}

@media (min-width:1200px) {h1#the-original-sportswear-brand {font-size: clamp(4rem, 1.2rem + 3.9vw, 10rem);}}

Champion®’s undeniable heritage, craftsmanship and productions strength, brings 6 substantial collections directly to your stockroom.

Featured Collections

REVERSE WEAVE[{<sup>®</sup>}]

[{<span class=button primary>Browse Collection</span>}]

Reverse Weave Collection

Outerwear

[{<span class=button primary>Browse Collection</span>}]

Outerwear Collection

Powerblend[{<sup>®</sup>}]

[{<span class=button primary>Browse Collection</span>

<style>

.collections .default-content-wrapper {padding-inline: var(--gutter-m);margin-block-end: 1em;}

.collections .slide-copy {display: grid;place-content: end start;padding: 0 1em;background: linear-gradient(0deg, #0000009c 15%, transparent 35%);}

.collections .slide-copy h3 {color: #fff;margin: 0;text-transform: uppercase;}

@media (width >= 900px) {

.collections {display: grid;grid-template-columns: 1fr 3fr;align-items: center;}

.content-carousel-wrapper {width: 100%;}

.collections .default-content-wrapper {margin:0;}}

</style>}]

Powerblend Collection

DISCOVER THE APP

FIND THE COLORS AND STYLES YOU LOVE WITH THE PRODUCT LOCATOR APP

[{

<div class=mobile-only>

<a href=https://apps.apple.com/bb/app/gildan-product-locator/id1493065523><span class=sr-only>Download on the App Store</span></a>

<a href=https://play.google.com/store/apps/details?id=com.gildaninventory&pcampaignid=web_share><span class=sr-only>Get it on Google Play</span></a>

</div>

<div class=large-only><span class=sr-only>Scan QR Code to download App</span></div>

}]

[{<style>.app .block-copy {place-content: end; padding: 1.6rem 2rem; color: #fff; background: linear-gradient(357deg, #0000008c, transparent 30%);}

.app .block-copy h2 {font-size: clamp(2rem, 3rem + 2vw, 4rem);}

.app .block-copy p:last-of-type {display: none;}

.app .block-copy .mobile-only {display: grid; gap: 0.5rem; margin-block-start: 2rem; grid-template-columns: auto auto;}

.app .block-copy a {display: block;}

.app .block-copy a::after {content: ''; display: block; height: 5rem;}

.app .block-copy a[href*="/apps.apple"]::after {

background: url(./media_198f6c5398305ead96390f44051b54a763667debc.png) center / contain no-repeat;}

.app .block-copy a[href*="/play.google"]::after {

background: url(./media_1b401fab39bb3575b5a4c21e872ffa08c260b0ef7.png) center / contain no-repeat;}

.large-only ~ p:has(picture) img {width: min(10rem,35%);margin-block-start: 2rem;}

@media (width >= 600px) { .app .block-copy h2 {font-size: clamp(2rem, 3rem + 2vw, 7rem);} .app .block-copy > p {max-width: 43ch;} .app .block-copy {place-content: center; background: linear-gradient(142deg, rgb(0 0 0 / 0.4) 15%, transparent 50%);}}

@media (width <= 599px){.app .large-only + p:has(picture) {display: none;}} </style>}]

Date