/**
* FaceDance 4.26.3 — Layer mobile "pro" (RISCRITTO con i selettori corretti).
*
* La 4.26.2 aveva usato selettori generici (`aria-label*="menu"`,
* `[data-fd-text-scale]`) che non colpivano il markup reale, che è:
*
*
*
*
*
FACE DANCE
*
COMMUNITY
*
*
* A+ Testo normale
*
*
ruba spazio senza aggiungere info
* (l'icona ☰ è universalmente comprensibile). Nascondiamo su mobile. */
body.facedance-community-mode .fd-mobile-menu-toggle em {
display: none !important;
}
/* --- Text scale (fd-mobile-a11y-toggle) — il pezzo forte --- */
/* In community-app.css è min-width:88px + font-weight:900 + gradient
* pieno, che lo fa apparire enorme come un pulsante primario. Lo
* compattiamo a icon-only con l'etichetta nascosta. */
body.facedance-community-mode .fd-mobile-a11y-toggle {
min-width: 44px !important;
max-width: 60px !important;
min-height: 44px !important;
padding: 8px 10px !important;
font-size: .85rem !important;
font-weight: 800 !important;
background: rgba(205,163,73,.14) !important;
border: 1px solid rgba(205,163,73,.45) !important;
color: var(--fd-beige) !important;
box-shadow: none !important;
gap: 0 !important;
}
/* La label "Testo" / "Testo normale" / "Testo grande" (in ) resta
* ma solo per screen reader — visivamente nascosta per non far
* scoppiare la barra. L'icona A+ basta come affordance. */
body.facedance-community-mode .fd-mobile-a11y-toggle em {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body.facedance-community-mode .fd-mobile-a11y-toggle span {
font-size: 1rem !important;
line-height: 1 !important;
}
/* Il contenitore delle azioni (Menu + A+) non deve wrap-are — se
* la piega è piccola, l'icona basta. */
body.facedance-community-mode .fd-mobile-top-actions {
display: flex !important;
gap: 6px !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
}
/* ============================================================
* D) HOME HERO — titolone + descrizione + pulsanti CTA
* ============================================================ */
@media (max-width: 767px) {
/* community-app.css dà al hero: padding 24px 18px, h1 2rem, p 1rem.
* Su iPhone standard 390px il titolo va a 3 righe. Compattiamo. */
body.facedance-community-mode .fd-home-hero {
padding: 16px 16px !important;
border-radius: 16px !important;
margin-bottom: 12px !important;
}
body.facedance-community-mode .fd-home-hero h1,
body.facedance-community-mode .fd-home-hero h2 {
font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
line-height: 1.15 !important;
margin: 0 0 10px !important;
}
body.facedance-community-mode .fd-home-hero p,
body.facedance-community-mode .fd-home-hero .fd-home-lead {
font-size: .92rem !important;
line-height: 1.45 !important;
margin: 0 0 12px !important;
}
body.facedance-community-mode .fd-home-hero .fd-home-kicker,
body.facedance-community-mode .fd-panel-heading .fd-home-kicker {
font-size: .62rem !important;
letter-spacing: .13em !important;
margin-bottom: 6px !important;
}
/* h1/h2/h3 generali (fuori dall'hero): la 4.20.1 li aveva a 2rem/1.48rem
* — troppo grossi. Riduzione moderata. */
body.facedance-community-mode h1 {
font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
line-height: 1.15 !important;
}
body.facedance-community-mode h2 {
font-size: clamp(1.2rem, 5vw, 1.45rem) !important;
line-height: 1.2 !important;
}
body.facedance-community-mode h3 {
font-size: clamp(1.05rem, 4.5vw, 1.2rem) !important;
line-height: 1.25 !important;
}
}
/* ============================================================
* E) CARDS — padding ridotto, respiro migliore
* ============================================================ */
@media (max-width: 767px) {
body.facedance-community-mode .fd-cta-card,
body.facedance-community-mode .fd-panel-heading + section,
body.facedance-community-mode .fd-home-friends-feed,
body.facedance-community-mode .fd-home-priority-row > section {
padding: 16px 16px !important;
border-radius: 14px !important;
margin-bottom: 12px !important;
}
body.facedance-community-mode .facedance-feed-card,
body.facedance-community-mode .fd-group-discussion-card {
padding: 12px 14px !important;
border-radius: 14px !important;
}
}
/* ============================================================
* F) BOTTOM NAV — badge posizione, tab leggibili
* ============================================================ */
@media (max-width: 767px) {
/* community-app.css a riga 931: badge con `margin: -33px 0 0 22px`
* che lo mette SOPRA il testo del tab. Riposizioniamo. */
body.facedance-community-mode .fd-bottom-nav .fd-app-tab {
position: relative !important;
}
body.facedance-community-mode .fd-bottom-nav .fd-app-tab-badge {
position: absolute !important;
top: 4px !important;
right: 18% !important;
margin: 0 !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
font-size: .6rem !important;
font-weight: 800 !important;
line-height: 18px !important;
border-radius: 999px !important;
background: #e04b3d !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(224,75,61,.5) !important;
}
}
/* ============================================================
* G) FAB — Notifiche (sinistra) e Language (destra)
* ============================================================ */
@media (max-width: 767px) {
/* Notifiche FAB (campanella blu con badge 3): sopra la bottom nav,
* non sopra il tab Home. */
body.facedance-community-mode .fd-notify-fab,
body.facedance-community-mode .fd-notifications-fab,
body.facedance-community-mode [data-fd-notifications-fab],
body.facedance-community-mode .fd-notifications-toggle-mobile,
body.facedance-community-mode .fd-mobile-notifications-fab {
position: fixed !important;
left: 12px !important;
bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
width: 46px !important;
height: 46px !important;
border-radius: 999px !important;
z-index: 500 !important;
}
/* Language button (widget di traduzione): stesso livello, a destra. */
body.facedance-community-mode .fd-translate-widget,
.fd-translate-widget {
right: 12px !important;
bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
.fd-translate-toggle {
min-height: 40px !important;
padding: 8px 12px !important;
font-size: 13px !important;
}
/* Su iPhone SE / mini (<380px), Language a icon-only per liberare
* spazio prezioso. IL BUG DEL DOPPIO GLOBO (4.26.2/3): il template
* emette già 🌐 Lingua ,
* quindi il globo esiste già nel markup. La 4.26.2 metteva
* `font-size: 0` sul button (nasconde tutto testo incluso il globo
* emoji su alcuni device) E aggiungeva un altro globo via ::before —
* su iPhone SE / 12 mini l'emoji rimaneva visibile per rendering
* nativo, e il ::before ne aggiungeva un secondo. Risultato: 🌐 🌐.
*
* Fix corretto: nascondiamo SOLO il testo "Lingua/Language" (lo span
* senza aria-hidden), lasciamo il globo del template al suo posto.
* Zero emoji aggiunte da noi. */
@media (max-width: 380px) {
body.facedance-community-mode .fd-translate-toggle,
.fd-translate-toggle {
padding: 8px 10px !important;
gap: 0 !important;
min-width: 44px !important;
}
/* Nasconde il testo "Lingua/Language" ma resta accessibile per
* screen reader (visually-hidden pattern). Il globo emoji del
* template resta perché ha aria-hidden="true" e questo selettore
* lo esclude. */
body.facedance-community-mode .fd-translate-toggle > span:not([aria-hidden="true"]),
.fd-translate-toggle > span:not([aria-hidden="true"]) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Ingrandisce leggermente il globo emoji che ORA è l'unica
* cosa visibile del pulsante. */
body.facedance-community-mode .fd-translate-toggle > span[aria-hidden="true"],
.fd-translate-toggle > span[aria-hidden="true"] {
font-size: 18px !important;
line-height: 1 !important;
}
}
}
/* ============================================================
* H) PULSANTI PRIMARI — full width, tap target ≥ 48px
* ============================================================ */
@media (max-width: 767px) {
body.facedance-community-mode .fd-home-hero .fd-btn-primary,
body.facedance-community-mode .fd-cta-card .fd-btn-primary {
display: block !important;
width: 100% !important;
min-height: 50px !important;
padding: 14px 20px !important;
font-size: 1rem !important;
border-radius: 999px !important;
}
}
/* ============================================================
* I) LANDSCAPE stretto (iPhone SE landscape, iPhone mini)
* ============================================================ */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
body.facedance-community-mode .fd-home-hero {
padding: 12px 16px !important;
}
body.facedance-community-mode .fd-home-hero h1 {
font-size: 1.15rem !important;
}
body.facedance-community-mode .fd-home-hero p {
font-size: .85rem !important;
}
body.facedance-community-mode .fd-home-hero .fd-btn-primary {
min-height: 42px !important;
padding: 10px 16px !important;
}
}
/* ============================================================
* J) Focus visible + reduced motion (portati dalla 4.26.2)
* ============================================================ */
@media (max-width: 767px) {
body.facedance-community-mode button:focus-visible,
body.facedance-community-mode a:focus-visible {
outline: 2px solid #f4d77d !important;
outline-offset: 2px !important;
border-radius: 8px !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.facedance-community-mode * {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ============================================================
* K) FIX 4.26.5 — Emoji bar orizzontale + reactions più leggibili
* ============================================================
*
* Il bug: community-app.css:918 e :988 forzano OGNI button del
* namespace a `min-height: 52px !important; padding: 12px 15px !important;
* font-size: 1rem !important;`. Sulla `.fd-emoji-bar` (con 12 bottoni
* emoji) e sulle `.fd-reaction` (con SVG 30×39 dentro), questo:
*
* 1. Rende ogni bottone della emoji-bar troppo largo per stare
* in una riga da 375px → wrap in colonna verticale (screenshot 1).
* 2. Rende ogni chip di reaction molto più grande dell'emoticon
* SVG che contiene (30×39) → figurine piccolissime al centro
* di grandi quadrati vuoti (screenshot 2).
*
* Fix: griglia esplicita per emoji-bar (6 colonne mobile),
* pulsanti compatti che l'emoji riempie proporzionalmente, SVG
* emoticon scalato al container per riempire il pulsante.
*/
@media (max-width: 767px) {
/* ---- Emoji-bar (barra picker sopra la text-area messaggi/commenti)
* In screenshot 1 appariva impilata verticalmente. Ora griglia. */
body.facedance-community-mode .fd-emoji-bar {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 4px !important;
margin: 8px 0 !important;
padding: 6px !important;
background: rgba(20,25,17,.5) !important;
border-radius: 12px !important;
border: 1px solid rgba(205,163,73,.18) !important;
}
body.facedance-community-mode .fd-emoji-bar button {
min-height: 40px !important;
min-width: 0 !important;
max-width: none !important;
padding: 4px 2px !important;
font-size: 1.35rem !important;
line-height: 1 !important;
border-radius: 8px !important;
background: transparent !important;
}
body.facedance-community-mode .fd-emoji-bar button:active {
background: rgba(205,163,73,.28) !important;
transform: scale(0.92) !important;
}
/* ---- Quick reactions (chip con emoticon del Dance Pack)
* In screenshot 2 le figurine erano minuscole dentro quadrati
* enormi. Riduco il chip e scalo l'SVG al 100% del container. */
body.facedance-community-mode .fd-quick-reactions {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: flex-start !important;
margin: 10px 0 !important;
padding: 0 !important;
}
body.facedance-community-mode .fd-quick-reactions .fd-reaction {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
width: 54px !important;
height: 58px !important;
min-height: 58px !important;
max-width: 54px !important;
padding: 4px 2px !important;
border-radius: 12px !important;
background: rgba(20,25,17,.55) !important;
border: 1px solid rgba(205,163,73,.28) !important;
font-size: .68rem !important;
font-weight: 700 !important;
line-height: 1 !important;
position: relative !important;
overflow: visible !important;
}
/* SVG dell'emoticon dentro il pulsante: forza width/height al
* container per far vedere la figurina in grande. */
body.facedance-community-mode .fd-quick-reactions .fd-reaction svg,
body.facedance-community-mode .fd-quick-reactions .fd-reaction .facedance-emoticon {
width: 38px !important;
height: 46px !important;
max-width: 100% !important;
flex-shrink: 0 !important;
}
body.facedance-community-mode .fd-quick-reactions .fd-reaction-count {
font-size: .62rem !important;
font-weight: 800 !important;
color: var(--fd-oro-2, #f4d77d) !important;
min-height: 0 !important;
}
body.facedance-community-mode .fd-quick-reactions .fd-reaction:active {
transform: scale(0.94) !important;
background: rgba(205,163,73,.22) !important;
}
body.facedance-community-mode .fd-quick-reactions .fd-reaction.is-active {
background: linear-gradient(135deg, rgba(205,163,73,.32), rgba(28,107,77,.42)) !important;
border-color: rgba(205,163,73,.7) !important;
}
/* Bounce animation sul conteggio quando cambia (per l'optimistic UI). */
@keyframes fdReactionBounce {
0% { transform: scale(1); }
30% { transform: scale(1.4); }
60% { transform: scale(0.9); }
100% { transform: scale(1); }
}
body.facedance-community-mode .fd-reaction-count.is-just-changed {
animation: fdReactionBounce 320ms ease-out !important;
display: inline-block !important;
}
@media (prefers-reduced-motion: reduce) {
body.facedance-community-mode .fd-reaction-count.is-just-changed {
animation: none !important;
}
}
/* ---- I-Dance / Comment / Reshare — pulsanti azione post
* Riduco leggermente il padding e uniforme il tap feedback. */
body.facedance-community-mode .facedance-idance-btn,
body.facedance-community-mode .fd-comments-toggle,
body.facedance-community-mode .fd-share-button,
body.facedance-community-mode .fd-repost-btn,
body.facedance-community-mode .fd-content-action {
min-height: 44px !important;
}
body.facedance-community-mode .facedance-idance-btn:active,
body.facedance-community-mode .fd-comments-toggle:active,
body.facedance-community-mode .fd-share-button:active,
body.facedance-community-mode .fd-repost-btn:active {
transform: scale(0.98) !important;
transition: transform 60ms ease-out !important;
}
}
/* ============================================================
* L) FIX 4.26.6 — Mini-calendario dell'agenda: numeri spezzati
* ============================================================
*
* BUG: nella card "Your calendar" della Home, i giorni con 2 cifre
* (10-31) apparivano spezzati verticalmente:
* 1 1 1 1 1 1 2
* 4 5 6 7 8 9 0
*
* Meccanica del bug (due cause in cascata):
*
* 1. community-app.css:832 sotto 640px forza:
* .fd-mini-calendars { grid-template-columns: 1fr 1fr }
* Cioè due mesi affiancati su smartphone. Su 375px ogni mese
* resta largo ~150px, ogni cella del grid 7 colonne resta ~16px.
*
* 2. community-app.css:918 e :988 forzano su OGNI button:
* button:not(.fd-app-tab) { padding: 12px 15px !important }
* Le celle del calendario sono
* → padding orizzontale 30px per una cella larga 16px. Il testo
* "14" ha larghezza intrinseca > 0, quindi wrappa fra le due cifre.
*
* Fix: forziamo il calendario a UNA colonna sola su smartphone stretto,
* sopprimiamo il padding generico sulle celle calendario, e blocchiamo
* il wrap con white-space: nowrap così anche se qualcosa restringe la
* cella, i numeri restano su una riga.
*/
@media (max-width: 767px) {
/* Un mese per volta, largo pieno — invece di due strizzati a metà. */
body.facedance-community-mode .fd-mini-calendars {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Contenitore mese: più padding orizzontale, meno strizzato. */
body.facedance-community-mode .fd-mini-calendar-month {
padding: 12px !important;
}
/* Header del mese ("September 2026") più leggibile. */
body.facedance-community-mode .fd-mini-calendar-month > strong {
font-size: .95rem !important;
margin-bottom: 10px !important;
}
/* Weekday header L M M G V S D — più leggibile. */
body.facedance-community-mode .fd-mini-calendar-weekdays span,
body.facedance-community-mode .fd-mini-calendar-weekdays {
font-size: .7rem !important;
}
/* Grid: gap adatto per cellule più larghe. */
body.facedance-community-mode .fd-mini-calendar-grid {
gap: 4px !important;
}
/* Le celle: sopprimo il padding generico ereditato e forzo altezza
* ragionevole. Il white-space: nowrap è la difesa vera contro il
* word-wrap fra le due cifre. */
body.facedance-community-mode .fd-mini-calendar-day {
min-height: 38px !important;
max-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
font-size: .95rem !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: clip !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Casella "oggi" — il giorno evidenziato in oro. Restiamo con lo
* stesso stile ma con padding coerente. */
body.facedance-community-mode .fd-mini-calendar-day.is-today {
font-weight: 900 !important;
}
/* Feedback tap sulle celle. */
body.facedance-community-mode .fd-mini-calendar-day:active {
transform: scale(0.92) !important;
background: rgba(224,184,102,.3) !important;
}
}
/* Su iPhone SE / 12 mini (≤380px) — numeri leggermente più piccoli così
* "30" ci sta sicuro anche con font grande di sistema. */
@media (max-width: 380px) {
body.facedance-community-mode .fd-mini-calendar-day {
font-size: .88rem !important;
min-height: 34px !important;
}
body.facedance-community-mode .fd-mini-calendar-grid {
gap: 3px !important;
}
}
/* ============================================================
* M) FIX 4.26.6b — Banner PWA "Aggiungi alla schermata Home"
* rendering rotto dentro Facebook in-app browser
* ============================================================
*
* BUG: sulla pagina /facedance/cerca-partners (e ovunque il banner
* PWA si mostri) aperta dentro il browser in-app di Facebook, il
* testo delle istruzioni ("Tocca Condividi ⬆️ nella barra di Safari,
* poi "Aggiungi a Home".") appariva UN CARATTERE PER RIGA:
*
* e
* l
* l
* a
* b
* ...
*
* Meccanica:
*
* `.fd-pwa-banner` in facedance.css:134 è `display: flex` con
* 3 figli: icona (40px fissi), body (flex 1 1 auto), actions.
*
* Le actions in `.fd-pwa-banner-actions` hanno:
* `flex: 0 0 100%; margin-top: 8px`
*
* L'intento era: le actions vanno su una nuova riga sotto icona+body.
* MA il container NON ha `flex-wrap: wrap`. Senza wrap:
*
* - flex-basis: 100% sull'actions "prenota" tutto lo spazio
* - icona (fisso 40px) e body (con min-width: 0) si comprimono
* - il body arriva a larghezza ~0-10px
* - il testo, con default overflow-wrap, spezza tra caratteri
*
* Su Safari standalone il bug non si vede perché Safari fa un
* layout leggermente più permissivo. Facebook webview (WKWebView
* ristretto) applica la regola alla lettera → un carattere per riga.
*
* Fix: aggiungiamo il `flex-wrap: wrap` mancante, così le actions
* vanno effettivamente sulla riga sotto e il body ha tutto lo
* spazio orizzontale che gli serve.
*/
body.facedance-community-mode .fd-pwa-banner,
.fd-pwa-banner {
flex-wrap: wrap !important;
}
/* Sanità: il body del banner ha min-width sensato invece che 0.
* Se qualcosa ancora lo comprime, il testo va a capo tra parole
* (default overflow-wrap: break-word) — MAI tra caratteri. */
body.facedance-community-mode .fd-pwa-banner-body,
.fd-pwa-banner-body {
flex: 1 1 200px !important;
min-width: 180px !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
body.facedance-community-mode .fd-pwa-banner-body span,
.fd-pwa-banner-body span {
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: none !important;
}
/* Icona stabile — non si comprime. */
body.facedance-community-mode .fd-pwa-banner-icon,
.fd-pwa-banner-icon {
flex: 0 0 40px !important;
}
/* ============================================================
* N) FIX 4.26.7 — Card membro: pulsanti "I Dance with You" e
* "Scrivi un messaggio" sovrapposti su iPhone stretto
* ============================================================
*
* BUG (screenshot 19:25 Cerca Partners): i due pulsanti azione
* sotto il profilo del membro (World Dance Sport Camp) apparivano
* sovrapposti, col contatore "0" schiacciato in mezzo, come se
* uno si mangiasse l'altro.
*
* Meccanica: `facedance.css:544-547` imposta:
*
* .fd-card-actions-row { display:flex; gap:8px; flex-wrap:wrap; }
* .fd-card-actions-row .facedance-follow-btn,
* .fd-card-actions-row .facedance-message-btn {
* flex: 1; min-width: 120px;
* }
*
* Su iPhone 375px, dopo padding card ~30px totali, restano ~305px per
* i due pulsanti. `flex: 1` prova a farli occupare (305-8)/2 = 148px
* ciascuno. MA il testo "I Dance with You" + emoji ballerino + contatore
* ha larghezza intrinseca > 148px, quindi il contenuto va in overflow
* oltre il bordo del bottone → visualmente si sovrappone al bottone
* accanto.
*
* `flex-wrap: wrap` in teoria dovrebbe farli andare in colonna, ma
* il `min-width: 120px` è troppo basso — con contenuto largo 180px,
* il flex non decide di wrappare e overflow-a invece.
*
* Fix: su mobile stretto, forziamo i due pulsanti in colonna
* (grid a 1 colonna) e diamo loro tutta la larghezza.
*/
@media (max-width: 640px) {
body.facedance-community-mode .fd-card-actions-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
body.facedance-community-mode .fd-card-actions-row .facedance-follow-btn,
body.facedance-community-mode .fd-card-actions-row .facedance-message-btn {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 auto !important;
margin: 0 !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 12px 14px !important;
white-space: normal !important;
overflow: hidden !important;
}
body.facedance-community-mode .fd-card-actions-row .facedance-follow-btn .fd-count {
flex: 0 0 auto !important;
margin-left: 4px !important;
}
}
/* ============================================================
* O) FIX 4.26.7 — Reminder modal: checkbox senza label
* (label "Banner FaceDance" / "Email" un carattere per riga)
* ============================================================
*
* BUG (screenshot 19:24 Crea corso/lezione): nel form "Crea un
* nuovo corso o lezione", la sezione con due checkbox mostrava
* SOLO le due caselle blu e il testo delle label appariva
* verticale, un carattere per riga, sconfinando a destra.
*
* Meccanica: `facedance.css:578`:
*
* .fd-consent {
* flex-direction: row !important;
* align-items: flex-start;
* gap: 8px !important;
* font-size: .78rem;
* }
*
* `.fd-consent` è la del checkbox. Con `flex-direction: row`,
* i figli diretti sono flex-item. Il primo figlio è ricevono il fix del text-wrap
* ============================================================
* Applicabile a form registrazione, form privacy, ecc. */
@media (max-width: 767px) {
body.facedance-community-mode .fd-consent {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
body.facedance-community-mode .fd-consent input[type="checkbox"] {
flex: 0 0 auto !important;
width: 20px !important;
height: 20px !important;
}
}
/* ============================================================
* Q) FIX 4.26.8 — Doppio traduttore visibile
* (screenshot 23:08 menu FaceDance mobile)
* ============================================================
*
* BUG: quando l'utente apre il menu drawer sul mobile, dentro c'è il
* selettore lingua inline "🌐 Italiano" (renderizzato da
* `Facedance_Auto_Translate::render_inline_selector()`). MA IL FAB
* flottante `.fd-translate-widget` in basso a destra rimane VISIBILE
* sopra il drawer, mostrando un SECONDO globo 🌐. Utente vede due
* traduttori insieme, confonde.
*
* Fix: `:has()` selector (supportato da tutti i browser dal 2023)
* nasconde il FAB quando il drawer è aperto o quando il toggle
* menu ha aria-expanded=true.
*/
/* Nasconde il FAB translator quando il drawer del menu è aperto */
body:has(.fd-mobile-drawer:not([hidden])) .fd-translate-widget,
body:has(.fd-mobile-menu-toggle[aria-expanded="true"]) .fd-translate-widget,
body:has([data-fd-mobile-drawer]:not([hidden])) .fd-translate-widget {
display: none !important;
}
/* Fallback per browser vecchi senza :has(): se qualche script aggiunge
* la classe .is-fd-drawer-open al body quando il drawer è aperto,
* nascondiamo lo stesso. */
body.is-fd-drawer-open .fd-translate-widget,
body.fd-drawer-open .fd-translate-widget {
display: none !important;
}
/* ============================================================
* R) FIX 4.26.8 — Mini-calendario spezzato ANCHE su desktop
* (screenshot 23:11 Chrome dashboard: numeri "1/4", "1/5"...)
* ============================================================
*
* BUG: il fix del calendario 4.26.6 era solo mobile
* (`@media (max-width: 767px)`). Ma nella sidebar destra della
* dashboard desktop, la mini-agenda è in una card larga ~220px, e le
* celle risultano ~28px — con `padding: 12px 15px !important` forzato
* dalla regola generica di `button:not(.fd-app-tab)`, lo spazio interno
* cella è negativo → i numeri "14", "15", "16" vengono spezzati fra
* le due cifre esattamente come su mobile.
*
* Fix: applicare le regole `.fd-mini-calendar-day` a TUTTI i viewport,
* fuori da qualunque @media. Se la cella è larga sarà comoda; se è
* stretta i numeri NON si spezzeranno mai (white-space: nowrap).
*/
body.facedance-community-mode .fd-mini-calendar-day {
min-height: 32px !important;
padding: 0 !important;
margin: 0 !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
overflow: hidden !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Font size responsive alla larghezza — clamp fluido */
body.facedance-community-mode .fd-mini-calendar-day {
font-size: clamp(.78rem, 2.2vw, .95rem) !important;
}
/* Nella sidebar rail (larga ~220px), un mese per volta e gap ridotto */
body.facedance-community-mode .fd-feed-rail-card .fd-mini-calendars,
body.facedance-community-mode .fd-home-rail-card .fd-mini-calendars {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
body.facedance-community-mode .fd-feed-rail-card .fd-mini-calendar-grid,
body.facedance-community-mode .fd-home-rail-card .fd-mini-calendar-grid {
gap: 2px !important;
}
/* ============================================================
* S) FIX 4.26.8 — Video iframe sfocato in Home
* (screenshot 23:11 dashboard: thumbnail YouTube pixelato)
* ============================================================
*
* BUG: il thumbnail di anteprima YouTube è servito in bassa risoluzione
* (mqdefault ~320×180). Il post nella colonna centrale è largo ~800px
* → l'immagine viene scalata 2.5x → sfocatura evidente.
*
* Non possiamo cambiare l'URL del thumbnail YouTube da CSS (deciso da
* YouTube stesso in base ai parametri iframe). Ma possiamo:
*
* 1. Forzare compositing GPU con `transform: translateZ(0)` — il
* browser userà pipeline hardware-accelerated per lo scaling.
* 2. `image-rendering` mirato — su Chrome/Safari `optimizeContrast`
* applica bilinear invece di nearest-neighbor per anteprime.
* 3. Un pizzico di contrast+saturate compensa la perdita percettiva.
*/
body.facedance-community-mode .fd-video-embed,
body.facedance-community-mode .fd-video-embed iframe {
transform: translateZ(0) !important;
backface-visibility: hidden !important;
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges;
}
/* Micro-boost di contrasto/saturazione solo sui thumbnail sfocati.
* Applicato al wrapper, non all'iframe interno (che gestisce il proprio
* rendering). Effetto: ~5% più nitido percettivamente, invisibile su
* thumbnail già HD. */
body.facedance-community-mode .fd-video-embed {
filter: contrast(1.03) saturate(1.05) !important;
}
body.facedance-community-mode .fd-video-embed:hover {
filter: contrast(1.06) saturate(1.08) !important;
}
/* Anche per le immagini di post upload — GPU compositing per rendering
* più smooth su Retina display. */
body.facedance-community-mode .facedance-feed-card img,
body.facedance-community-mode .fd-post-media img {
transform: translateZ(0) !important;
backface-visibility: hidden !important;
}
/* ============================================================
* T) FIX 4.26.9 — Input time/date che appaiono VUOTI su iOS
* (screenshot 09:56 mobile: "Inizia alle" / "Finisce alle"
* mostrano solo un piccolo pallino al centro)
* ============================================================
*
* BUG: iOS Safari renderizza