.
Ogni | deve avere una delle classi: col-pos, col-team, col-stat, col-pts
I col-stat possono avere data-stat="V" / "PG" / etc per la label inline.
============================================================ */
@media (max-width: 767.98px) {
.tabella-classifica {
width: 100% !important;
border: none !important;
}
.tabella-classifica thead { display: none; }
.tabella-classifica,
.tabella-classifica > tbody,
.tabella-classifica > tbody > tr {
display: block;
width: 100%;
}
.tabella-classifica > tbody > tr {
position: relative;
padding: 12px 14px 12px 56px;
margin-bottom: 10px;
background: #fff !important;
background-image: none !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
/* Se la riga ha anche i Punti, riserva spazio a destra per il badge pts */
.tabella-classifica > tbody > tr:has(td.col-pts) {
padding-right: 70px;
}
.tabella-classifica > tbody > tr > td {
/* Reset Bootstrap table striping/bordering che usa background-image */
--bs-table-bg-type: transparent !important;
--bs-table-accent-bg: transparent !important;
--bs-table-striped-bg: transparent !important;
background-image: none !important;
background-color: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Reset striped anche sulla riga (Bootstrap 5 applica nth-of-type tr) */
.tabella-classifica > tbody > tr:nth-of-type(odd) > td,
.tabella-classifica > tbody > tr:nth-of-type(even) > td {
background-image: none !important;
background-color: transparent !important;
}
/* POSIZIONE — top-left in absolute, badge cerchio blu */
.tabella-classifica > tbody > tr > td.col-pos {
position: absolute;
top: 12px;
left: 12px;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ml-blue-tint, #e8efff) !important;
color: var(--ml-blue-dark, #1e3a8a);
font-weight: 800;
font-size: 0.85rem;
text-align: center !important;
}
/* Se il col-pos contiene già un badge (es. campionato), lascia che il badge gestisca lo stile */
.tabella-classifica > tbody > tr > td.col-pos:has(.badge) {
background: transparent !important;
width: auto !important;
height: auto !important;
min-width: 36px;
}
/* PUNTI — top-right in absolute, evidenziato */
.tabella-classifica > tbody > tr > td.col-pts {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
text-align: right !important;
}
.tabella-classifica > tbody > tr > td.col-pts strong,
.tabella-classifica > tbody > tr > td.col-pts .badge {
font-size: 1.05rem;
padding: 6px 12px;
background: var(--ml-blue, #2e5cff) !important;
color: #fff !important;
border-radius: 999px;
font-weight: 800;
}
/* SQUADRA — block full width */
.tabella-classifica > tbody > tr > td.col-team {
display: block;
font-weight: 600;
color: #1e293b;
margin-bottom: 6px;
white-space: normal;
text-align: left !important;
}
/* STATS — pillole inline */
.tabella-classifica > tbody > tr > td.col-stat {
display: inline-block;
font-size: 0.78rem;
color: #475569;
margin-right: 4px;
text-align: left !important;
}
.tabella-classifica > tbody > tr > td.col-stat::before {
content: attr(data-stat);
display: inline-block;
font-weight: 700;
color: #94a3b8;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 3px;
}
.tabella-classifica > tbody > tr > td.col-stat:not(:last-of-type)::after {
content: "·";
margin-left: 6px;
color: #cbd5e1;
font-weight: 700;
}
}
/* Dark mode */
[data-pc-theme="dark"] .tabella-classifica > tbody > tr {
background: #1e293b;
border-color: #334155 !important;
box-shadow: none;
}
[data-pc-theme="dark"] .tabella-classifica > tbody > tr > td.col-team { color: #f1f5f9; }
[data-pc-theme="dark"] .tabella-classifica > tbody > tr > td.col-stat { color: #cbd5e1; }
[data-pc-theme="dark"] .tabella-classifica > tbody > tr > td.col-stat::before { color: #64748b; }
/* ============================================================
SQUADRA — Header link in card risultati (lista livescore)
============================================================ */
.squadra-header-link {
transition: opacity .15s ease;
}
.squadra-header-link:hover {
opacity: 0.85;
}
.squadra-header-link:hover h5 {
color: var(--ml-blue, #2e5cff) !important;
}
/* ============================================================
SQUADRA DETTAGLIO — Hero + lista eventi/categorie
============================================================ */
.squadra-hero-logo {
width: 96px;
height: 96px;
object-fit: contain;
background: #fff;
border: 3px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
padding: 6px;
}
.squadra-hero-logo--empty {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.18);
border-radius: 12px;
color: #fff;
}
.squadra-hero-logo--empty svg {
width: 48px;
height: 48px;
}
/* Card evento nella lista (con accento per stato) */
.squadra-evento-card {
border-radius: 14px !important;
border-left: 4px solid #dee2e6 !important;
transition: transform .15s ease, box-shadow .15s ease;
}
.squadra-evento-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10) !important;
}
.squadra-evento-card--in_corso { border-left-color: #20a55a !important; }
.squadra-evento-card--programmato { border-left-color: #f59e0b !important; }
.squadra-evento-card--terminato { border-left-color: #adb5bd !important; }
/* Pill categoria (modalità) */
.squadra-categoria-pill {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 999px;
background: var(--ml-blue-tint, #e8efff);
color: var(--ml-blue-dark, #1e3a8a);
font-weight: 600;
font-size: 0.875rem;
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.squadra-categoria-pill:hover {
background: var(--ml-blue, #2e5cff);
color: #fff;
transform: translateY(-1px);
}
.squadra-categoria-pill-arrow {
transition: transform .15s ease;
}
.squadra-categoria-pill:hover .squadra-categoria-pill-arrow {
transform: translateX(2px);
}
/* ============================================================
CATEGORIE — Card centrata con icona + bottone
============================================================ */
.categoria-card {
border-radius: 14px !important;
transition: transform .2s ease, box-shadow .2s ease;
}
.categoria-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(46, 92, 255, 0.18) !important;
}
.categoria-card-title {
line-height: 1.25;
color: #1e293b;
font-size: 1.25rem;
}
/* Bottone "Vai al tabellone" — più espressivo */
.categoria-card-btn.btn {
border-radius: 999px;
padding: 10px 22px;
font-weight: 600;
background: linear-gradient(135deg, var(--ml-blue) 0%, var(--ml-blue-dark) 100%);
border: none;
box-shadow: 0 4px 12px rgba(46, 92, 255, 0.28);
transition: box-shadow .2s ease, transform .2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.categoria-card-btn.btn:hover,
.categoria-card-btn.btn:focus {
background: linear-gradient(135deg, var(--ml-blue) 0%, var(--ml-blue-darker) 100%);
box-shadow: 0 8px 20px rgba(46, 92, 255, 0.4);
transform: translateY(-1px);
}
.categoria-card-btn-arrow {
transition: transform .2s ease;
}
.categoria-card-btn.btn:hover .categoria-card-btn-arrow {
transform: translateX(4px);
}
/* ============================================================
SPONSOR
============================================================ */
.sponsor-section {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
border: 1px solid #cbd5e1;
border-radius: 16px;
padding: 1.75rem;
}
.sponsor-section-icon {
font-size: 2rem;
}
.sponsor-category {
margin-bottom: 1.5rem;
}
.sponsor-category:last-child { margin-bottom: 0; }
.sponsor-category-label {
margin-bottom: 1.25rem;
}
.sponsor-category-name {
display: inline-block;
margin: 0;
color: var(--ml-blue-dark, #1e3a8a);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8rem;
padding-bottom: 6px;
border-bottom: 2px solid var(--ml-blue, #2e5cff);
}
.sponsor-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 0.75rem;
}
.sponsor-tile, .sponsor-tile--static {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
text-align: center;
padding: 0.9rem 1.2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 130px;
max-width: 180px;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.sponsor-tile:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
}
.sponsor-tile-logo {
max-height: 64px;
max-width: 140px;
object-fit: contain;
}
.sponsor-tile-name {
margin-top: 0.5rem;
font-weight: 600;
font-size: 0.85rem;
color: #374151;
}
/* ============================================================
ALLEGATI — Tile con icona tipo file
============================================================ */
.allegato-tile {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 12px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.allegato-tile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: #adb5bd;
}
.allegato-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.allegato-icon i { font-size: 1.4rem; }
.allegato-icon--pdf { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.allegato-icon--doc { background: rgba(13, 110, 253, 0.12); color: #0a58ca; }
.allegato-icon--xls { background: rgba(25, 135, 84, 0.12); color: #146c43; }
.allegato-icon--img { background: rgba(255, 193, 7, 0.18); color: #997404; }
.allegato-icon--generic { background: rgba(108, 117, 125, 0.12); color: #495057; }
.allegato-body { flex: 1; min-width: 0; }
.allegato-desc {
color: #1e293b;
font-weight: 600;
line-height: 1.35;
word-break: break-word;
}
.allegato-action {
color: var(--bs-primary, #0d6efd);
font-weight: 500;
margin-top: 2px;
}
/* ============================================================
LIVESCORE — Card eventi (griglia con banner di stato colorato)
============================================================ */
.evento-card-link {
display: block;
color: inherit;
height: 100%;
transition: transform .18s ease;
}
.evento-card-link:hover {
transform: translateY(-4px);
color: inherit;
}
.evento-card {
border-radius: 14px !important;
transition: box-shadow .18s ease;
}
.evento-card-link:hover .evento-card {
box-shadow: 0 14px 32px rgba(0,0,0,0.16) !important;
}
/* Banner colorato in cima alla card */
.evento-card-band {
color: #fff;
font-size: 0.78rem;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.evento-card-band-status {
font-size: 0.78rem;
letter-spacing: 0.06em;
}
.evento-card-band-status i { font-size: 1rem; }
.evento-card-band-cat {
background: rgba(255,255,255,0.22);
color: #fff;
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
font-size: 0.72rem;
}
.evento-card-band-cat i { font-size: 0.85rem; }
/* Banner colorato per stato */
.evento-card--live .evento-card-band {
background: linear-gradient(135deg, #20a55a 0%, #16804a 100%);
}
.evento-card--programmato .evento-card-band {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.evento-card--terminato .evento-card-band {
background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
}
/* Titolo: 2 righe + colore status-aware */
.evento-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
min-height: 2.6em;
color: #1e293b;
}
.evento-card--live .evento-card-title { color: #16804a; }
.evento-card--programmato .evento-card-title { color: #b45309; }
.evento-card--terminato .evento-card-title { color: #475569; }
/* Descrizione clamp a 2 righe */
.evento-card-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
margin-bottom: 0;
}
/* Icone "tonde" colorate per data e luogo */
.evento-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
flex-shrink: 0;
}
.evento-card-icon i { font-size: 0.95rem; }
.evento-card-icon--cal {
background: rgba(13, 110, 253, 0.12);
color: #0d6efd;
}
.evento-card-icon--map {
background: rgba(220, 53, 69, 0.12);
color: #dc3545;
}
.evento-card-info {
color: #475569;
font-weight: 500;
}
/* Pallino "live" pulsante: bianco su banner verde */
.evento-live-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
animation: evento-live-pulse 1.4s infinite ease-out;
}
@keyframes evento-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); }
70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* Variante verde: per badge "In corso" su bg chiaro */
.evento-live-dot--green {
background: #20a55a;
animation-name: evento-live-pulse-green;
}
@keyframes evento-live-pulse-green {
0% { box-shadow: 0 0 0 0 rgba(32, 165, 90, 0.6); }
70% { box-shadow: 0 0 0 8px rgba(32, 165, 90, 0); }
100% { box-shadow: 0 0 0 0 rgba(32, 165, 90, 0); }
}
/* Dark mode */
[data-pc-theme="dark"] .evento-card {
background: #1e293b;
}
[data-pc-theme="dark"] .evento-card-title {
color: #f1f5f9;
}
[data-pc-theme="dark"] .evento-card--live .evento-card-title { color: #4ade80; }
[data-pc-theme="dark"] .evento-card--programmato .evento-card-title { color: #fbbf24; }
[data-pc-theme="dark"] .evento-card--terminato .evento-card-title { color: #cbd5e1; }
[data-pc-theme="dark"] .evento-card-desc {
color: #94a3b8 !important;
}
[data-pc-theme="dark"] .evento-card-info {
color: #cbd5e1;
}
[data-pc-theme="dark"] .evento-card .border-top {
border-top-color: #334155 !important;
}
[data-pc-theme="dark"] .evento-card-icon--cal {
background: rgba(96, 165, 250, 0.18);
color: #93c5fd;
}
[data-pc-theme="dark"] .evento-card-icon--map {
background: rgba(248, 113, 113, 0.18);
color: #fca5a5;
}
/* ============================================================ */
/* Funzionalita' search: barra di ricerca sticky nella pagina */
/* /funzionalita/ con dropdown risultati */
/* ============================================================ */
/* sentinel invisibile per IntersectionObserver -> stato "stuck" */
.funz-search-sentinel {
height: 1px;
pointer-events: none;
}
.funz-search-wrap {
position: sticky;
/* Sotto la navbar sticky-top: l'altezza viene calcolata in JS
e iniettata come variabile CSS sull'. Fallback 0px. */
top: var(--funz-navbar-h, 0px);
z-index: 1020; /* sotto la navbar (sticky-top di Bootstrap = 1020 di default) */
background: linear-gradient(180deg, #f8faff 0%, #eef3ff 100%);
border-bottom: 1px solid rgba(13, 110, 253, 0.12);
padding: 32px 0 28px;
box-shadow: 0 2px 12px rgba(13, 110, 253, 0.05);
transition:
padding .25s ease,
background .25s ease,
box-shadow .25s ease,
backdrop-filter .25s ease;
}
/* Fallback per anchor link nativi (#section-id): evita che la sezione
finisca coperta da navbar + search bar. L'offset preciso per il click
dei risultati e' calcolato in JS (vedi scrollToSection in funzionalita.html). */
.funz-section,
.funz-found-mark {
scroll-margin-top: calc(var(--funz-navbar-h, 0px) + 160px);
}
/* Stato "incollata in alto" — header collassato, glassmorphism */
.funz-search-wrap.is-stuck {
padding: 12px 0 10px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 4px 20px rgba(13, 110, 253, 0.12);
}
/* Intestazione: visibile a riposo, scompare quando stuck */
.funz-search-header {
text-align: center;
max-width: 720px;
margin: 0 auto 18px;
overflow: hidden;
transition: max-height .3s ease, opacity .2s ease, margin .25s ease;
max-height: 120px;
opacity: 1;
}
.funz-search-wrap.is-stuck .funz-search-header {
max-height: 0;
opacity: 0;
margin-bottom: 0;
}
.funz-search-heading {
font-weight: 700;
color: #0a3578;
margin: 0 0 6px;
font-size: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.funz-search-heading .ti-sparkles {
color: #ffc107;
font-size: 1.4rem;
}
.funz-search-sub {
color: #5a6c8a;
font-size: 0.92rem;
}
.funz-search-box {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.funz-search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 1.35rem;
color: #0d6efd;
pointer-events: none;
transition: color .15s ease, transform .2s ease;
}
.funz-search-input:focus + .funz-search-clear,
.funz-search-input:focus ~ .funz-search-icon,
.funz-search-box:focus-within .funz-search-icon {
color: #6610f2;
transform: translateY(-50%) scale(1.08);
}
.funz-search-input {
width: 100%;
padding: 16px 48px 16px 52px;
border: 2px solid transparent;
border-radius: 999px;
font-size: 1.05rem;
background: #fff;
box-shadow:
0 4px 12px rgba(13, 110, 253, 0.08),
0 1px 2px rgba(0, 0, 0, 0.04);
transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.funz-search-input::placeholder { color: #9aa5b8; }
.funz-search-input:hover {
box-shadow:
0 6px 16px rgba(13, 110, 253, 0.12),
0 1px 2px rgba(0, 0, 0, 0.05);
}
.funz-search-input:focus {
outline: none;
border-color: #0d6efd;
box-shadow:
0 0 0 4px rgba(13, 110, 253, 0.15),
0 8px 24px rgba(13, 110, 253, 0.18);
}
/* Versione compatta quando stuck */
.funz-search-wrap.is-stuck .funz-search-input {
padding: 11px 44px 11px 48px;
font-size: 0.98rem;
}
.funz-search-wrap.is-stuck .funz-search-icon {
font-size: 1.2rem;
left: 16px;
}
.funz-search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #e9ecef;
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
color: #495057;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.funz-search-clear:hover {
background: #dee2e6;
color: #212529;
transform: translateY(-50%) scale(1.1);
}
/* Chips suggerimenti */
.funz-search-results {
max-width: 720px;
margin: 14px auto 0;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
max-height: 60vh;
overflow-y: auto;
overflow-x: hidden;
animation: funzResultsIn .18s ease;
}
@keyframes funzResultsIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.funz-search-result {
display: block;
padding: 12px 16px;
border-bottom: 1px solid #f1f3f5;
text-decoration: none;
color: inherit;
transition: background .12s ease;
}
.funz-search-result:last-child { border-bottom: none; }
.funz-search-result:hover,
.funz-search-result:focus {
background: #f8f9fa;
outline: none;
}
.funz-search-result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.funz-search-result-title {
font-weight: 600;
color: #212529;
font-size: 0.95rem;
}
.funz-search-result-cat {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #0d6efd;
background: rgba(13, 110, 253, 0.1);
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
font-weight: 600;
}
.funz-search-result-snippet {
font-size: 0.85rem;
color: #6c757d;
line-height: 1.4;
}
.funz-search-result mark {
background: #fff3cd;
color: #664d03;
padding: 0 2px;
border-radius: 3px;
}
.funz-search-empty {
padding: 16px;
text-align: center;
color: #6c757d;
font-size: 0.9rem;
}
/* Highlight breve della sezione quando ci si arriva via ricerca */
@keyframes funzSectionFlash {
0% { box-shadow: inset 0 0 0 0 rgba(13, 110, 253, 0); background-color: transparent; }
20% { box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.5); background-color: rgba(13, 110, 253, 0.04); }
100% { box-shadow: inset 0 0 0 0 rgba(13, 110, 253, 0); background-color: transparent; }
}
.funz-section-highlight {
animation: funzSectionFlash 1.8s ease;
}
/* Highlight in-place delle occorrenze cercate, wrappato in .
Usa una sequenza di colori che richiama l'attenzione e poi sfuma. */
@keyframes funzFoundPulse {
0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.55); transform: scale(1); }
15% { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.35); transform: scale(1.06); }
35% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); transform: scale(1); }
100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); transform: scale(1); }
}
.funz-found-mark {
background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
color: #664d03;
padding: 1px 3px;
border-radius: 3px;
font-weight: 600;
display: inline-block;
animation: funzFoundPulse 1.4s ease 1;
}
/* Dark mode */
[data-pc-theme="dark"] .funz-search-wrap {
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
border-bottom-color: #334155;
}
[data-pc-theme="dark"] .funz-search-wrap.is-stuck {
background: rgba(15, 23, 42, 0.85);
}
[data-pc-theme="dark"] .funz-search-heading { color: #e2e8f0; }
[data-pc-theme="dark"] .funz-search-sub { color: #94a3b8; }
[data-pc-theme="dark"] .funz-search-icon { color: #60a5fa; }
[data-pc-theme="dark"] .funz-search-input {
background: #0f172a;
border-color: transparent;
color: #e2e8f0;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.25),
0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-pc-theme="dark"] .funz-search-input:focus {
border-color: #60a5fa;
box-shadow:
0 0 0 4px rgba(96, 165, 250, 0.2),
0 8px 24px rgba(96, 165, 250, 0.18);
}
[data-pc-theme="dark"] .funz-search-clear {
background: #334155;
color: #cbd5e1;
}
[data-pc-theme="dark"] .funz-search-clear:hover {
background: #475569;
color: #f1f5f9;
}
[data-pc-theme="dark"] .funz-search-results {
background: #1e293b;
border-color: #334155;
}
[data-pc-theme="dark"] .funz-search-result {
border-bottom-color: #334155;
}
[data-pc-theme="dark"] .funz-search-result:hover {
background: #0f172a;
}
[data-pc-theme="dark"] .funz-search-result-title { color: #f1f5f9; }
[data-pc-theme="dark"] .funz-search-result-snippet { color: #94a3b8; }
[data-pc-theme="dark"] .funz-search-result mark {
background: rgba(251, 191, 36, 0.25);
color: #fbbf24;
}
[data-pc-theme="dark"] .funz-found-mark {
background: linear-gradient(135deg, rgba(251,191,36,0.35) 0%, rgba(251,191,36,0.5) 100%);
color: #fde68a;
}
@media (max-width: 575.98px) {
.funz-search-wrap {
padding: 20px 0 18px;
}
.funz-search-wrap.is-stuck {
padding: 10px 0 8px;
}
.funz-search-heading { font-size: 1.1rem; }
.funz-search-sub { font-size: 0.85rem; }
.funz-search-header { margin-bottom: 12px; }
.funz-search-input {
font-size: 0.95rem;
padding: 13px 44px 13px 46px;
}
.funz-search-wrap.is-stuck .funz-search-input {
padding: 10px 40px 10px 42px;
font-size: 0.9rem;
}
.funz-search-icon { left: 16px; font-size: 1.15rem; }
.funz-search-wrap.is-stuck .funz-search-icon { font-size: 1rem; left: 14px; }
.funz-search-result-title { font-size: 0.9rem; }
.funz-search-result-snippet { font-size: 0.8rem; }
}
/* =============================================================================
Schermate di autenticazione (login, registrazione, recupero password,
verifica email, accettazione privacy): sfondo brand al posto del bianco
============================================================================= */
.auth-main .auth-wrapper.v1 .auth-form {
background:
radial-gradient(circle at 12% 18%, rgba(91, 141, 239, 0.55) 0, transparent 42%),
radial-gradient(circle at 88% 88%, rgba(56, 189, 248, 0.22) 0, transparent 38%),
linear-gradient(135deg, var(--ml-blue) 0%, var(--ml-blue-dark) 65%, var(--ml-blue-darker) 100%);
overflow: hidden;
isolation: isolate;
}
/* trama a puntini, sfumata verso i bordi */
.auth-main .auth-wrapper.v1 .auth-form::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}
/* anelli concentrici decorativi nell'angolo in alto a destra */
.auth-main .auth-wrapper.v1 .auth-form::after {
content: "";
position: absolute;
top: -180px;
right: -180px;
width: 520px;
height: 520px;
z-index: -1;
pointer-events: none;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 0 0 80px rgba(255, 255, 255, 0.035),
0 0 0 160px rgba(255, 255, 255, 0.02);
}
.auth-main .auth-wrapper.v1 .auth-form .card {
border: 0;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(11, 26, 74, 0.35);
}
@media (max-width: 575.98px) {
.auth-main .auth-wrapper.v1 .auth-form {
padding: 16px;
}
.auth-main .auth-wrapper.v1 .auth-form::after {
top: -240px;
right: -260px;
}
}
/* =============================================================================
Barra di salvataggio sticky nei form (formbase.html): lo sticky lo dà la
classe .sticky-action del tema; qui solo ombra e layout compatto mobile
quando è agganciata (.is-stuck impostata via JS).
============================================================================= */
.top-toolbar--sticky > .card-header {
transition: box-shadow .15s ease;
}
.top-toolbar--sticky > .card-header.is-stuck {
box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
}
/* Mobile: da agganciata la barra diventa compatta —
solo il titolo, pulsanti affiancati (vanno a capo se non ci stanno) */
@media (max-width: 767.98px) {
.top-toolbar--sticky > .card-header.is-stuck {
padding: .6rem .75rem;
}
.top-toolbar--sticky > .card-header.is-stuck > .d-flex {
gap: .5rem !important;
}
.top-toolbar--sticky > .card-header.is-stuck .top-toolbar-icon,
.top-toolbar--sticky > .card-header.is-stuck .top-toolbar-sub {
display: none;
}
.top-toolbar--sticky > .card-header.is-stuck .top-toolbar-actions,
.top-toolbar--sticky > .card-header.is-stuck .top-toolbar-actions.justify-content-end {
flex-direction: row;
flex-wrap: wrap !important;
}
.top-toolbar--sticky > .card-header.is-stuck .top-toolbar-actions > .btn {
flex: 1 1 auto;
width: auto;
padding-left: .6rem;
padding-right: .6rem;
}
}
/* =============================================================================
Sito pubblico — rifinitura grafica
============================================================================= */
/* Righe con gutter g-5: su mobile il margine negativo (1.5rem) supera il
padding del container (0.75rem) e crea scroll orizzontale. Riduco solo il
gutter orizzontale, quello verticale resta 3rem. */
@media (max-width: 767.98px) {
.row.g-5 { --bs-gutter-x: 1.5rem; }
}
/* Pulsanti outline su fondo blu: bordo più deciso e leggero riempimento */
.bg-blue-500 .btn-outline-light,
.home-cta .btn-outline-light {
border-width: 2px;
background: rgba(255, 255, 255, .08);
}
.bg-blue-500 .btn-outline-light:hover,
.home-cta .btn-outline-light:hover {
background: #fff;
color: var(--ml-blue-dark);
}
/* ---------- Homepage ---------- */
.home-sottotitolo {
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.home-feature {
border: 1px solid #e7eaef;
border-radius: 16px;
padding: 2rem 1.5rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-feature:hover {
transform: translateY(-4px);
border-color: rgba(46, 92, 255, .25);
box-shadow: 0 14px 30px rgba(30, 58, 138, .12);
}
.home-feature-icona {
width: 60px;
height: 60px;
margin: 0 auto 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-size: 1.75rem;
color: #fff;
background: linear-gradient(135deg, var(--ml-blue) 0%, var(--ml-blue-dark) 100%);
box-shadow: 0 8px 18px rgba(46, 92, 255, .28);
}
/* Passi "Come funziona": cerchi collegati da una linea tratteggiata su desktop */
.home-passo {
position: relative;
}
.home-passo-numero {
width: 64px;
height: 64px;
margin: 0 auto .75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.6rem;
color: var(--ml-blue);
background: var(--ml-blue-tint);
border: 2px solid rgba(46, 92, 255, .25);
position: relative;
z-index: 1;
}
.home-passo-etichetta {
display: block;
margin-bottom: .35rem;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ml-blue-dark);
}
@media (min-width: 768px) {
.home-passi > li:not(:last-child) .home-passo::after {
content: "";
position: absolute;
top: 32px;
left: calc(50% + 44px);
right: calc(-50% - 3rem + 44px);
border-top: 2px dashed rgba(46, 92, 255, .3);
}
}
/* Blocco finale (CTA) delle pagine pubbliche: stesso fondo degli hero
con anelli decorativi. Si usa insieme a .bg-primary (riserva se il CSS
in cache è vecchio). */
.home-cta {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 15% 20%, rgba(91, 141, 239, .5) 0, transparent 45%),
linear-gradient(135deg, var(--ml-blue) 0%, var(--ml-blue-dark) 100%);
}
.home-cta::after {
content: "";
position: absolute;
top: -160px;
right: -120px;
width: 420px;
height: 420px;
z-index: -1;
pointer-events: none;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .14);
box-shadow:
0 0 0 70px rgba(255, 255, 255, .035),
0 0 0 140px rgba(255, 255, 255, .02);
}
/* ---------- Prezzi: due sole larghezze ---------- */
.prezzi-colonna {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.prezzi-colonna-stretta {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.prezzi-testo { font-size: .9rem; }
.prezzi-trial {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}
.plan-card { position: relative; }
.plan-card .badge-featured {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
/* ---------- Contatti: colonna informazioni in card ---------- */
.contatti-info {
background: #fff;
border: 1px solid #e7eaef;
border-radius: 16px;
padding: 1.75rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.contatti-info-voce {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.contatti-info-icona {
flex-shrink: 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 1.35rem;
color: var(--ml-blue);
background: var(--ml-blue-tint);
}
.contatti-info-link {
display: flex;
flex-direction: column;
gap: .75rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e7eaef;
}
.contatti-info-link-voce {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1rem;
border-radius: 12px;
border: 1px solid #e7eaef;
color: #0f172a;
text-decoration: none;
transition: border-color .15s ease, background-color .15s ease;
}
.contatti-info-link-voce:hover,
.contatti-info-link-voce:focus-visible {
border-color: rgba(46, 92, 255, .4);
background: var(--ml-blue-tint);
color: #0f172a;
}
.contatti-info-link-voce > .ti:first-child {
font-size: 1.3rem;
color: var(--ml-blue);
}
.contatti-info-link-voce strong { color: var(--ml-blue-dark); }
/* ---------- Livescore: date e luogo più leggibili ---------- */
.evento-card-info.small { font-size: .9rem; }
@media (prefers-reduced-motion: reduce) {
.home-feature,
.home-feature:hover { transition: none; transform: none; }
}
/* =============================================================================
Hero delle pagine interne (funzionalità, prezzi, contatti, installa app):
pillola sopra il titolo (.livescore-hero-badge), decorazione a destra,
anelli come nel blocco finale (.home-cta), altezza minima comune su desktop
============================================================================= */
.hero-pagina {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero-pagina::after {
content: "";
position: absolute;
top: -160px;
right: -120px;
width: 420px;
height: 420px;
z-index: -1;
pointer-events: none;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .14);
box-shadow:
0 0 0 70px rgba(255, 255, 255, .035),
0 0 0 140px rgba(255, 255, 255, .02);
}
@media (min-width: 992px) {
.hero-pagina .row { min-height: 260px; }
}
.hero-pagina-icona {
width: 190px;
height: 190px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 6rem;
color: #fff;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .25);
box-shadow: 0 0 0 18px rgba(255, 255, 255, .05);
}
.device-phone.hero-pagina-telefono {
max-width: 190px;
transform: rotate(4deg);
box-shadow: 0 30px 60px rgba(11, 26, 74, .45);
}
@media (prefers-reduced-motion: reduce) {
.device-phone.hero-pagina-telefono { transform: none; }
}
/* =============================================================================
Prezzi — blocchi informativi (affiliazioni, metodi di pagamento):
card bianca con icona a sinistra del titolo, come la colonna di Contatti
============================================================================= */
.prezzi-info-card {
background: #fff;
border: 1px solid #e7eaef;
border-radius: 16px;
padding: 1.5rem 1.75rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.prezzi-info-intestazione {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .75rem;
}
.prezzi-info-icona {
flex-shrink: 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 1.35rem;
color: var(--ml-blue);
background: var(--ml-blue-tint);
}
/* il contenuto parte allineato al titolo (dopo l'icona) */
.prezzi-info-corpo {
margin-top: 1rem;
padding-left: calc(44px + .75rem);
}
.prezzi-info-riga {
display: flex;
align-items: center;
gap: 1.5rem;
}
.prezzi-info-riga > p { max-width: 640px; }
.prezzi-info-riga > .btn { flex-shrink: 0; }
.prezzi-metodo {
display: flex;
align-items: flex-start;
gap: .85rem;
height: 100%;
padding: 1rem;
border: 1px solid #e7eaef;
border-radius: 12px;
}
.prezzi-metodo-icona {
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 1.25rem;
}
.prezzi-info-nota {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eef0f3;
}
@media (max-width: 767.98px) {
.prezzi-info-card { padding: 1.25rem; }
.prezzi-info-corpo { padding-left: 0; }
.prezzi-info-riga {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
/* =============================================================================
Cornice telefono (pagine pubbliche: funzionalità, installa app).
La stessa definizione è anche nel |