: la griglia della sezione vedrebbe un unico figlio. Quindi e il
stesso a diventare
griglia, e i campi (ognuno nel suo .wpcf7-form-control-wrap) sono le celle.
Cosi il layout non dipende da come CF7 decide di impaginare. */
/* Vale per tutte e tre le classi contenitore, cosi i form scritti con il
markup precedente (wt-form-grid / wt-form-section) si comportano uguale. */
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px clamp(18px, 2.4vw, 40px);
align-items: start;
margin: 0;
}
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p > .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* Righe che devono restare intere: testo libero, consensi, scelte, invio. */
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p:has(textarea),
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p:has(.wpcf7-submit),
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p:has(input[type=submit]),
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p:has(.wpcf7-radio) {
grid-template-columns: 1fr;
}
/* I consensi tornano a flusso normale: se letichetta sta fuori dal controllo
(acceptance senza tag di chiusura), in griglia finirebbe in unaltra cella e
quindi a capo. In blocco, spunta e testo restano sulla stessa riga. */
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p:has(.wpcf7-acceptance) {
display: block;
}
/* Campo a riga intera: nel form-tag basta aggiungere class:wt-full,
per esempio [text nome class:wt-full] */
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p > .wpcf7-form-control-wrap:has(.wt-full) {
grid-column: 1 / -1;
}
@media (max-width: 640px) {
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p { grid-template-columns: 1fr; }
}
/* Ogni consenso su una riga sua, spunta e testo affiancati. */
.wt-form .wpcf7-acceptance { display: block; margin-bottom: 10px; }
.wt-form .wpcf7-acceptance .wpcf7-list-item { display: block; }
.wt-form .wpcf7-submit { display: block; justify-self: start; margin-top: 14px; white-space: nowrap; }
/* Righe del builder a filo: i 15px di padding delle colonne di Flatsome
disallineano il contenuto rispetto al catalogo. Classe da mettere sul Row. */
.wt-flush > .col,
.wt-flush > .col > .col-inner { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) {
.wt-form-grid,
.wt-form-grid-3,
.wt-form-2col { grid-template-columns: 1fr; }
}
.wt-form-note { font-size: 13px; color: var(--wt-muted); line-height: 1.55; margin-bottom: 16px; }
/* Caricamento file */
.wt-form input[type=file] {
width: 100%;
font-size: 13px;
padding: 14px;
border: 1px dashed var(--wt-line);
background: var(--wt-surface);
cursor: pointer;
}
/* Consensi */
.wt-form .wpcf7-acceptance,
.wt-form .wpcf7-radio { display: inline-block; }
.wt-form .wpcf7-list-item { margin: 0; display: inline-block; }
.wt-form .wpcf7-list-item label { display: inline-flex; align-items: flex-start; gap: 9px; }
.wt-form .wpcf7-list-item-label { font-size: 13px; line-height: 1.5; color: var(--wt-muted); }
.wt-form input[type=checkbox],
.wt-form input[type=radio] { margin: 3px 0 0; flex: 0 0 auto; }
/* Quando letichetta del consenso resta fuori dal controllo (acceptance senza
tag di chiusura), il contenitore va reso inline o il testo va a capo. */
.wt-form .wpcf7-form-control-wrap:has(.wpcf7-acceptance),
.wt-form .wpcf7-form-control-wrap:has(.wpcf7-radio) { display: inline; }
.wt-form p:has(.wpcf7-acceptance) {
font-size: 13px;
line-height: 1.5;
color: var(--wt-muted);
margin-bottom: 10px;
margin-top: 25px;
}
.wt-form .wpcf7-form-control.wpcf7-submit.has-spinner { display: block; }
.wt-form p:has(.wpcf7-acceptance) a { color: var(--wt-ink); }
/* Il pulsante di invio non deve finire in linea con lultimo consenso. */
.wt-form .wpcf7-submit { display: block; }
/* I campi file allineati come gli altri, senza sovrapposizioni. */
.wt-form p:has(input[type=file]) { margin: 0 0 10px; }
/* Contact Form 7 inserisce
dopo ogni campo: sono la causa degli
allineamenti irregolari fra un campo e laltro. */
.wt-form form br { display: none; }
.wt-form form p { margin: 0; }
/* Scelte multiple in linea */
.wt-form .wpcf7-radio .wpcf7-list-item,
.wt-form .wpcf7-checkbox .wpcf7-list-item { display: inline-flex; margin: 0 30px 10px 0; }
.wt-form .wpcf7-radio .wpcf7-list-item-label { color: var(--wt-ink); font-size: 15px; }
/* Invio e messaggi */
.wt-form .wpcf7-submit {
display: inline-flex;
align-items: center;
gap: 24px;
background: var(--wt-ink);
color: #fff;
border: 1px solid var(--wt-ink);
border-radius: 0;
padding: 15px 28px;
margin: 10px 0 0;
font-size: 14px;
box-shadow: none;
width: max-content;
max-width: 100%;
min-width: 0;
white-space: nowrap;
overflow: visible;
text-transform: none;
letter-spacing: 0;
line-height: 1.2;
height: auto;
}
.wt-form .wpcf7-submit:hover { background: #3b3b3b; }
.wt-form .wpcf7-not-valid-tip { font-size: 12px; color: #b3261e; padding-top: 5px; }
.wt-form .wpcf7-response-output {
margin: 22px 0 0;
padding: 14px 16px;
border: 1px solid var(--wt-line);
font-size: 14px;
}
/* Rami del form generale: il ramo scelto entra con un movimento minimo. */
.wt-form [data-branch] { animation: wt-branch-in .28s ease both; }
@keyframes wt-branch-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.wt-form .wt-branch-choice .wpcf7-list-item {
display: inline-flex;
margin: 0 32px 10px 0;
}
.wt-form .wt-branch-choice .wpcf7-list-item-label { font-size: 15px; color: var(--wt-ink); }
@media (prefers-reduced-motion: reduce) {
.wt-form [data-branch] { animation: none; }
}
/* ------------------------------------------------------------------ */
/* Tipografia utilizzabile anche fuori da .wt-site */
/* ------------------------------------------------------------------ */
.wt-title:not(.wt-site .wt-title) {
font-family: Manrope, Arial, sans-serif;
font-size: clamp(48px, 7.7vw, 120px);
letter-spacing: -.065em;
font-weight: 400;
line-height: 1.04;
color: var(--wt-ink);
margin: 0;
}
.wt-kicker:not(.wt-site .wt-kicker) {
font-family: Manrope, Arial, sans-serif;
font-size: 12px;
letter-spacing: .13em;
text-transform: uppercase;
margin: 0;
}
.wt-muted:not(.wt-site .wt-muted) { color: var(--wt-muted); }
.wt-link:not(.wt-site .wt-link) {
display: inline-flex;
gap: 28px;
align-items: center;
border-bottom: 1px solid;
padding: 10px 0;
font-size: 14px;
color: var(--wt-ink);
text-decoration: none;
word-spacing: normal;
}
.wt-link:not(.wt-site .wt-link) span { font-size: 22px; }
/* ------------------------------------------------------------------ */
/* Split: mosaico di miniature e conteggio */
/* ------------------------------------------------------------------ */
/* Il mosaico sta sotto a tutto, dietro un velo che compare con il pannello:
nessuna modella diventa "la faccia" della categoria, e linsieme cambia
da solo quando cambia il catalogo. */
.wt-site .wt-split-tiles {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
grid-template-columns: repeat(var(--cols, 6), 1fr);
grid-template-rows: repeat(var(--rows, 4), 1fr);
pointer-events: none;
/* Una sola proprieta animata per tutto il mosaico: 24 opacita sfalsate
con filtro sopra facevano crollare i frame su Safari. */
opacity: 0;
filter: grayscale(1) contrast(1.15) brightness(1.1);
transition: opacity var(--wt-split-out) linear;
will-change: opacity;
}
.wt-site .wt-split-panel.is-active .wt-split-tiles {
opacity: .2;
transition-duration: var(--wt-split-in);
}
.wt-site .wt-split-tile { overflow: hidden; }
.wt-site .wt-split-tile img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
display: block;
}
/* Nessun velo: il fondo del pannello attivo e nero e le miniature ci
galleggiano sopra in trasparenza. */
/* Il contenuto va sopra mosaico e velo. */
.wt-site .wt-split-meta,
.wt-site .wt-split-word,
.wt-site .wt-split-cta { position: relative; z-index: 2; }
.wt-site .wt-split-panel.is-active {
background: var(--wt-ink);
color: var(--wt-paper);
}
.wt-site .wt-split-meta { width: 100%; }
@media (max-width: 768px) {
.wt-site .wt-split-tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.wt-site .wt-split-tiles { transition: none; }
}
/* ------------------------------------------------------------------ */
/* Scheda: rifiniture su link, pulsanti, ritratto e lightbox */
/* ------------------------------------------------------------------ */
/* I tre link hanno la stessa larghezza, etichetta a sinistra e icona a destra. */
.wt-plink {
width: 100%;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
}
.wt-plink-icon { flex: 0 0 auto; width: 22px; height: 22px; }
.wt-plink-icon circle,
.wt-plink-icon rect,
.wt-plink-icon path { fill: none; stroke: currentColor; stroke-width: 1.8; }
.wt-plink-anchor { padding-left: 0; }
/* A riposo licona non e cerchiata: il cerchio e lanello di avanzamento e
compare solo mentre il file si scarica. */
.wt-plink .wt-dl-track { opacity: 0; transition: opacity .2s; }
.wt-plink.is-loading .wt-dl-track,
.wt-plink.is-indeterminate .wt-dl-track,
.wt-plink.is-done .wt-dl-track { opacity: 1; }
.wt-plink .wt-dl-arrow { stroke-width: 2; }
.wt-plink-icon-grid circle { display: none; }
.wt-plink-icon-grid rect { fill: currentColor; stroke: none; }
/* Larghezza dei tre link */
.wt-profile-links { width: 140px; }
/* I due pulsanti: stesso stile, stessa misura, e su una riga anche in stretto. */
.wt-site .wt-profile-info .wt-button,
.wt-site .wt-pick-inline {
text-transform: none;
letter-spacing: 0;
font-size: 14px;
padding: 15px 22px;
gap: 16px;
flex: 1 1 auto;
justify-content: space-between;
min-width: 0;
white-space: nowrap;
}
.wt-site .wt-profile-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.wt-site .wt-pick-inline { margin-top: 0; }
/* Ritratto: mai tagliato, e mai piu alto della finestra. */
.wt-site .wt-profile-portrait {
aspect-ratio: auto;
width: 100%;
height: auto;
max-height: 100dvh;
object-fit: contain;
object-position: top center;
background: transparent;
}
/* Lancora tiene conto dellheader sticky di Flatsome. */
.wt-anchor { scroll-margin-top: 110px; }
/* Lightbox: il trascinamento non deve selezionare limmagine. */
.wt-site .wt-lightbox img {
touch-action: pan-y;
user-select: none;
-webkit-user-drag: none;
cursor: grab;
}
.wt-site .wt-lightbox img:active { cursor: grabbing; }
@media (max-width: 640px) {
.wt-profile-links { width: 100%; }
.wt-site .wt-profile-info .wt-button,
.wt-site .wt-pick-inline { flex: 1 1 100%; }
}
/* ------------------------------------------------------------------ */
/* Comparsa allingresso nel viewport (.wt-reveal) */
/* ------------------------------------------------------------------ */
/* Nascosto SOLO dopo che il JavaScript ha armato lelemento: senza JS, o se
lo script fallisce, il contenuto e visibile. Mai contenuto invisibile in
attesa di unanimazione. */
.wt-reveal-ready,
.wt-reveal-ready.wt-reveal-children > * {
--wt-reveal-time: 900ms;
clip-path: inset(100% 0 0 0);
opacity: 0;
transition: clip-path var(--wt-reveal-time) cubic-bezier(.22, 1, .36, 1),
opacity calc(var(--wt-reveal-time) * .6) linear,
transform var(--wt-reveal-time) cubic-bezier(.22, 1, .36, 1);
/* --o e la posizione dellelemento nella pagina: gli elementi gia in
vista entrano in sequenza invece che tutti nello stesso istante. */
will-change: clip-path;
}
.wt-reveal-ready.wt-reveal-left,
.wt-reveal-ready.wt-reveal-left.wt-reveal-children > * { clip-path: inset(0 100% 0 0); }
.wt-reveal-ready.wt-reveal-right,
.wt-reveal-ready.wt-reveal-right.wt-reveal-children > * { clip-path: inset(0 0 0 100%); }
.wt-reveal-ready.wt-reveal-down,
.wt-reveal-ready.wt-reveal-down.wt-reveal-children > * { clip-path: inset(0 0 100% 0); }
/* Un filo di movimento oltre al taglio. */
.wt-reveal-ready.wt-reveal-up { transform: translateY(14px); }
.wt-reveal-ready.wt-reveal-left { transform: translateX(-14px); }
.wt-reveal-ready.wt-reveal-right { transform: translateX(14px); }
.wt-reveal-ready.is-in,
.wt-reveal-ready.is-in.wt-reveal-children > * {
clip-path: inset(0);
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.wt-reveal-ready,
.wt-reveal-ready.wt-reveal-children > * {
clip-path: none !important;
opacity: 1 !important;
transform: none !important;
transition: none;
}
}
/* A riposo il pannello e pulito: il mosaico entra solo con lhover.
Per farlo intravedere sempre, alzare lopacita di .wt-split-tiles. */
/* ------------------------------------------------------------------ */
/* Mobile: catalogo piu compatto */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
.wt-site .wt-catalog-heading { padding: 20px 0 14px; }
.wt-site .wt-catalog-top { padding-bottom: 12px; gap: 12px; }
.wt-site .wt-genders { gap: 20px; }
.wt-site .wt-search { margin: 0; }
.wt-site .wt-search input { padding: 6px 0; }
.wt-site .wt-filter-toggle { padding: 13px 0; }
.wt-site .wt-filterbar { padding: 14px 0; gap: 10px; }
.wt-site .wt-results-row { padding: 13px 0; }
.wt-site .wt-catalog-grid { gap: 18px 8px; padding-bottom: 40px; }
.wt-site .wt-chips { margin-bottom: 12px; }
.wt-site .wt-breadcrumb { padding: 14px 0; }
.wt-site .wt-profile { gap: 16px; padding-bottom: 28px; }
.wt-site .wt-gallery { gap: 8px; padding-bottom: 32px; }
.wt-site .wt-gallery-heading { padding-top: 22px; }
.wt-home-block { padding-top: 30px; }
}
/* ------------------------------------------------------------------ */
/* .wt-link: difesa dalla spaziatura ereditata dal tema */
/* ------------------------------------------------------------------ */
/* Le Theme Options di Flatsome possono impostare letter-spacing e
word-spacing su link e pulsanti: dentro il design system vanno riportati a
valori normali, altrimenti le parole si attaccano. Qui serve la forza,
perche quelle regole arrivano da un blocco inline generato dal tema. */
.wt-link,
.wt-site .wt-link,
.wt-button,
.wt-site .wt-button {
word-spacing: normal !important;
letter-spacing: normal !important;
font-stretch: normal !important;
}
.wt-link {
white-space: nowrap;
flex-wrap: nowrap;
max-width: 100%;
min-width: 0;
}
.wt-link > span[aria-hidden] { flex: 0 0 auto; }
@media (max-width: 640px) {
.wt-link { white-space: normal; }
}
/* ------------------------------------------------------------------ */
/* Etichette per i campi che non possono avere un placeholder */
/* ------------------------------------------------------------------ */
/* Ogni campo riserva sopra di se una riga per l'etichetta, anche quando non
ne ha una: cosi' tutte le celle della griglia hanno la stessa altezza e la
riga non si sfasa quando un campo la usa davvero. */
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p > .wpcf7-form-control-wrap:not(:has(.wpcf7-acceptance)):not(:has(.wpcf7-radio)):not(:has(.wpcf7-checkbox))::before {
content: "";
display: block;
height: 15px;
line-height: 15px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wt-muted);
white-space: nowrap;
overflow: hidden;
}
/* I campi che un'etichetta la vogliono davvero: si aggiunge per nome, senza
toccare il markup di Contact Form 7. Per un altro campo basta copiare la
riga cambiando data-name e il testo. */
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p > .wpcf7-form-control-wrap[data-name="data_nascita"]::before { content: "Data di nascita"; }
:is(.wt-form-2col, .wt-form-grid, .wt-form-section) > p > .wpcf7-form-control-wrap[data-name="periodo"]::before { content: "Periodo o data"; }
/* Il campo data si allinea agli altri: stessa altezza e stesso filetto. */
.wt-form input[type="date"] {
color: var(--wt-ink);
font-size: 15px;
}
.wt-form input[type="date"]:invalid,
.wt-form input[type="date"]:not(:focus):placeholder-shown { color: var(--wt-muted); }
/* Le select senza scelta fatta restano grigie come i placeholder degli altri
campi, cosi' si distingue a colpo d'occhio cosa manca. */
.wt-form select:has(option:first-child:checked) { color: var(--wt-muted); }
.wt-form select { color: var(--wt-ink); }
/* La chip della selezione condivisa si distingue dalle altre: e' uno stato
della pagina, non un filtro qualsiasi. */
.wt-site .wt-chip-shared {
background: var(--wt-ink);
color: var(--wt-paper);
border-color: var(--wt-ink);
}
/* ------------------------------------------------------------------ */
/* Dati riservati (visibili solo allo staff autenticato) */
/* ------------------------------------------------------------------ */
.wt-site .wt-stats-private {
border-top: 1px dashed var(--wt-line);
border-bottom: 1px dashed var(--wt-line);
margin-top: -14px;
}
.wt-site .wt-stats-private dd { font-size: 15px; }
.wt-site .wt-stats-private a { text-decoration: underline; text-underline-offset: 3px; }
.wt-site .wt-private-flag dt { color: var(--wt-ink); }
.wt-site .wt-private-flag dd { font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--wt-muted); }
.wt-site .wt-filter-private label,
.wt-site .wt-filter-private { position: relative; }
.wt-site .wt-filter-private select { border-style: dashed; }
/* ------------------------------------------------------------------ */
/* Casting: pagina condivisa con il cliente */
/* ------------------------------------------------------------------ */
/* Barra fissa: da subito il contesto del progetto, come nelle piattaforme
di casting. Occupa poco e resta sempre leggibile. */
.wt-casting-topbar {
position: sticky;
top: 0;
z-index: 50;
background: var(--wt-ink);
color: var(--wt-paper);
}
.wt-casting-topbar-inner {
display: flex;
align-items: center;
gap: 14px;
padding: 12px var(--wt-gutter);
max-width: 100%;
}
.wt-casting-topbar-title {
font-size: 14px;
font-weight: 500;
letter-spacing: -.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wt-casting-topbar-meta {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255, 255, 255, .6);
white-space: nowrap;
margin-right: auto;
}
.wt-casting-share {
background: none;
border: 1px solid rgba(255, 255, 255, .35);
color: var(--wt-paper);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 7px 14px;
cursor: pointer;
white-space: nowrap;
}
.wt-casting-share:hover { background: rgba(255, 255, 255, .12); }
/* Testata del progetto: compatta, non una pagina editoriale. */
.wt-casting .wt-casting-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(20px, 3vw, 60px);
flex-wrap: wrap;
padding: clamp(24px, 3.5vw, 48px) 0 clamp(18px, 2.5vw, 30px);
}
.wt-casting .wt-casting-head .wt-title { font-size: clamp(34px, 5vw, 76px); }
.wt-casting .wt-casting-meta { border: 0; margin: 0; padding: 0; }
.wt-casting .wt-casting-meta div + div::before { content: none; }
.wt-casting .wt-casting-meta dd { font-size: 16px; }
.wt-casting .wt-block { padding: clamp(20px, 2.6vw, 38px) 0; }
.wt-casting .wt-prose p { font-size: 15px; line-height: 1.6; }
/* Riepilogo come pastiglie, non come riga di testo. */
.wt-casting .wt-casting-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 20px;
}
.wt-casting .wt-casting-bar > .wt-kicker { max-width: 46ch; }
.wt-casting .wt-casting-totals {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
}
.wt-casting .wt-casting-totals li {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--wt-line);
padding: 6px 12px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wt-muted);
white-space: nowrap;
}
.wt-casting .wt-casting-totals strong { color: var(--wt-ink); font-size: 13px; }
.wt-casting .wt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wt-line); display: inline-block; }
.wt-casting .wt-dot-confermato { background: #1f7a3d; }
.wt-casting .wt-dot-opzione1 { background: #1d4ed8; }
.wt-casting .wt-dot-opzione2 { background: #c2610a; }
.wt-casting .wt-dot-scartato { background: #9a9a9a; }
/* Griglia piu' fitta: e' una lista di lavoro, non una vetrina. */
.wt-casting .wt-casting-grid {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 22px 14px;
padding-bottom: 20px;
}
.wt-casting-card { position: relative; transition: opacity .25s; }
.wt-casting-card .wt-card-image { position: relative; }
.wt-casting-card.is-saving { opacity: .5; }
.wt-casting-card.is-scartato .wt-card-image img { filter: grayscale(1); opacity: .4; }
/* Nome e dati sopra la foto */
.wt-casting-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 34px 12px 10px;
background: linear-gradient(transparent, rgba(0, 0, 0, .72));
color: #fff;
pointer-events: none;
}
.wt-casting-caption h2 { font-size: 15px; font-weight: 500; line-height: 1.2; }
.wt-casting-caption span { font-size: 12px; opacity: .8; }
.wt-casting-badge {
position: absolute;
top: 0; left: 0;
padding: 5px 10px;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
opacity: 0;
z-index: 2;
}
.wt-casting-card.is-confermato .wt-casting-badge { opacity: 1; background: #1f7a3d; }
.wt-casting-card.is-opzione1 .wt-casting-badge { opacity: 1; background: #1d4ed8; }
.wt-casting-card.is-opzione2 .wt-casting-badge { opacity: 1; background: #c2610a; }
.wt-casting-card.is-scartato .wt-casting-badge { opacity: 1; background: #6b6b6b; }
.wt-casting-card.is-confermato .wt-casting-badge::after { content: 'Confermato'; }
.wt-casting-card.is-opzione1 .wt-casting-badge::after { content: '1a opzione'; }
.wt-casting-card.is-opzione2 .wt-casting-badge::after { content: '2a opzione'; }
.wt-casting-card.is-scartato .wt-casting-badge::after { content: 'Scartato'; }
/* Filetto di stato sopra la card: si legge anche scorrendo in fretta. */
.wt-casting-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: transparent;
z-index: 3;
transition: background .2s;
}
.wt-casting-card.is-confermato::before { background: #1f7a3d; }
.wt-casting-card.is-opzione1::before { background: #1d4ed8; }
.wt-casting-card.is-opzione2::before { background: #c2610a; }
.wt-casting-card.is-scartato::before { background: #9a9a9a; }
/* Quattro pulsanti su due righe: in una riga sola le etichette non entrano
nella larghezza di una card e si accavallano. */
.wt-casting-states {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
padding-top: 10px;
}
.wt-casting-state {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 8px;
border: 1px solid var(--wt-line);
background: #fff;
color: var(--wt-muted);
cursor: pointer;
white-space: nowrap;
transition: background .18s, color .18s, border-color .18s;
}
.wt-casting-state:hover { border-color: var(--wt-ink); color: var(--wt-ink); }
.wt-casting-state:focus-visible { outline: 2px solid var(--wt-ink); outline-offset: 2px; }
.wt-casting-state:active { transform: translateY(1px); }
.wt-casting-state-icon {
flex: 0 0 auto;
width: 17px;
height: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 50%;
font-size: 10px;
line-height: 1;
}
.wt-casting-state-label {
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
}
/* Stato attivo: pieno di colore, con l'icona in negativo. */
.wt-casting-state[aria-pressed="true"] { color: #fff; border-color: transparent; }
.wt-casting-state[aria-pressed="true"] .wt-casting-state-icon {
background: rgba(255, 255, 255, .22);
border-color: rgba(255, 255, 255, .55);
}
.wt-state-confermato[aria-pressed="true"] { background: #1f7a3d; }
.wt-state-opzione1[aria-pressed="true"] { background: #1d4ed8; }
.wt-state-opzione2[aria-pressed="true"] { background: #c2610a; }
.wt-state-scartato[aria-pressed="true"] { background: #6b6b6b; }
.wt-casting-state[disabled] { opacity: .4; cursor: not-allowed; }
/* Didascalia: sfumatura piu' decisa, altrimenti su foto chiare il nome
sparisce. */
.wt-casting-caption {
background: linear-gradient(transparent, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .8));
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.wt-casting-feedback {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
background: var(--wt-ink);
color: #fff;
font-size: 13px;
padding: 10px 18px;
z-index: 70;
}
.wt-casting-feedback:empty { display: none; }
@media (max-width: 640px) {
.wt-casting-topbar-inner { padding: 10px var(--wt-gutter); gap: 10px; }
.wt-casting-topbar-meta { display: none; }
.wt-casting .wt-casting-head { gap: 14px; padding-top: 20px; }
.wt-casting .wt-casting-meta { grid-template-columns: repeat(3, auto); }
.wt-casting .wt-casting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
.wt-casting-caption { padding: 26px 8px 8px; }
.wt-casting-caption h2 { font-size: 13px; }
.wt-casting-state { min-height: 42px; gap: 6px; }
.wt-casting-state-label { font-size: 9px; }
}
/* Selettore profili in bacheca */
.wtm-picker-results { display: grid; gap: 4px; margin-bottom: 14px; }
.wtm-picker-add {
display: flex; align-items: center; gap: 10px;
width: 100%; text-align: left;
background: #fff; border: 1px solid #dcdcde; padding: 6px 8px; cursor: pointer;
}
.wtm-picker-add:hover { border-color: #2271b1; }
.wtm-picker-add img, .wtm-picker-chosen img { width: 34px; height: 45px; object-fit: cover; }
.wtm-picker-chosen { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.wtm-picker-chosen li {
display: flex; align-items: center; gap: 10px;
background: #f6f7f7; padding: 5px 8px;
}
.wtm-picker-chosen li span { flex: 1; }
.wtm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
/* ------------------------------------------------------------------ */
/* Pannello selezione: creazione casting (staff) e conferma cliente */
/* ------------------------------------------------------------------ */
.wt-site .wt-selcasting { border-top: 1px solid var(--wt-line); padding-top: 22px; margin-top: 4px; }
.wt-site .wt-selcasting h3 {
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--wt-muted); font-weight: 400; margin-bottom: 16px;
}
.wt-site .wt-selcasting-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px clamp(16px, 2vw, 30px);
}
.wt-site .wt-selcasting label,
.wt-site .wt-casting-confirm label {
display: flex; flex-direction: column; gap: 5px;
font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wt-muted);
}
.wt-site .wt-selcasting input,
.wt-site .wt-selcasting textarea,
.wt-site .wt-casting-confirm input,
.wt-site .wt-casting-confirm textarea {
width: 100%; border: 0; border-bottom: 1px solid var(--wt-line);
background: transparent; padding: 9px 0; font-size: 15px;
color: var(--wt-ink); text-transform: none; letter-spacing: normal; border-radius: 0;
}
.wt-site .wt-selcasting textarea,
.wt-site .wt-casting-confirm textarea { border: 1px solid var(--wt-line); padding: 10px; }
.wt-site .wt-selcasting-intro { margin: 14px 0 18px; }
.wt-site .wt-selcasting-done { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--wt-line); }
.wt-site .wt-selcasting-done input { font-size: 13px; }
.wt-site .wt-selcasting-actions { display: flex; gap: 22px; padding-top: 8px; }
.wt-casting-confirm-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px clamp(16px, 2vw, 40px); margin-bottom: 14px;
}
.wt-casting-confirm-note { display: block; margin-bottom: 18px; }
.wt-casting-confirm-done { font-size: 13px; color: var(--wt-muted); padding-top: 14px; }
@media (max-width: 640px) {
.wt-site .wt-selcasting-grid,
.wt-casting-confirm-grid { grid-template-columns: 1fr; }
}
/* La card del casting apre la scheda completa */
.wt-casting-open { display: block; position: relative; }
.wt-casting-open:focus-visible { outline: 2px solid var(--wt-ink); outline-offset: 3px; }
.wt-casting-arrow {
display: inline-block;
opacity: 0;
transform: translate(-4px, 4px);
transition: opacity .2s, transform .2s;
}
.wt-casting-open:hover .wt-casting-arrow,
.wt-casting-open:focus-visible .wt-casting-arrow { opacity: .9; transform: none; }
.wt-casting-open:hover img { opacity: .92; }
/* Anni compiuti accanto alla data di nascita, in scheda */
.wt-site .wt-age {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border: 1px solid var(--wt-line);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--wt-muted);
vertical-align: middle;
}
/* ------------------------------------------------------------------ */
/* Frecce: forma testuale, mai emoji */
/* ------------------------------------------------------------------ */
/* Su iOS le frecce diagonali hanno una variante emoji che il sistema sceglie
da solo. Il selettore U+FE0E nel testo chiede la forma testuale; qui si
rinforza con la proprieta dedicata e con una pila di caratteri che parte
dai font di sistema, non da quelli a colori. */
.wt-site [aria-hidden="true"],
.wt-site .wt-link,
.wt-site .wt-button,
.wt-casting-arrow,
.wt-split-cta,
.wt-casting-state-icon {
font-variant-emoji: text;
}
.wt-site [aria-hidden="true"],
.wt-casting-arrow,
.wt-casting-state-icon {
font-family: inherit, 'Segoe UI Symbol', 'Arial Unicode MS', sans-serif;
}