.kl-feat-tees {
width: 100%;
max-width: 1200px;
margin: 0 auto 2.5rem;
padding: 0 1.25rem;
box-sizing: border-box;
font-family: 'DM Sans', system-ui, sans-serif;
}
.kl-feat-tees-head {
text-align: center;
margin: 0 0 1.5rem;
}
.kl-feat-tees-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #cc0000;
margin: 0 0 0.45rem;
text-align: center;
}
.kl-feat-tees-title {
font-size: clamp(22px, 3.5vw, 32px);
font-weight: 800;
letter-spacing: -0.005em;
margin: 0 0 0.25rem;
color: #111;
text-transform: uppercase;
text-align: center !important;
}
/* Edition tagline — small, italic, quiet. Sits directly below the
STARTING LINEUP title to signal that this is a Summer 2026 capsule
drop with limited inventory. Kept intentionally tiny so it doesn't
crowd the title or promo banner above the tile grid. */
.kl-feat-tees-edition {
font-size: 11.5px;
font-weight: 500;
font-style: italic;
color: #8a8a8a;
letter-spacing: 0.02em;
margin: 0 auto 0.5rem;
text-align: center;
line-height: 1.35;
max-width: 540px;
}
@media (max-width: 600px) {
.kl-feat-tees-edition { font-size: 10.5px; }
}
@media (max-width: 380px) {
.kl-feat-tees-edition { font-size: 9.5px; letter-spacing: 0; }
}
.kl-feat-tees-sub {
font-size: 14px;
color: #555;
margin: 0;
}
/* Promo banner — sits below the section subtitle, above the tile grid.
Black pill with red 15% OFF burst + KUMITE code in monospace. */
.kl-feat-promo-banner {
display: inline-flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
justify-content: center;
margin: 1.1rem auto 0;
padding: 0.6rem 1.1rem 0.6rem 0.5rem;
background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
border-radius: 999px;
font-family: 'DM Sans', system-ui, sans-serif;
max-width: 540px;
}
.kl-feat-promo-pct {
background: #cc0000;
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.12em;
padding: 5px 11px;
border-radius: 999px;
line-height: 1;
flex-shrink: 0;
}
.kl-feat-promo-text {
font-size: 12.5px;
font-weight: 500;
color: rgba(255,255,255,0.92);
letter-spacing: 0.01em;
}
/* The "only" word — uppercase + gold accent so visitors immediately
understand the discount is conditional on entering a code (not
applied automatically at checkout). */
.kl-feat-promo-emph {
color: #f4c542;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 1px;
}
.kl-feat-promo-code {
display: inline-block;
background: rgba(255,255,255,0.10);
color: #fff;
font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.10em;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.25);
margin: 0 1px;
}
@media (max-width: 480px) {
.kl-feat-promo-banner { padding: 0.55rem 0.85rem 0.55rem 0.45rem; gap: 0.45rem; }
.kl-feat-promo-pct { font-size: 11px; letter-spacing: 0.08em; padding: 5px 9px; }
.kl-feat-promo-text { font-size: 11.5px; }
.kl-feat-promo-code { font-size: 11px; letter-spacing: 0.06em; padding: 1px 6px; }
}
@media (max-width: 380px) {
/* On the narrowest phones, the pill + text were wrapping to 2 rows.
Tighten the pill + text sizes so the whole banner stays on one row. */
.kl-feat-promo-banner { padding: 0.45rem 0.6rem 0.45rem 0.35rem; gap: 0.35rem; max-width: 100%; }
.kl-feat-promo-pct { font-size: 9.5px; letter-spacing: 0.06em; padding: 4px 7px; }
.kl-feat-promo-text { font-size: 10.5px; }
}
@media (max-width: 340px) {
/* Truly tiny phones (iPhone SE 1st gen ~320px) — shrink once more
so the pill + text definitively stay on a single row. */
.kl-feat-promo-banner { padding: 0.4rem 0.5rem 0.4rem 0.3rem; gap: 0.3rem; }
.kl-feat-promo-pct { font-size: 9px; padding: 3px 6px; letter-spacing: 0.04em; }
.kl-feat-promo-text { font-size: 9.5px; }
}
/* ─── COMPACT MODE (v2026.05) ─────────────────────────────
User asked to reduce the merch section's visual dominance on
the home page since this is a media platform first, merch
second. Tighter photo aspect-ratio, reduced padding, smaller
type, lower hero proportion so the section reads as a
"supporting" pillar rather than the main course. */
/* Trimmed bottom margin per Nicholas (June 1, 2026 PM, 6th pass):
the "From the Lineup" section underneath needs to sit tighter
against the Summer Collection banner above. 1.75rem → 0.5rem
so the two pieces read as one continuous story. */
.kl-feat-tees {
margin: 1.5rem auto 0.5rem !important;
}
.kl-feat-tees-head {
margin: 0 0 0.9rem !important;
}
.kl-feat-tees-title {
font-size: clamp(18px, 2.8vw, 24px) !important;
}
.kl-feat-tee-img-wrap {
aspect-ratio: 5 / 4 !important;
}
.kl-feat-tee-body {
padding: 0.7rem 0.85rem 0.85rem !important;
gap: 0.25rem !important;
}
.kl-feat-tees-grid {
display: grid;
/* 3-column grid on desktop (one row of 3 product tiles), then
Shop All spans the full second row as a wide banner CTA.
Gives the product tiles enough room to show their full title
(e.g. "Mat Meets Mic — Men / Women") without text clipping.
Drops to 2 cols on tablet, 1 col on mobile. */
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* Shop All tile spans the full grid width below the 3 product tiles. */
.kl-feat-tee-shopall {
grid-column: 1 / -1;
}
/* ─── MAT MEETS MIC MODEL TILE ───
Full-bleed photo of model wearing the red Mat Meets Mic tee.
Bottom half is a dark gradient with white headline + two split
CTA buttons routing to Men / Women shop pages. */
.kl-feat-mmm {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%; /* stretch to grid row height on desktop */
min-height: 320px; /* sensible floor when stacked on mobile */
background-color: #cc0000;
border: 1px solid #0a0a0a;
border-radius: 8px;
overflow: hidden;
color: #fff;
font-family: 'DM Sans', system-ui, sans-serif;
transition: transform 0.25s ease, border-color 0.25s ease;
}
/* Hero photo lives in its own layer so hover swatches can swap the
src smoothly without disturbing the overlay copy on top. */
.kl-feat-mmm-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
transition: opacity 0.22s ease;
}
.kl-feat-mmm-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0.75) 100%);
pointer-events: none;
}
@media (max-width: 800px) {
.kl-feat-mmm {
aspect-ratio: 3 / 4;
min-height: 0;
}
}
.kl-feat-mmm:hover {
transform: translateY(-3px);
border-color: #cc0000;
}
.kl-feat-mmm-overlay {
/* Sit on top of the image; reserve a slim band of darker color so
the headline + buttons stay legible regardless of where the
portrait crops on different screens. position:relative + z-index
lifts it above the absolutely-positioned .kl-feat-mmm-photo
so the text + buttons + swatches paint visibly. */
position: relative;
z-index: 2;
padding: 1rem 1rem 0.9rem;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.85) 100%);
}
.kl-feat-mmm-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #ff6a6a;
margin: 0 0 0.4rem;
}
.kl-feat-mmm-h {
font-size: clamp(16px, 1.5vw, 19px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.005em;
color: #fff;
margin: 0 0 0.45rem;
text-transform: uppercase;
}
.kl-feat-mmm-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.82);
margin: 0 0 0.85rem;
line-height: 1.45;
}
.kl-feat-mmm-cta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.kl-feat-mmm-cta {
display: block;
text-align: center;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 9px 8px;
border-radius: 5px;
transition: background 0.18s ease, border-color 0.18s ease;
}
.kl-feat-mmm-cta:hover {
background: #cc0000;
border-color: #cc0000;
}
/* Color swatch row sits below the Men/Women CTAs. Lighter borders
appropriate for the dark overlay background. */
.kl-feat-mmm-swatches {
margin-top: 0.8rem;
padding-top: 0.8rem;
border-top: 1px solid rgba(255,255,255,0.18);
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
}
.kl-feat-mmm-swatches-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
margin-right: 0.25rem;
}
.kl-feat-mmm-swatch {
width: 18px;
height: 18px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.45);
background: var(--swatch, #888);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
}
.kl-feat-mmm-swatch:hover,
.kl-feat-mmm-swatch.is-hover,
.kl-feat-mmm-swatch.is-active {
transform: scale(1.22);
box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 3.5px #fff;
}
.kl-feat-mmm-swatch:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (max-width: 380px) {
.kl-feat-mmm-swatch { width: 16px; height: 16px; }
.kl-feat-mmm-swatches { gap: 6px; }
.kl-feat-mmm-swatches-label { font-size: 9.5px; letter-spacing: 0.12em; }
}
.kl-feat-tee-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e6e2dc;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.kl-feat-tee-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
border-color: #cc0000;
}
.kl-feat-tee-img-wrap {
position: relative;
aspect-ratio: 1 / 1;
background: #f7f5f2;
overflow: hidden;
}
.kl-feat-tee-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.kl-feat-tee-card:hover .kl-feat-tee-img {
transform: scale(1.05);
}
.kl-feat-tee-badge {
position: absolute;
top: 10px; left: 10px;
background: #cc0000;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 3px;
z-index: 1;
}
.kl-feat-tee-body {
padding: 1rem 1.1rem 1.15rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
flex: 1;
}
.kl-feat-tee-name {
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: #111;
margin: 0;
/* Keep product name + Men / Women pills on ONE line — prevent
the Women pill from wrapping to a second row on narrow phones.
The pills shrink in media queries below so they always fit. */
white-space: nowrap;
}
.kl-feat-tee-meta {
font-size: 12px;
color: #6a6a6a;
letter-spacing: 0.04em;
margin: 0;
}
.kl-feat-tee-price {
font-size: 15px;
font-weight: 700;
color: #cc0000;
margin: 0.25rem 0 0;
display: flex;
align-items: baseline;
gap: 0.45rem;
flex-wrap: wrap;
}
/* Old price — strikethrough, muted gray. Visually signals the
discount before the eye lands on the new red price. */
.kl-feat-tee-price-old {
font-size: 13px;
font-weight: 500;
color: #999;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
/* New price — bold red, slightly larger so it commands attention. */
.kl-feat-tee-price-new {
font-size: 16px;
font-weight: 800;
color: #cc0000;
}
/* "Save $5" pill — small green badge for an extra savings cue. */
.kl-feat-tee-price-save {
display: inline-block;
font-size: 9.5px;
font-weight: 800;
color: #fff;
background: #2c9b3e;
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-left: 0.15rem;
}
@media (max-width: 600px) {
.kl-feat-tee-price-old { font-size: 12.5px !important; }
.kl-feat-tee-price-new { font-size: 15px !important; }
.kl-feat-tee-price-save { font-size: 9px; padding: 2px 6px; }
}
@media (max-width: 380px) {
.kl-feat-tee-price-old { font-size: 11.5px !important; }
.kl-feat-tee-price-new { font-size: 14px !important; }
.kl-feat-tee-price-save { font-size: 8.5px; padding: 1px 5px; letter-spacing: 0.04em; }
}
.kl-feat-tee-cta {
margin-top: auto;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #111;
padding-top: 0.7rem;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.kl-feat-tee-card:hover .kl-feat-tee-cta { opacity: 1; transform: translateY(0); }
/* "Shop All" tile — Summer Collection banner. Per Nicholas
(June 1, 2026 PM): replace the old black background with a
warm summer sunset gradient (coral → orange → sun-gold). The
banner needs to FEEL like the drop announcement it is — sun-
soaked, on-brand, can't-miss. A slow horizontal sweep gives
it a subtle "shimmer" without ever crossing into busy.
Gold-highlight ring at the top pulls the eye in, deep coral
base reads as "summer" instantly. Border switched from black
to a warm sun-amber so the card edge glows instead of
hard-cutting. */
.kl-feat-tee-shopall {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse at 50% -10%, rgba(255,214,102,0.55) 0%, rgba(255,214,102,0) 55%),
radial-gradient(ellipse at 50% 115%, rgba(180,32,72,0.45) 0%, rgba(180,32,72,0) 60%),
linear-gradient(135deg, #ff9a3c 0%, #ff6a3c 32%, #ee3a55 62%, #c8285c 100%);
background-size: 100% 100%, 100% 100%, 220% 100%;
background-position: center top, center bottom, 0% 50%;
background-repeat: no-repeat;
color: #fff;
text-align: center;
padding: 2rem 1.2rem;
min-height: 100%;
border: 1px solid rgba(255,184,96,0.55);
overflow: hidden;
box-shadow: 0 14px 36px rgba(232,84,40,0.18), inset 0 1px 0 rgba(255,228,176,0.35);
animation: klSummerShimmer 14s ease-in-out infinite;
}
@keyframes klSummerShimmer {
0%, 100% { background-position: center top, center bottom, 0% 50%; }
50% { background-position: center top, center bottom, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.kl-feat-tee-shopall { animation: none; }
}
/* Banner-only mode: when the cycling product tiles are removed,
the Shop All Apparel banner stretches across the whole grid
and changes its inner layout to a row of 3 static shirts. */
.kl-feat-tees-grid.is-banner-only {
grid-template-columns: 1fr !important;
}
.kl-feat-tee-shopall--triple {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
align-items: center;
gap: 1.5rem;
padding: 1.6rem 1.5rem;
text-align: left;
min-height: 0;
}
/* SUMMER COLLECTION BANNER SHIRTS — bumped substantially per
Nicholas (June 1, 2026 PM, 5th pass): shirts were looking
small inside the banner on both desktop and mobile. New
sizing puts the trio at roughly the full height of the
banner so the merchandise actually reads at a glance. */
.kl-feat-tee-shopall-lineup {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 0;
height: 260px;
z-index: 1;
}
/* DESKTOP shirt sizing — per Nicholas (June 1, 2026 PM, 8th
pass): visually larger inside the banner without changing the
banner's own height or width. We accomplish this by raising
max-width (more horizontal room before clamp), bumping width %
(each shirt claims more of the lineup), and increasing the
transform scale on all three shirts. The lineup container
height stays at 260px so the banner box itself doesn't
grow — only the shirt visuals expand to fill it. */
.kl-feat-tee-shopall-shirt {
width: 60%;
max-width: 340px;
height: 100%;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 16px 32px rgba(0,0,0,0.55));
transition: transform 0.35s ease;
}
.kl-feat-tee-shopall-shirt:nth-child(1) {
transform: translateX(32%) rotate(-6deg) scale(1.08);
z-index: 1;
}
.kl-feat-tee-shopall-shirt:nth-child(2) {
transform: translateY(-6%) scale(1.25);
z-index: 2;
}
.kl-feat-tee-shopall-shirt:nth-child(3) {
transform: translateX(-32%) rotate(6deg) scale(1.08);
z-index: 1;
}
.kl-feat-tee-shopall--triple:hover .kl-feat-tee-shopall-shirt:nth-child(1) {
transform: translateX(26%) rotate(-9deg) scale(1.12);
}
.kl-feat-tee-shopall--triple:hover .kl-feat-tee-shopall-shirt:nth-child(3) {
transform: translateX(-26%) rotate(9deg) scale(1.12);
}
.kl-feat-tee-shopall--triple .kl-feat-tee-shopall-inner {
text-align: left;
}
@media (prefers-reduced-motion: reduce) {
.kl-feat-tee-shopall-shirt { transition: none; }
}
/* MOBILE — make the banner noticeably thinner per Nicholas, but
keep all 3 tees visible. Stack image + text vertically and crop
the photo row to ~120px so it doesn't dominate the screen. */
@media (max-width: 800px) {
.kl-feat-tee-shopall--triple {
grid-template-columns: 1fr;
gap: 0.85rem;
padding: 1.1rem 1rem;
}
.kl-feat-tee-shopall-lineup { height: 200px; }
/* Per Nicholas (June 2, 2026): mirror the desktop enlargement on
mobile too — bump shirt max-width so the apparel fills more of
the lineup band visually. Lineup height (200px) is unchanged so
the banner box dimensions stay identical. */
.kl-feat-tee-shopall-shirt { max-width: 260px; width: 60%; }
.kl-feat-tee-shopall--triple .kl-feat-tee-shopall-inner {
text-align: center;
}
}
@media (max-width: 480px) {
/* Per Nicholas (June 1, 2026 PM, 7th pass): slim the banner
height on mobile. Not as thin as the black top strip, but
noticeably shorter than before — tighter padding, smaller
shirt lineup, tightened type rhythm, hide the second specs
line so the band reads as one compact strip instead of two
stacked rows. Full width is preserved. */
.kl-feat-tee-shopall--triple { padding: 0.45rem 0.75rem; gap: 0.35rem; }
.kl-feat-tee-shopall-lineup { height: 105px; }
/* Per Nicholas (June 2, 2026): match the desktop enlargement —
let each shirt grow to ~140px (was 90px) so the apparel reads
more prominently inside the band. Banner height (105px) stays
identical so the box dimensions don't change. */
.kl-feat-tee-shopall-shirt { max-width: 140px; width: 62%; }
.kl-feat-tee-shopall-summer { padding: 3px 9px; font-size: 9px; letter-spacing: 0.12em; margin-bottom: 0.25rem; }
.kl-feat-tee-shopall-h { font-size: 16px !important; margin: 0 0 0.2rem !important; line-height: 1.05; }
.kl-feat-tee-shopall-h-sub { font-size: 11px !important; }
.kl-feat-tee-shopall-specs { font-size: 9.5px; line-height: 1.3; margin: 0 0 0.35rem; }
.kl-feat-tee-shopall-specs-line { display: block; }
/* Hide the secondary specs row on mobile so the band stays
slim — the primary "Sized for Toddler · Youth · Adult"
line is enough context. */
.kl-feat-tee-shopall-specs-line--alt { display: none !important; }
.kl-feat-tee-shopall-cta-row { gap: 5px; margin-top: 0.25rem; }
.kl-feat-tee-shopall-cta {
padding: 7px 10px;
font-size: 10px;
letter-spacing: 0.06em;
}
}
@media (max-width: 380px) {
/* Even tighter on the smallest phones (iPhone SE, etc.) */
.kl-feat-tee-shopall--triple { padding: 0.4rem 0.6rem; }
.kl-feat-tee-shopall-lineup { height: 90px; }
/* Per Nicholas (June 2, 2026): smallest-phone enlargement to
match desktop intent — was 78px, now 120px. Banner height
(90px) is unchanged. */
.kl-feat-tee-shopall-shirt { max-width: 120px; width: 62%; }
.kl-feat-tee-shopall-h { font-size: 16px !important; }
.kl-feat-tee-shopall-summer { font-size: 9px; padding: 3px 9px; }
}
.kl-feat-tee-shopall:hover { border-color: #cc0000; }
/* Rotator — full-card image bed that cycles every 2s, dimmed so
the foreground text stays legible. The fade is a simple cross-
fade between two stacked ![]()
nodes. */
.kl-feat-tee-shopall-rotator {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.kl-feat-tee-shopall-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.55s ease-in-out;
/* Warm the rotator photos so they read as sunset-lit instead
of midnight-dim — brightness up, slight sepia + warm hue-
rotate gives the family + product shots a sun-soaked look
that sits naturally on the new coral/sun-gold base. */
filter: brightness(0.62) saturate(1.18) contrast(1.06) sepia(0.18) hue-rotate(-8deg);
opacity: 0;
mix-blend-mode: soft-light;
}
.kl-feat-tee-shopall-photo.is-active { opacity: 0.85; }
.kl-feat-tee-shopall::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
/* Warm coral wash — replaces the old black overlay so the
rotator photos read as sun-lit and the headline still has
enough contrast against the band. Top highlight gives the
"sun pulled up over the horizon" cue; bottom deep-coral
grounds the card so CTAs pop. */
background:
radial-gradient(ellipse at 50% 0%, rgba(255,216,120,0.32) 0%, rgba(255,216,120,0) 55%),
linear-gradient(180deg, rgba(255,120,72,0.18) 0%, rgba(200,40,92,0.38) 100%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.kl-feat-tee-shopall-photo { transition: none; }
}
.kl-feat-tee-shopall-inner {
display: block;
position: relative;
z-index: 1;
}
.kl-feat-tee-shopall-eyebrow {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #cc0000;
margin: 0 0 0.55rem;
}
.kl-feat-tee-shopall-h {
display: block;
font-size: clamp(20px, 2.6vw, 26px);
font-weight: 800;
line-height: 1.1;
margin: 0 0 1rem;
text-transform: uppercase;
color: #fff;
/* Subtle deep-coral text-shadow so the white headline keeps
AA contrast on every band of the new sunset gradient. */
text-shadow: 0 2px 12px rgba(120,18,40,0.40), 0 1px 2px rgba(80,12,30,0.35);
}
.kl-feat-tee-shopall-cta {
display: inline-flex;
align-items: center;
justify-content: center;
background: #cc0000;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
transition: background 0.18s ease, transform 0.18s ease;
}
.kl-feat-tee-shopall-cta:hover {
background: #a30000;
transform: translateY(-1px);
}
/* "More Drops" alt button — outlined white-on-black so it visually
pairs with the red Browse Shop button as a 50/50 twin row. */
.kl-feat-tee-shopall-cta--alt {
background: transparent;
border: 1px solid rgba(255,255,255,0.45);
color: #fff;
}
.kl-feat-tee-shopall-cta--alt:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.75);
}
/* Row that holds the two CTAs side-by-side. On desktop they split
50/50; on narrow screens they stack so neither button truncates. */
.kl-feat-tee-shopall-cta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 0.85rem;
max-width: 420px;
}
@media (max-width: 480px) {
.kl-feat-tee-shopall-cta-row { grid-template-columns: 1fr; }
}
/* Price strip — mirrors the strikethrough + Save $5 pill style used
inside the live product tiles, so visitors get the same "you're
saving five bucks" cue on the marketing banner. */
.kl-feat-tee-shopall-price {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 1rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
padding: 7px 12px;
border-radius: 999px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.kl-feat-tee-shopall-price-old {
color: #b8b4ac;
text-decoration: line-through;
font-size: 13px;
font-weight: 500;
opacity: 0.85;
}
.kl-feat-tee-shopall-price-new {
color: #fff;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.01em;
}
.kl-feat-tee-shopall-price-save {
background: #2c9b3e;
color: #fff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 3px;
}
@media (max-width: 1100px) {
/* Tablet / narrow desktop: 2-column grid. Drops to 2 cols sooner so
the longest tile title ("Mat Meets Mic — Men / Women") never
clips on iPads or smaller laptops. */
.kl-feat-tees-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
.kl-feat-tees-grid { grid-template-columns: 1fr; gap: 0.85rem; }
/* Square aspect (1:1) on mobile gives the portrait family photo
enough vertical room that all three models — Joey + the kids —
stay in frame without any face clipping at the top. */
.kl-feat-tee-img-wrap { aspect-ratio: 1 / 1; }
.kl-feat-tees { padding: 0 1rem; }
/* On phones, always show the CTA hint — there's no hover state on touch. */
.kl-feat-tee-cta { opacity: 1 !important; transform: translateY(0) !important; }
}
@media (max-width: 380px) {
.kl-feat-tees { padding: 0 0.85rem; }
.kl-feat-tee-body { padding: 0.85rem 0.95rem 1rem; gap: 0.3rem; }
.kl-feat-tee-name { font-size: 14px; }
.kl-feat-tee-meta { font-size: 11.5px; }
.kl-feat-tee-price { font-size: 14px; }
.kl-feat-tee-cta { font-size: 11px; letter-spacing: 0.10em; padding-top: 0.5rem; }
.kl-feat-tee-shopall { padding: 1.5rem 1rem; }
.kl-feat-tee-shopall-cta { letter-spacing: 0.10em; padding: 10px 16px; }
.kl-feat-tee-shopall-price { gap: 8px; padding: 6px 10px; margin-bottom: 0.85rem; }
.kl-feat-tee-shopall-price-old { font-size: 12px; }
.kl-feat-tee-shopall-price-new { font-size: 15px; }
.kl-feat-tee-shopall-price-save { font-size: 9.5px; padding: 3px 7px; }
.kl-feat-tees-title { font-size: 22px; }
.kl-feat-tees-eyebrow { letter-spacing: 0.20em; }
}
/* Skeleton state while products load */
.kl-feat-tee-skel { animation: klFeatPulse 1.4s ease-in-out infinite; }
@keyframes klFeatPulse { 0%,100% { opacity:1 } 50% { opacity:0.55 } }
/* ─── COLOR SWATCHES ─── Live color picker on the home page cards.
Click a swatch → card image swaps to that variant + the link
updates so shop.html opens the product with that color preselected. */
.kl-feat-tee-swatches {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0.55rem 0 0;
padding: 0.55rem 0 0;
border-top: 1px solid #efece7;
}
.kl-feat-tee-swatch {
width: 18px;
height: 18px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.18);
background: var(--swatch, #888);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
}
.kl-feat-tee-swatch:hover,
.kl-feat-tee-swatch.is-hover { transform: scale(1.22); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #cc0000; }
.kl-feat-tee-swatch.is-active {
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #cc0000;
}
.kl-feat-tee-swatch:focus-visible {
outline: 2px solid #cc0000;
outline-offset: 2px;
}
/* Smooth image swap on swatch hover. */
.kl-feat-tee-img {
transition: filter 0.18s ease, opacity 0.18s ease;
}
/* Subtle visual lift on the meta line when previewing. */
.kl-feat-tee-meta { transition: color 0.15s ease; }
/* Men / Women fit links inside the tile title — click goes to the
gender-filtered shop page; clicking them does NOT trigger the
Quick-Add modal (suppressed via data-no-qa="1" in the card's
click handler). */
.kl-feat-tee-fit {
display: inline-block;
padding: 2px 9px;
margin: 0 1px;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: #111;
text-decoration: none;
background: #f4f1eb;
border: 1px solid #d4d0c8;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kl-feat-tee-fit:hover {
background: #cc0000;
color: #fff;
border-color: #cc0000;
}
.kl-feat-tee-fit-sep {
color: #b0a89b;
font-size: 12px;
margin: 0 1px;
}
@media (max-width: 600px) {
.kl-feat-tee-fit { font-size: 11px !important; padding: 2px 7px; }
}
@media (max-width: 380px) {
.kl-feat-tee-fit { font-size: 10px !important; padding: 1px 6px; margin: 0; }
.kl-feat-tee-fit-sep { font-size: 11px; margin: 0; }
}
@media (max-width: 340px) {
/* Truly narrow phones — shrink the title font + pill padding once
more so The Globe — Men / Women fits on one line. */
.kl-feat-tee-name { font-size: 13px !important; letter-spacing: -0.005em; }
.kl-feat-tee-fit { font-size: 9px !important; padding: 1px 5px; letter-spacing: 0; }
}
/* Product specs line — quiet one-liner between meta + price. Kept
deliberately tiny (≤10px) so it adds almost no vertical height
to the card. Wraps cleanly if it overflows; nowrap forced on
mobile so it stays on a single line. */
.kl-feat-tee-specs {
font-size: 10px;
font-weight: 400;
color: #8c8c8c;
margin: 0.1rem 0 0.15rem;
letter-spacing: 0;
line-height: 1.2;
}
/* ─── MOBILE TILE-TEXT OVERRIDE ────────────────────────────────
A page-level rule `@media (max-width: 600px) { section p { font-size: 16px !important; line-height: 1.8 !important; margin-bottom: 1.25rem !important; }}` exists for body copy in
other sections. That rule was inadvertently steamrolling EVERY
in our tile cards (name, meta, specs, price) — making the
cards balloon to ~2× designed height on mobile. We override it
explicitly here so the cards keep their designed proportions. */
@media (max-width: 600px) {
.kl-feat-tee-name { font-size: 15px !important; line-height: 1.25 !important; margin: 0 !important; }
.kl-feat-tee-meta { font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; }
.kl-feat-tee-price { font-size: 15px !important; line-height: 1.25 !important; margin: 0.25rem 0 0 !important; }
.kl-feat-tee-specs { font-size: 10px !important; line-height: 1.2 !important; margin: 0.1rem 0 0.15rem !important; white-space: nowrap; }
}
@media (max-width: 480px) {
.kl-feat-tee-specs { font-size: 9px !important; line-height: 1.15 !important; margin: 0.05rem 0 0.1rem !important; }
}
@media (max-width: 380px) {
.kl-feat-tee-swatch { width: 16px; height: 16px; }
.kl-feat-tee-swatches { gap: 5px; }
.kl-feat-tee-name { font-size: 14px !important; }
.kl-feat-tee-meta { font-size: 11.5px !important; }
.kl-feat-tee-price { font-size: 14px !important; }
.kl-feat-tee-specs { font-size: 8.5px !important; line-height: 1.1 !important; letter-spacing: 0; }
}
@media (max-width: 340px) {
/* For absolute worst-case narrow phones (older Androids, iPhone SE 1st gen ~320px),
tighten specs slightly more so the line still fits. */
.kl-feat-tee-specs { font-size: 8px !important; }
}
/* ─────────────────────────────────────────────────────────────
QUICK-ADD MODAL — opens when a Featured Tees tile is tapped.
Visitor picks size + qty, hits ADD TO CART, then sees two
options: Continue Shopping (close, stay on home page) OR
Checkout Now (POST cart to Fourthwall, redirect to checkout).
Bottom sheet on mobile (slide-up); centered card on desktop.
Shares the localStorage cart key `kl_shop_cart_v1` with
shop.html so items added here show up there and vice versa. */
.kl-qa-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0;
transition: opacity 0.22s ease;
z-index: 9998;
pointer-events: none;
}
.kl-qa-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.kl-qa-modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, calc(-50% + 12px));
/* Compact per Nicholas (May 31, 2026 PM, fifth pass): tightened
from 440x640 down to 380x540 max so the popup fits cleanly
on screen without feeling oversized — just enough room for
image, color label, size, qty, total, ADD, and the success
continue/checkout buttons. */
width: min(380px, calc(100vw - 24px));
max-height: min(540px, calc(100vh - 24px));
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 64px rgba(0,0,0,0.32);
z-index: 9999;
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s ease;
pointer-events: none;
overflow-y: auto;
font-family: 'DM Sans', system-ui, sans-serif;
color: #111;
}
.kl-qa-modal.is-open {
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: auto;
}
.kl-qa-close {
position: absolute; top: 0.55rem; right: 0.55rem;
width: 32px; height: 32px;
border: 0; background: rgba(255,255,255,0.92);
border-radius: 50%;
font-size: 18px; color: #333; cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 2;
transition: background 0.15s ease;
}
.kl-qa-close:hover { background: #eee; }
.kl-qa-img-wrap {
width: 100%;
/* Shorter aspect — was 4:3 (eats too much vertical space).
16:10 keeps the shirt visible without dominating the modal. */
aspect-ratio: 16 / 10;
background: #efece7;
overflow: hidden;
border-radius: 14px 14px 0 0;
}
.kl-qa-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.kl-qa-body {
padding: 0.85rem 1rem 1.05rem;
display: flex; flex-direction: column; gap: 0.45rem;
}
.kl-qa-name {
font-size: 15.5px;
font-weight: 800;
line-height: 1.2;
margin: 0;
color: #111;
}
.kl-qa-color-row {
display: flex; align-items: center; gap: 0.5rem;
font-size: 13px; color: #444;
margin: 0;
}
.kl-qa-color-dot {
display: inline-block;
width: 14px; height: 14px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.18);
background: var(--qa-swatch, #1a1a1a);
}
/* ─── HOME QUICK-ADD SWATCH ROW (June 1, 2026 PM per Nicholas) ───
Mirrors the shop modal swatch picker. Hidden on 1-color products,
visible when 2+ colors so the visitor can switch right inside
the Featured-tile modal. */
.kl-qa-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0.25rem 0 0.5rem;
}
.kl-qa-swatch {
position: relative;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid transparent;
padding: 0;
background: transparent;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease;
box-sizing: border-box;
}
.kl-qa-swatch::before {
content: "";
position: absolute;
inset: 2px;
border-radius: 50%;
background: var(--qa-sw, #999);
border: 1px solid rgba(0,0,0,0.18);
box-sizing: border-box;
}
.kl-qa-swatch:hover { transform: scale(1.08); }
.kl-qa-swatch.is-active { border-color: #111; }
.kl-qa-swatch:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.kl-qa-swatch[data-light="1"]::before {
border-color: rgba(0,0,0,0.32);
}
.kl-qa-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.10em;
color: #555;
margin: 0.25rem 0 -0.25rem;
}
.kl-qa-size {
width: 100%;
padding: 0.65rem 0.75rem;
font-size: 14px;
font-family: 'DM Sans', system-ui, sans-serif;
border: 1.5px solid #d4d0c8;
border-radius: 8px;
background: #fff;
color: #111;
cursor: pointer;
}
.kl-qa-size:focus {
outline: none;
border-color: #cc0000;
}
.kl-qa-size option:disabled { color: #b0aca5; }
.kl-qa-qty {
display: inline-flex; align-items: center;
border: 1.5px solid #d4d0c8;
border-radius: 8px;
overflow: hidden;
width: 120px;
background: #fff;
}
.kl-qa-qty button {
width: 38px; height: 38px;
border: 0; background: transparent;
font-size: 18px; font-weight: 600;
cursor: pointer;
color: #111;
}
.kl-qa-qty button:hover { background: #f4f1eb; }
.kl-qa-qty button:disabled { color: #c4c0b8; cursor: not-allowed; }
.kl-qa-qty-val {
flex: 1; text-align: center;
font-size: 15px; font-weight: 700;
}
.kl-qa-total {
display: flex; justify-content: space-between; align-items: baseline;
padding: 0.55rem 0 0.15rem;
border-top: 1px solid #ece8df;
margin-top: 0.25rem;
}
.kl-qa-total-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #6a6a6a;
font-weight: 700;
}
.kl-qa-total-val {
font-size: 20px;
font-weight: 800;
color: #cc0000;
}
.kl-qa-add {
width: 100%;
padding: 0.95rem 1rem;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
background: #cc0000;
color: #fff;
border: 0; border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.kl-qa-add:hover:not(:disabled) { background: #a80000; transform: translateY(-1px); }
.kl-qa-add:disabled { background: #d4d0c8; cursor: not-allowed; }
.kl-qa-note {
font-size: 11px; color: #888;
text-align: center; margin: 0.2rem 0 0;
letter-spacing: 0.01em;
}
/* ── Success state (replaces form after Add to Cart) ── */
.kl-qa-success {
padding: 1.5rem 1.1rem 1.5rem;
display: flex; flex-direction: column; align-items: center;
gap: 0.85rem;
text-align: center;
}
.kl-qa-success-icon {
width: 56px; height: 56px;
background: #2c9b3e;
color: #fff;
font-size: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
.kl-qa-success-title {
font-size: 20px; font-weight: 800; margin: 0;
color: #111;
}
.kl-qa-success-item {
font-size: 13px; color: #555; margin: 0;
}
.kl-qa-success-actions {
display: flex; flex-direction: column; gap: 0.55rem;
width: 100%;
margin-top: 0.5rem;
}
.kl-qa-checkout {
width: 100%;
padding: 0.95rem 1rem;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
background: #cc0000;
color: #fff;
border: 0; border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease;
}
.kl-qa-checkout:hover { background: #a80000; }
.kl-qa-continue {
width: 100%;
padding: 0.85rem 1rem;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background: #fff;
color: #111;
border: 1.5px solid #111;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease;
}
.kl-qa-continue:hover { background: #f4f1eb; }
/* ── MOBILE: bottom sheet style ── */
@media (max-width: 600px) {
.kl-qa-modal {
top: auto; bottom: 0; left: 0;
width: 100%;
max-height: 88vh;
border-radius: 18px 18px 0 0;
transform: translateY(20px);
}
.kl-qa-modal.is-open {
transform: translateY(0);
}
.kl-qa-img-wrap {
aspect-ratio: 3 / 2;
border-radius: 18px 18px 0 0;
}
.kl-qa-name { font-size: 16px !important; line-height: 1.2 !important; }
.kl-qa-add, .kl-qa-checkout { font-size: 13px; padding: 0.95rem 1rem; }
}
@media (max-width: 380px) {
.kl-qa-body { padding: 0.85rem 0.95rem 1.1rem; gap: 0.5rem; }
.kl-qa-name { font-size: 15px !important; }
.kl-qa-img-wrap { aspect-ratio: 2 / 1; }
}