:root { --bg: #101214; --surface: #191c1f; --surface-alt: #15181b; --border: rgba(255,255,255,0.09); --text-primary: #f3f2ec; --text-secondary: #9ca0a6; --text-muted: #6b6f75; --overlay-subtle: rgba(255,255,255,0.05); --red: #e2231f; --red-dim: #7a1512; --teal: #2ec4b6; --blue: #3b8bd4; --green: #3ecf5c; --purple: #9b5de5; --pink: #e85d9a; --grey: #9ca0a6; --gold: #f0b429; --gold-dark: #7a5a0a; --font-display: "Oswald", sans-serif; --font-body: "Inter", sans-serif; } /* Tema chiaro: attivato da tema.js impostando data-tema su , scelta ricordata per le visite successive. Le variabili sopra restano il tema scuro di default. */ :root[data-tema="chiaro"] { --bg: #f5f4f0; --surface: #ffffff; --surface-alt: #ece9e3; --border: rgba(0,0,0,0.12); --text-primary: #17181a; --text-secondary: #53565c; --text-muted: #83868c; --overlay-subtle: rgba(0,0,0,0.05); } .btn-tema { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); cursor: pointer; font-size: 15px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.12); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .btn-tema:hover { border-color: var(--red); transform: scale(1.08); box-shadow: 0 3px 10px rgba(0,0,0,0.18); } .btn-tema--fisso { position: fixed; top: 14px; right: 14px; z-index: 1000; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; margin: 0; } a { color: inherit; text-decoration: none; } /* Home NXT: benvenuto + scelta ente */ .welcome-screen, .chooser-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .welcome-screen[hidden], .chooser-screen[hidden] { display: none; } .welcome-screen { transition: opacity 0.5s ease; } .welcome-screen.is-uscita { opacity: 0; } .welcome-content { animation: schermata-in 0.8s ease-out both; } .welcome-eyebrow { color: var(--red); font-family: var(--font-display); letter-spacing: 0.35em; font-size: 14px; margin: 0 0 1.25rem; } .welcome-logo { height: 64px; width: auto; animation: logo-in 1s ease-out 0.2s both; } @keyframes schermata-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes logo-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .chooser-screen { animation: schermata-in 0.6s ease-out both; transition: opacity 0.35s ease; } .chooser-screen.is-uscita { opacity: 0; } .chooser-logo-riga { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.75rem; } .chooser-logo { height: 28px; } .chooser-title { font-size: 1.6rem; margin-bottom: 2.5rem; } /* Schermata di caricamento quando si seleziona un circuito: logo, spinner e testo compaiono in sequenza invece che tutti insieme, per un ingresso piu' curato */ .chooser-loading { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .chooser-loading.is-visibile { opacity: 1; pointer-events: auto; } .chooser-loading-logo { height: 32px; opacity: 0; transform: scale(0.8) translateY(6px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .chooser-loading.is-visibile .chooser-loading-logo { transition-delay: 0.05s; opacity: 1; transform: scale(1) translateY(0); } .chooser-loading .spinner { width: 38px; height: 38px; border: 3px solid rgba(255,255,255,0.12); border-top-color: var(--red); border-right-color: var(--red); border-radius: 50%; animation: chooser-spin 0.85s cubic-bezier(0.5, 0, 0.5, 1) infinite; opacity: 0; transition: opacity 0.4s ease; } .chooser-loading.is-visibile .spinner { transition-delay: 0.2s; opacity: 1; } @keyframes chooser-spin { to { transform: rotate(360deg); } } .chooser-loading-testo { color: var(--text-secondary); font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; } .chooser-loading.is-visibile .chooser-loading-testo { transition-delay: 0.35s; opacity: 1; transform: translateY(0); } .chooser-auth { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 1.75rem; min-height: 38px; justify-content: center; } .chooser-auth-saluto { color: var(--text-secondary); font-size: 14px; margin: 0; } .chooser-auth-saluto strong { color: var(--text-primary); } /* Popup annuncio in home */ .popup-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,0); backdrop-filter: blur(0px); transition: background 0.4s ease, backdrop-filter 0.4s ease; } .popup-overlay[hidden] { display: none; } .popup-overlay.is-visibile { background: rgba(6,7,8,0.8); backdrop-filter: blur(8px); } /* Bagliore soffuso dietro la card: cresce insieme all'apertura, solo variante standard */ .popup-overlay::before { content: ''; position: absolute; top: 50%; left: 50%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(226,35,31,0.25), transparent 68%); filter: blur(50px); transform: translate(-50%, -50%) scale(0.75); opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; pointer-events: none; } .popup-overlay.is-visibile::before { opacity: 1; transform: translate(-50%, -50%) scale(1); } .popup-card { width: 100%; max-width: 460px; min-height: 540px; max-height: 88vh; background: linear-gradient(160deg, #1c1f23, var(--bg)); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07); position: relative; z-index: 1; display: flex; flex-direction: column; opacity: 0; transform: scale(0.85) translateY(34px) rotate(-1deg); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .popup-overlay.is-visibile .popup-card { opacity: 1; transform: scale(1) translateY(0) rotate(0); } .popup-media { position: absolute; inset: 0; overflow: hidden; } .popup-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,10,0.1) 0%, rgba(8,9,10,0.25) 40%, rgba(8,9,10,0.97) 86%); } .popup-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: popup-foto-zoom 7s ease-out both; } @keyframes popup-foto-zoom { from { transform: scale(1.18); } to { transform: scale(1); } } .popup-chiudi { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(10,10,12,0.5); backdrop-filter: blur(6px); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s; } .popup-chiudi:hover { background: rgba(226,35,31,0.85); transform: scale(1.08); } .popup-corpo { position: relative; z-index: 1; margin-top: auto; padding: 28px 26px 28px; text-align: left; } .popup-eyebrow { color: var(--red); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 10px; } .popup-corpo h2 { font-size: 1.55rem; line-height: 1.2; color: #fff; margin-bottom: 10px; } .popup-corpo p#popup-descrizione { color: rgba(255,255,255,0.82); font-size: 14.5px; line-height: 1.55; margin: 0; white-space: pre-line; } .popup-azioni { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .popup-azioni .btn { flex: 1; text-align: center; white-space: nowrap; } .popup-azioni .btn-secondary { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(6px); } .popup-azioni .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.14); } .popup-azioni .btn-primary { box-shadow: 0 10px 28px rgba(226,35,31,0.55); } .popup-azioni .btn-primary:hover { box-shadow: 0 10px 32px rgba(255,43,38,0.7); } /* Ingresso "a cascata" del contenuto: eyebrow, titolo, descrizione e bottoni compaiono uno via l'altro invece che tutti insieme, sopra al pop-in della card */ .popup-corpo > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .popup-overlay.is-visibile .popup-corpo > * { opacity: 1; transform: translateY(0); } .popup-corpo > *:nth-child(1) { transition-delay: 0.18s; } .popup-corpo > *:nth-child(2) { transition-delay: 0.25s; } .popup-corpo > *:nth-child(3) { transition-delay: 0.32s; } .popup-corpo > *:nth-child(4) { transition-delay: 0.4s; } /* Senza foto: niente riquadro vuoto, resta solo lo sfondo scuro sfumato della card */ .popup-card:has(#popup-foto[hidden]) .popup-media::after { display: none; } @media (max-width: 480px) { .popup-azioni { flex-direction: column; } .popup-card { min-height: 480px; } } /* --- Variante "Grande": copre l'intera pagina --- */ .popup-overlay.popup-tipo-grande { padding: 0; } .popup-overlay.popup-tipo-grande::before { display: none; } .popup-overlay.popup-tipo-grande .popup-card { max-width: none; width: 100%; height: 100%; min-height: 100%; max-height: none; border-radius: 0; box-shadow: none; transform: none; transition: opacity 0.6s ease; } .popup-overlay.popup-tipo-grande.is-visibile .popup-card { opacity: 1; transform: none; } .popup-overlay.popup-tipo-grande .popup-foto { animation-duration: 11s; } .popup-overlay.popup-tipo-grande .popup-media::after { background: linear-gradient(0deg, rgba(6,7,8,0.97) 0%, rgba(6,7,8,0.55) 32%, rgba(6,7,8,0.15) 55%, rgba(6,7,8,0.55) 100%); } .popup-overlay.popup-tipo-grande .popup-chiudi { top: 26px; right: 26px; width: 46px; height: 46px; font-size: 26px; } .popup-overlay.popup-tipo-grande .popup-corpo { max-width: 640px; margin: auto 0 0; padding: 40px clamp(24px, 6vw, 72px) clamp(48px, 8vh, 90px); } .popup-overlay.popup-tipo-grande .popup-eyebrow { font-size: 14px; } .popup-overlay.popup-tipo-grande .popup-corpo h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 16px; } .popup-overlay.popup-tipo-grande .popup-corpo p#popup-descrizione { font-size: 17px; line-height: 1.6; max-width: 560px; } .popup-overlay.popup-tipo-grande .popup-azioni { max-width: 460px; margin-top: 32px; } @media (max-width: 640px) { .popup-overlay.popup-tipo-grande .popup-corpo { padding: 32px 20px 48px; } } .chooser-ricerca { width: 100%; max-width: 360px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 20px; padding: 10px 18px; font-family: var(--font-body); font-size: 14px; margin-bottom: 2.5rem; } .chooser-ricerca:focus { outline: none; border-color: var(--red); } .chooser-ricerca::placeholder { color: var(--text-secondary); } .chooser-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; /* al massimo 5 per fila (5 card da 260px + 4 spazi da 24px), poi vanno a capo */ max-width: calc(260px * 5 + 24px * 4); } .ente-button { position: relative; display: flex; align-items: center; justify-content: center; width: 260px; height: 140px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1.5rem; transition: border-color 0.2s, transform 0.2s; } .ente-button:hover { border-color: var(--red); transform: translateY(-3px); } .ente-button img { max-height: 70px; max-width: 100%; } /* Badge mostrato in alto, sopra il logo, quando l'ente ha una Gara in corso proprio oggi. */ .ente-live-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: rgba(17, 18, 20, 0.82); backdrop-filter: blur(3px); color: #fff; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; padding: 4px 10px 4px 8px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 4; } .ente-live-badge::before { content: ''; position: relative; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(226, 35, 31, 0.6); animation: ente-live-ping 1.8s ease-out infinite; } @keyframes ente-live-ping { 0% { box-shadow: 0 0 0 0 rgba(226, 35, 31, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(226, 35, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 35, 31, 0); } } .ente-button-tooltip { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%) translateY(0); background: var(--bg); border: 1px solid var(--red); border-radius: 4px; padding: 4px 10px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.02em; color: var(--text-primary); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5; } .ente-button:hover .ente-button-tooltip, .ente-button:focus-visible .ente-button-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); } .ente-button-testo { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.03em; } @media (max-width: 640px) { .ente-button { width: 100%; max-width: 320px; } } /* Scelta tipo di account (pagina /registrati.html) */ .scelta-account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 2rem; } .scelta-account-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; transition: border-color 0.2s, transform 0.2s; } .scelta-account-card:hover { border-color: var(--red); transform: translateY(-2px); } .scelta-account-card h3 { font-size: 1.15rem; margin-bottom: 8px; } .scelta-account-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 14px; } .scelta-account-nota { border-top: 1px solid var(--border); padding-top: 1.5rem; } .scelta-account-nota h3 { font-size: 1rem; margin-bottom: 6px; } @media (max-width: 640px) { .scelta-account-grid { grid-template-columns: 1fr; } } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(16,18,20,0.92); backdrop-filter: blur(6px); z-index: 10; } .brandbar { display: flex; align-items: center; gap: 14px; } .brand-logo--sgk { height: 34px; width: auto; } .brand-logo--nxt { height: 20px; width: auto; } .brand-divider { color: var(--text-muted); font-size: 14px; } /* .topbar resta sempre scura (colore fisso, non da variabile), quindi anche il suo testo resta chiaro fisso: seguire il tema qui lo renderebbe illeggibile in tema chiaro. */ .topnav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: rgba(255,255,255,0.75); } .topnav a:hover { color: #fff; } .topnav-cta { background: var(--red); color: #fff !important; padding: 8px 18px; border-radius: 3px; font-weight: 500; } /* Hero */ .hero { position: relative; overflow: hidden; padding: 6rem 2rem 5rem; border-bottom: 1px solid var(--border); } .hero-stripe { position: absolute; top: -40%; right: -10%; width: 60%; height: 220%; background: linear-gradient(100deg, transparent 40%, var(--red-dim) 41%, var(--red-dim) 46%, transparent 47%, transparent 54%, var(--teal) 55%, var(--teal) 57%, transparent 58%); opacity: 0.5; transform: rotate(-8deg); } .hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero.has-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,20,0.55), rgba(16,18,20,0.8)); z-index: 0; } /* con una foto di sfondo il testo ha bisogno di un'ombra per restare leggibile in ogni punto della foto, non solo dove l'overlay scuro basta da solo */ .hero.has-foto .hero-eyebrow, .hero.has-foto h1, .hero.has-foto .hero-sub { text-shadow: 0 2px 10px rgba(0,0,0,0.7); } /* l'overlay sopra la foto resta scuro fisso in ogni tema, quindi anche il testo del titolo e del sottotitolo resta bianco fisso (l'eyebrow usa gia' --red, sempre leggibile) */ .hero.has-foto h1, .hero.has-foto .hero-sub { color: #fff; } .hero-content { position: relative; z-index: 1; max-width: 640px; } .hero-eyebrow { color: var(--red); font-family: var(--font-display); font-size: 15px; margin: 0 0 0.75rem; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; margin-bottom: 1.25rem; } .hero-sub { color: var(--text-secondary); font-size: 17px; max-width: 460px; margin-bottom: 2rem; } .btn { display: inline-block; font-family: var(--font-display); font-size: 15px; padding: 12px 26px; border-radius: 10px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s; } /* .btn ha lo stesso "peso" CSS dell'attributo [hidden]: senza questa regola un bottone nascosto via JS (elemento.hidden = true) resterebbe visibile lo stesso. */ .btn[hidden] { display: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .btn-primary { background: var(--red); color: #fff; box-shadow: 0 2px 10px rgba(226,35,31,0.28); } .btn-primary:hover { background: #ff2b26; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(226,35,31,0.38); } /* Sections */ .section { padding: 4.5rem 2rem; max-width: 1080px; margin: 0 auto; scroll-margin-top: 70px; } /* Le sezioni della dashboard pilota/team hanno anche il dash-nav sticky sotto la topbar: serve piu' margine perche' un salto ad ancora non le nasconda sotto le due barre. */ [id^="sezione-"] { scroll-margin-top: 128px; } .section-alt { background: var(--surface-alt); max-width: none; } .section-alt > * { max-width: 1080px; margin-left: auto; margin-right: auto; } /* il pannello organizzatore ha tabelle con molte colonne: gli serve piu' spazio del resto del sito perche' tutto (comprese le azioni) stia visibile senza scorrere */ .section-pannello { max-width: 1500px; } .section-head { margin-bottom: 2.25rem; } .section-head h2 { font-size: 1.8rem; margin-bottom: 0.4rem; } .section-sub { color: var(--text-secondary); font-size: 15px; } /* Titolo di sezione con un'azione secondaria a fianco (es. "Guarda il calendario completo"): affiancati su schermi larghi, impilati su mobile per non stringere troppo il testo. */ .section-head--con-azione { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .section-head--con-azione .btn { flex-shrink: 0; white-space: nowrap; } /* Trofeo cards */ .trofeo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } /* Calendario Gare in un'unica fila scorrevole: le passate restano a sinistra, le future a destra, e al caricamento la fila parte gia' dalla prossima gara in programma, che e' cosi' la prima visibile a sinistra. Ogni freccia scorre esattamente una Gara alla volta. */ .trofeo-carosello { display: flex; align-items: center; gap: 10px; } .trofeo-pista { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 2px; flex: 1 1 auto; min-width: 0; /* solo le frecce scorrono il carosello: la barra di scorrimento nativa resta nascosta */ scrollbar-width: none; -ms-overflow-style: none; } .trofeo-pista::-webkit-scrollbar { display: none; } .trofeo-pista .trofeo-card { flex: 0 0 380px; } .trofeo-freccia { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font-size: 22px; line-height: 1; cursor: pointer; } .trofeo-freccia:hover { border-color: var(--red); color: var(--red); } .trofeo-freccia:disabled { opacity: 0.35; cursor: default; } .trofeo-freccia:disabled:hover { border-color: var(--border); color: var(--text-primary); } .trofeo-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--text-muted); border-radius: 4px; padding: 1.9rem 1.7rem; position: relative; } .trofeo-pista .trofeo-card { padding: 2.2rem 2rem; } .trofeo-card.is-conclusa { border-top-color: var(--text-muted); } .trofeo-card.is-aperta { border-top-color: var(--teal); } .trofeo-card.is-attesa { border-top-color: var(--border); } /* La prossima gara in programma si distingue visivamente nel carosello: e' quella su cui la pista si centra al caricamento della pagina. */ .trofeo-card.is-prossima { border-top-color: var(--red); box-shadow: 0 0 0 1px var(--red); } .trofeo-card.is-prossima::before { content: "Prossima gara"; position: absolute; top: -11px; left: 1.4rem; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 9px; border-radius: 3px; } @media (max-width: 640px) { .trofeo-freccia { width: 34px; height: 34px; font-size: 18px; } .trofeo-pista .trofeo-card { flex-basis: 78vw; padding: 1.5rem 1.4rem; } } .trofeo-season { font-family: var(--font-display); font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; } .trofeo-pista .trofeo-card h3 { font-size: 1.4rem; margin-bottom: 6px; } .trofeo-pista .trofeo-date { font-size: 15px; margin-bottom: 18px; } .trofeo-card h3 { font-size: 1.15rem; margin-bottom: 4px; } .trofeo-date { color: var(--text-secondary); font-size: 14px; margin: 0 0 14px; } /* Pillole generiche per righe di link secondari: sul box Gara (live timing/streaming impostati dall'organizzatore) e nelle iscrizioni della dashboard pilota/team (info, elenco iscritti, risultati, live timing/streaming). */ .link-pillole { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .link-pillola { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); background: var(--overlay-subtle); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px 5px 10px; text-decoration: none; transition: border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s; } .link-pillola:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.15); } .link-pillola:hover { border-color: var(--red); color: var(--red); } .trofeo-promozione { color: var(--teal); font-size: 12.5px; margin: -8px 0 14px; padding: 6px 10px; background: rgba(46,196,182,0.08); border: 1px solid var(--teal); border-radius: 4px; } .trofeo-promozione strong { color: var(--text-primary); } .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--font-body); font-weight: 600; padding: 4px 11px; border-radius: 20px; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status-conclusa { background: rgba(155,160,166,0.15); color: var(--text-secondary); } .status-aperta { background: rgba(46,196,182,0.15); color: var(--teal); } .status-attesa { background: var(--overlay-subtle); color: var(--text-muted); } /* Chi richiede fattura comporta un adempimento fiscale in piu': va segnalato bene */ .badge-fattura { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: rgba(255,193,7,0.15); color: #d9a441; white-space: nowrap; } .trofeo-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .badge-nxt { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--red); background: rgba(226,35,31,0.1); border: 1px solid rgba(226,35,31,0.3); border-radius: 20px; padding: 3px 9px 3px 7px; } .badge-nxt img { height: 9px; width: auto; display: block; } .badge-not-linked { color: var(--purple); background: rgba(155,93,229,0.12); border-color: rgba(155,93,229,0.35); } .badge-info-host { position: relative; display: inline-flex; } .badge-tooltip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.45; color: var(--text-secondary); text-align: left; box-shadow: 0 10px 28px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 30; } .badge-tooltip::before, .badge-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; } .badge-tooltip::before { border-top-color: var(--border); margin-top: 1px; } .badge-tooltip::after { border-top-color: var(--surface); } .badge-info-host:hover .badge-tooltip, .badge-info-host:focus-within .badge-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .badge-livello { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-radius: 20px; padding: 3px 9px; border: 1px solid transparent; } .badge-nazionale { color: var(--green); background: rgba(62,207,92,0.12); border-color: rgba(62,207,92,0.35); } .badge-internazionale { color: var(--blue); background: rgba(59,139,212,0.12); border-color: rgba(59,139,212,0.35); } .badge-rental { color: var(--pink); background: rgba(232,93,154,0.12); border-color: rgba(232,93,154,0.35); } .badge-club { color: var(--grey); background: rgba(156,160,166,0.12); border-color: rgba(156,160,166,0.35); } .trofeo-link { display: block; margin-top: 12px; font-size: 13px; color: var(--teal); font-weight: 500; } .trofeo-link:hover { color: #58e0d2; } .trofeo-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } /* "Iscriviti" e "Info" sul box Gara: erano piccoli link testuali, ora bottoni veri e propri (stessa cura grafica di .btn-primary/.btn-secondary) per essere piu' evidenti e piu' comodi da toccare, specie sulle card piu' grandi del carosello. */ .trofeo-actions .trofeo-link { margin-top: 0; display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 15px; font-weight: 500; padding: 10px 20px; border-radius: 10px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s; } .trofeo-actions .trofeo-link:not(.trofeo-link--secondary) { background: var(--red); color: #fff; box-shadow: 0 2px 10px rgba(226,35,31,0.28); } .trofeo-actions .trofeo-link:not(.trofeo-link--secondary):hover { background: #ff2b26; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(226,35,31,0.38); } .trofeo-actions .trofeo-link--secondary { background: var(--overlay-subtle); border-color: var(--border); color: var(--text-primary); } .trofeo-actions .trofeo-link--secondary:hover { border-color: var(--text-secondary); background: var(--surface-alt); color: var(--text-primary); transform: translateY(-1px); } /* Pagina informativa pubblica di una Gara */ .gara-info-head { display: flex; align-items: center; gap: 20px; margin-bottom: 1.5rem; } .gara-info-logo { width: 84px; height: 84px; object-fit: contain; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); padding: 8px; } .gara-info-descrizione { line-height: 1.6; color: var(--text-secondary); margin-bottom: 2rem; } .gara-info-descrizione p { margin: 0 0 1rem; } .gara-info-descrizione strong { color: var(--text-primary); font-weight: 600; } .gara-info-descrizione h4, .gara-info-descrizione h5, .gara-info-descrizione h6 { font-family: var(--font-display); color: var(--text-primary); font-weight: 500; margin: 1.5rem 0 0.75rem; } .gara-info-descrizione h4 { font-size: 1.3rem; } .gara-info-descrizione h5 { font-size: 1.1rem; } .gara-info-descrizione h6 { font-size: 1rem; } .documenti-grid { display: flex; flex-wrap: wrap; gap: 12px; } .documento-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 500; transition: border-color 0.2s; } .documento-btn:hover { border-color: var(--red); } /* Classifica */ .classifica-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; font-size: 14px; color: var(--text-secondary); } .classifica-controls select { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 3px; padding: 6px 10px; font-family: var(--font-body); } .table-wrap { overflow-x: auto; } .classifica-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .classifica-table th, .classifica-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); } .team-logo-mini { height: 18px; width: auto; vertical-align: middle; margin-right: 6px; border-radius: 2px; } .pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; } .pallino-verde { background: var(--green, #3ecf5c); } .pallino-giallo { background: #e2b93b; } .classifica-table th { font-family: var(--font-display); font-weight: 500; color: var(--text-secondary); font-size: 12.5px; } .classifica-table tbody tr:last-child td { border-bottom: none; } .classifica-table tbody tr:hover { background: var(--overlay-subtle); } .col-pos, .col-tot { text-align: center; } .col-tot { font-family: var(--font-display); } .pos-1 .col-pos, .pos-1 .col-tot { color: var(--red); } .pos-2 .col-pos, .pos-2 .col-tot { color: var(--silver, #c7ccd1); } .pos-3 .col-pos, .pos-3 .col-tot { color: var(--teal); } /* CTA section */ .section-cta { text-align: center; border-top: 1px solid var(--border); } .section-cta h2 { font-size: 1.7rem; margin-bottom: 0.75rem; } .section-cta .section-sub { max-width: 480px; margin: 0 auto 1.75rem; } /* Footer */ .footer { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--border); } .footer a { text-decoration: underline; } .footer a:hover { color: var(--red); } @media (max-width: 640px) { .topbar { flex-wrap: wrap; row-gap: 8px; padding: 0.85rem 1.25rem; } .topnav { gap: 14px; font-size: 13px; flex-wrap: wrap; } .hero { padding: 4rem 1.25rem 3rem; } .section { padding: 3rem 1.25rem; } } /* Form (iscrizione pilota, login organizzatore) */ .form-narrow { max-width: 560px; } /* Pagina News */ .news-foto { width: 100%; max-height: 340px; object-fit: cover; border-radius: 8px; margin-bottom: 1.5rem; } .news-testo { color: var(--text-secondary); font-size: 16px; line-height: 1.6; white-space: pre-line; } .form-group { margin-bottom: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .form-row[hidden], .form-row-3[hidden] { display: none; } .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; } .form-group input, .form-group select { width: 100%; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--teal); } .form-hint { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; } /* Prezzo di iscrizione: ben visibile nel modulo e nel riepilogo finale */ .prezzo-badge { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; background: rgba(46,196,182,0.1); border: 1px solid rgba(46,196,182,0.35); border-radius: 8px; padding: 12px 16px; margin: -4px auto 20px; } .prezzo-badge[hidden] { display: none; } .prezzo-badge .prezzo-etichetta { font-size: 13px; color: var(--text-secondary); } .prezzo-badge .prezzo-valore { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: var(--teal); } /* Il totale del carrello e' molto piu' largo delle altre badge prezzo (che stanno accanto a un solo campo): con "space-between" etichetta e valore finiscono ai due estremi, lontanissimi tra loro. Centrarli come coppia in riga non basta: l'etichetta e' molto piu' lunga del valore, quindi il "peso" visivo resta comunque spostato a sinistra. Impilarli su due righe, entrambe centrate, elimina il problema alla radice. */ #prezzo-totale-carrello { flex-direction: column; align-items: center; gap: 2px; text-align: center; } /* Card di scelta tipo (radio ravvivate a scheda): usata nel modulo di iscrizione e nel pannello super admin per scegliere il tipo di popup */ .opzione-tipo { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: 0.15s; } .opzione-tipo:hover { border-color: var(--text-secondary); } .opzione-tipo:has(input:checked) { border-color: var(--red); background: rgba(226,35,31,0.07); } .opzione-tipo input { accent-color: var(--red); cursor: pointer; margin-right: 8px; } .opzione-tipo .titolo-opzione { font-weight: 600; } .opzione-tipo .desc-opzione { font-size: 12.5px; color: var(--text-secondary); margin: 3px 0 0 24px; } .form-message { padding: 12px 14px; border-radius: 3px; font-size: 14px; margin-bottom: 1.25rem; } .form-message.is-errore { background: rgba(226,35,31,0.12); color: #ff8783; } .form-message.is-successo { background: rgba(46,196,182,0.12); color: var(--teal); } .btn-secondary { background: var(--overlay-subtle); border: 1px solid var(--border); color: var(--text-primary); } .btn-secondary:hover { border-color: var(--text-secondary); background: var(--surface-alt); transform: translateY(-1px); } /* Azioni che cambiano qualcosa (paga, annulla, ecc.), sempre separate visivamente dai link informativi (info/iscritti/risultati/live) che le precedono nella stessa card: un click distratto su un link non deve poter atterrare per sbaglio su un bottone. */ .iscrizione-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } /* Azione le cui conseguenze non sono banali (es. richiesta di annullamento): un contorno rosso la rende riconoscibile a colpo d'occhio, cosi' non si confonde con le altre. */ .btn-pericoloso { background: transparent; border-color: rgba(226,35,31,0.4); color: var(--red); } .btn-pericoloso:hover { border-color: var(--red); background: rgba(226,35,31,0.08); } button.btn { cursor: pointer; font-family: var(--font-display); } /* Stato iscrizione pilota */ .status-in_attesa_verifica_team { background: rgba(255,193,7,0.15); color: #d9a441; } .status-rifiutata_dal_team { background: rgba(226,35,31,0.15); color: var(--red); } .status-in_attesa_pagamento { background: var(--overlay-subtle); color: var(--text-muted); } .status-in_attesa_approvazione { background: rgba(59,139,212,0.15); color: var(--blue); } .status-confermata { background: rgba(46,196,182,0.15); color: var(--teal); } .status-rifiutata { background: rgba(226,35,31,0.15); color: var(--red); } .status-annullata { background: rgba(155,160,166,0.15); color: var(--text-secondary); } .iscrizione-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: 1.25rem 1.4rem; margin-bottom: 14px; transition: box-shadow 0.15s, transform 0.15s, border-left-color 0.15s; } .iscrizione-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.12); transform: translateY(-1px); } .iscrizione-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .iscrizione-card h3 { font-size: 1.05rem; } .iscrizione-card p { color: var(--text-secondary); font-size: 14px; margin: 4px 0; } .iscrizione-card-head-destra { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .iscrizione-comprimi { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; transition: transform 0.15s, border-color 0.15s, color 0.15s; } .iscrizione-comprimi:hover { border-color: var(--red); color: var(--red); } .iscrizione-card.e-compatta .iscrizione-comprimi { transform: rotate(-90deg); } .iscrizione-card.e-compatta .iscrizione-card-head { margin-bottom: 0; } .iscrizione-card.e-compatta .iscrizione-card-corpo { display: none; } /* Il bordo sinistro della card riprende il colore dello stato dell'iscrizione, per un colpo d'occhio immediato senza dover leggere il badge. */ .iscrizione-card:has(.status-confermata) { border-left-color: var(--teal); } .iscrizione-card:has(.status-in_attesa_pagamento) { border-left-color: var(--text-muted); } .iscrizione-card:has(.status-in_attesa_approvazione) { border-left-color: var(--blue); } .iscrizione-card:has(.status-in_attesa_verifica_team) { border-left-color: #d9a441; } .iscrizione-card:has(.status-rifiutata_dal_team), .iscrizione-card:has(.status-rifiutata) { border-left-color: var(--red); } .iscrizione-card:has(.status-annullata) { border-left-color: var(--text-secondary); } /* Dashboard: nav rapida ad ancore + riepilogo profilo leggibile a colpo d'occhio */ .dash-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 2rem; position: sticky; top: 61px; z-index: 8; background: var(--bg); padding: 10px 0; } .dash-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-family: var(--font-display); letter-spacing: 0.02em; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s; } .dash-nav a:hover { border-color: var(--red); color: var(--text-primary); transform: translateY(-1px); } .dash-nav a[hidden] { display: none; } /* Nella scheda "Gare" del pannello organizzatore il dash-nav sta sotto agli admin-tabs, anche loro sticky: va agganciato piu' in basso per non sovrapporsi. L'altezza degli admin-tabs varia (vanno a capo su schermi stretti o con piu' badge visibili), quindi viene misurata via JS e passata come variabile CSS (vedi pannello.js). */ .admin-panel .dash-nav { top: calc(61px + var(--admin-tabs-h, 60px)); } .dash-nav a.is-attivo { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 2px 10px rgba(226,35,31,0.3); } /* Nelle Dashboard pilota/team/superadmin il dash-nav e' figlio diretto del body, non di una singola sezione: un elemento sticky resta agganciato solo per l'altezza del suo genitore, quindi se stesse dentro la prima sezione (o dentro un contenitore avvolto su misura) smetterebbe di seguire lo scroll non appena quella sezione finisce, invece di restare visibile per tutta la pagina. Questa classe gli da' solo l'allineamento orizzontale delle sezioni sottostanti (senza avvolgerlo in un contenitore che ne limiterebbe l'altezza utile). */ .dash-nav-pagina { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } @media (max-width: 640px) { .dash-nav-pagina { padding-left: 1.25rem; padding-right: 1.25rem; } } .id-nxt-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 20px; padding: 6px 8px 6px 14px; margin: 6px 0 1.25rem; } .id-nxt-badge .id-nxt-etichetta { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .id-nxt-badge .id-nxt-valore { font-family: var(--font-display); letter-spacing: 0.08em; font-size: 14px; color: var(--text-primary); } .id-nxt-badge button { background: var(--red); color: #fff; border: none; border-radius: 14px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .id-nxt-badge button:hover { background: #ff2b26; } /* --- NXT Pro: tasto in topnav + finestra con l'elenco dei vantaggi --- */ /* Icona a corona riusata ovunque compare "Pro": tasto in topnav, finestra dei vantaggi, badge sul profilo e badge accanto al logo in home. Sempre fill="currentColor", cosi' eredita il colore del testo del contenitore in cui si trova. */ .icona-pro { width: 14px; height: 14px; flex: 0 0 auto; } .btn-pro { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #f7cf72, var(--gold)); color: #2b2108; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; padding: 7px 14px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-pro:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); color: #2b2108; } /* Badge "PRO" mostrato accanto al nome sul profilo (dashboard) e accanto al logo NXT in home, solo quando l'account pilota/team ha l'abbonamento attivo. */ .pro-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #f7cf72, var(--gold)); color: #2b2108; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 20px; vertical-align: middle; } .pro-badge--brand { margin-left: 10px; } .pro-badge[hidden] { display: none; } /* Interruttore Pro nelle tabelle account del pannello super admin */ .toggle-pro { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; } .toggle-pro input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; } /* --- Finestra di conferma per l'auto-eliminazione dell'account (pilota/team) --- */ .conferma-overlay { position: fixed; inset: 0; z-index: 998; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 7, 8, 0); opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; } .conferma-overlay[hidden] { display: none; } .conferma-overlay.is-visibile { opacity: 1; background: rgba(6, 7, 8, 0.72); backdrop-filter: blur(6px); } .conferma-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: 10px; padding: 2.2rem 2rem; transform: translateY(14px) scale(0.98); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .conferma-overlay.is-visibile .conferma-card { transform: translateY(0) scale(1); opacity: 1; } .conferma-card h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 22px 10px 0; } .conferma-card > p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0 0 1.5rem; } .conferma-chiudi { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-primary); cursor: pointer; font-size: 14px; line-height: 1; } .conferma-chiudi:hover { border-color: var(--red); color: var(--red); } .scelta-dati { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.25rem; } .scelta-dati-opzione { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s ease; } .scelta-dati-opzione:hover { border-color: var(--red); } .scelta-dati-opzione input { margin-top: 3px; flex: 0 0 auto; cursor: pointer; } .scelta-dati-opzione span { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); } .scelta-dati-opzione strong { color: var(--text-primary); } .scelta-dati-opzione:has(input:checked) { border-color: var(--red); background: var(--overlay-subtle); } /* --- Statistiche Pro (dashboard pilota/team) --- */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 1.75rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.2rem; text-align: center; } .stat-valore { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--text-primary); line-height: 1.2; } .stat-etichetta { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; } .statistiche-locked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 2.5rem 1.5rem; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; } .statistiche-locked .icona-pro { width: 28px; height: 28px; color: var(--gold); } .statistiche-locked p { color: var(--text-secondary); max-width: 420px; margin: 0; } .pro-overlay { position: fixed; inset: 0; z-index: 998; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 7, 8, 0); opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; } .pro-overlay[hidden] { display: none; } .pro-overlay.is-visibile { opacity: 1; background: rgba(6, 7, 8, 0.72); backdrop-filter: blur(6px); } .pro-card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 10px; padding: 2.2rem 2rem; transform: translateY(14px) scale(0.98); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .pro-overlay.is-visibile .pro-card { transform: translateY(0) scale(1); opacity: 1; } .pro-chiudi { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-primary); cursor: pointer; font-size: 14px; line-height: 1; } .pro-chiudi:hover { border-color: var(--red); color: var(--red); } .pro-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-dark); background: rgba(240, 180, 41, 0.15); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin: 0 0 14px; } .pro-card h2 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 10px; } .pro-card > p.pro-sub { color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; margin: 0 0 1.5rem; } .pro-feature-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 16px; } .pro-feature-list li { display: flex; align-items: flex-start; gap: 12px; } .pro-feature-icona { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-alt); font-size: 16px; } .pro-feature-list strong { display: block; font-size: 14.5px; margin-bottom: 2px; } .pro-feature-list span { color: var(--text-secondary); font-size: 13.5px; line-height: 1.45; } .pro-azioni { text-align: center; border-top: 1px solid var(--border); padding-top: 1.5rem; } .pro-azioni .btn { width: 100%; } .pro-azioni .btn[disabled] { opacity: 0.55; cursor: default; } .pro-nota { color: var(--text-muted); font-size: 12.5px; margin: 10px 0 0; } @media (max-width: 640px) { .btn-pro span.btn-pro-testo { display: none; } .pro-card { padding: 1.75rem 1.4rem; } } .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 1rem 0 0; } .info-grid .campo-etichetta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 2px; } .info-grid .campo-valore { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; } .info-grid .campo-full { grid-column: 1 / -1; } @media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } } /* Tabella organizzatore */ .admin-tabs { display: flex; gap: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; position: sticky; top: 61px; z-index: 9; background: var(--bg); padding: 10px 0; } .admin-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; cursor: pointer; background: var(--surface); transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s; } .admin-tab:hover:not(.is-attivo) { border-color: var(--text-secondary); color: var(--text-primary); } .admin-tab.is-attivo { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 2px 10px rgba(226,35,31,0.3); } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--font-body); } .admin-tab.is-attivo .tab-badge { background: #fff; color: var(--red); } .tab-badge[hidden] { display: none; } .admin-panel { display: none; } .admin-panel.is-attivo { display: block; } .actions-cell { display: flex; gap: 8px; } .actions-cell .btn { padding: 6px 12px; font-size: 13px; } .subsection-head { margin: 2.5rem 0 1rem; } .subsection-head h3 { font-size: 1.15rem; margin-bottom: 4px; } /* Super admin: card ente */ .ente-card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1.4rem; margin-bottom: 16px; } .ente-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; } .ente-card-ordine { display: flex; flex-direction: column; gap: 4px; } .ente-card-ordine .btn { padding: 2px 10px; font-size: 13px; line-height: 1.4; } .ente-card-ordine .btn:disabled { opacity: 0.3; cursor: not-allowed; } .ente-card-logo { width: 56px; height: 56px; border-radius: 4px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .ente-card-logo img { max-width: 100%; max-height: 100%; } .ente-card-titolo h3 { font-size: 1.1rem; } .ente-card-titolo p { color: var(--text-secondary); font-size: 13px; margin: 2px 0 0; } .ente-card-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; } .ente-card-riga input[type="text"], .ente-card-riga input[type="email"], .ente-card-riga input[type="password"] { background: var(--surface-alt); color: var(--text-primary); border: 1px solid var(--border); border-radius: 3px; padding: 7px 10px; font-size: 13px; } .ente-card-admin-list { color: var(--text-secondary); font-size: 13px; margin: 6px 0 0; } .categorie-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; } .categoria-check { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 6px 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .categoria-check input { accent-color: var(--red); cursor: pointer; } .categoria-pill { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 6px 8px 6px 10px; font-size: 13px; color: var(--text-secondary); } .categoria-pill button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; } .categoria-pill button:hover { color: var(--red); } @media (max-width: 640px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } }