/* =====================================================
UI COMPONENTS — editorial / shared across pages
Loaded AFTER platform-extras.css and design-tokens.css
===================================================== */
/* ── Section heading (eyebrow + serif title) ───────── */
.tt-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 0 0 20px;
flex-wrap: wrap;
}
.tt-section-heading .tt-eyebrow { display: block; margin-bottom: 6px; }
.tt-section-heading h2,
.tt-section-heading h3 { margin: 0; }
.tt-section-heading__btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 16px;
border: 1px solid var(--wardrobe-gold-soft, rgba(176,141,87,0.4));
border-radius: 999px;
color: var(--wardrobe-gold, #b08d57);
background: transparent;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.tt-section-heading__btn:hover {
background: var(--wardrobe-gold, #b08d57);
color: #1a1208;
border-color: var(--wardrobe-gold, #b08d57);
}
/* ── Form card + fields ────────────────────────────── */
.tt-form-card {
background: hsla(var(--surface-2) / 0.6);
border: 1px solid hsl(var(--hairline));
border-radius: 14px;
padding: 28px;
margin-bottom: 40px;
}
@media (max-width: 640px) { .tt-form-card { padding: 20px; } }
.tt-field { display: flex; flex-direction: column; margin-bottom: 22px; }
.tt-field__label {
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.tt-field__optional {
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
margin-left: 4px;
}
.tt-field__help {
display: block;
margin-top: 8px;
color: rgba(255, 255, 255, 0.62);
font-size: 12.5px;
line-height: 1.5;
}
.tt-textarea,
.tt-input {
width: 100%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid hsl(var(--hairline));
border-radius: 8px;
padding: 12px 14px;
color: #fff;
font-family: var(--font-inter);
font-size: 14px;
line-height: 1.55;
resize: vertical;
transition: border-color var(--dur-fast, 180ms) var(--ease-out, ease-out),
background var(--dur-fast, 180ms) var(--ease-out, ease-out);
min-height: 44px;
}
.tt-textarea:hover,
.tt-input:hover { border-color: hsla(var(--gold) / 0.35); }
.tt-textarea:focus,
.tt-input:focus { border-color: hsl(var(--gold)); background: rgba(255, 255, 255, 0.06); }
.tt-textarea::placeholder,
.tt-input::placeholder { color: rgba(255, 255, 255, 0.42); }
.tt-form-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) {
.tt-form-actions { justify-content: stretch; }
.tt-form-actions .tt-btn-gold { width: 100%; }
}
/* ── Dropzone (file upload) ────────────────────────── */
.tt-dropzone {
position: relative;
border: 1.5px dashed hsl(var(--hairline));
border-radius: 12px;
background: rgba(255, 255, 255, 0.02);
padding: 32px 20px;
text-align: center;
transition: border-color var(--dur-base, 320ms) var(--ease-out, ease-out),
background var(--dur-base, 320ms) var(--ease-out, ease-out);
cursor: pointer;
overflow: hidden;
}
.tt-dropzone:hover,
.tt-dropzone.is-dragover {
border-color: hsl(var(--gold));
background: hsla(var(--gold) / 0.05);
}
.tt-dropzone__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.tt-dropzone__content { pointer-events: none; }
.tt-dropzone__icon {
color: hsl(var(--gold));
opacity: 0.9;
margin-bottom: 12px;
}
.tt-dropzone__title {
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
font-weight: 500;
margin: 0 0 6px;
}
.tt-dropzone__title span {
color: hsl(var(--gold));
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.tt-dropzone__hint { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; margin: 0; }
.tt-dropzone__preview { position: relative; }
.tt-dropzone__preview img {
display: block;
max-width: 100%;
max-height: 360px;
margin: 0 auto;
border-radius: 8px;
object-fit: contain;
}
.tt-dropzone__remove {
position: absolute;
top: -6px; right: -6px;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.78);
color: #fff;
border: 1px solid hsl(var(--hairline));
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--dur-fast, 180ms) var(--ease-out, ease-out);
}
.tt-dropzone__remove:hover { background: hsl(var(--status-rejected-bg)); color: hsl(var(--status-rejected)); }
/* ── Button loading state ──────────────────────────── */
.tt-btn-gold[disabled],
.tt-btn-gold.is-loading {
opacity: 0.7;
cursor: wait;
pointer-events: none;
}
.tt-btn-gold__spinner {
animation: tt-spin 900ms linear infinite;
}
@keyframes tt-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Empty state ───────────────────────────────────── */
.tt-empty-state {
text-align: center;
padding: 48px 20px;
border: 1px solid hsl(var(--hairline));
border-radius: 12px;
background: rgba(255, 255, 255, 0.015);
}
.tt-empty-state svg { color: rgba(255, 255, 255, 0.35); margin-bottom: 12px; }
.tt-empty-state p {
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
margin: 0 auto 16px;
max-width: 46ch;
}
.tt-empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: hsla(var(--gold) / 0.08);
color: hsl(var(--gold));
font-size: 22px;
margin-bottom: 14px;
}
.tt-empty-state h3 { margin: 0 0 8px; }
.tt-empty-state .tt-eyebrow { margin-bottom: 10px; }
.tt-empty-state .tt-btn-gold { margin-top: 4px; }
/* ── Outfit page specifics ─────────────────────────── */
.tt-outfit-page { max-width: 860px; }
.tt-outfit-lede {
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.6;
max-width: 620px;
margin-bottom: 24px;
}
.tt-outfit-history { margin-top: 20px; }
.tt-outfit-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.tt-outfit-card {
background: hsla(var(--surface-2) / 0.6);
border: 1px solid hsl(var(--hairline));
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.tt-outfit-card__media {
aspect-ratio: 4 / 5;
background: #111;
}
.tt-outfit-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-outfit-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.tt-outfit-card__desc {
color: rgba(255, 255, 255, 0.82);
font-size: 13.5px;
line-height: 1.55;
margin: 0;
}
.tt-outfit-card__meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tt-outfit-card__date { color: rgba(255, 255, 255, 0.52); font-size: 12px; }
.tt-outfit-card__feedback {
margin: 6px 0 0;
padding: 12px 14px;
border-left: 2px solid hsl(var(--gold));
background: hsla(var(--gold) / 0.06);
border-radius: 0 8px 8px 0;
font-family: var(--font-display);
font-style: italic;
color: rgba(255, 255, 255, 0.88);
}
.tt-outfit-card__feedback .tt-eyebrow {
display: block;
font-family: var(--font-inter);
font-style: normal;
margin-bottom: 6px;
}
.tt-outfit-card__feedback p { margin: 0; font-size: 14px; line-height: 1.55; }
/* ── Editorial banner (small hero, home page top) ──── */
.tt-editorial-banner {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: center;
padding: 20px 22px;
margin: 12px 0;
border-radius: 14px;
background:
linear-gradient(135deg, hsla(var(--gold) / 0.08), transparent 60%),
hsla(var(--surface-2) / 0.7);
border: 1px solid hsl(var(--hairline));
}
.tt-editorial-banner .tt-eyebrow { margin-bottom: 6px; }
.tt-editorial-banner__title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.375rem, 1.1vw + 1rem, 1.75rem);
line-height: 1.2;
color: #fff;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.tt-editorial-banner__sub {
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
line-height: 1.5;
margin: 0;
max-width: 60ch;
}
.tt-editorial-banner__cta { margin-top: 10px; }
@media (min-width: 768px) {
.tt-editorial-banner { grid-template-columns: 1fr auto; padding: 22px 28px; }
.tt-editorial-banner__cta { margin-top: 0; }
}
/* ── Spotlight card (In evidenza + Riprendi pair) ──── */
.tt-spotlight-row {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 32px;
}
@media (min-width: 900px) {
.tt-spotlight-row { grid-template-columns: 1.15fr 1fr; gap: 20px; }
}
.tt-spotlight {
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
background: hsla(var(--surface-2) / 0.7);
border: 1px solid hsl(var(--hairline));
color: inherit;
text-decoration: none;
min-height: 200px;
transition: border-color var(--dur-base, 320ms) var(--ease-out, ease-out),
transform var(--dur-base, 320ms) var(--ease-out, ease-out);
}
.tt-spotlight:hover { border-color: hsla(var(--gold) / 0.45); transform: translateY(-2px); color: inherit; }
.tt-spotlight__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0c0c0c;
}
.tt-spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, 480ms) var(--ease-out, ease-out); }
.tt-spotlight:hover .tt-spotlight__media img { transform: scale(1.04); }
.tt-spotlight__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.7) 100%);
}
.tt-spotlight__badge {
position: absolute; top: 14px; left: 14px;
z-index: 2;
}
/* Card "Riprendi" in home: badge avorio caldo con icona gold (soft, non aggressivo). */
.tt-spotlight--resume .tt-spotlight__badge.tt-status--info {
background: hsl(36 22% 90%);
color: hsl(36 35% 18%);
border-color: hsl(36 22% 90%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.tt-spotlight--resume .tt-spotlight__badge.tt-status--info .flaticon-play-button-arrowhead {
color: hsl(var(--gold));
}
/* Card "Nuovo Prodotto" in home: stessa tonalità avorio per coerenza con "Riprendi". */
.tt-spotlight .tt-spotlight__badge.tt-status--white {
background: hsl(36 22% 90%);
color: hsl(36 35% 18%);
border-color: hsl(36 22% 90%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.tt-spotlight .tt-spotlight__badge.tt-status--white .tt-spotlight__badge-star {
color: hsl(var(--gold));
margin-right: 5px;
vertical-align: -2px;
}
.tt-spotlight__body { padding: 16px 20px 20px; }
.tt-spotlight__body .tt-eyebrow { margin-bottom: 8px; }
.tt-spotlight__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.375rem;
line-height: 1.2;
color: #fff;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.tt-spotlight__sub {
color: rgba(255, 255, 255, 0.72);
font-size: 13.5px;
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tt-spotlight__progress {
height: 3px; background: rgba(255,255,255,0.08);
border-radius: 2px; overflow: hidden; margin-top: 12px;
}
.tt-spotlight__progress > span {
display: block; height: 100%;
background: hsl(var(--gold));
transition: width var(--dur-slow, 480ms) var(--ease-out, ease-out);
}
.tt-spotlight__meta {
margin-top: 10px;
color: rgba(255, 255, 255, 0.55);
font-size: 12.5px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* ── Course posters (Netflix-style cards for "I Nostri Corsi") ── */
.tt-course-poster-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.tt-course-poster-grid--lg {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
@media (max-width: 767px) {
.tt-course-poster-grid,
.tt-course-poster-grid--lg {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
}
.tt-course-poster {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: hsl(var(--surface-2));
isolation: isolate;
border: 1px solid transparent;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
transition: transform var(--dur-base, 220ms) var(--ease-out, ease-out),
box-shadow var(--dur-base, 220ms) var(--ease-out, ease-out),
border-color var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.tt-course-poster:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
border-color: hsla(var(--gold) / 0.5);
color: inherit;
}
.tt-course-poster__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.tt-course-poster__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease-out, ease-out);
}
.tt-course-poster:hover .tt-course-poster__media img {
transform: scale(1.06);
}
.tt-course-poster__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(to top,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.55) 35%,
rgba(0, 0, 0, 0.1) 65%,
rgba(0, 0, 0, 0) 100%);
}
.tt-course-poster__body {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 6px;
color: #fff;
}
.tt-course-poster__body .tt-eyebrow { margin-bottom: 2px; }
.tt-course-poster__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.35rem;
line-height: 1.2;
color: #fff;
margin: 0;
letter-spacing: -0.01em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
/* Reserve always 2 lines so cards align */
min-height: 2.4em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tt-course-poster__meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.78);
font-weight: 500;
letter-spacing: 0.02em;
margin-top: 4px;
}
.tt-course-poster__reveal {
max-height: 0;
opacity: 0;
overflow: hidden;
margin-top: 0;
transition: max-height 360ms var(--ease-out, ease-out),
opacity 260ms var(--ease-out, ease-out),
margin-top 360ms var(--ease-out, ease-out);
}
.tt-course-poster:hover .tt-course-poster__reveal,
.tt-course-poster:focus-visible .tt-course-poster__reveal {
max-height: 220px;
opacity: 1;
margin-top: 10px;
}
/* Touch / mobile: niente reveal (evita che il testo si sollevi al tap) */
@media (hover: none), (max-width: 767px) {
.tt-course-poster__reveal {
display: none;
}
.tt-course-poster:hover {
transform: none;
}
}
.tt-course-poster__reveal-label {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: hsl(var(--gold));
margin-bottom: 6px;
}
.tt-course-poster__list {
list-style: none;
padding: 0;
margin: 0 0 12px;
display: flex;
flex-direction: column;
gap: 3px;
color: rgba(255, 255, 255, 0.85);
font-size: 12.5px;
line-height: 1.35;
}
.tt-course-poster__list li {
position: relative;
padding-left: 12px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tt-course-poster__list li::before {
content: "";
position: absolute;
left: 0; top: 7px;
width: 4px; height: 4px;
border-radius: 999px;
background: hsla(var(--gold) / 0.9);
}
.tt-course-poster__cta {
display: inline-block;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: hsl(var(--gold));
transition: transform var(--dur-fast, 160ms) var(--ease-out, ease-out);
}
.tt-course-poster:hover .tt-course-poster__cta { transform: translateX(3px); }
/* ── Pricing restyle ────────────────────────────────── */
.tt-pricing {
max-width: 1080px;
margin: 0 auto;
padding: 16px 20px 60px;
}
.tt-pricing__intro {
text-align: center;
margin-bottom: 48px;
}
.tt-pricing__intro .tt-eyebrow { margin-bottom: 10px; }
.tt-pricing__intro h2 { margin: 0 0 10px; }
.tt-pricing__intro p { color: rgba(255,255,255,0.72); max-width: 54ch; margin: 0 auto; font-size: 15px; line-height: 1.55; }
.tt-pricing__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
align-items: stretch;
}
@media (min-width: 1000px) {
.tt-pricing__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.tt-plan {
position: relative;
display: flex;
flex-direction: column;
padding: 36px 28px 30px;
background: hsla(var(--surface-2) / 0.7);
border: 1px solid hsl(var(--hairline));
border-radius: 16px;
transition: transform var(--dur-base, 320ms) var(--ease-out, ease-out),
border-color var(--dur-base, 320ms) var(--ease-out, ease-out),
box-shadow var(--dur-base, 320ms) var(--ease-out, ease-out);
}
.tt-plan:hover {
transform: translateY(-3px);
border-color: hsla(var(--gold) / 0.4);
box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
}
.tt-plan--recommended {
border-color: hsla(var(--gold) / 0.55);
background:
linear-gradient(180deg, hsla(var(--gold) / 0.06), transparent 60%),
hsla(var(--surface-3) / 0.85);
}
.tt-plan--current {
border-color: hsl(var(--gold));
background:
linear-gradient(180deg, hsla(var(--gold) / 0.08), transparent 60%),
hsla(var(--surface-3) / 0.85);
box-shadow: 0 0 0 1px hsla(var(--gold) / 0.25);
}
.tt-plan__kicker {
display: block;
font-family: var(--font-inter);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: hsl(var(--gold));
margin-bottom: 8px;
}
.tt-plan__name {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.75rem;
line-height: 1.1;
color: #fff;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.tt-plan__tagline {
color: rgba(255, 255, 255, 0.62);
font-size: 13.5px;
line-height: 1.5;
margin: 0 0 22px;
min-height: 40px;
}
.tt-plan__price {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid hsl(var(--hairline));
}
.tt-plan__price-amount {
font-family: var(--font-display);
font-weight: 500;
font-size: 2.5rem;
line-height: 1;
color: #fff;
letter-spacing: -0.02em;
}
.tt-plan__price-currency { color: rgba(255,255,255,0.7); font-size: 1.25rem; font-weight: 500; }
.tt-plan__price-period { color: rgba(255,255,255,0.55); font-size: 13px; margin-left: 4px; }
.tt-plan__price-free { font-family: var(--font-display); font-size: 2rem; color: #fff; }
.tt-plan__features {
list-style: none;
padding: 0;
margin: 0 0 26px;
display: flex;
flex-direction: column;
gap: 11px;
flex-grow: 1;
}
.tt-plan__features li {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
line-height: 1.5;
}
.tt-plan__features li::before {
content: "";
flex-shrink: 0;
width: 18px; height: 18px;
margin-top: 2px;
background: hsla(var(--gold) / 0.15);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c0a574' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.tt-plan__cta { margin-top: auto; }
.tt-plan__cta .tt-btn-gold,
.tt-plan__cta .tt-btn-gold--outline { width: 100%; }
/* Pillole locked state (blur + gold seal, invitational) */
.tt-pillola-locked {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 10px;
background:
linear-gradient(120deg, hsla(var(--gold) / 0.08), transparent 70%),
hsla(var(--surface-3) / 0.6);
border: 1px solid hsla(var(--gold) / 0.25);
overflow: hidden;
}
.tt-pillola-locked__seal {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 50%;
background: hsla(var(--gold) / 0.12);
color: hsl(var(--gold));
display: inline-flex; align-items: center; justify-content: center;
}
.tt-pillola-locked__text {
flex-grow: 1;
color: rgba(255, 255, 255, 0.82);
font-size: 13.5px;
line-height: 1.45;
}
.tt-pillola-locked__text strong { color: #fff; font-weight: 600; }
.tt-pillola-locked__cta {
flex-shrink: 0;
color: hsl(var(--gold));
font-weight: 600;
font-size: 13px;
text-decoration: none;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px;
transition: gap var(--dur-fast, 180ms) var(--ease-out, ease-out);
}
.tt-pillola-locked__cta:hover { gap: 8px; color: hsl(var(--gold-soft)); }
@media (max-width: 560px) {
.tt-pillola-locked { flex-wrap: wrap; }
.tt-pillola-locked__cta { margin-left: 48px; }
}
/* ── Consulenze coming-soon ─────────────────────────── */
.tt-coming-soon {
max-width: 680px;
margin: 32px auto 72px;
padding: 0 20px;
text-align: center;
}
.tt-coming-soon__ornament {
display: inline-block;
margin: 0 auto 22px;
color: hsl(var(--gold));
opacity: 0.9;
}
.tt-coming-soon .tt-eyebrow { display: block; margin-bottom: 14px; }
.tt-coming-soon h1 { margin: 0 0 16px; }
.tt-coming-soon__lede {
color: rgba(255, 255, 255, 0.78);
font-size: 16px;
line-height: 1.65;
margin: 0 auto 28px;
max-width: 56ch;
}
.tt-coming-soon__card {
text-align: left;
padding: 28px;
border-radius: 14px;
background: hsla(var(--surface-2) / 0.7);
border: 1px solid hsl(var(--hairline));
margin-top: 12px;
}
@media (max-width: 640px) { .tt-coming-soon__card { padding: 22px; } }
.tt-coming-soon__card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.25rem;
color: #fff;
margin: 0 0 10px;
}
.tt-coming-soon__card p {
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
line-height: 1.6;
margin: 0 0 18px;
}
.tt-coming-soon__confirm {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border-radius: 10px;
background: hsla(var(--status-approved-bg) / 0.6);
border: 1px solid hsla(var(--status-approved) / 0.3);
color: hsl(var(--status-approved));
font-size: 14px;
line-height: 1.5;
}
.tt-coming-soon__confirm svg { flex-shrink: 0; }
.tt-coming-soon__card { text-align: center; }
.tt-coming-soon__card .tt-btn-gold { min-width: 200px; }
.tt-coming-soon__card-note { margin: 0 0 18px; }
.tt-coming-soon__form { margin: 0; }
.tt-coming-soon__cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.tt-coming-soon__hints-caption {
margin: 44px 0 14px;
text-align: center;
font-family: var(--font-inter);
font-size: var(--fs-kicker);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
position: relative;
}
.tt-coming-soon__hints-caption::before,
.tt-coming-soon__hints-caption::after {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: hsla(var(--gold) / 0.45);
vertical-align: middle;
margin: 0 14px;
}
.tt-coming-soon__hints {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.tt-coming-soon__inner .tt-coming-soon__hints { margin-top: 8px; }
.tt-coming-soon__hints li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 14px;
border-radius: 10px;
background: hsla(var(--surface-2) / 0.4);
border: 1px solid hsl(var(--hairline));
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
line-height: 1.55;
}
.tt-coming-soon__hint-label {
flex-shrink: 0;
display: inline-block;
min-width: 68px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: hsl(var(--gold));
background: hsla(var(--gold) / 0.08);
border: 1px solid hsla(var(--gold) / 0.25);
text-align: center;
}
/* ── Home pills nav (refined) ──────────────────────── */
/* Existing .tt-home-pills styles live in style.css; we only
add an aria-friendly focus state via :focus-visible global. */
/* ── CTA refined (membership) ──────────────────────── */
.tt-home-cta.tt-home-cta--refined {
text-align: center;
padding: 36px 24px;
border-radius: 16px;
background:
radial-gradient(circle at top, hsla(var(--gold) / 0.08), transparent 65%),
hsla(var(--surface-3) / 0.8);
border: 1px solid hsla(var(--gold) / 0.25);
margin-bottom: 32px;
}
.tt-home-cta--refined .tt-eyebrow { margin-bottom: 8px; display: inline-block; }
.tt-home-cta--refined h3 { margin: 0 0 10px; }
.tt-home-cta--refined p {
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.55;
margin: 0 auto 22px;
max-width: 54ch;
}
.tt-home-cta--refined .tt-home-cta__btns {
display: inline-flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 520px) {
.tt-home-cta--refined .tt-home-cta__btns { width: 100%; flex-direction: column; }
.tt-home-cta--refined .tt-btn-gold { width: 100%; }
}
/* ── Video thumbnail with hover/touch preview + progress ────────────
Usage:
12:34
*/
.tt-video-thumb {
position: relative;
display: block;
overflow: hidden;
background: hsl(var(--surface-3));
border-radius: inherit;
}
.tt-video-thumb > img,
.tt-video-thumb__preview {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tt-video-thumb__preview {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
z-index: 1;
}
.tt-video-thumb.is-previewing .tt-video-thumb__preview { opacity: 1; }
.tt-video-thumb.is-previewing > img { opacity: 0.001; }
.tt-video-thumb__time {
position: absolute;
right: 8px;
bottom: 10px;
z-index: 2;
padding: 2px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
pointer-events: none;
}
.tt-video-thumb__progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
z-index: 2;
pointer-events: none;
}
.tt-video-thumb__progress > span {
display: block;
height: 100%;
background: linear-gradient(90deg, hsl(var(--gold)), hsl(var(--gold-deep, var(--gold))));
transition: width var(--dur-slow, 320ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
/* ── Spotlight row: Resume first on mobile AND on desktop left ──────
The row is a 2-column grid on desktop; on mobile it stacks.
We use flex row-reverse to place Resume on the LEFT when present.
A data-hook on the row lets us flip order when needed.
*/
.tt-spotlight-row { align-items: stretch; }
.tt-spotlight-row .tt-spotlight--resume { order: -1; }
@media (max-width: 767px) {
.tt-spotlight-row { display: flex; flex-direction: column; gap: 16px; }
.tt-spotlight-row .tt-spotlight--resume { order: -1; }
}
/* Make the resume card's media slot play nicely with video-thumb */
.tt-spotlight__media.tt-video-thumb { display: block; }
.tt-spotlight__media.tt-video-thumb > img {
position: absolute;
inset: 0;
}
.tt-spotlight__media.tt-video-thumb {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
}
/* Resume card body: main content left, progress+CTA aside right */
.tt-spotlight__body--resume {
display: flex;
gap: 20px;
align-items: flex-start;
justify-content: space-between;
}
.tt-spotlight__body-main {
flex: 1;
min-width: 0;
}
.tt-spotlight__body-aside {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* Circular progress ring */
.tt-spotlight__progress-ring {
position: relative;
width: 60px;
height: 60px;
flex-shrink: 0;
}
.tt-spotlight__progress-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
overflow: visible;
}
.tt-spotlight__progress-ring__bg {
fill: none;
stroke: rgba(255, 255, 255, 0.10);
stroke-width: 3;
}
.tt-spotlight__progress-ring__fg {
fill: none;
stroke: hsl(var(--gold));
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dasharray var(--dur-slow, 600ms) var(--ease-out, ease-out);
}
.tt-spotlight__progress-ring__value {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Narrow screens: smaller ring */
@media (max-width: 480px) {
.tt-spotlight__body--resume { gap: 14px; }
.tt-spotlight__progress-ring { width: 52px; height: 52px; }
.tt-spotlight__progress-ring__value { font-size: 11px; }
}
/* Cronologia: resume spotlight più compatto + respiro prima della griglia */
.tt-spotlight--history {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.tt-spotlight--history .tt-spotlight__title { font-size: 1.2rem; }
.tt-spotlight--history + .tt-home-section { margin-top: 48px; }
@media (max-width: 768px) {
.tt-spotlight--history + .tt-home-section { margin-top: 32px; }
}
/* ── Page hero (editorial section top) ──────────────── */
.tt-page-hero {
padding: 24px 0 20px;
margin-bottom: 24px;
border-bottom: 1px solid hsl(var(--hairline));
}
.tt-page-hero .tt-eyebrow { display: inline-block; margin-bottom: 8px; }
.tt-page-hero h1,
.tt-page-hero .tt-h2-serif,
.tt-page-hero .tt-h1-serif { margin: 0 0 10px; }
.tt-page-hero__lede {
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
line-height: 1.6;
max-width: 70ch;
margin: 0;
}
@media (max-width: 767px) {
.tt-page-hero { padding: 18px 0 16px; margin-bottom: 18px; }
}
/* ── Horizontal list card (watch history, playlists) ── */
.tt-history-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 768px) {
.tt-history-grid { gap: 16px; }
}
.tt-history-card {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
padding: 10px;
border-radius: 12px;
background: hsla(var(--surface-2) / 0.55);
border: 1px solid hsl(var(--hairline));
color: inherit;
text-decoration: none;
transition: border-color var(--dur-base, 220ms) var(--ease-out, ease-out),
transform var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.tt-history-card:hover {
border-color: hsla(var(--gold) / 0.45);
transform: translateY(-1px);
color: inherit;
text-decoration: none;
}
.tt-history-card__thumb {
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
position: relative;
background: #0c0c0c;
}
.tt-history-card__body {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 6px;
}
.tt-history-card__body .tt-eyebrow { margin: 0; }
.tt-history-card__title {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 1.35;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tt-history-card__meta {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
font-variant-numeric: tabular-nums;
}
.tt-history-card__pct {
color: hsl(var(--gold));
font-weight: 600;
letter-spacing: 0.02em;
}
@media (max-width: 520px) {
.tt-history-card { grid-template-columns: 130px 1fr; gap: 12px; padding: 8px; }
.tt-history-card__title { font-size: 15px; }
}
/* ── Tabs (design-system pill tabs) ─────────────────── */
.tt-tabs {
display: flex;
gap: 4px;
padding: 4px;
margin-bottom: 24px;
background: hsla(var(--surface-3) / 0.55);
border: 1px solid hsl(var(--hairline));
border-radius: 999px;
width: max-content;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tab {
padding: 8px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
transition: background var(--dur-base, 220ms) var(--ease-out, ease-out),
color var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.tt-tab:hover { color: #fff; text-decoration: none; }
.tt-tab.is-active {
background: hsl(var(--gold));
color: hsl(var(--gold-ink, 220 30% 8%));
font-weight: 600;
}
/* ── Salvati card remove button (corner X) ──────────── */
.tt-salvati-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
}
.tt-salvati-card__remove {
background: none;
border: none;
padding: 4px;
color: rgba(255, 255, 255, 0.35);
cursor: pointer;
font-size: 11px;
line-height: 1;
transition: color var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.tt-salvati-card__remove:hover { color: hsl(var(--status-rejected, 0 65% 55%)); }
/* ── Path card (learning path progress row) ─────────── */
.tt-path-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.tt-path-card {
display: grid;
grid-template-columns: 52px 1fr 20px;
gap: 14px;
align-items: center;
padding: 14px 16px;
border-radius: 14px;
background: hsla(var(--surface-2) / 0.55);
border: 1px solid hsl(var(--hairline));
color: inherit;
text-decoration: none;
transition: border-color var(--dur-base, 220ms) var(--ease-out, ease-out),
transform var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.tt-path-card:hover {
border-color: hsla(var(--gold) / 0.4);
transform: translateY(-1px);
color: inherit;
text-decoration: none;
}
.tt-path-card__icon {
width: 52px;
height: 52px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: hsla(var(--surface-3) / 0.7);
border: 1.5px solid hsl(var(--hairline));
}
.tt-path-card__icon--base { color: hsl(var(--status-approved, 145 45% 45%)); border-color: hsla(var(--status-approved, 145 45% 45%) / 0.4); }
.tt-path-card__icon--intermedio { color: hsl(var(--status-warning, 42 88% 55%)); border-color: hsla(var(--status-warning, 42 88% 55%) / 0.4); }
.tt-path-card__icon--avanzato { color: hsl(var(--status-rejected, 0 65% 55%)); border-color: hsla(var(--status-rejected, 0 65% 55%) / 0.4); }
.tt-path-card__body { min-width: 0; }
.tt-path-card__head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.tt-path-card__title {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
color: #fff;
}
.tt-path-card__progress {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.tt-path-card__bar {
flex: 1;
height: 4px;
border-radius: 4px;
background: hsla(var(--surface-3) / 0.8);
overflow: hidden;
}
.tt-path-card__bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, hsl(var(--gold)), hsl(var(--gold-deep, var(--gold))));
transition: width var(--dur-slow, 320ms) var(--ease-out, ease-out);
}
.tt-path-card__pct {
font-weight: 600;
color: hsl(var(--gold));
font-variant-numeric: tabular-nums;
min-width: 3ch;
text-align: right;
}
.tt-path-card__badge {
margin-top: 8px;
font-size: 12px;
color: hsl(var(--status-approved, 145 45% 45%));
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.tt-path-card__badge span { color: rgba(255, 255, 255, 0.5); }
.tt-path-card__chev {
color: rgba(255, 255, 255, 0.35);
font-size: 14px;
}
@media (max-width: 520px) {
.tt-path-card { grid-template-columns: 44px 1fr 16px; padding: 12px; gap: 12px; }
.tt-path-card__icon { width: 44px; height: 44px; font-size: 18px; }
.tt-path-card__title { font-size: 14px; }
}
/* ─────────────────────────────────────────────────────
VIDEO DETAILS — design system additions
───────────────────────────────────────────────────── */
/* Player row: video + vertical quick actions column */
.tt-vd-player-row {
display: flex;
align-items: stretch;
gap: 14px;
margin-bottom: 16px;
}
.tt-vd-player-row .tt-vd-player { flex: 1; min-width: 0; }
.tt-vd-quick-actions {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
width: 80px;
}
.tt-vd-qa {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 6px;
width: 100%;
background: hsla(var(--surface-2, 0 0% 10%) / 0.7);
border: 1px solid hsl(var(--hairline));
border-radius: 12px;
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out),
color var(--dur-base, 200ms) var(--ease-out),
transform var(--dur-fast, 160ms) var(--ease-out);
}
.tt-vd-qa:hover {
background: hsla(var(--surface-3, 0 0% 14%) / 0.9);
border-color: hsla(var(--gold) / 0.45);
color: #fff;
}
.tt-vd-qa:active { transform: scale(0.97); }
.tt-vd-qa__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 999px;
background: hsla(var(--gold) / 0.10);
color: hsl(var(--gold));
font-size: 16px;
}
.tt-vd-qa__icon svg { display: block; }
.tt-vd-qa__label {
display: block;
text-align: center;
line-height: 1.2;
color: inherit;
}
.tt-vd-qa.is-saved,
.tt-vd-qa.btn-favorite-toggle.is-saved {
border-color: hsla(var(--gold) / 0.55);
color: #fff;
}
.tt-vd-qa.is-saved .tt-vd-qa__icon {
background: hsl(var(--gold));
color: hsl(var(--gold-ink, 0 0% 10%));
}
/* Next-video card below the player */
.tt-vd-next-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
margin-bottom: 18px;
background: linear-gradient(180deg, hsla(var(--surface-2) / 0.6), hsla(var(--surface-3) / 0.35));
border: 1px solid hsl(var(--hairline));
border-radius: 14px;
text-decoration: none;
color: inherit;
transition: transform var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out),
background var(--dur-base, 200ms) var(--ease-out);
}
.tt-vd-next-card:hover {
transform: translateY(-1px);
border-color: hsla(var(--gold) / 0.5);
color: inherit;
}
.tt-vd-next-card__thumb {
position: relative;
flex-shrink: 0;
width: 160px;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
}
.tt-vd-next-card__thumb img,
.tt-vd-next-card__thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tt-vd-next-card__time {
position: absolute;
bottom: 6px; right: 6px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.78);
color: #fff;
font-size: 10.5px;
border-radius: 3px;
font-variant-numeric: tabular-nums;
}
.tt-vd-next-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
}
.tt-vd-next-card__eyebrow {
font-family: var(--font-inter);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
line-height: 1;
}
.tt-vd-next-card__title {
margin: 0;
color: #fff;
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
line-height: 1.25;
letter-spacing: -0.005em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tt-vd-next-card__chev {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 999px;
color: hsl(var(--gold));
background: hsla(var(--gold) / 0.10);
transition: transform var(--dur-fast, 160ms) var(--ease-out),
background var(--dur-fast, 160ms) var(--ease-out);
}
.tt-vd-next-card__chev svg { width: 16px; height: 16px; display: block; }
.tt-vd-next-card:hover .tt-vd-next-card__chev {
background: hsla(var(--gold) / 0.2);
transform: translateX(3px);
}
/* Outfit section header with eyebrow + serif title */
.tt-vd-outfit__head {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
}
.tt-vd-outfit__head .tt-h3-serif {
margin: 0;
font-size: 22px;
}
/* ── Subscription CTA (shown in the player slot when content is locked) ── */
.tt-subscription-cta {
position: absolute;
inset: 0;
overflow: hidden;
}
.tt-subscription-cta__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(14px);
transform: scale(1.08);
opacity: 0.55;
}
.tt-subscription-cta__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(14px, 3.2vw, 28px);
gap: 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
}
.tt-subscription-cta__eyebrow {
color: hsl(var(--gold));
margin: 0;
}
.tt-subscription-cta__title {
margin: 0;
color: #fff;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.1rem, 2.4vw, 1.65rem);
line-height: 1.2;
letter-spacing: -0.01em;
max-width: 28ch;
}
.tt-subscription-cta__lede {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: clamp(12px, 1.6vw, 14px);
line-height: 1.4;
max-width: 38ch;
}
.tt-subscription-cta__actions {
margin-top: 6px;
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.tt-subscription-cta .tt-btn-gold {
padding: 10px 20px;
font-size: 13px;
}
@media (max-width: 480px) {
.tt-subscription-cta__overlay { padding: 10px 14px; gap: 6px; }
.tt-subscription-cta__lede { display: none; }
.tt-subscription-cta .tt-btn-gold { padding: 8px 16px; font-size: 12px; }
}
/* ── Video-details bottom sheet: Discussione / Note ── */
.tt-vd-sheet-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
z-index: 1290;
transition: opacity var(--dur-base, 220ms) var(--ease-out, ease-out);
}
.tt-vd-sheet-backdrop.active {
opacity: 1;
pointer-events: auto;
}
.tt-vd-sheet {
position: fixed;
left: 50%;
bottom: 0;
transform: translate(-50%, 100%);
width: min(720px, 96vw);
max-height: 80vh;
background: hsl(var(--surface-2));
border: 1px solid hsl(var(--hairline));
border-bottom: none;
border-radius: 20px 20px 0 0;
box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
z-index: 1300;
transition: transform 260ms cubic-bezier(.22,.61,.36,1);
padding-bottom: env(safe-area-inset-bottom);
}
.tt-vd-sheet.open { transform: translate(-50%, 0); }
.tt-vd-sheet__handle {
width: 42px; height: 4px;
background: rgba(255, 255, 255, 0.25);
border-radius: 999px;
margin: 8px auto 6px;
flex-shrink: 0;
}
.tt-vd-sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 16px 10px;
border-bottom: 1px solid hsl(var(--hairline));
flex-shrink: 0;
}
.tt-vd-sheet__head .tt-vd-tabs {
border-bottom: none;
margin: 0;
flex: 1;
min-width: 0;
}
.tt-vd-sheet__close {
width: 34px; height: 34px;
border-radius: 999px;
background: hsla(var(--surface-3) / 0.8);
border: 1px solid hsl(var(--hairline));
color: rgba(255, 255, 255, 0.75);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
cursor: pointer;
flex-shrink: 0;
transition: background var(--dur-fast, 160ms) var(--ease-out);
}
.tt-vd-sheet__close:hover { background: hsla(var(--surface-3) / 1); color: #fff; }
.tt-vd-sheet__body {
padding: 14px 18px 18px;
overflow-y: auto;
flex: 1;
}
.tt-vd-sheet__body .tt-vd-tab-content { display: none; }
.tt-vd-sheet__body .tt-vd-tab-content.active { display: block; }
.tt-vd-sheet__hint {
text-align: center;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
padding: 18px 8px;
margin: 0;
}
.tt-vd-sheet__hint--soft { color: rgba(255, 255, 255, 0.3); }
.tt-vd-sheet__hint a { color: hsl(var(--gold)); }
/* Mentor tab (Chiedi al mentor) */
.tt-vd-mentor {
text-align: center;
padding: 14px 10px 8px;
max-width: 480px;
margin: 0 auto;
}
.tt-vd-mentor__icon {
width: 64px; height: 64px;
border-radius: 999px;
background: hsla(var(--gold) / 0.12);
color: hsl(var(--gold));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 14px;
}
.tt-vd-mentor__title {
margin: 0 0 8px;
color: #fff;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.35rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
.tt-vd-mentor__lede {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.72);
font-size: 14px;
line-height: 1.55;
}
.tt-vd-mentor__lede strong { color: #fff; }
.tt-vd-mentor__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
border-radius: 999px;
background: hsla(var(--gold) / 0.14);
border: 1px solid hsla(var(--gold) / 0.5);
color: hsl(var(--gold));
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--dur-base, 200ms) var(--ease-out);
}
.tt-vd-mentor__cta:hover {
background: hsla(var(--gold) / 0.25);
color: hsl(var(--gold));
}
.tt-vd-mentor__cta--gold {
background: hsl(var(--gold));
color: hsl(var(--gold-ink, 0 0% 10%));
border-color: hsl(var(--gold));
}
.tt-vd-mentor__cta--gold:hover {
background: hsl(var(--gold-deep, var(--gold)));
color: hsl(var(--gold-ink, 0 0% 10%));
}
.tt-vd-mentor__perks {
list-style: none;
padding: 0;
margin: 20px auto 0;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
max-width: 360px;
}
.tt-vd-mentor__perks li {
position: relative;
padding-left: 22px;
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
line-height: 1.45;
}
.tt-vd-mentor__perks li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 14px; height: 8px;
border-left: 2px solid hsl(var(--gold));
border-bottom: 2px solid hsl(var(--gold));
transform: rotate(-45deg);
}
body.tt-body-lock { overflow: hidden; }
@media (max-width: 767px) {
.tt-vd-sheet {
width: 100%;
left: 0;
transform: translateY(100%);
border-radius: 18px 18px 0 0;
max-height: 85vh;
}
.tt-vd-sheet.open { transform: translateY(0); }
}
/* ─────────────────────────────────────────────────────
CATEGORY / COURSE PAGE
───────────────────────────────────────────────────── */
.tt-course-page { padding: 0 0 40px; }
.tt-course-hero {
position: relative;
border-radius: 14px;
overflow: hidden;
height: 420px;
margin-bottom: 32px;
isolation: isolate;
}
.tt-course-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.55);
z-index: 0;
}
.tt-course-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
z-index: 1;
}
.tt-course-hero__content {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 640px;
}
.tt-course-hero__title {
margin: 4px 0 0;
color: #fff;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.05;
}
.tt-course-hero__meta {
margin: 0;
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
letter-spacing: 0.02em;
}
.tt-course-hero__progress {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
max-width: 420px;
}
.tt-course-hero__progress-bar {
flex: 1;
height: 5px;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
overflow: hidden;
}
.tt-course-hero__progress-bar > span {
display: block;
height: 100%;
background: hsl(var(--gold));
border-radius: 3px;
transition: width var(--dur-slow, 320ms) var(--ease-out, ease-out);
}
.tt-course-hero__progress-bar.is-complete > span {
background: hsl(var(--status-approved, 145 45% 45%));
}
.tt-course-hero__progress-pct {
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* CTA Inizia/Riprendi sotto la progress bar */
.tt-course-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
align-items: center;
}
.tt-course-hero__cta .tt-btn-gold {
min-width: 200px;
text-align: center;
}
@media (max-width: 640px) {
.tt-course-hero__cta {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.tt-course-hero__cta .tt-btn-gold {
min-width: 0;
width: 100%;
}
}
/* Modules */
.tt-course-modules { display: flex; flex-direction: column; }
.tt-course-module {
border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
}
.tt-course-module__header {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px 8px;
background: none;
border: none;
color: inherit;
text-align: left;
cursor: pointer;
transition: background var(--dur-base, 200ms) var(--ease-out);
}
.tt-course-module__header:hover { background: rgba(255, 255, 255, 0.03); }
.tt-course-module__header:focus-visible {
outline: 2px solid hsl(var(--gold));
outline-offset: -2px;
}
.tt-course-module__check { flex-shrink: 0; color: hsl(var(--status-approved, 145 45% 45%)); }
.tt-course-module__circle {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
}
.tt-course-module__info { flex: 1; min-width: 0; }
.tt-course-module__info strong {
display: block;
color: #fff;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tt-course-module__progress {
display: block;
height: 3px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
margin-top: 6px;
overflow: hidden;
}
.tt-course-module__progress > span {
display: block;
height: 100%;
background: hsl(var(--gold));
border-radius: 2px;
transition: width var(--dur-slow, 320ms) var(--ease-out, ease-out);
}
.tt-course-module.is-done .tt-course-module__progress > span {
background: hsl(var(--status-approved, 145 45% 45%));
}
.tt-course-module__meta {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.45);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.tt-course-module__arrow {
font-size: 10px;
transition: transform var(--dur-base, 200ms) var(--ease-out);
}
.tt-course-module.open .tt-course-module__arrow { transform: rotate(180deg); }
.tt-course-module__body {
padding: 0 8px 0 44px;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 360ms cubic-bezier(.22,.61,.36,1),
opacity 220ms var(--ease-out, ease-out),
padding-bottom 360ms cubic-bezier(.22,.61,.36,1);
}
.tt-course-module.open .tt-course-module__body {
opacity: 1;
padding-bottom: 14px;
/* max-height is set inline by JS (scrollHeight) for the transition */
}
/* Lessons */
.tt-course-lesson {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 10px;
text-decoration: none;
margin-bottom: 2px;
transition: background var(--dur-base, 200ms) var(--ease-out);
}
.tt-course-lesson:hover { background: rgba(255, 255, 255, 0.04); }
.tt-course-lesson__thumb {
width: 96px;
height: 56px;
border-radius: 8px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.tt-course-lesson__thumb img,
.tt-course-lesson__thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tt-course-lesson__time {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.78);
color: #fff;
font-size: 10px;
letter-spacing: 0.02em;
padding: 2px 5px;
border-radius: 3px;
font-variant-numeric: tabular-nums;
}
.tt-course-lesson__info { flex: 1; min-width: 0; }
.tt-course-lesson__title {
display: block;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tt-course-lesson__duration {
display: block;
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
letter-spacing: 0.02em;
margin-top: 2px;
}
.tt-course-lesson__pct { color: hsl(var(--gold)); }
.tt-course-lesson__done-label { color: hsl(var(--status-approved, 145 45% 45%)); }
.tt-course-lesson__done-check {
flex-shrink: 0;
color: hsl(var(--status-approved, 145 45% 45%));
}
.tt-course-lesson__play {
color: rgba(255, 255, 255, 0.2);
font-size: 12px;
flex-shrink: 0;
transition: color var(--dur-base, 200ms) var(--ease-out);
}
.tt-course-lesson:hover .tt-course-lesson__play { color: hsl(var(--gold)); }
.tt-course-lesson--done { opacity: 0.65; }
.tt-course-lesson--done .tt-course-lesson__title {
text-decoration: line-through;
text-decoration-color: rgba(255, 255, 255, 0.2);
}
/* Currently-playing lesson inside the video-page course panel */
.tt-course-lesson--active {
background: hsla(var(--gold) / 0.08);
box-shadow: inset 3px 0 0 hsl(var(--gold));
border-radius: 8px;
padding-left: 9px;
}
.tt-course-lesson--active .tt-course-lesson__title {
color: #fff;
font-weight: 600;
}
.tt-course-lesson__now {
color: hsl(var(--gold));
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.tt-course-lesson__now-dot {
flex-shrink: 0;
width: 9px; height: 9px;
border-radius: 999px;
background: hsl(var(--gold));
box-shadow: 0 0 0 0 hsla(var(--gold) / 0.7);
animation: tt-now-pulse 1.8s infinite;
}
@keyframes tt-now-pulse {
0%, 100% { box-shadow: 0 0 0 0 hsla(var(--gold) / 0.7); }
50% { box-shadow: 0 0 0 7px hsla(var(--gold) / 0); }
}
/* ── Course panel on video-details page ────────────────
Gives the "Moduli del corso" section a proper editorial
container so it stacks more distinctly under discussione. */
.tt-vd-course-panel {
position: relative;
margin-top: 32px;
padding: 24px 24px 14px;
background: linear-gradient(180deg, hsla(var(--surface-2) / 0.7), hsla(var(--surface-3) / 0.4));
border: 1px solid hsl(var(--hairline));
border-radius: 16px;
isolation: isolate;
}
.tt-vd-course-panel::before {
content: "";
position: absolute;
top: 0; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, hsla(var(--gold) / 0.55), transparent);
pointer-events: none;
}
.tt-vd-course-panel__head {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid hsl(var(--hairline));
}
.tt-vd-course-panel__title {
margin: 4px 0 6px;
}
.tt-vd-course-panel__sub {
margin: 0;
color: rgba(255, 255, 255, 0.55);
font-size: 13px;
}
.tt-vd-course-panel__link {
color: hsl(var(--gold));
text-decoration: none;
font-weight: 600;
letter-spacing: 0.02em;
}
.tt-vd-course-panel__link:hover { text-decoration: underline; }
.tt-vd-course-panel__modules .tt-course-module:last-child {
border-bottom: none;
}
/* YouTube-playlist-style layout: left card + right modules list */
.tt-vd-course-panel__layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
}
.tt-vd-course-playlist {
position: sticky;
top: 80px;
background: hsla(var(--surface-3) / 0.6);
border: 1px solid hsl(var(--hairline));
border-radius: 14px;
overflow: hidden;
}
.tt-vd-course-playlist__cover {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.tt-vd-course-playlist__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tt-vd-course-playlist__scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.15) 60%, transparent);
pointer-events: none;
}
.tt-vd-course-playlist__cover-meta {
position: absolute;
left: 12px; bottom: 10px; right: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tt-vd-course-playlist__badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tt-vd-course-playlist__body {
padding: 16px 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.tt-vd-course-playlist__title {
margin: 0;
color: #fff;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.1rem;
line-height: 1.25;
letter-spacing: -0.005em;
}
.tt-vd-course-playlist__progress {
display: flex;
flex-direction: column;
gap: 6px;
}
.tt-vd-course-playlist__progress-bar {
height: 6px;
background: hsla(0, 0%, 100%, 0.08);
border-radius: 999px;
overflow: hidden;
}
.tt-vd-course-playlist__progress-bar > span {
display: block;
height: 100%;
background: hsl(var(--gold));
border-radius: 999px;
transition: width var(--dur-slow, 600ms) var(--ease-out, ease-out);
}
.tt-vd-course-playlist__progress-bar.is-complete > span {
background: hsl(var(--status-approved, 145 45% 45%));
}
.tt-vd-course-playlist__progress-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.02em;
}
.tt-vd-course-playlist__progress-label strong { color: #fff; font-weight: 700; }
.tt-vd-course-playlist__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 14px;
border-radius: 999px;
background: hsla(var(--gold) / 0.14);
border: 1px solid hsla(var(--gold) / 0.45);
color: hsl(var(--gold));
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
text-transform: uppercase;
transition: background var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out);
}
.tt-vd-course-playlist__cta:hover {
background: hsla(var(--gold) / 0.22);
border-color: hsl(var(--gold));
color: hsl(var(--gold));
}
/* Mobile: collapse panel to single column, playlist card on top */
@media (max-width: 991px) {
.tt-vd-course-panel__layout {
grid-template-columns: 1fr;
gap: 16px;
}
.tt-vd-course-playlist { position: static; }
}
@media (max-width: 767px) {
.tt-vd-course-panel { padding: 20px 16px 10px; margin-top: 24px; }
.tt-vd-course-panel::before { left: 16px; right: 16px; }
}
/* Mobile adaptations for player row + quick actions + next card */
@media (max-width: 767px) {
.tt-vd-player-row {
flex-direction: column;
gap: 10px;
}
/* Compact horizontal pills — scrollable row with a right-edge fade
so the last pill visibly peeks and hints that the row scrolls. */
.tt-vd-quick-actions {
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
gap: 6px;
overflow-x: auto;
padding: 0 30px 2px 0;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
}
.tt-vd-quick-actions::-webkit-scrollbar { display: none; }
.tt-vd-qa {
flex: 0 0 auto;
flex-direction: row;
width: auto;
padding: 4px 11px 4px 6px;
gap: 6px;
border-radius: 999px;
scroll-snap-align: start;
}
.tt-vd-qa__icon {
width: 22px; height: 22px;
font-size: 11.5px;
}
.tt-vd-qa__icon svg { width: 12px; height: 12px; }
.tt-vd-qa__label {
font-size: 11.5px;
letter-spacing: 0.02em;
white-space: nowrap;
text-align: left;
}
.tt-vd-next-card { padding: 10px; gap: 10px; }
.tt-vd-next-card__thumb { width: 110px; }
.tt-vd-next-card__title { font-size: 15px; }
.tt-vd-next-card__chev { width: 30px; height: 30px; }
.tt-vd-next-card__chev svg { width: 14px; height: 14px; }
}
/* Defensive: prevent any child from widening the page beyond the viewport on mobile */
@media (max-width: 991px) {
.tt-vd-page,
.tt-vd-layout,
.tt-vd-main { max-width: 100%; min-width: 0; }
.tt-vd-main > * { max-width: 100%; min-width: 0; }
.tt-vd-title,
.tt-vd-desc,
.tt-vd-next-card__title,
.tt-vd-course-panel__title { overflow-wrap: break-word; word-wrap: break-word; }
/* Course panel + its modules never extend past viewport */
.tt-vd-course-panel,
.tt-vd-course-panel__layout,
.tt-vd-course-panel__modules,
.tt-course-module,
.tt-course-module__body,
.tt-course-lesson,
.tt-course-lesson__info { min-width: 0; max-width: 100%; }
/* Tighter paddings so lesson rows fit on narrow screens */
.tt-course-module__header { padding-left: 8px; padding-right: 8px; gap: 10px; }
.tt-course-module__body { padding: 0 6px 0 18px; }
.tt-course-lesson { padding: 8px 6px; gap: 10px; }
.tt-course-lesson__thumb { width: 84px; height: 48px; }
}
@media (max-width: 480px) {
.tt-course-module__header { padding-left: 4px; padding-right: 4px; gap: 8px; }
.tt-course-module__body { padding: 0 4px 0 12px; }
.tt-course-lesson__thumb { width: 72px; height: 42px; }
.tt-course-module__meta { font-size: 11px; }
}
.tt-cat-page { padding: 0 0 40px; }
/* ─────────────────────────────────────────────────────
SHORTS PAGE — design system refinements
───────────────────────────────────────────────────── */
.tt-shorts-locked {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: hsl(var(--surface-2, 0 0% 10%));
}
.tt-shorts-locked__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.25;
filter: blur(4px);
}
.tt-shorts-locked__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
padding: 24px;
}
.tt-shorts-locked__text {
margin: 0;
color: #fff;
font-size: 14px;
letter-spacing: 0.01em;
max-width: 240px;
}
.tt-shorts-unavailable {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
.tt-shorts-video-txt__title {
margin: 0 0 8px;
color: #fff;
font-size: 18px;
line-height: 1.2;
}
.tt-shorts-description {
max-width: 640px;
margin: 16px auto 0;
padding: 0 15px;
}
.tt-shorts-description p {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.tt-shorts-related {
border-top: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
padding-top: 24px;
}
.tt-shorts-related__head {
margin-bottom: 16px;
}
.tt-shorts-related__head .tt-h3-serif { margin: 4px 0 0; font-size: 22px; }
/* ─────────────────────────────────────────────────────
SHOP — product grid, filters, detail, cart, orders, checkout
───────────────────────────────────────────────────── */
/* Toolbar (tabs + search) */
.tt-shop-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.tt-tabs.tt-tabs--wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: none;
padding: 0;
}
.tt-shop-search {
display: flex;
align-items: center;
gap: 4px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.6);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.1);
border-radius: 999px;
padding: 4px 6px 4px 14px;
min-width: 240px;
transition: border-color var(--dur-base, 200ms) var(--ease-out);
}
.tt-shop-search:focus-within { border-color: hsla(var(--gold) / 0.5); }
.tt-shop-search__icon {
color: rgba(255, 255, 255, 0.35);
font-size: 14px;
}
.tt-shop-search__input {
flex: 1;
background: none;
border: none;
outline: none;
color: #fff;
font-size: 13px;
padding: 8px 6px;
min-width: 0;
}
.tt-shop-search__input::placeholder { color: rgba(255, 255, 255, 0.35); }
.tt-shop-search__submit {
background: hsl(var(--gold));
color: hsl(var(--gold-ink, 0 0% 10%));
border: none;
border-radius: 999px;
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
transition: background var(--dur-base, 200ms) var(--ease-out);
}
.tt-shop-search__submit:hover { background: hsl(var(--gold-deep, var(--gold))); }
/* Product card */
.tt-product-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--wardrobe-surface-2, hsl(var(--surface-2, 24 6% 11%)));
border: 1px solid var(--wardrobe-hairline, hsla(0, 0%, 100%, 0.06));
border-radius: 14px;
overflow: hidden;
transition: transform var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out),
box-shadow var(--dur-base, 200ms) var(--ease-out);
}
.tt-product-card:hover {
transform: translateY(-3px);
border-color: hsla(var(--gold) / 0.3);
box-shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.45);
}
.tt-product-card__media {
position: relative;
display: block;
overflow: hidden;
}
.tt-product-card__media img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
display: block;
transition: transform var(--dur-slow, 320ms) var(--ease-out);
}
.tt-product-card:hover .tt-product-card__media img { transform: scale(1.04); }
.tt-product-card__badge {
position: absolute;
top: 12px;
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.tt-product-card__badge--sale {
left: 12px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
border: 1px solid hsla(0, 0%, 100%, 0.18);
}
.tt-product-card__badge--sold-out {
right: 12px;
background: rgba(0, 0, 0, 0.72);
color: rgba(255, 255, 255, 0.78);
border: 1px solid hsla(0, 0%, 100%, 0.18);
}
.tt-product-card__badge--featured {
right: 12px;
background: rgba(0, 0, 0, 0.72);
color: hsl(var(--gold));
border: 1px solid hsla(var(--gold) / 0.4);
}
.tt-product-card__body {
flex: 1;
display: flex;
flex-direction: column;
padding: 16px 18px 18px;
}
.tt-product-card__eyebrow { margin-bottom: 6px; }
.tt-product-card__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
margin-bottom: 14px;
transition: color var(--dur-base, 200ms) var(--ease-out);
}
.tt-product-card__title:hover { color: hsl(var(--gold)); }
.tt-product-card__foot {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.tt-product-card__price {
/* Stack: was-price (small kicker, struck) above now-price (anchor).
Same baseline for "now" across sale and non-sale cards in the grid. */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
line-height: 1.1;
}
.tt-product-card__price-now {
font-size: 20px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
.tt-product-card__price-was {
font-size: 13px;
color: rgba(255, 255, 255, 0.35);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.tt-product-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
font-family: var(--font-inter, 'Inter', sans-serif);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: hsl(var(--gold));
background: transparent;
border: 1px solid hsla(var(--gold) / 0.35);
border-radius: 8px;
transition: color var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out),
background var(--dur-base, 200ms) var(--ease-out);
}
.tt-product-card__cta svg {
transition: transform var(--dur-base, 200ms) var(--ease-out);
}
.tt-product-card__cta:hover {
color: hsl(var(--gold-soft));
border-color: hsl(var(--gold));
background: hsla(var(--gold) / 0.06);
}
.tt-product-card:hover .tt-product-card__cta svg,
.tt-product-card__cta:hover svg {
transform: translateX(3px);
}
.tt-product-card__sold-out-btn {
display: block;
text-align: center;
background: hsla(var(--status-rejected, 0 70% 50%) / 0.15);
color: hsl(var(--status-rejected, 0 70% 50%));
padding: 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
border: 1px solid hsla(var(--status-rejected, 0 70% 50%) / 0.25);
}
/* Shop detail */
.tt-shop-detail__gallery {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.tt-shop-detail__main {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 14px;
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
}
.tt-shop-detail__thumbs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tt-shop-detail__thumb {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out);
}
.tt-shop-detail__thumb:hover,
.tt-shop-detail__thumb.is-active {
opacity: 1;
border-color: hsl(var(--gold));
}
.tt-shop-detail__name {
margin: 6px 0 12px;
font-size: clamp(24px, 3vw, 32px);
line-height: 1.1;
color: #fff;
}
.tt-shop-detail__back-row {
max-width: 1320px;
margin: 0 auto;
padding: 16px 16px 0;
}
.tt-shop-detail__price {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.tt-shop-detail__price-now {
font-size: 28px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
}
.tt-shop-detail__price-was {
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.tt-shop-detail__desc {
color: rgba(255, 255, 255, 0.65);
font-size: 14px;
line-height: 1.7;
margin: 16px 0 24px;
max-width: 540px;
}
.tt-shop-detail__form { display: flex; flex-direction: column; gap: 16px; }
.tt-shop-detail__field { display: flex; flex-direction: column; gap: 6px; }
.tt-shop-detail__label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.tt-shop-detail__select,
.tt-shop-detail__qty {
background: hsla(var(--surface-2, 0 0% 10%) / 0.7);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.12);
border-radius: 8px;
padding: 10px 14px;
color: #fff;
font-size: 14px;
transition: border-color var(--dur-base, 200ms) var(--ease-out);
}
.tt-shop-detail__select { max-width: 280px; appearance: auto; }
.tt-shop-detail__qty { width: 96px; text-align: center; }
.tt-shop-detail__select:focus,
.tt-shop-detail__qty:focus {
outline: none;
border-color: hsl(var(--gold));
}
.tt-shop-detail__stock { margin-top: 4px; }
.tt-shop-detail__add {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 14px;
align-self: flex-start;
}
.tt-shop-detail__unavailable {
display: flex;
flex-direction: column;
gap: 6px;
background: hsla(var(--status-rejected, 0 70% 50%) / 0.08);
border: 1px solid hsla(var(--status-rejected, 0 70% 50%) / 0.2);
border-radius: 10px;
padding: 16px;
text-align: center;
}
.tt-shop-detail__unavailable strong {
color: hsl(var(--status-rejected, 0 70% 50%));
font-size: 14px;
}
.tt-shop-detail__unavailable span {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.tt-shop-related { margin-top: 60px; padding-top: 32px; border-top: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08); }
.tt-shop-related__head { margin-bottom: 20px; }
.tt-shop-related__head .tt-h3-serif { margin: 4px 0 0; }
/* Cart */
.tt-cart-item {
display: grid;
grid-template-columns: 80px 1fr auto auto auto;
align-items: center;
gap: 16px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.55);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
transition: border-color var(--dur-base, 200ms) var(--ease-out),
opacity var(--dur-slow, 320ms) var(--ease-out);
}
.tt-cart-item:hover { border-color: hsla(var(--gold) / 0.25); }
.tt-cart-item__img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 10px;
flex-shrink: 0;
}
.tt-cart-item__body { min-width: 0; }
.tt-cart-item__name {
font-size: 15px;
font-weight: 600;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tt-cart-item__name a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.tt-cart-item__name a:hover { color: hsl(var(--gold)); }
.tt-cart-item__variant {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin-top: 2px;
}
.tt-cart-item__unit {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.tt-cart-item__qty {
background: hsla(var(--surface-3, 0 0% 14%) / 0.9);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.12);
border-radius: 6px;
padding: 6px 10px;
color: #fff;
font-size: 14px;
width: 68px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.tt-cart-item__qty:focus { outline: none; border-color: hsl(var(--gold)); }
.tt-cart-item__total {
font-size: 16px;
font-weight: 700;
color: #fff;
white-space: nowrap;
font-variant-numeric: tabular-nums;
min-width: 88px;
text-align: right;
}
.tt-cart-item__remove {
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
font-size: 16px;
padding: 8px;
border-radius: 6px;
transition: color var(--dur-base, 200ms) var(--ease-out),
background var(--dur-base, 200ms) var(--ease-out);
}
.tt-cart-item__remove:hover {
color: hsl(var(--status-rejected, 0 70% 50%));
background: hsla(var(--status-rejected, 0 70% 50%) / 0.08);
}
.tt-cart-item__upsell-eyebrow {
margin-top: 4px;
font-size: 11px;
letter-spacing: 0.08em;
}
.tt-cart-item__price-now { color: #fff; font-weight: 600; }
.tt-cart-item__price-was {
color: rgba(255,255,255,.4);
text-decoration: line-through;
font-size: 12px;
margin-left: 6px;
}
.tt-cart-summary {
background: hsla(var(--surface-2, 0 0% 10%) / 0.55);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.1);
border-radius: 14px;
padding: 24px;
position: sticky;
top: 88px;
}
.tt-cart-summary__title { margin: 0 0 16px; font-size: 20px; }
.tt-cart-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
font-variant-numeric: tabular-nums;
}
.tt-cart-summary__row--discount { color: hsl(var(--gold)); }
.tt-cart-summary__row--total {
border-top: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.12);
margin-top: 8px;
padding-top: 16px;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.tt-cart-summary__coupon {
display: flex;
gap: 8px;
margin: 14px 0;
}
.tt-cart-summary__coupon-input {
flex: 1;
background: hsla(var(--surface-3, 0 0% 14%) / 0.9);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.12);
border-radius: 6px;
padding: 8px 12px;
color: #fff;
font-size: 13px;
}
.tt-cart-summary__coupon-input:focus { outline: none; border-color: hsl(var(--gold)); }
.tt-cart-summary__coupon-btn { padding: 8px 14px; font-size: 13px; }
.tt-cart-summary__coupon-applied {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.65);
margin: 10px 0;
}
.tt-cart-summary__coupon-applied strong { color: hsl(var(--gold)); }
.tt-cart-summary__coupon-remove {
background: none;
border: none;
color: hsl(var(--status-rejected, 0 70% 50%));
cursor: pointer;
font-size: 12px;
padding: 2px 6px;
}
.tt-cart-summary__checkout {
display: block;
width: 100%;
text-align: center;
padding: 14px;
font-size: 14px;
margin-top: 16px;
}
@media (max-width: 640px) {
.tt-cart-item {
grid-template-columns: 64px 1fr auto;
grid-template-areas:
"img body total"
"img qty remove";
gap: 10px 12px;
}
.tt-cart-item__img { grid-area: img; width: 64px; height: 64px; }
.tt-cart-item__body { grid-area: body; }
.tt-cart-item__total { grid-area: total; }
.tt-cart-item__qty-wrap { grid-area: qty; }
.tt-cart-item__remove { grid-area: remove; justify-self: end; }
.tt-cart-summary { position: static; }
}
/* Orders list */
.tt-order-list { display: flex; flex-direction: column; gap: 12px; }
.tt-order-card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 14px;
padding: 20px 24px;
text-decoration: none;
transition: transform var(--dur-base, 200ms) var(--ease-out),
border-color var(--dur-base, 200ms) var(--ease-out),
box-shadow var(--dur-base, 200ms) var(--ease-out);
}
.tt-order-card:hover {
transform: translateY(-2px);
border-color: hsla(var(--gold) / 0.35);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
.tt-order-card__head { display: flex; flex-direction: column; gap: 4px; }
.tt-order-card__id { font-size: 16px; font-weight: 700; color: #fff; }
.tt-order-card__date { font-size: 13px; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.tt-order-card__foot { display: flex; align-items: center; gap: 16px; }
.tt-order-card__total { font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tt-order-card__chev { color: hsl(var(--gold)); font-size: 12px; }
/* Order detail */
.tt-order-detail-card {
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 14px;
padding: 24px;
margin-bottom: 20px;
}
.tt-order-detail-card__title {
margin: 0 0 16px;
padding-bottom: 12px;
font-size: 18px;
border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.1);
}
.tt-order-detail-card__info {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
.tt-order-detail-card__info > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 14px;
}
.tt-order-detail-card__info dt {
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
}
.tt-order-detail-card__info dd {
color: #fff;
font-weight: 500;
margin: 0;
}
.tt-order-detail-card__mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
font-size: 12px;
}
.tt-order-detail-card__address {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.7;
font-style: normal;
}
.tt-order-detail-card__address strong { color: #fff; }
.tt-order-items-table { width: 100%; border-collapse: collapse; }
.tt-order-items-table th {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
padding: 10px 12px;
border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.1);
text-align: left;
font-weight: 600;
}
.tt-order-items-table td {
padding: 12px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.04);
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
.tt-order-items-table tr:last-child td { border-bottom: none; }
.tt-order-items-table__num { text-align: right; }
.tt-order-items-table__name { font-weight: 600; color: #fff; font-variant-numeric: normal; }
.tt-order-items-table__total { color: #fff; font-weight: 600; }
.tt-order-totals__row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
font-variant-numeric: tabular-nums;
}
.tt-order-totals__row--discount { color: hsl(var(--gold)); }
.tt-order-totals__row--grand {
border-top: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.12);
margin-top: 8px;
padding-top: 14px;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.tt-order-back-link {
display: inline-block;
margin-top: 8px;
font-size: 14px;
color: hsl(var(--gold));
text-decoration: none;
transition: color var(--dur-base, 200ms) var(--ease-out);
}
.tt-order-back-link:hover { color: hsl(var(--gold-deep, var(--gold))); }
/* Checkout success */
.tt-checkout-success {
max-width: 560px;
margin: 0 auto;
text-align: center;
padding: 56px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.tt-checkout-success__icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: hsla(var(--gold) / 0.12);
border: 2px solid hsl(var(--gold));
color: hsl(var(--gold));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.tt-checkout-success__title {
margin: 4px 0 0;
font-size: clamp(26px, 4vw, 36px);
}
.tt-checkout-success__lede {
color: rgba(255, 255, 255, 0.65);
font-size: 15px;
line-height: 1.6;
margin: 0 0 8px;
max-width: 420px;
}
.tt-checkout-success__card {
width: 100%;
max-width: 420px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.55);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 14px;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.tt-checkout-success__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.tt-checkout-success__row strong {
color: #fff;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.tt-checkout-success__row--total strong { font-size: 20px; }
.tt-checkout-success__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
@media (max-width: 767px) {
.tt-course-hero {
height: 280px;
border-radius: 0;
margin-left: -15px;
margin-right: -15px;
}
.tt-course-hero__content { left: 16px; right: 16px; bottom: 20px; }
.tt-course-module__body { padding-left: 28px; }
.tt-course-lesson__thumb { width: 72px; height: 44px; }
}
/* ================================================================
FORUM — design system
================================================================ */
.tt-forum-search-form {
margin-top: 18px;
margin-bottom: 24px;
}
.tt-forum-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.tt-forum-topic {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 18px 20px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.6);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 12px;
transition: border-color var(--dur-base, 200ms) var(--ease-out, ease-out),
background var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-forum-topic:hover {
border-color: hsla(var(--gold, 42 42% 60%) / 0.35);
background: hsla(var(--surface-3, 0 0% 14%) / 0.6);
}
.tt-forum-topic__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.1);
}
.tt-forum-topic__body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.tt-forum-topic__title {
font-family: var(--font-serif, "Fraunces", serif);
font-size: 18px;
font-weight: 600;
color: #fff;
text-decoration: none;
line-height: 1.3;
display: flex;
align-items: center;
gap: 8px;
transition: color var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-forum-topic__title:hover {
color: hsl(var(--gold, 42 42% 60%));
}
.tt-forum-topic__pin {
color: hsl(var(--gold, 42 42% 60%));
font-size: 14px;
}
.tt-forum-topic__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
.tt-forum-topic__meta strong {
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
.tt-forum-topic__meta i { font-size: 12px; margin-right: 4px; }
/* Blog login prompt */
.tt-blog-login-prompt {
padding: 20px 24px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 12px;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
.tt-blog-login-prompt__link {
color: hsl(var(--gold, 42 42% 60%));
font-weight: 600;
text-decoration: none;
transition: color var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-blog-login-prompt__link:hover {
color: hsl(var(--gold-deep, 38 45% 48%));
text-decoration: underline;
}
@media (max-width: 540px) {
.tt-forum-topic {
grid-template-columns: 40px 1fr;
gap: 12px;
padding: 14px 16px;
}
.tt-forum-topic__avatar { width: 40px; height: 40px; }
.tt-forum-topic__title { font-size: 16px; }
.tt-forum-topic__meta { font-size: 12px; gap: 8px; }
}
/* Forum topic detail (thread) */
.tt-forum-topic--lead {
padding: 24px;
margin-bottom: 40px;
}
.tt-forum-topic--lead .tt-forum-topic__avatar {
width: 56px;
height: 56px;
}
.tt-forum-topic__lead-body {
color: rgba(255, 255, 255, 0.78);
line-height: 1.7;
font-size: 15px;
margin-top: 10px;
}
.tt-forum-replies__title {
margin: 0 0 20px;
font-size: clamp(20px, 2.4vw, 26px);
}
.tt-forum-reply-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}
.tt-forum-reply {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
padding: 16px 20px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.45);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.06);
border-radius: 10px;
}
.tt-forum-reply.is-answer {
border-color: hsla(var(--status-approved, 142 45% 45%) / 0.4);
background: hsla(var(--status-approved, 142 45% 45%) / 0.05);
}
.tt-forum-reply__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
}
.tt-forum-reply__body { min-width: 0; }
.tt-forum-reply__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8px;
}
.tt-forum-reply__meta strong {
color: #fff;
font-size: 13px;
font-weight: 600;
}
.tt-forum-reply__content {
color: rgba(255, 255, 255, 0.78);
line-height: 1.65;
font-size: 14px;
}
.tt-forum-reply-locked {
text-align: center;
padding: 28px 24px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px dashed hsla(var(--gold, 42 42% 60%) / 0.3);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.tt-forum-reply-locked > i {
font-size: 24px;
color: hsl(var(--gold, 42 42% 60%));
margin-bottom: 4px;
}
.tt-forum-reply-locked h3 {
margin: 0;
font-size: 20px;
}
.tt-forum-reply-locked p {
color: rgba(255, 255, 255, 0.6);
margin: 0 0 8px;
}
.tt-forum-reply-form {
padding-top: 24px;
border-top: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
}
.tt-forum-reply-form h3 {
margin: 0 0 16px;
font-size: 20px;
}
.tt-empty-state--inline {
padding: 24px;
margin-bottom: 24px;
}
.tt-empty-state--inline p { margin: 0; color: rgba(255, 255, 255, 0.6); }
/* Select as tt-input */
select.tt-input,
.tt-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
.tt-forum-create {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* ================================================================
ACCOUNT — tickets, measurements, settings
================================================================ */
/* Quick links (profile) */
.tt-quick-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.tt-quick-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 999px;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: border-color var(--dur-base, 200ms) var(--ease-out, ease-out),
color var(--dur-base, 200ms) var(--ease-out, ease-out),
background var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-quick-link i { color: hsl(var(--gold, 42 42% 60%)); font-size: 14px; }
.tt-quick-link:hover {
border-color: hsla(var(--gold, 42 42% 60%) / 0.4);
color: #fff;
background: hsla(var(--surface-3, 0 0% 14%) / 0.6);
}
/* Settings section titles */
.tt-settings-section-title {
font-family: var(--font-serif, "Fraunces", serif);
font-size: 22px;
font-weight: 600;
color: #fff;
margin: 36px 0 18px;
padding-top: 20px;
border-top: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.06);
}
.tt-settings-section-title:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.tt-settings-help {
display: block;
margin-top: 6px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
.tt-settings-label-icon {
margin-right: 6px;
color: hsl(var(--gold, 42 42% 60%));
}
/* Subscription status */
.tt-subscription-status {
padding: 18px 22px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.6);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 12px;
margin: 16px 0 28px;
}
.tt-subscription-status__label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.tt-subscription-status__label i { color: hsl(var(--gold, 42 42% 60%)); }
.tt-subscription-status__body {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
}
.tt-subscription-status__plan strong { color: #fff; font-weight: 600; }
.tt-subscription-status__expires { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.tt-subscription-status__link {
color: hsl(var(--gold, 42 42% 60%));
font-size: 13px;
text-decoration: none;
font-weight: 600;
margin-left: auto;
}
.tt-subscription-status__link:hover { color: hsl(var(--gold-deep, 38 45% 48%)); text-decoration: underline; }
/* Linked accounts */
.tt-linked-accounts { max-width: 560px; margin-top: 40px; }
.tt-linked-accounts__lede { color: rgba(255, 255, 255, 0.55); font-size: 13.5px; margin-bottom: 16px; }
.tt-linked-accounts__list { display: flex; flex-direction: column; gap: 10px; }
.tt-linked-account {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 12px;
}
.tt-linked-account__info { display: flex; align-items: center; gap: 14px; }
.tt-linked-account__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tt-linked-account__icon--google { background: #fff; }
.tt-linked-account__icon--facebook { background: #1877F2; color: #fff; font-size: 18px; }
.tt-linked-account strong { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.tt-linked-account__email { display: block; color: hsl(var(--status-approved, 142 45% 45%)); font-size: 12px; margin-top: 2px; }
.tt-linked-account__muted { display: block; color: rgba(255, 255, 255, 0.5); font-size: 12px; margin-top: 2px; }
.tt-btn-gold--sm {
padding: 8px 18px;
font-size: 13px;
min-height: 36px;
}
.tt-btn-gold--lg {
padding: 14px 32px;
font-size: 15px;
}
/* Tickets list */
.tt-tickets-intro {
margin: 0;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
max-width: 560px;
}
.tt-ticket-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.tt-ticket-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
padding: 16px 20px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 12px;
text-decoration: none;
transition: border-color var(--dur-base, 200ms) var(--ease-out, ease-out),
background var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-ticket-card:hover {
border-color: hsla(var(--gold, 42 42% 60%) / 0.35);
background: hsla(var(--surface-3, 0 0% 14%) / 0.55);
}
.tt-ticket-card__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 120px;
}
.tt-ticket-card__id {
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.tt-ticket-card__body { min-width: 0; }
.tt-ticket-card__subject {
font-family: var(--font-serif, "Fraunces", serif);
font-size: 17px;
font-weight: 600;
color: #fff;
margin: 0 0 6px;
line-height: 1.3;
}
.tt-ticket-card__meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.55);
}
.tt-ticket-card__meta i { margin-right: 4px; font-size: 11px; }
.tt-ticket-card__chev {
color: rgba(255, 255, 255, 0.35);
font-size: 14px;
transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out),
color var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-ticket-card:hover .tt-ticket-card__chev {
color: hsl(var(--gold, 42 42% 60%));
transform: translateX(3px);
}
/* Ticket detail */
.tt-ticket-meta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 16px;
}
.tt-ticket-meta-date {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.tt-ticket-detail { max-width: 820px; }
.tt-ticket-context {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 10px;
margin-bottom: 20px;
}
.tt-ticket-context--card { margin-bottom: 24px; }
.tt-ticket-context__thumb {
width: 72px;
height: 44px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.tt-ticket-context__title {
display: block;
color: #fff;
font-size: 14px;
font-weight: 500;
margin-top: 2px;
}
.tt-ticket-message {
padding: 20px 24px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 12px;
margin-bottom: 16px;
}
.tt-ticket-message--reply {
background: hsla(var(--status-approved, 142 45% 45%) / 0.06);
border-color: hsla(var(--status-approved, 142 45% 45%) / 0.3);
border-left-width: 3px;
}
.tt-ticket-message__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.8);
font-size: 13.5px;
}
.tt-ticket-message--reply .tt-ticket-message__head {
color: hsl(var(--status-approved, 142 45% 45%));
}
.tt-ticket-message__head strong { color: inherit; font-weight: 700; }
.tt-ticket-message__date { color: rgba(255, 255, 255, 0.45); font-size: 12px; margin-left: auto; }
.tt-ticket-message__body {
color: rgba(255, 255, 255, 0.78);
line-height: 1.65;
font-size: 14.5px;
}
.tt-ticket-pending {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 24px 20px;
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.3);
border: 1px dashed hsla(var(--hairline, 0 0% 100%) / 0.1);
border-radius: 10px;
margin-bottom: 24px;
}
.tt-ticket-pending i { font-size: 24px; color: rgba(255, 255, 255, 0.3); }
/* Measurements */
.tt-measurements__group {
padding: 24px;
margin-bottom: 20px;
background: hsla(var(--gold, 42 42% 60%) / 0.04);
border: 1px solid hsla(var(--gold, 42 42% 60%) / 0.15);
border-radius: 14px;
}
.tt-measurements__head {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 20px;
}
.tt-measurements__head > i {
color: hsl(var(--gold, 42 42% 60%));
font-size: 20px;
margin-top: 4px;
}
.tt-measurements__head h2 {
margin: 0 0 4px;
font-size: 20px;
color: #fff;
}
.tt-measurements__head p {
margin: 0;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.tt-measurements__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.tt-measurements__grid--compact {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tt-measurements__input-wrap { position: relative; }
.tt-measurements__input-wrap .tt-input { padding-right: 44px; }
.tt-measurements__unit {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.45);
font-size: 12px;
pointer-events: none;
}
@media (max-width: 540px) {
.tt-ticket-card {
grid-template-columns: 1fr auto;
}
.tt-ticket-card__head {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: 12px;
min-width: 0;
}
.tt-subscription-status__link { margin-left: 0; }
.tt-linked-account { flex-direction: column; align-items: stretch; gap: 12px; }
.tt-linked-account .tt-btn-gold { width: 100%; }
}
/* ================================================================
STATIC PAGES — coming soon, FAQ, about, contact
================================================================ */
/* Coming soon — only for layouts using the __inner wrapper (coming-soon, live, playlist, eventi).
consulenze.php uses .tt-coming-soon without __inner and has its own styles above (~line 739). */
.tt-coming-soon:has(> .tt-coming-soon__inner) {
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
padding: 40px 20px;
}
.tt-coming-soon__inner {
max-width: 520px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.tt-coming-soon__icon {
width: 88px;
height: 88px;
border-radius: 50%;
background: hsla(var(--gold, 42 42% 60%) / 0.1);
border: 1px solid hsla(var(--gold, 42 42% 60%) / 0.3);
display: flex;
align-items: center;
justify-content: center;
color: hsl(var(--gold, 42 42% 60%));
font-size: 36px;
margin-bottom: 6px;
}
.tt-coming-soon__inner .tt-coming-soon__lede {
color: rgba(255, 255, 255, 0.6);
font-size: 15px;
line-height: 1.65;
max-width: 420px;
margin: 0 0 12px;
}
/* ── Shop gallery ─────────────────────────────────── */
.tt-shop-gallery {
display: grid;
grid-template-columns: 88px 1fr;
gap: 16px;
}
.tt-shop-gallery--solo {
grid-template-columns: 1fr;
}
.tt-shop-detail__title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin: 0 0 8px;
}
.tt-shop-detail__title-row .tt-shop-detail__name { flex: 1 1 auto; margin: 0; }
.tt-shop-detail__title-row .tt-save-toggle--inline {
position: static;
flex: 0 0 auto;
margin-top: 4px;
}
.tt-shop-gallery__thumbs {
display: flex; flex-direction: column; gap: 8px;
max-height: 600px; overflow-y: auto;
padding: 2px;
}
.tt-shop-gallery__thumb {
position: relative;
aspect-ratio: 1/1;
background: hsla(var(--surface-2) / 0.4);
border: 1px solid hsl(var(--hairline));
border-radius: 8px;
overflow: hidden; padding: 0; cursor: pointer;
transition: border-color .2s ease, transform .15s ease;
}
.tt-shop-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tt-shop-gallery__thumb:hover { border-color: hsla(var(--gold) / 0.5); transform: scale(1.03); }
.tt-shop-gallery__thumb.is-active {
border-color: hsl(var(--gold));
border-width: 2px;
box-shadow: 0 0 0 2px hsla(var(--gold) / 0.15);
}
.tt-shop-gallery__play-icon {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 22px;
background: rgba(0,0,0,.35);
pointer-events: none;
}
.tt-shop-gallery__main {
position: relative;
border-radius: 12px;
overflow: hidden;
background: hsla(var(--surface-2) / 0.4);
}
.tt-shop-gallery__viewport {
position: relative;
aspect-ratio: 4/5;
}
.tt-shop-gallery__slide {
position: absolute; inset: 0;
opacity: 0; pointer-events: none;
transition: opacity .2s ease;
}
.tt-shop-gallery__slide.is-active { opacity: 1; pointer-events: auto; }
.tt-shop-gallery__slide img,
.tt-shop-gallery__slide video {
width: 100%; height: 100%; object-fit: cover;
cursor: zoom-in;
}
.tt-shop-gallery__main .tt-save-toggle--hero {
position: absolute; top: 12px; right: 12px; z-index: 3;
}
.tt-shop-gallery__dots { display: none; }
@media (max-width: 991px) {
.tt-shop-gallery {
grid-template-columns: 1fr;
grid-auto-flow: row;
}
.tt-shop-gallery__main { order: 1; }
.tt-shop-gallery__thumbs {
order: 2;
flex-direction: row;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
padding: 8px 2px;
scrollbar-width: thin;
}
.tt-shop-gallery__thumb { flex: 0 0 64px; }
.tt-shop-gallery__viewport {
aspect-ratio: 1/1;
display: flex;
scroll-snap-type: x mandatory;
overflow-x: auto;
scroll-behavior: smooth;
}
.tt-shop-gallery__slide {
position: relative; inset: auto;
flex: 0 0 100%;
scroll-snap-align: center;
opacity: 1; pointer-events: auto;
}
.tt-shop-gallery__dots { display: none; }
}
/* ── Media lightbox ───────────────────────────────── */
.tt-media-lightbox {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity .2s ease;
}
.tt-media-lightbox.is-open { opacity: 1; pointer-events: auto; }
.tt-media-lightbox__viewport {
position: relative;
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: 40px;
}
.tt-media-lightbox__viewport img,
.tt-media-lightbox__viewport video {
max-width: 100%; max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
.tt-media-lightbox__close,
.tt-media-lightbox__nav {
position: absolute;
z-index: 2;
background: rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
width: 44px; height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
transition: background .15s ease, border-color .15s ease;
}
.tt-media-lightbox__close:hover,
.tt-media-lightbox__nav:hover {
background: rgba(0,0,0,.85);
border-color: hsla(var(--gold) / 0.6);
}
.tt-media-lightbox__close { top: 16px; right: 16px; }
.tt-media-lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.tt-media-lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
.tt-media-lightbox__viewport { padding: 16px; }
.tt-media-lightbox__nav { width: 40px; height: 40px; font-size: 20px; }
.tt-media-lightbox__nav--prev { left: 8px; }
.tt-media-lightbox__nav--next { right: 8px; }
.tt-media-lightbox__close { top: 8px; right: 8px; }
}
body.tt-lightbox-open { overflow: hidden; }
/* ── Shop product upsells (fascia "Completa il look") ───── */
.tt-product-upsells {
margin: 20px 0;
padding: 16px;
border-top: 1px solid hsl(var(--hairline));
border-bottom: 1px solid hsl(var(--hairline));
display: flex; flex-direction: column; gap: 10px;
}
.tt-product-upsells__title { margin: 0 0 4px; }
.tt-product-upsells__card {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
background: hsla(var(--surface-2) / 0.4);
border: 1px solid hsl(var(--hairline));
border-radius: 10px;
cursor: pointer;
transition: border-color .15s ease;
}
.tt-product-upsells__card:hover { border-color: hsla(var(--gold) / 0.5); }
.tt-product-upsells__card.is-disabled {
opacity: .55;
cursor: not-allowed;
}
.tt-product-upsells__check {
accent-color: hsl(var(--gold));
width: 18px; height: 18px;
flex-shrink: 0;
cursor: pointer;
}
.tt-product-upsells__card.is-disabled .tt-product-upsells__check { cursor: not-allowed; }
.tt-product-upsells__thumb {
width: 64px; height: 64px;
object-fit: cover;
border-radius: 8px;
background: rgba(0,0,0,.3);
flex-shrink: 0;
}
.tt-product-upsells__info {
flex: 1 1 auto;
min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.tt-product-upsells__name {
color: #fff;
text-decoration: none;
font-size: 15px;
line-height: 1.3;
}
.tt-product-upsells__name:hover { color: hsl(var(--gold)); }
.tt-product-upsells__price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.tt-product-upsells__price-now { color: #fff; font-weight: 600; }
.tt-product-upsells__price-was {
color: rgba(255,255,255,.4);
text-decoration: line-through;
font-size: 13px;
}
.tt-product-upsells__discount-badge {
background: hsla(var(--gold) / 0.18);
color: hsl(var(--gold));
border: 1px solid hsla(var(--gold) / 0.4);
padding: 2px 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
}
.tt-product-upsells__unavail {
color: rgba(255,255,255,.5);
font-size: 12px;
font-style: italic;
}
.tt-product-upsells__low-stock {
color: hsl(var(--status-warning, 38 90% 60%));
font-size: 12px;
}
.tt-product-upsells__variant {
margin-top: 6px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity .2s ease, max-height .2s ease;
}
.tt-product-upsells__variant:not([hidden]) {
opacity: 1;
max-height: 100px;
}
.tt-product-upsells__variant select {
width: 100%;
padding: 6px 10px;
background: hsla(var(--surface-2) / 0.8);
border: 1px solid hsl(var(--hairline));
color: #fff;
border-radius: 6px;
font-size: 13px;
}
@media (max-width: 575px) {
.tt-product-upsells__thumb { width: 48px; height: 48px; }
.tt-product-upsells__name { font-size: 14px; }
.tt-product-upsells__price { font-size: 13px; }
}
/* FAQ — modernized (replaces page-embedded CSS) */
.tt-faq-page { padding-bottom: 80px; }
.tt-faq-list {
max-width: 760px;
margin: 0 auto;
}
.tt-faq-section-title {
font-family: var(--font-inter);
color: hsl(var(--gold, 42 42% 60%));
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 28px 0 10px;
margin: 0;
}
.tt-faq-section-title:first-child { padding-top: 8px; }
.tt-faq-item {
border-bottom: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
padding: 4px 0;
}
.tt-faq-item__q {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
gap: 16px;
cursor: pointer;
list-style: none;
font-family: var(--font-serif, "Fraunces", serif);
color: #fff;
font-size: 17px;
font-weight: 500;
transition: color var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-faq-item__q::-webkit-details-marker { display: none; }
.tt-faq-item__q:hover { color: hsl(var(--gold, 42 42% 60%)); }
.tt-faq-item__q i {
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
transition: transform var(--dur-base, 200ms) var(--ease-out, ease-out),
color var(--dur-base, 200ms) var(--ease-out, ease-out);
flex-shrink: 0;
}
.tt-faq-item[open] .tt-faq-item__q i {
transform: rotate(180deg);
color: hsl(var(--gold, 42 42% 60%));
}
.tt-faq-item__a {
padding: 0 0 20px;
animation: fadeIn var(--dur-base, 240ms) var(--ease-out, ease-out);
}
.tt-faq-item__a p {
color: rgba(255, 255, 255, 0.65);
font-size: 14.5px;
line-height: 1.7;
margin: 0;
}
.tt-faq-item__a a {
color: hsl(var(--gold, 42 42% 60%));
text-decoration: none;
}
.tt-faq-item__a a:hover {
color: hsl(var(--gold-deep, 38 45% 48%));
text-decoration: underline;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* About */
.tt-about__intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin-bottom: 64px;
}
.tt-about__img {
margin: 0;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 4 / 5;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
}
.tt-about__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tt-about__body > .tt-h2-serif {
margin: 12px 0 18px;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.25;
}
.tt-about__body p {
color: rgba(255, 255, 255, 0.7);
font-size: 15.5px;
line-height: 1.75;
margin-bottom: 14px;
}
.tt-about-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
padding: 32px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 18px;
}
.tt-about-stat {
text-align: center;
padding: 16px 8px;
}
.tt-about-stat__icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: hsla(var(--gold, 42 42% 60%) / 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
color: hsl(var(--gold, 42 42% 60%));
font-size: 18px;
margin-bottom: 10px;
}
.tt-about-stat__number {
font-family: var(--font-serif, "Fraunces", serif);
font-size: 30px;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.tt-about-stat__label {
color: rgba(255, 255, 255, 0.55);
font-size: 12.5px;
margin-top: 4px;
letter-spacing: 0.02em;
}
/* Contact */
.tt-contact {
display: grid;
grid-template-columns: 340px 1fr;
gap: 48px;
align-items: start;
}
.tt-contact__info {
display: flex;
flex-direction: column;
gap: 14px;
}
.tt-contact-info-card {
padding: 20px 22px;
background: hsla(var(--surface-2, 0 0% 10%) / 0.5);
border: 1px solid hsla(var(--hairline, 0 0% 100%) / 0.08);
border-radius: 14px;
}
.tt-contact-info-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: hsla(var(--gold, 42 42% 60%) / 0.1);
color: hsl(var(--gold, 42 42% 60%));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
margin-bottom: 10px;
}
.tt-contact-info-card h3 {
font-family: var(--font-serif, "Fraunces", serif);
font-size: 16px;
font-weight: 600;
color: #fff;
margin: 0 0 4px;
}
.tt-contact-info-card p {
color: rgba(255, 255, 255, 0.6);
font-size: 13.5px;
line-height: 1.65;
margin: 0;
}
.tt-contact-info-card a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color var(--dur-base, 200ms) var(--ease-out, ease-out);
}
.tt-contact-info-card a:hover { color: hsl(var(--gold, 42 42% 60%)); }
.tt-contact__form > .tt-h2-serif {
margin: 10px 0 6px;
font-size: clamp(24px, 3vw, 32px);
}
.tt-contact__form-lede {
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
margin-bottom: 22px;
}
.tt-contact__success {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: hsla(var(--status-approved, 142 45% 45%) / 0.1);
border: 1px solid hsla(var(--status-approved, 142 45% 45%) / 0.3);
border-radius: 10px;
color: hsl(var(--status-approved, 142 45% 45%));
font-size: 14px;
margin-bottom: 20px;
}
.tt-contact-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.tt-field--full { grid-column: 1 / -1; }
@media (max-width: 900px) {
.tt-about__intro {
grid-template-columns: 1fr;
gap: 28px;
}
.tt-about__img { aspect-ratio: 16 / 10; max-height: 420px; }
.tt-contact {
grid-template-columns: 1fr;
gap: 32px;
}
}
@media (max-width: 540px) {
.tt-contact-form-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
GROUP 6 — BADGES
========================================================================= */
.tt-badges { display: grid; gap: 40px; }
.tt-badges-progress {
max-width: 560px;
margin: 0 auto;
display: grid;
gap: 10px;
text-align: center;
}
.tt-badges-progress__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.tt-badges-progress__label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: hsl(var(--gold));
}
.tt-badges-progress__count {
font-size: 14px;
color: hsl(var(--text-muted));
}
.tt-badges-progress__count strong {
font-family: var(--font-serif);
font-size: 22px;
color: hsl(var(--text-primary));
font-weight: 500;
}
.tt-badges-progress__count span {
color: hsl(var(--text-muted));
font-size: 13px;
}
.tt-badges-progress__bar {
position: relative;
height: 6px;
background: hsl(var(--surface-3));
border-radius: 999px;
overflow: hidden;
}
.tt-badges-progress__fill {
position: absolute;
inset: 0 auto 0 0;
background: linear-gradient(90deg, hsl(var(--gold-deep)), hsl(var(--gold)));
border-radius: inherit;
transition: width var(--dur-slow) var(--ease-out);
}
.tt-badges-progress__pct {
font-family: var(--font-serif);
font-size: 13px;
color: hsl(var(--gold));
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
.tt-badges-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.tt-badge-card {
--badge-accent: hsl(var(--gold));
position: relative;
display: grid;
justify-items: center;
gap: 8px;
padding: 32px 18px 22px;
background: hsl(var(--surface-2));
border: 1px solid hsl(var(--hairline));
border-radius: 14px;
text-align: center;
overflow: hidden;
transition: transform var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.tt-badge-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, transparent, var(--badge-accent), transparent);
opacity: 0.55;
}
.tt-badge-card.is-earned { border-color: color-mix(in srgb, var(--badge-accent) 40%, transparent); }
.tt-badge-card.is-earned:hover {
transform: translateY(-3px);
border-color: var(--badge-accent);
box-shadow: 0 14px 34px hsl(var(--surface-0) / 0.4);
}
.tt-badge-card.is-locked { opacity: 0.55; }
.tt-badge-card.is-locked::before { opacity: 0.2; }
.tt-badge-card__lock,
.tt-badge-card__check {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
font-size: 12px;
}
.tt-badge-card__lock {
background: hsl(var(--surface-3));
color: hsl(var(--text-muted));
}
.tt-badge-card__check {
background: color-mix(in srgb, var(--badge-accent) 18%, transparent);
color: var(--badge-accent);
}
.tt-badge-card__icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 50%;
background: color-mix(in srgb, var(--badge-accent) 14%, transparent);
color: var(--badge-accent);
font-size: 32px;
border: 1px solid color-mix(in srgb, var(--badge-accent) 25%, transparent);
position: relative;
}
.tt-badge-card.is-earned .tt-badge-card__icon {
background: color-mix(in srgb, var(--badge-accent) 22%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--badge-accent) 8%, transparent);
}
.tt-badge-card__icon img {
width: 68%;
height: 68%;
object-fit: contain;
}
.tt-badge-card__icon svg {
width: 38px;
height: 38px;
}
.tt-badge-card__group {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in srgb, var(--badge-accent) 85%, hsl(var(--text-muted)));
margin-top: 4px;
}
.tt-badge-card__name {
font-family: var(--font-serif);
font-size: 16px;
color: hsl(var(--text-primary));
margin: 0;
line-height: 1.25;
}
.tt-badge-card__desc {
font-size: 13px;
line-height: 1.55;
color: hsl(var(--text-muted));
margin: 0;
min-height: 40px;
}
.tt-badge-card__date {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--badge-accent);
margin-top: 2px;
}
.tt-badge-card__locked-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: hsl(var(--text-muted));
margin-top: 2px;
}
/* Per-condition accent colors (fallback quando il badge non ha un colore custom) */
.tt-badge-card--videos_watched { --badge-accent: #c89b5c; }
.tt-badge-card--first_purchase { --badge-accent: #7fa67d; }
.tt-badge-card--products_bought { --badge-accent: #6b9080; }
.tt-badge-card--forum_posts { --badge-accent: #a88bb8; }
.tt-badge-card--subscription_pro { --badge-accent: #d4a95a; }
.tt-badge-card--subscription_max { --badge-accent: #e0bd6e; }
.tt-badge-card--outfit_uploaded { --badge-accent: #c9756b; }
.tt-badge-card--manual { --badge-accent: hsl(var(--gold)); }
/* =========================================================================
GROUP 6 — DATA TABLE (MY CONTENT)
========================================================================= */
.tt-data-table-wrapper {
overflow-x: auto;
border: 1px solid hsl(var(--hairline));
border-radius: 14px;
background: hsl(var(--surface-2));
}
.tt-data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 720px;
}
.tt-data-table thead th {
text-align: left;
padding: 14px 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: hsl(var(--text-muted));
border-bottom: 1px solid hsl(var(--hairline));
background: hsl(var(--surface-3) / 0.4);
}
.tt-data-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid hsl(var(--hairline) / 0.6);
color: hsl(var(--text-primary));
vertical-align: middle;
}
.tt-data-table tbody tr:last-child td { border-bottom: 0; }
.tt-data-table .align-right { text-align: right; }
.tt-data-table .tabular-nums { font-variant-numeric: tabular-nums; }
.tt-data-table__media {
display: flex;
align-items: center;
gap: 12px;
}
.tt-data-table__thumb {
width: 72px;
height: 44px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.tt-data-table__title {
color: hsl(var(--text-primary));
font-weight: 500;
text-decoration: none;
display: block;
transition: color var(--dur-base) var(--ease-out);
}
.tt-data-table__title:hover { color: hsl(var(--gold)); }
.tt-data-table__meta {
display: block;
font-size: 12px;
color: hsl(var(--text-muted));
margin-top: 2px;
}
.tt-data-table__muted { color: hsl(var(--text-muted)); }
.tt-btn-icon {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border: 1px solid hsl(var(--hairline));
background: transparent;
color: hsl(var(--text-muted));
border-radius: 8px;
cursor: pointer;
transition: border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.tt-btn-icon:hover {
border-color: hsl(var(--gold));
color: hsl(var(--gold));
}
/* =========================================================================
GROUP 6 — VIDEO EDIT
========================================================================= */
.tt-video-edit__form { padding: 28px; }
.tt-video-edit__grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 32px;
}
.tt-video-edit__main { display: grid; gap: 18px; }
.tt-video-edit__side { display: grid; gap: 18px; }
.tt-video-edit__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.tt-video-edit__thumb {
aspect-ratio: 16 / 9;
border-radius: 10px;
overflow: hidden;
border: 1px solid hsl(var(--hairline));
margin-bottom: 10px;
}
.tt-video-edit__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tt-video-edit__preview {
aspect-ratio: 16 / 9;
border-radius: 10px;
border: 1px dashed hsl(var(--hairline));
background: hsl(var(--surface-3) / 0.3);
display: grid;
place-items: center;
gap: 8px;
color: hsl(var(--text-muted));
font-size: 13px;
text-align: center;
}
.tt-video-edit__preview i { font-size: 24px; color: hsl(var(--gold)); }
.tt-input--file {
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
}
.tt-form-actions--split {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid hsl(var(--hairline));
}
.tt-form-actions__group {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 840px) {
.tt-video-edit__grid { grid-template-columns: 1fr; }
.tt-video-edit__row { grid-template-columns: 1fr; }
}
/* =========================================================================
GROUP 6 — SEARCH RESULTS
========================================================================= */
.tt-search { display: grid; gap: 28px; }
/* =========================================================================
GROUP 6 — INSPIRATION
========================================================================= */
.tt-inspiration { display: grid; gap: 28px; }
.tt-inspiration-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.tt-inspiration-card {
display: flex;
flex-direction: column;
background: hsl(var(--surface-2));
border: 1px solid hsl(var(--hairline));
border-radius: 14px;
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.tt-inspiration-card:hover {
border-color: hsl(var(--gold) / 0.5);
transform: translateY(-3px);
}
.tt-inspiration-card__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.tt-inspiration-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease-out);
}
.tt-inspiration-card:hover .tt-inspiration-card__media img { transform: scale(1.04); }
.tt-inspiration-card__badge {
position: absolute;
top: 12px;
left: 12px;
padding: 5px 10px;
background: hsl(var(--gold));
color: hsl(var(--surface-0));
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tt-inspiration-card__body {
padding: 20px;
display: grid;
gap: 10px;
flex: 1;
align-content: start;
}
.tt-inspiration-card__title {
font-family: var(--font-serif);
font-size: 19px;
line-height: 1.3;
color: hsl(var(--text-primary));
margin: 0;
}
.tt-inspiration-card__desc {
font-size: 13.5px;
line-height: 1.6;
color: hsl(var(--text-muted));
margin: 0;
}
.tt-inspiration-card__cta {
margin-top: auto;
padding-top: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: hsl(var(--gold));
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--dur-base) var(--ease-out);
}
.tt-inspiration-card__cta:hover { gap: 10px; }
.tt-inspiration-card__cta i { font-size: 10px; }
.tt-inspiration-card__lock {
margin-top: 8px;
padding: 16px;
background: hsl(var(--gold) / 0.08);
border: 1px dashed hsl(var(--gold) / 0.5);
border-radius: 10px;
text-align: center;
display: grid;
gap: 8px;
justify-items: center;
}
.tt-inspiration-card__lock i {
font-size: 20px;
color: hsl(var(--gold));
}
.tt-inspiration-card__lock p {
margin: 0;
font-size: 12.5px;
color: hsl(var(--text-muted));
}
/* Inspiration detail */
.tt-inspiration-detail {
max-width: 860px;
margin-inline: auto;
display: grid;
gap: 28px;
}
.tt-inspiration-detail__hero {
margin: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid hsl(var(--hairline));
}
.tt-inspiration-detail__hero img {
width: 100%;
display: block;
}
.tt-inspiration-detail__body {
font-size: 16px;
line-height: 1.8;
color: hsl(var(--text-primary));
}
.tt-inspiration-detail__gate {
position: relative;
min-height: 420px;
border-radius: 14px;
overflow: hidden;
border: 1px solid hsl(var(--hairline));
background: hsl(var(--surface-2));
}
.tt-inspiration-detail__blur { position: absolute; inset: 0; }
.tt-inspiration-detail__blur img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(10px);
opacity: 0.35;
}
.tt-inspiration-detail__lock {
position: relative;
display: grid;
justify-items: center;
gap: 12px;
text-align: center;
padding: 60px 32px;
max-width: 460px;
margin-inline: auto;
}
.tt-inspiration-detail__lock i {
width: 64px;
height: 64px;
display: grid;
place-items: center;
border-radius: 50%;
background: hsl(var(--gold) / 0.12);
color: hsl(var(--gold));
font-size: 28px;
}
.tt-inspiration-detail__lock h2 { margin: 4px 0 0; }
.tt-inspiration-detail__lock p {
margin: 0;
color: hsl(var(--text-muted));
line-height: 1.6;
}
.tt-inspiration-detail__related {
padding: 20px;
background: hsl(var(--surface-2));
border: 1px solid hsl(var(--hairline));
border-radius: 12px;
display: grid;
gap: 12px;
}
.tt-inspiration-detail__related-card {
display: grid;
grid-template-columns: 140px 1fr;
gap: 16px;
align-items: center;
text-decoration: none;
transition: transform var(--dur-base) var(--ease-out);
}
.tt-inspiration-detail__related-card:hover { transform: translateX(3px); }
.tt-inspiration-detail__related-card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px;
}
.tt-inspiration-detail__related-card h3 {
margin: 0 0 6px;
font-size: 18px;
color: hsl(var(--text-primary));
}
.tt-inspiration-detail__related-cta {
font-size: 12px;
letter-spacing: 0.06em;
color: hsl(var(--gold));
display: inline-flex;
align-items: center;
gap: 6px;
}
.tt-inspiration-detail__related-cta i { font-size: 9px; }
.tt-inspiration-detail__external a {
color: hsl(var(--gold));
text-decoration: none;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.tt-inspiration-detail__external a:hover { text-decoration: underline; }
.tt-inspiration-detail__back { margin-top: 12px; }
@media (max-width: 620px) {
.tt-inspiration-detail__related-card { grid-template-columns: 1fr; }
}
/* =========================================================================
GROUP 6 — LIVE
========================================================================= */
.tt-live { display: grid; gap: 24px; }
.tt-live__grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
gap: 24px;
}
.tt-live__player { display: grid; gap: 16px; }
.tt-live__video {
position: relative;
aspect-ratio: 16 / 9;
background: hsl(var(--surface-0));
border: 1px solid hsl(var(--hairline));
border-radius: 12px;
display: grid;
place-items: center;
gap: 12px;
overflow: hidden;
}
.tt-live__video .tt-status { position: absolute; top: 14px; left: 14px; }
.tt-live__placeholder {
font-size: 14px;
color: hsl(var(--text-muted));
letter-spacing: 0.04em;
}
.tt-live__meta {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: hsl(var(--text-muted));
}
.tt-live__viewers { display: inline-flex; align-items: center; gap: 6px; }
.tt-live__viewers i { color: hsl(var(--gold)); }
.tt-live__chat {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 14px;
padding: 20px;
background: hsl(var(--surface-2));
border: 1px solid hsl(var(--hairline));
border-radius: 12px;
min-height: 480px;
}
.tt-live__chat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid hsl(var(--hairline));
}
.tt-live__chat-head h3 { margin: 0; font-size: 18px; }
.tt-live__chat-messages {
overflow-y: auto;
display: grid;
gap: 10px;
align-content: start;
}
.tt-live__chat-msg {
font-size: 13.5px;
line-height: 1.55;
color: hsl(var(--text-primary));
}
.tt-live__chat-msg strong {
color: hsl(var(--gold));
margin-right: 6px;
font-weight: 600;
}
.tt-live__chat-form {
display: flex;
gap: 8px;
}
.tt-live__chat-form .tt-input { flex: 1; }
@media (max-width: 900px) {
.tt-live__grid { grid-template-columns: 1fr; }
.tt-live__chat { min-height: 360px; }
}
/* ─────────────────────────────────────────────────────
VIDEO DETAIL · PATH POPOVER (bottone "Percorso")
───────────────────────────────────────────────────── */
.tt-vd-player-row { position: relative; }
.tt-vd-qa--path .tt-vd-qa__icon svg {
color: var(--wardrobe-gold, #c9a961);
}
/* Backdrop: visibile solo su mobile (≤640px), trasparente su desktop */
.tt-vd-path-popover-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0);
z-index: 8999;
pointer-events: none;
transition: background 200ms ease;
}
.tt-vd-path-popover-backdrop[hidden] { display: none; }
/* Desktop: il popover è posizionato dinamicamente da JS adiacente al bottone Percorso
* (vedi video-details.php). Qui definiamo solo dimensioni, look, animazione: top/left
* sono settati inline via JS. Mobile (≤640px) ha media query specifica più sotto che
* overridea con position: fixed bottom sheet. */
.tt-vd-path-popover {
position: absolute;
width: 320px;
max-width: calc(100vw - 32px);
padding: 18px 20px 20px;
background: var(--wardrobe-surface-2, #1c1814);
border: 1px solid var(--wardrobe-ink-line, rgba(201,169,97,0.18));
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,0.5);
color: var(--wardrobe-ink, #ece4d6);
z-index: 200;
opacity: 0;
transform: translateY(6px);
transition: opacity 180ms ease, transform 180ms ease;
}
.tt-vd-path-popover[hidden] { display: none; }
.tt-vd-path-popover.is-open {
opacity: 1;
transform: translateY(0);
}
/* Freccia che punta in basso (verso il bottone Percorso che sta sotto-destra)
* — desktop only. --arrow-right viene settato da JS dinamicamente per
* puntare al centro orizzontale del bottone, così visivamente collega
* popover e bottone. */
.tt-vd-path-popover::before {
content: "";
position: absolute;
bottom: -7px;
right: var(--arrow-right, 28px);
width: 14px;
height: 14px;
background: var(--wardrobe-surface-2, #1c1814);
border-right: 1px solid var(--wardrobe-ink-line, rgba(201,169,97,0.18));
border-bottom: 1px solid var(--wardrobe-ink-line, rgba(201,169,97,0.18));
transform: rotate(45deg);
transition: right 180ms ease;
}
.tt-vd-path-popover__close {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: 0;
color: var(--wardrobe-ink-mute, rgba(236,228,214,0.6));
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.tt-vd-path-popover__close:hover {
color: var(--wardrobe-ink, #ece4d6);
background: rgba(255,255,255,0.05);
}
.tt-vd-path-popover__header {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.tt-vd-path-popover__title {
font-family: var(--font-serif, "Cormorant Garamond", serif);
font-size: 18px;
line-height: 1.25;
}
.tt-vd-path-popover__step {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
background: rgba(201,169,97,0.06);
border-radius: 10px;
margin-bottom: 10px;
}
.tt-vd-path-popover__step-pos {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--wardrobe-gold, #c9a961);
}
.tt-vd-path-popover__step-title {
font-size: 14px;
color: var(--wardrobe-ink, #ece4d6);
}
.tt-vd-path-popover__hint {
font-size: 12px;
color: var(--wardrobe-ink-mute, rgba(236,228,214,0.65));
margin: 0 0 12px;
line-height: 1.5;
}
.tt-vd-path-popover__hint em {
color: var(--wardrobe-ink, #ece4d6);
font-style: normal;
font-weight: 600;
}
.tt-vd-path-popover__cta {
display: block;
width: 100%;
text-align: center;
}
/* Mobile: backdrop opaco + bottom-sheet con slide-up animato */
@media (max-width: 640px) {
.tt-vd-path-popover-backdrop.is-open {
background: rgba(0, 0, 0, 0.55);
pointer-events: auto;
}
.tt-vd-path-popover {
position: fixed;
top: auto !important;
right: 0 !important;
bottom: 0;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 16px 16px 0 0;
z-index: 9000;
box-shadow: 0 -10px 30px rgba(0,0,0,0.6);
/* Override desktop animation: slide-up dal bottom invece di slide-X */
transform: translateY(100%);
transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
opacity: 1;
}
.tt-vd-path-popover.is-open {
transform: translateY(0);
}
.tt-vd-path-popover::before { display: none; }
/* Lock scroll del body quando il sheet è aperto */
body.tt-path-popover-open {
overflow: hidden;
}
}
/* === Coming Soon =================================== */
.wardrobe-coming-soon {
opacity: 0.85;
filter: saturate(0.9);
position: relative;
}
.wardrobe-coming-soon--locked {
cursor: default;
pointer-events: none;
}
.wardrobe-coming-soon--clickable {
cursor: pointer;
}
.wardrobe-cs-badge {
display: inline-block;
padding: 2px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: var(--wardrobe-surface-elevated, #1a1a1a);
color: var(--wardrobe-gold, #c9a961);
border: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.4));
border-radius: 4px;
line-height: 1.4;
white-space: nowrap;
}
.wardrobe-cs-badge--corner {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
}
/* Top strip overlay for coming-soon course cards.
Sits absolutely at the top of a position:relative container
(e.g. .tt-course-poster). */
.wardrobe-cs-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.85);
color: var(--wardrobe-gold, #c9a961);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
border-bottom: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.4));
z-index: 3;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Compact variant for small lesson thumbs (e.g. 96x56 in course detail). */
.wardrobe-cs-overlay--compact {
padding: 3px 4px;
font-size: 9px;
letter-spacing: 0.6px;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Inner pieces of the overlay strip */
.wardrobe-cs-overlay__icon {
width: 0.85em;
height: 0.85em;
vertical-align: -0.15em;
margin-right: 4px;
flex-shrink: 0;
}
.wardrobe-cs-overlay__release {
/* La data va con peso visivo minore rispetto al prefisso "Prossimamente / In arrivo" */
font-size: 0.85em;
letter-spacing: 0.5px;
opacity: 0.9;
}
/* Mobile: il prefisso "Prossimamente / In arrivo" viene nascosto QUANDO esiste
una data release, lasciando solo "🕒 GIUGNO 2026" — molto più leggibile a font
più grande. Se non c'è data, il prefisso resta (altrimenti vedremmo solo l'icona). */
@media (max-width: 767px) {
.wardrobe-cs-overlay {
padding: 5px 6px;
font-size: 10.5px;
letter-spacing: 0.4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wardrobe-cs-overlay:has(.wardrobe-cs-overlay__release) .wardrobe-cs-overlay__prefix {
display: none;
}
.wardrobe-cs-overlay__release {
font-size: 1em;
letter-spacing: 0.4px;
}
.wardrobe-cs-overlay__icon {
margin-right: 4px;
}
}
/* Inline badge per la lesson card nel detail corso (riga "duration" sotto al titolo). */
.wardrobe-cs-inline-badge {
display: inline-block;
padding: 1px 6px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--wardrobe-gold, #c9a961);
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.4));
border-radius: 3px;
line-height: 1.5;
vertical-align: middle;
white-space: nowrap;
}
/* Prominent hero treatment for coming-soon courses on the detail page.
Used inline in .tt-course-hero__content (above the title). */
.wardrobe-cs-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 6px 14px;
background: rgba(0, 0, 0, 0.55);
color: var(--wardrobe-gold, #c9a961);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.2;
border: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.5));
border-radius: 999px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.wardrobe-cs-hero-eyebrow__release {
font-weight: 500;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.78);
border-left: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.4));
padding-left: 10px;
}
/* Top strip on the course hero banner. Sits at the very top of the hero,
spanning full width, to make CS state unmistakable from any scroll position. */
.wardrobe-cs-hero-strip {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
padding: 10px 16px;
background: rgba(0, 0, 0, 0.78);
color: var(--wardrobe-gold, #c9a961);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
text-align: center;
border-bottom: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.45));
pointer-events: none;
}
/* === Videos Wall (/videos) =================================== */
.tt-videos-wall {
padding: 24px 0 64px;
}
.tt-videos-wall__hero {
margin: 0 0 24px;
}
.tt-videos-wall__hero h1 {
margin: 0 0 6px;
}
.tt-videos-wall__hero p {
margin: 0;
font-size: 14px;
color: var(--wardrobe-ink-soft, #888);
}
/* Pills bar sticky */
.tt-videos-wall__pills,
.tt-shop-wall__pills {
position: sticky;
top: 0;
z-index: 10;
background: var(--wardrobe-surface, #1a1a1a);
padding: 12px 0;
margin: 0 -16px 16px;
padding-left: 16px;
padding-right: 16px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.tt-videos-wall__pills::-webkit-scrollbar,
.tt-shop-wall__pills::-webkit-scrollbar { display: none; }
.tt-videos-wall__pills .wardrobe-pill,
.tt-shop-wall__pills .wardrobe-pill {
display: inline-block;
margin-right: 8px;
}
/* Hero del wall (shop) — editorial, eyebrow + serif title + lead */
.tt-shop-wall__hero {
margin: 8px 0 28px;
padding-bottom: 22px;
text-align: left;
border-bottom: 1px solid hsla(0, 0%, 100%, 0.06);
}
.tt-shop-wall__eyebrow {
display: inline-block;
margin: 0 0 12px;
}
.tt-shop-wall__hero h1 { margin: 0 0 10px; }
.tt-shop-wall__hero p {
color: var(--wardrobe-ink-muted, rgba(245, 242, 236, 0.66));
margin: 0;
max-width: 56ch;
font-size: 15px;
line-height: 1.55;
}
@media (max-width: 767px) {
.tt-shop-wall__hero { text-align: center; margin: 4px 0 22px; padding-bottom: 18px; }
.tt-shop-wall__hero p { margin: 0 auto; }
}
/* Counter (parity with /videos and /wardrobe) */
.tt-shop-wall__counter {
flex: 0 0 auto;
color: rgba(255, 255, 255, 0.62);
font-size: 12px;
letter-spacing: 0.04em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
.tt-shop-wall__counter {
order: -1;
align-self: flex-start;
font-size: 11px;
}
}
/* Filtri row: stack mobile, search-left + pills-right desktop */
.tt-shop-wall__filters {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 20px;
}
@media (min-width: 768px) {
.tt-shop-wall__filters {
flex-direction: row;
align-items: center;
gap: 16px;
}
}
/* In modalità "filters row", la pills bar non è più sticky e si allinea a destra */
.tt-shop-wall__filters .tt-shop-wall__pills {
position: static;
margin: 0;
padding: 0;
background: transparent;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
white-space: nowrap;
}
@media (min-width: 768px) {
.tt-shop-wall__filters .tt-shop-wall__pills {
text-align: right;
}
}
/* Wrapper top-controls: stack su mobile, side-by-side su desktop */
.tt-videos-wall__top,
.tt-shop-wall__top {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 12px;
}
@media (min-width: 768px) {
.tt-videos-wall__top,
.tt-shop-wall__top {
flex-direction: row;
align-items: center;
gap: 16px;
}
}
.tt-videos-wall__searchbar,
.tt-shop-wall__searchbar {
margin: 0;
display: flex;
flex: 1 1 auto;
}
@media (min-width: 768px) {
.tt-videos-wall__searchbar,
.tt-shop-wall__searchbar {
flex: 0 1 380px;
}
}
.tt-videos-wall__search,
.tt-shop-wall__search {
position: relative;
flex: 1 1 100%;
}
/* Allinea la wardrobe-toolbar al container del wall (no max-width interno) */
.tt-videos-wall__wardrobe-toolbar {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media (min-width: 768px) {
.tt-videos-wall__wardrobe-toolbar {
flex: 1 1 auto;
}
}
/* TomSelect dropdown deve uscire dal panel collassato e stare sopra tutto.
La pills bar è sticky a z-index 10. La wardrobe-filters ha transform che crea
un proprio stacking context: serve anche position+z-index sul panel per
farlo posizionare in alto rispetto alla pills bar. */
.tt-videos-wall .wardrobe-toolbar {
position: relative;
z-index: 20;
}
.tt-videos-wall .wardrobe-filters {
position: relative;
}
.tt-videos-wall .wardrobe-filters.is-open {
overflow: visible;
z-index: 50;
}
.tt-videos-wall .wardrobe-filters .ts-dropdown {
z-index: 1000;
}
.tt-videos-wall .wardrobe-filters .ts-wrapper.dropdown-active,
.tt-videos-wall .wardrobe-filters .ts-wrapper.focus {
z-index: 1000;
position: relative;
}
.tt-videos-wall__search input,
.tt-shop-wall__search input {
width: 100%;
padding: 11px 14px 11px 40px;
background: var(--wardrobe-surface-2, #1e1e1e);
border: 1px solid var(--wardrobe-border-strong, rgba(245,242,236,0.14));
color: var(--wardrobe-ink, #f5f2ec);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
transition: border-color var(--dur-base, 200ms) var(--ease-out),
background var(--dur-base, 200ms) var(--ease-out);
}
.tt-videos-wall__search input::placeholder,
.tt-shop-wall__search input::placeholder {
color: rgba(245, 242, 236, 0.4);
}
.tt-videos-wall__search input:hover,
.tt-shop-wall__search input:hover {
border-color: rgba(245, 242, 236, 0.22);
}
.tt-videos-wall__search input:focus,
.tt-shop-wall__search input:focus {
border-color: hsla(var(--gold) / 0.55);
outline: none;
}
.tt-videos-wall__search i,
.tt-shop-wall__search i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--wardrobe-ink, #f5f2ec);
opacity: 0.6;
}
/* TomSelect popover deve stare sopra alla pills bar sticky (z-index 10) */
.tt-videos-wall .ts-wrapper { z-index: 11; }
.tt-videos-wall .ts-wrapper.focus,
.tt-videos-wall .ts-wrapper.dropdown-active { z-index: 30; }
.tt-videos-wall .ts-dropdown { z-index: 31; }
/* Coming-soon overlay placed at the BOTTOM of the wall card thumb (vs. top default).
Compact variant per i wall card: font 11px, padding ridotto, una sola riga. */
.tt-videos-wall-card .wardrobe-cs-overlay {
top: auto;
bottom: 0;
border-top: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.4));
border-bottom: 0;
padding: 5px 6px;
font-size: 11px;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Grid */
.tt-videos-wall__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
@media (max-width: 600px) {
.tt-videos-wall__grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
/* Pillole row */
.tt-videos-wall__pillole-row {
grid-column: 1 / -1;
margin: 8px 0;
padding: 16px;
background: var(--wardrobe-surface-elevated, #222);
border-radius: 12px;
border: 1px solid var(--wardrobe-gold-soft, rgba(201,169,97,0.3));
}
.tt-videos-wall__pillole-head {
margin: 0 0 12px;
}
.tt-videos-wall__pillole-title {
margin: 0;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.tt-videos-wall__pillole-track {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 4px;
}
.tt-videos-wall__pillola {
flex: 0 0 140px;
text-decoration: none;
color: inherit;
}
.tt-videos-wall__pillola-thumb {
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 8px;
background: #000;
margin-bottom: 6px;
}
.tt-videos-wall__pillola-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tt-videos-wall__pillola-title {
display: block;
font-size: 12px;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Empty state */
.tt-videos-wall__empty {
grid-column: 1 / -1;
text-align: center;
padding: 48px 16px;
color: var(--wardrobe-ink-soft, #888);
}
/* Load more sentinel (per infinite scroll) */
.tt-videos-wall__sentinel {
grid-column: 1 / -1;
height: 40px;
text-align: center;
color: var(--wardrobe-ink-soft, #666);
font-size: 12px;
padding: 12px;
}
/* Shop Bundles — pagina pubblica + card listing + callout */
.tt-bundle-page { padding: 32px 0; }
.tt-bundle-page__back { display: inline-block; margin-bottom: 24px; color: var(--wardrobe-ink-soft, #aaa); text-decoration: none; }
.tt-bundle-page__back:hover { color: var(--wardrobe-gold, #c9a96a); }
.tt-bundle-page__hero { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.tt-bundle-page__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.tt-bundle-page__desc { color: var(--wardrobe-ink-soft, #aaa); margin: 16px 0; }
.tt-bundle-page__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.tt-bundle-page__price-was { text-decoration: line-through; opacity: 0.55; font-size: 18px; }
.tt-bundle-page__price-now { font-size: 32px; font-weight: 700; color: var(--wardrobe-gold, #c9a96a); }
.tt-bundle-page__savings { font-size: 14px; color: var(--wardrobe-gold, #c9a96a); }
.tt-bundle-page__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.tt-bundle-item-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--wardrobe-hairline, #2a2a2a); border-radius: 8px; background: var(--wardrobe-surface-2, #161616); }
.tt-bundle-item-card.is-unavailable { opacity: 0.5; }
.tt-bundle-item-card__thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.tt-bundle-item-card__info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.tt-bundle-item-card__name { color: inherit; font-weight: 600; text-decoration: none; }
.tt-bundle-item-card__qty { font-size: 12px; opacity: 0.6; }
.tt-bundle-item-card__variants { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-bundle-item-card__variants select { padding: 4px 8px; font-size: 13px; background: var(--wardrobe-surface-3, #1f1f1f); color: inherit; border: 1px solid var(--wardrobe-hairline, #2a2a2a); border-radius: 4px; }
.tt-bundle-item-card__avail { font-size: 12px; }
.tt-bundle-item-card__avail[data-status="unavailable"] { color: var(--status-warning, #f59e0b); }
.tt-bundle-page__cta { margin-top: 32px; text-align: center; }
.tt-bundle-page__add { font-size: 16px; padding: 14px 32px; }
.tt-bundle-page__add[disabled] { opacity: 0.5; cursor: not-allowed; }
.tt-bundle-page__hint { color: var(--status-warning, #f59e0b); margin-top: 8px; font-size: 13px; }
@media (max-width: 768px) {
.tt-bundle-page__hero { grid-template-columns: 1fr; gap: 24px; }
}
/* ============================================================
Shop Bundles — fascia + card dedicate
============================================================ */
/* Fascia "Pacchetti": full grid row (mirror di .tt-videos-wall__pillole-row) */
.tt-shop-wall__bundles-row {
grid-column: 1 / -1;
margin: 16px 0 8px;
/* Reduced vertical padding to compensate for the track's internal
breathing room added below (see .tt-shop-wall__bundles-track) so
the visible row height stays the same. Original 22/18; track now
adds 6/10, so we subtract 6/8 here. */
padding: 16px 20px 10px;
background: var(--wardrobe-surface-elevated, hsl(var(--surface-3, 24 6% 14%)));
border-radius: 14px;
border: 1px solid var(--wardrobe-hairline, hsla(0, 0%, 100%, 0.06));
}
.tt-shop-wall__bundles-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 0 0 16px;
}
.tt-shop-wall__bundles-headline {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tt-shop-wall__bundles-headline .tt-eyebrow {
font-size: 11px;
letter-spacing: 0.18em;
}
.tt-shop-wall__bundles-title {
margin: 0;
font-family: var(--font-display, 'Fraunces', serif);
font-weight: 500;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.01em;
color: #fff;
}
.tt-shop-wall__bundles-cta {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.62);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-base, 200ms) var(--ease-out);
}
.tt-shop-wall__bundles-cta:hover { color: hsl(var(--gold)); }
.tt-shop-wall__bundles-cta span { display: inline-block; transition: transform var(--dur-base, 200ms) var(--ease-out); }
.tt-shop-wall__bundles-cta:hover span { transform: translateX(3px); }
.tt-shop-wall__bundles-track {
display: flex;
gap: 12px;
overflow-x: auto;
scrollbar-width: thin;
/* overflow-x: auto implicitly promotes overflow-y to auto, which clips
the bundle card's hover lift (-2px) and gold-border glow at the
track's top edge. Inner padding gives transform space; outer row
padding (above) was reduced by the same amount so visual layout is
unchanged. */
padding: 6px 0 10px;
scroll-snap-type: x mandatory;
}
/* Stack verticale per view=bundles */
.tt-shop-wall__bundles-stack {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Card bundle — base */
.tt-bundle-card {
display: flex;
gap: 16px;
padding: 14px;
border: 1px solid var(--wardrobe-hairline, #2a2a2a);
border-radius: 10px;
background: var(--wardrobe-surface-2, #161616);
transition: border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
text-decoration: none;
color: inherit;
}
.tt-bundle-card:hover {
border-color: hsl(var(--gold));
transform: translateY(-2px);
box-shadow: 0 6px 24px hsla(var(--gold) / 0.12);
}
.tt-bundle-card__cover {
flex: 0 0 46%;
position: relative;
display: block;
border-radius: 8px;
overflow: hidden;
}
.tt-bundle-card__cover img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform 400ms ease-out;
}
.tt-bundle-card:hover .tt-bundle-card__cover img { transform: scale(1.04); }
.tt-bundle-card__eyebrow {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.78);
color: hsl(var(--gold));
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
backdrop-filter: blur(4px);
}
.tt-bundle-card__star {
position: absolute;
top: 10px;
right: 10px;
color: hsl(var(--gold));
font-size: 18px;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.tt-bundle-card__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.tt-bundle-card__name {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 20px;
line-height: 1.15;
margin: 0;
color: inherit;
text-decoration: none;
transition: color 160ms ease-out;
}
.tt-bundle-card__name:hover { color: hsl(var(--gold)); }
.tt-bundle-card__desc {
color: var(--wardrobe-ink-soft, #aaa);
font-size: 13px;
margin: 0;
line-height: 1.4;
}
.tt-bundle-card__items {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.tt-bundle-card__item-thumb {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--wardrobe-hairline, #2a2a2a);
background: var(--wardrobe-surface-3, #1f1f1f);
}
.tt-bundle-card__item-more {
font-size: 11px;
padding: 4px 8px;
background: var(--wardrobe-surface-3, #1f1f1f);
border-radius: 999px;
color: var(--wardrobe-ink-soft, #aaa);
font-variant-numeric: tabular-nums;
}
.tt-bundle-card__price {
margin-top: auto;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.tt-bundle-card__price-was {
text-decoration: line-through;
opacity: 0.5;
font-size: 13px;
}
.tt-bundle-card__price-now {
font-size: 22px;
font-weight: 700;
color: hsl(var(--gold));
font-variant-numeric: tabular-nums;
}
.tt-bundle-card__savings {
font-size: 11px;
font-weight: 600;
color: hsl(var(--gold));
background: hsla(var(--gold) / 0.1);
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Variante --track (dentro la fascia): card fisse scrollabili come le pillole */
.tt-bundle-card--track {
flex: 0 0 460px;
scroll-snap-align: start;
}
/* Variante --feature usata in altri contesti (mantenuta retrocompatibile) */
.tt-bundle-card--feature {
flex: 0 0 460px;
scroll-snap-align: start;
}
@media (max-width: 768px) {
.tt-bundle-card {
flex-direction: column;
gap: 12px;
}
.tt-bundle-card__cover {
flex: 0 0 auto;
width: 100%;
}
.tt-bundle-card__cover img { aspect-ratio: 16 / 9; }
.tt-bundle-card--track,
.tt-bundle-card--feature {
flex: 0 0 calc(100% - 56px);
}
.tt-shop-wall__bundles-row {
padding: 14px 12px 10px;
}
.tt-shop-wall__bundles-track {
scroll-padding-left: 4px;
padding-right: 4px;
}
}
/* Callout su pagina prodotto */
.tt-product-related-row { margin: 48px 0 32px; }
.tt-product-related-row__title {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 22px;
margin-bottom: 16px;
}
.tt-product-bundle-callouts {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
padding: 12px 2px 4px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tt-product-bundle-callouts::-webkit-scrollbar { display: none; height: 0; width: 0; }
.tt-product-bundle-callouts .tt-bundle-card {
min-width: 460px;
scroll-snap-align: start;
}
@media (max-width: 768px) {
.tt-product-bundle-callouts .tt-bundle-card { min-width: 280px; }
}
.tt-cart-item--bundle .tt-cart-bundle__contents { list-style: none; padding: 0; margin: 8px 0; font-size: 12px; color: var(--wardrobe-ink-soft, #aaa); }
.tt-cart-item--bundle .tt-cart-bundle__contents li { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.tt-cart-bundle__contents-thumb { width: 22px; height: 22px; object-fit: cover; border-radius: 2px; }
.tt-cart-item--bundle .muted { opacity: 0.6; }
.tt-eyebrow--gold { color: var(--wardrobe-gold, #c9a96a); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.order-line--bundle { padding: 12px; border-left: 3px solid var(--wardrobe-gold, #c9a96a); margin: 8px 0; }
.order-line--bundle .order-line__head { display: flex; gap: 12px; align-items: baseline; }
.order-line--bundle .order-line__sub { list-style: none; padding: 0; margin: 6px 0 0 16px; font-size: 13px; color: var(--wardrobe-ink-soft, #aaa); }
.order-line--bundle .order-line__sub li { margin: 2px 0; }
/* =====================================================
SHOP MAGAZINE — Editoriale curatoriale per /shop
===================================================== */
.tt-shop-mag {
--shop-mag-gutter: clamp(20px, 3vw, 36px);
padding-top: clamp(24px, 3vw, 40px);
padding-bottom: clamp(72px, 10vw, 140px);
}
/* Nota: hero pagina usa .tt-page-hero condiviso (coerenza con blog, forum, ecc.) */
/* Filter bar: su desktop una sola riga search + pills + meta;
su mobile stack verticale (search → pills sticky → meta nascosta). */
.tt-shop-mag__filter-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 6px 0 2px;
margin-bottom: clamp(20px, 3vw, 32px);
}
.tt-shop-mag__rail {
display: flex;
flex: 0 0 auto;
align-items: center;
}
.tt-shop-mag__search-edit { flex: 1; width: 280px; }
.tt-shop-mag__filter-meta {
display: flex;
align-items: center;
gap: 16px;
margin-left: auto;
flex-shrink: 0;
}
@media (max-width: 720px) {
.tt-shop-mag__filter-bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 4px 0 0;
margin-bottom: 0;
}
.tt-shop-mag__rail { width: 100%; }
.tt-shop-mag__search-edit { width: 100%; min-width: 0; }
.tt-shop-mag__filter-meta {
margin-left: 0;
justify-content: flex-end;
width: 100%;
}
}
.tt-shop-mag__search-edit {
display: inline-flex; align-items: center; gap: 10px;
background: hsla(var(--surface-2) / 0.7);
border: 1px solid hsl(var(--hairline));
border-radius: 999px;
padding: 9px 16px;
min-width: 200px;
transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.tt-shop-mag__search-edit:hover { border-color: hsla(var(--gold) / 0.45); }
.tt-shop-mag__search-edit:focus-within {
border-color: hsl(var(--gold));
background: hsla(var(--surface-2) / 0.95);
}
.tt-shop-mag__search-edit i {
color: hsla(var(--gold) / 0.7);
font-size: 14px;
flex-shrink: 0;
}
.tt-shop-mag__search-edit input {
background: transparent;
border: none;
outline: none;
color: rgba(255,255,255,0.95);
font-family: var(--font-inter);
font-size: 14px;
letter-spacing: 0.01em;
width: 100%;
padding: 0;
}
.tt-shop-mag__search-edit input::placeholder {
color: rgba(255,255,255,0.5);
}
/* /shop usa il pattern condiviso .tt-shop-wall__pills + .wardrobe-pill
(stesso di /videos): sticky, scroll-x, white-space nowrap.
Vedi regola sopra .tt-videos-wall__pills, .tt-shop-wall__pills.
Override scoped: nello /shop la nav pills sta direttamente sotto il
rail di ricerca, quindi compattiamo il padding-top per ridurre lo
stacco visivo senza toccare il pattern di /videos. */
/* Mobile (≤720px): la nav pills resta come sticky bar sotto la search,
pattern condiviso ereditato. */
.tt-shop-mag > .tt-shop-mag__filter-bar > .tt-shop-wall__pills {
padding-top: 4px;
padding-bottom: 8px;
margin-bottom: 0;
}
@media (max-width: 720px) {
.tt-shop-mag > .tt-shop-mag__filter-bar > .tt-shop-wall__pills {
margin-bottom: 12px;
}
}
/* Desktop (>720px): la nav pills diventa una row inline accanto alla
search, senza sticky/background. Mantiene scroll-x se le pills sono
troppe per la larghezza disponibile. */
@media (min-width: 721px) {
.tt-shop-mag__filter-bar > .tt-shop-wall__pills {
position: static;
background: transparent;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-width: 0;
display: flex;
gap: 8px;
align-items: center;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.tt-shop-mag__filter-bar > .tt-shop-wall__pills::-webkit-scrollbar { display: none; }
.tt-shop-mag__filter-bar > .tt-shop-wall__pills .wardrobe-pill {
margin-right: 0;
}
}
.tt-shop-mag__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--shop-mag-gutter);
}
.tt-shop-mag__cell { min-width: 0; }
.tt-shop-mag__cell--featured {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 1024px) {
.tt-shop-mag__grid { grid-template-columns: repeat(3, 1fr); }
.tt-shop-mag__cell--featured { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 720px) {
.tt-shop-mag__grid { grid-template-columns: repeat(2, 1fr); --shop-mag-gutter: 14px; }
.tt-shop-mag__cell--featured { grid-column: span 2; grid-row: span 1; }
}
.tt-shop-mag__card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
isolation: isolate;
}
.tt-shop-mag__card-media {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: hsl(var(--surface-2));
}
.tt-shop-mag__cell--featured .tt-shop-mag__card-media { aspect-ratio: 1 / 1; }
@media (max-width: 720px) {
.tt-shop-mag__cell--featured .tt-shop-mag__card-media { aspect-ratio: 3 / 4; }
}
.tt-shop-mag__card-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
will-change: transform;
}
.tt-shop-mag__card:hover .tt-shop-mag__card-media img {
transform: scale(1.045);
filter: brightness(0.92);
}
.tt-shop-mag__card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 35%);
opacity: 0;
transition: opacity 500ms var(--ease-out);
pointer-events: none;
}
.tt-shop-mag__card:hover .tt-shop-mag__card-media::after { opacity: 1; }
.tt-shop-mag__tag {
position: absolute;
top: 14px;
left: 14px;
font-family: var(--font-inter);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
padding: 4px 10px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
line-height: 1.4;
z-index: 2;
}
.tt-shop-mag__tag--gold { color: hsl(var(--gold-ink)); background: hsl(var(--gold)); }
.tt-shop-mag__tag--out {
color: rgba(255,255,255,0.78);
background: rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.18);
}
.tt-shop-mag__card-body {
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.tt-shop-mag__card-cat {
font-family: var(--font-inter);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
/* Allineata a .tt-h3-serif del DS; featured promuove a .tt-h2-serif */
.tt-shop-mag__card-name {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h3);
line-height: 1.25;
letter-spacing: -0.01em;
color: #fff;
margin: 0;
text-wrap: balance;
transition: color var(--dur-base) var(--ease-out);
}
.tt-shop-mag__card:hover .tt-shop-mag__card-name { color: hsl(var(--gold-soft)); }
.tt-shop-mag__cell--featured .tt-shop-mag__card-name {
font-size: var(--fs-h2);
line-height: 1.12;
}
.tt-shop-mag__card-price {
font-family: var(--font-display);
font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem);
color: rgba(255,255,255,0.85);
font-variant-numeric: tabular-nums;
margin-top: 4px;
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.tt-shop-mag__card-price-was {
color: rgba(255,255,255,0.42);
text-decoration: line-through;
font-size: 0.85em;
}
.tt-shop-mag__card-price-now--sale { color: hsl(var(--gold)); }
.tt-shop-mag__clear {
font-family: var(--font-inter);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
text-decoration: none;
border-bottom: 1px dashed rgba(255,255,255,0.35);
padding-bottom: 1px;
transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.tt-shop-mag__clear:hover { color: hsl(var(--gold)); border-bottom-color: hsl(var(--gold)); }
.tt-shop-mag__empty {
text-align: center;
padding: clamp(48px, 8vw, 96px) 24px;
border-top: 1px solid hsla(var(--hairline) / 0.5);
margin-top: 24px;
}
.tt-shop-mag__empty .tt-eyebrow { margin-bottom: 14px; }
.tt-shop-mag__empty h3 { margin: 0 0 12px; }
.tt-shop-mag__empty p { color: rgba(255,255,255,0.6); max-width: 48ch; margin: 0 auto 22px; }
/* =====================================================
PRODUCT MAGAZINE — Spread editoriale per /shop/product/:id
===================================================== */
.tt-product-mag {
padding-top: clamp(24px, 4vw, 56px);
padding-bottom: clamp(80px, 10vw, 160px);
}
/* Quando la sticky buy bar è presente, riserva spazio per non coprire il footer.
Mobile: la bar è full-width fissa → spazio maggiore.
Desktop: bar centrata flottante 16px dal bottom → minore. */
body:has(.tt-buy-bar) { padding-bottom: 88px; }
@media (max-width: 540px) {
body:has(.tt-buy-bar) { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
/* SHOP JOURNEY: rimuoviamo la mobile bottom-nav su tutto il percorso shop
(/shop, /shop/product/:id, /shop/cart, /shop/checkout, /shop/orders/*, ecc.)
per dare focus all'acquisto e liberare lo spazio per la sticky buy bar. */
@media (max-width: 767px) {
body.is-shop-journey .tt-mobile-nav { display: none !important; }
body.is-shop-journey .tt-container__right { padding-bottom: 0; }
}
/* Back link usa .tt-order-back-link condiviso. Solo override spacing al di sopra dello spread. */
.tt-product-mag .tt-order-back-link { margin: 0 0 clamp(20px, 3vw, 36px); }
.tt-product-mag__spread {
display: grid;
grid-template-columns: 58fr 42fr;
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
@media (max-width: 960px) {
.tt-product-mag__spread { grid-template-columns: 1fr; gap: 32px; }
}
.tt-product-mag__gallery {
display: grid;
grid-template-columns: 72px 1fr;
gap: 16px;
position: sticky;
top: 100px;
align-self: start;
}
.tt-product-mag__gallery--solo { grid-template-columns: 1fr; }
@media (max-width: 960px) {
.tt-product-mag__gallery {
position: static;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
}
.tt-product-mag__thumbs {
display: flex;
flex-direction: column;
gap: 10px;
align-self: start;
max-height: 70vh;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
}
@media (max-width: 960px) {
.tt-product-mag__thumbs {
order: 2;
flex-direction: row;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 6px;
}
}
.tt-product-mag__thumb {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
background: hsl(var(--surface-2));
border: 1px solid transparent;
padding: 0;
cursor: pointer;
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
opacity: 0.55;
flex-shrink: 0;
}
@media (max-width: 960px) {
.tt-product-mag__thumb { width: 60px; }
}
.tt-product-mag__thumb img,
.tt-product-mag__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.tt-product-mag__thumb:hover,
.tt-product-mag__thumb.is-active { opacity: 1; border-color: hsl(var(--gold)); }
.tt-product-mag__thumb-play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
font-size: 10px;
background: rgba(0,0,0,0.4);
pointer-events: none;
}
.tt-product-mag__viewport {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: hsl(var(--surface-2));
}
@media (max-width: 960px) {
.tt-product-mag__viewport { order: 1; }
}
.tt-product-mag__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 400ms var(--ease-out);
pointer-events: none;
}
.tt-product-mag__slide.is-active { opacity: 1; pointer-events: auto; }
.tt-product-mag__slide img,
.tt-product-mag__slide video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tt-product-mag__viewport.is-zoom-capable { cursor: zoom-in; }
.tt-product-mag__slide.is-active img.is-zoomed {
transform-origin: var(--zx, 50%) var(--zy, 50%);
transform: scale(1.8);
transition: transform 480ms var(--ease-out);
cursor: zoom-out;
}
.tt-product-mag__info {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.5vw, 32px);
padding: clamp(4px, 1vw, 8px) 0;
}
.tt-product-mag__cat {
font-family: var(--font-inter);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
/* Titolo prodotto: usa .tt-h1-serif del DS (gestione font+colore). Qui solo overrides locali. */
.tt-product-mag__title {
margin: 0;
text-wrap: balance;
flex: 1 1 auto;
}
/* Title row legacy (sostituito da .tt-product-mag__actions); no-op se non più usato. */
/* Quick actions sotto al titolo prodotto: stesso pattern slider della pagina
video (mobile) ma forzato anche su desktop con il modifier --inline. */
.tt-product-mag__actions {
margin-top: 4px;
/* Edge-to-edge sul lato dx per dare peek + mask gradient */
margin-right: -16px;
}
/* Modifier --inline: forza il pattern mobile delle quick-actions su tutti
i breakpoint, con misure IDENTICHE al pattern .tt-vd-qa mobile della
pagina /video/. Usato quando le actions stanno in una colonna info
stretta (es. sotto al titolo prodotto) anziché accanto a un player. */
.tt-vd-quick-actions--inline {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
gap: 6px;
overflow-x: auto;
padding: 0 30px 2px 0;
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
}
.tt-vd-quick-actions--inline::-webkit-scrollbar { display: none; }
.tt-vd-quick-actions--inline .tt-vd-qa {
flex: 0 0 auto;
flex-direction: row;
width: auto;
padding: 4px 11px 4px 6px;
gap: 6px;
border-radius: 999px;
scroll-snap-align: start;
}
.tt-vd-quick-actions--inline .tt-vd-qa__icon {
width: 22px; height: 22px;
font-size: 11.5px;
}
.tt-vd-quick-actions--inline .tt-vd-qa__icon svg { width: 12px; height: 12px; }
.tt-vd-quick-actions--inline .tt-vd-qa__label {
font-size: 11.5px;
letter-spacing: 0.02em;
white-space: nowrap;
text-align: left;
}
/* Neutralizza il position:absolute della .tt-save-toggle base quando vestita da pill */
.tt-vd-quick-actions .tt-save-toggle {
position: static;
top: auto; right: auto;
background: hsla(var(--surface-2, 0 0% 10%) / 0.7);
border: 1px solid hsl(var(--hairline));
box-shadow: none;
width: auto; height: auto;
border-radius: 999px;
backdrop-filter: none;
}
.tt-product-mag__price {
display: flex;
align-items: baseline;
gap: 14px;
margin-top: -8px;
}
.tt-product-mag__price-now {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.6vw + 1rem, 2.25rem);
color: hsl(var(--gold));
font-variant-numeric: tabular-nums;
line-height: 1;
}
.tt-product-mag__price-was {
font-family: var(--font-display);
font-size: 1.05rem;
color: rgba(255,255,255,0.4);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.tt-product-mag__discount {
font-family: var(--font-inter);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: hsl(var(--gold-ink));
background: hsl(var(--gold));
padding: 3px 9px;
border-radius: 999px;
}
.tt-product-mag__desc {
font-family: var(--font-inter);
font-size: 15px;
line-height: 1.65;
color: rgba(255,255,255,0.78);
max-width: 60ch;
}
.tt-product-mag__desc p:last-child { margin-bottom: 0; }
.tt-product-mag__variants {
display: flex;
flex-direction: column;
gap: 10px;
}
.tt-product-mag__variant-label {
font-family: var(--font-inter);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
display: flex;
justify-content: space-between;
}
.tt-product-mag__variant-current { color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.tt-product-mag__pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Le pill taglia usano .wardrobe-pill (stesso di /shop, /videos, /blog).
Override locali: min-width per dare uniformità (taglie corte come S/M/L
non devono apparire più piccole), cursor pointer (sono