/* --- Stili CSS Neumorfici Modificati v3 - con .rc-styled-box --- */ /* --- Font Strategy: Oswald (600) per Titoli/Legend, Roboto Condensed (400/700) per Testo/Controlli --- */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Roboto+Condensed:wght@400;500;700&display=swap'); html { scroll-behavior: smooth; } #rc-calculator-wrapper input, #feedback-container input { caret-color: #003049; /* Blu scuro */ } /* Stili base per il wrapper con font di default */ .neumorphic-form-wrapper { margin: 0 auto; /* Aggiunto auto per centrare */ max-width: 850px; /* Spostato qui per coerenza */ background: #FFFFFF00; font-family: 'Roboto Condensed', sans-serif; /* DEFAULT FONT */ font-weight: 500; /* Default weight */ padding: 10px; color: #333; } /* Stili generali applicati SOLO DENTRO IL WRAPPER */ .neumorphic-form-wrapper label, .neumorphic-form-wrapper input, .neumorphic-form-wrapper button, .neumorphic-form-wrapper select, .neumorphic-form-wrapper textarea, .subscription-box label, .subscription-box input, .subscription-box select, .subscription-box textarea { display: block; width: 100%; padding: 0; border: none; outline: none; box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; /* Eredita o specifica */ } /* Etichette generali DENTRO IL WRAPPER */ #rc-calculator-wrapper label, #feedback-container label, .subscription-box label { margin-bottom: 4px; text-align: left; color: #555; font-size: 16px; font-weight: 700; margin-top: 15px; } /* Etichette dentro Lead Gen */ #rc-calculator-wrapper #lead-gen-container label:not(.inline-label):not(.radio-group label) { color: #7DA0CA; /* Blu chiaro */ font-weight: 700; /* Anche qui */ } #rc-calculator-wrapper *:not(legend) > label:first-of-type { margin-top: 0; } /* Placeholder DENTRO IL WRAPPER */ #rc-calculator-wrapper input::placeholder { color: gray; font-family: 'Roboto Condensed', sans-serif; font-weight: 500; /* Placeholder più leggero */ } /* Stile base Input/Select/Textarea DENTRO IL WRAPPER */ #rc-calculator-wrapper input[type="text"], #rc-calculator-wrapper input[type="number"], #rc-calculator-wrapper input[type="date"], #rc-calculator-wrapper input[type="email"], #rc-calculator-wrapper input[type="tel"], #rc-calculator-wrapper select, #rc-calculator-wrapper textarea, #feedback-container input[type="text"], #feedback-container input[type="email"], #feedback-container input[type="tel"], #feedback-container textarea, .subscription-box input[type="text"], .subscription-box input[type="email"], .subscription-box input[type="tel"], .subscription-box textarea, .sidebar-right #subscription-form textarea { background: #ecf0f3; padding: 10px; padding-left: 20px; height: 50px; font-size: 18px; font-weight: 500; /* Peso standard per input */ border-radius: 50px; box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px white; margin-bottom: 10px; color: #333; border: 1px solid transparent; transition: all 0.2s ease-in-out; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: 'Roboto Condensed', sans-serif; /* Esplicito per sicurezza */ } /* Stile Focus Input (Normale) DENTRO IL WRAPPER */ #rc-calculator-wrapper input:focus, #rc-calculator-wrapper select:focus, #rc-calculator-wrapper textarea:focus, .subscription-box input:focus { border-color: transparent; outline: 0; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* Stile Input Invalidi (Sempre) DENTRO IL WRAPPER - MANTENUTO ROSSO */ #rc-calculator-wrapper input[aria-invalid="true"], #rc-calculator-wrapper select[aria-invalid="true"], #rc-calculator-wrapper textarea[aria-invalid="true"] { border-color: #d32f2f !important; box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px white, 0 0 0 2px rgba(211, 47, 47, 0.25) !important; } /* --- Stile per Input Obbligatori Vuoti/Invalidi (NON in focus) --- */ #rc-calculator-wrapper input:required:invalid:not(:focus), #rc-calculator-wrapper select:required:invalid:not(:focus), #rc-calculator-wrapper textarea:required:invalid:not(:focus), #feedback-container input:required:invalid:not(:focus), /* Aggiunto per coerenza feedback form */ .subscription-box input:required:invalid:not(:focus) { /* Aggiunto per coerenza subscription form */ /* Usa il rosso del brand come bordo sottile */ border: 1px solid #f7262d; /* Opzionale: Aggiunge un'ombra interna rossa molto leggera per maggiore visibilità */ box-shadow: inset 1px 1px 3px rgba(247, 38, 45, 0.2), inset 2px 2px 5px #cbced1, inset -5px -5px 10px white; } #rc-calculator-wrapper textarea, #feedback-container textarea, .subscription-box textarea, .sidebar-right #subscription-form textarea { width: 100%; box-sizing: border-box; height: auto; min-height: 100px; border-radius: 20px; resize: vertical; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; } /* Freccia Select DENTRO IL WRAPPER */ #rc-calculator-wrapper select { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 15px center; background-size: 20px; padding-right: 40px; font-family: 'Roboto Condensed', sans-serif; /* Esplicito */ font-weight: 400; } /* Nuovo stile base, si applica a ENTRAMBI i contenitori */ #rc-calculator-wrapper button, #feedback-container button { color:#61677C; margin-top: 20px; background: #ecf0f3; height: 45px; border-radius: 25px; cursor: pointer; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1em; box-shadow: -5px -5px 20px white, 5px 5px 20px #cbced1; transition: all 0.2s ease-in-out; letter-spacing: 0.5px; border: 0; outline: 0; text-shadow: 1px 1px 0 white; } #rc-calculator-wrapper button:hover, #feedback-container button:hover { box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } #rc-calculator-wrapper button:active, #feedback-container button:active { box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* --- SEZIONI CON NUOVA PALETTE --- */ /* 1. Titoli (H*) e Legend DENTRO IL WRAPPER - Usa Oswald */ #rc-calculator-wrapper h1, #rc-calculator-wrapper h2, #rc-calculator-wrapper h3, #rc-calculator-wrapper h4 { font-family: 'Oswald', sans-serif; /* FONT TITOLI */ font-weight: 600; /* Usa peso importato */ color: #003049; text-shadow: none; } #rc-calculator-wrapper h2 { font-size: 2rem !important; /* Forza la dimensione normale QUI */ text-align: center; margin-bottom: 40px; margin-top: -40px; } #rc-calculator-wrapper h3 { font-size: 1.6rem; text-align: center; margin-bottom: 20px; margin-top: 0; } #rc-calculator-wrapper h4 { font-size: 1.2rem; text-align: left; margin-bottom: 15px; margin-top: 15px; color: #003049; padding-bottom: 8px; /* Eredita font Oswald */ } .neumorphic-form-wrapper legend, .approfondimento-box legend, .subscription-box legend { font-family: 'Oswald', sans-serif; /* FONT LEGEND */ font-weight: 600; /* Usa peso importato */ font-size: 1.3rem; color: #ecf0f3; text-shadow: none; text-align: left; background-color: #003049; padding: 8px 20px; border-radius: 12px; box-shadow: 3px 3px 8px #cbced1, -3px -3px 8px white; display: inline-flex; align-items: center; gap: 10px; width: auto; margin-left: 0px; margin-bottom: 0; position: relative; top: -10px; transition: box-shadow 0.3s ease; } /* 2. Accenti Form (Checkbox/Radio) DENTRO IL WRAPPER */ #rc-calculator-wrapper input[type="checkbox"], #feedback-container input[type="checkbox"], .subscription-box input[type="checkbox"], #rc-calculator-wrapper input[type="radio"] { display: inline-block; width: auto; height: auto; margin-right: 8px; box-shadow: none; vertical-align: middle; flex-shrink: 0; accent-color: #003049; appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; border-radius: initial; height: initial; padding: initial; background: initial; box-shadow: none; margin-bottom: initial; } /* Nuova regola, si applica a ENTRAMBI i contenitori e forza l'allineamento a sinistra */ #rc-calculator-wrapper label.inline-label, #feedback-container label.inline-label, .subscription-box label.inline-label, #rc-calculator-wrapper .radio-group label { display: flex; align-items: center; justify-content: flex-start; /* Allinea a sinistra */ width: 100%; margin-top: 10px; margin-bottom: 10px; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; cursor: pointer; font-size: 0.9em; text-align: left; color: #444; } /* Etichette dentro Lead Gen */ #rc-calculator-wrapper #lead-gen-container label.inline-label, #rc-calculator-wrapper #lead-gen-container .radio-group label { color: #003049; font-weight: 400; /* Mantiene peso standard */ } #rc-calculator-wrapper #lead-gen-container #lead_consent a { color: #003049; } /* 3. Bottone Calcolo DENTRO IL WRAPPER (specifico per form) */ /* Nuovo stile per il bottone primario, si applica a ENTRAMBI */ #rc-calculator-wrapper #mainForm button[type="submit"], #feedback-container #feedback-form button[type="submit"] { color: white; background: #003049; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-shadow: none; } /* Aggiungiamo un effetto hover coerente per entrambi */ #rc-calculator-wrapper #mainForm button[type="submit"]:hover, #feedback-container #feedback-form button[type="submit"]:hover { background: #7DA0CA; /* Usa il blu chiaro per l'hover */ } /* Unifichiamo anche l'effetto active */ #rc-calculator-wrapper #mainForm button[type="submit"]:active, #feedback-container #feedback-form button[type="submit"]:active { background: #003049; /* Torna al blu scuro quando premuto */ } /* Stile per il pulsante Salva, uniforme al pulsante primario */ #rc-calculator-wrapper #save-calculation-btn { color: white; background: #003049; text-shadow: none; } #rc-calculator-wrapper #save-calculation-btn:hover { background: #7DA0CA; } /* --- Stili per i Box Principali (Risultati, AI, Lead Gen) --- */ /* CLASSE CONDIVISA per i box principali */ #rc-calculator-wrapper .rc-styled-box { padding: 30px; margin-top: 40px; margin-bottom: 40px; /* Spaziatura uniforme tra i box */ border-radius: 20px; background: #a9d6e5; box-shadow: 10px 10px 16px #cbced1, -10px -10px 16px white; color: #003049; text-align: left; max-width: 850px; margin-left: auto; margin-right: auto; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; box-sizing: border-box; } #rc-calculator-wrapper .rc-styled-box:last-of-type { margin-bottom: 0; /* Rimuove margine extra all'ultimo box */ } /* Regole specifiche per il box dei risultati */ #rc-calculator-wrapper #risultato-container p strong { color: #021024; font-weight: 700; } #rc-calculator-wrapper #risultato-container .importo-finale { font-weight: 700; font-size: 1.6em; color: #021024; text-align: center; margin-top: 20px; background-color: #ecf0f3; padding: 15px; border-radius: 15px; box-shadow: inset 4px 4px 6px #7DA0CA, inset -4px -4px 6px #FFF; border: 1px solid #7DA0CA; } /* Colore per HR */ #rc-calculator-wrapper #risultato-container hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(5, 38, 89, 0), rgba(5, 38, 89, 0.75), rgba(5, 38, 89, 0)); margin: 25px 0; } /* Nuova classe per gli HR rossi */ .hr-accent { border: 0; height: 1px; background-image: none; background-color: #f7262d; margin: 25px 0; } /* REINTEGRO STILI PER DISCLAIMER E NOTE CHE AVEVO RIMOSSO PER ERRORE */ #rc-calculator-wrapper #risultato-container .disclaimer, #rc-calculator-wrapper #risultato-container .nota-calcolo, #rc-calculator-wrapper #nota-metodologia-container { margin-top: 25px; font-size: 0.875em; background-color: rgba(255, 255, 255, 0.6); border: 1px solid #7DA0CA; padding: 15px; border-radius: 10px; line-height: 1.6; } #rc-calculator-wrapper #risultato-container details > summary { cursor: pointer; font-weight: 700; /* Bold */ margin-bottom: 10px; color: #003049; } #rc-calculator-wrapper #risultato-container details[open] > summary { margin-bottom: 15px; } #rc-calculator-wrapper #risultato-container details ul { padding-left: 20px; margin-top: 10px; } #rc-calculator-wrapper #risultato-container details li { margin-bottom: 8px; line-height: 1.5; } #rc-calculator-wrapper .dettaglio-calcolo { font-size: 0.85em; color: #003049; display: block; margin-top: 4px; } #rc-calculator-wrapper .dettaglio-punti { font-size: 0.9em; margin: 5px 0; } /* ===== INIZIO MODIFICA PER DEMO VIDEO ===== */ #lead-gen-container { display: none !important; } /* ===== FINE MODIFICA PER DEMO VIDEO ===== */ /* Regole specifiche per il box di lead generation */ #rc-calculator-wrapper #lead-gen-container { text-align: center; background: #ecf0f3; /* Sfondo come i fieldset */ box-shadow: 8px 8px 15px #cbced1, -8px -8px 15px white; /* Ombra come i fieldset */ color: #333; /* Colore testo standard per coerenza con lo sfondo */ } #rc-calculator-wrapper #lead-gen-container button { /* Bottone Invia Consulenza */ background: #003049; min-width: 250px; width: auto; color: #fff; text-shadow: none; height: 45px; border-radius: 25px; cursor: pointer; font-family: 'Roboto Condensed', sans-serif; /* Esplicito */ font-weight: 700; /* Bold */ font-size: 1em; transition: all 0.2s ease-in-out; letter-spacing: 0.5px; border: 0; outline: 0; margin-top: 0; padding: 0 30px; /* Eredita ombra neumorfica da regola base button */ } #rc-calculator-wrapper #lead-gen-container button:hover { background: #7DA0CA; } #rc-calculator-wrapper #lead-gen-container button:active { background: #003049; } #rc-calculator-wrapper #lead-gen-container button:disabled { cursor: not-allowed; opacity: 0.65; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } #rc-calculator-wrapper #lead-gen-feedback { margin-top: 15px; font-weight: 700; min-height: 20px; text-align: center; color: #003049; font-family: 'Roboto Condensed', sans-serif; } #rc-calculator-wrapper #lead-gen-container label[for="lead_consent"] { justify-content: center; width: 100%; margin-top: 15px; font-weight: 400; /* Testo consenso standard */ } #rc-calculator-wrapper #lead-gen-container label[for="lead_consent"] span { flex: initial; margin-left: 5px; } #rc-calculator-wrapper #lead-gen-container label[for="lead_consent"] input[type="checkbox"] { margin: 0 5px 0 0; vertical-align: middle; } /* ===== INIZIO BLOCCO DA AGGIUNGERE ===== */ /* --- Stili per Campi Dinamici Inabilità Temporanea (MODIFICATO) --- */ /* Contenitore di una riga dinamica di IT */ #rc-calculator-wrapper .dynamic-it-row { position: relative; /* Necessario per posizionare il pulsante "X" */ /* Il padding-right è ancora utile per non far sovrapporre il testo al bottone */ padding-right: 0px; } /* Pulsante "X" per Rimuovere Periodo (Stile da Calcolatore Interessi) */ #rc-calculator-wrapper .remove-it-row-btn { position: absolute; top: 25%; /* << MODIFICATO */ transform: translateY(-50%); /* << AGGIUNTO */ right: 0px; /* << MODIFICATO */ padding: 0; cursor: pointer; border: none; background-color: #ecf0f3; color: #d32f2f; border-radius: 50%; font-size: 1.3em; font-weight: bold; width: 30px; height: 30px; line-height: 30px; /* Mantenuto per compatibilità */ text-align: center; box-shadow: 3px 3px 6px #cbced1, -3px -3px 6px white; transition: all 0.2s ease-in-out; text-shadow: none; display: flex; justify-content: center; align-items: center; margin-top: 0; /* Sovrascrive il margine generale dei bottoni */ } #rc-calculator-wrapper .remove-it-row-btn:hover { color: #c82333; box-shadow: 2px 2px 4px #cbced1, -2px -2px 4px white; } #rc-calculator-wrapper .remove-it-row-btn:active { color: #c82333; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* --- LAYOUT, GRIGLIA E UTILITY --- */ .neumorphic-form-wrapper fieldset, .approfondimento-box fieldset, .subscription-box fieldset { border: none; padding: 25px; padding-top: 25px; padding-bottom: 1px; margin-bottom: 45px; border-radius: 20px; background: #ecf0f3; box-shadow: 8px 8px 15px #cbced1, -8px -8px 15px white; transition: box-shadow 0.3s ease; position: relative; } #rc-calculator-wrapper fieldset > legend + * { margin-top: 0px; } #rc-calculator-wrapper form#mainForm { max-width: 850px; margin: 0 auto; } #rc-calculator-wrapper .buttons-container, #feedback-container .buttons-container { display: flex; justify-content: center; margin-top: 10px; margin-bottom: 0px; padding-top: 20px; border-top: none; } /* Nuovo stile per le dimensioni, si applica a ENTRAMBI */ #rc-calculator-wrapper .buttons-container button, #feedback-container .buttons-container button { margin-top: 0; width: auto; min-width: 250px; padding: 0 30px; } #rc-calculator-wrapper .hidden-field { display: none; } #rc-calculator-wrapper .row, #feedback-container .row, .subscription-box .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; margin-bottom: 5px; } #rc-calculator-wrapper .col-half, #feedback-container .col-half, .subscription-box .col-half, #rc-calculator-wrapper .col-third, #feedback-container .col-third, .subscription-box .col-third, #rc-calculator-wrapper .col-quarter, #feedback-container .col-quarter, .subscription-box .col-quarter, #rc-calculator-wrapper .col-full, #feedback-container .col-full, .subscription-box .col-full { position: relative; padding-left: 15px; padding-right: 15px; box-sizing: border-box; margin-bottom: 10px; } /* Raggruppiamo i selettori per applicare le stesse regole a entrambi i contenitori */ #rc-calculator-wrapper .col-half, #feedback-container .col-half, .subscription-box .col-half { flex: 1 1 50%; max-width: 50%; } #rc-calculator-wrapper .col-third, #feedback-container .col-third, .subscription-box .col-third { flex: 1 1 33.333%; max-width: 33.333%; } #rc-calculator-wrapper .col-quarter, #feedback-container .col-quarter, .subscription-box .col-quarter { flex: 1 1 25%; max-width: 25%; } #rc-calculator-wrapper .col-full, #feedback-container .col-full, .subscription-box .col-full { flex: 1 1 100%; max-width: 100%; } #rc-calculator-wrapper .col-quarter > label { font-size: 14px; } /* MODIFICA: Bordo sinistro per le note */ #rc-calculator-wrapper .input-hint { font-size: 0.8em; color: #666; text-align: left; margin-top: -5px; margin-bottom: 10px; margin-left: 3px; padding-left: 10px; display: block; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; line-height: 1.4; border-left: 3px solid #f7262d; } #rc-calculator-wrapper .error-message { padding: 12px 18px; border: 1px solid #e57373; color: #d32f2f; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; background-color: #ffcdd2; border-radius: 10px; margin: 1em 0; text-align: left; box-shadow: inset 3px 3px 5px #ef9a9a, inset -3px -3px 5px #ffffff; } #rc-calculator-wrapper .error-message ul { margin: 10px 0 0 20px; padding: 0; } #rc-calculator-wrapper .error-message li { margin-bottom: 5px; } /* Stile specifico per il bottone "+ Aggiungi Periodo IT" per renderlo più corto e centrato */ #rc-calculator-wrapper #add-it-row-btn { display: block; /* Assicura che sia un elemento a blocco */ width: auto; /* Annulla 'width: 100%' e adatta la larghezza al contenuto */ padding-left: 40px; /* Aggiunge spazio interno per una larghezza gradevole */ padding-right: 40px; /* Aggiunge spazio interno per una larghezza gradevole */ margin-left: auto; /* Centra il pulsante */ margin-right: auto; /* Centra il pulsante */ } /* ===== INIZIO STILI PER DANNO PARENTALE DINAMICO ===== */ /* Contenitore di una riga dinamica di una Vittima */ #rc-calculator-wrapper .dynamic-vittima-row { position: relative; border: none; border-radius: 15px; padding: 20px; padding-top: 20px; /* Spazio per l'header */ padding-bottom: 10px; margin-bottom: 25px; background-color: none; box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px white; } /* Header per ogni blocco vittima */ #rc-calculator-wrapper .vittima-header { position: absolute; top: 15px; left: 20px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.2em; color: #003049; } /* Pulsante Rimuovi Vittima (posizionato nell'angolo in alto a destra) */ #rc-calculator-wrapper .remove-vittima-btn { position: absolute; top: -15px; right: -15px; padding: 0; cursor: pointer; border: none; background-color: #ecf0f3; color: #d32f2f; border-radius: 50%; font-size: 1.4em; font-weight: bold; width: 30px; height: 30px; text-align: center; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; transition: all 0.2s ease-in-out; text-shadow: none; display: flex; justify-content: center; align-items: center; margin-top: 0; } #rc-calculator-wrapper .remove-vittima-btn:hover { color: #c82333; box-shadow: -1px -1px 3px white, 1px 1px 3px #cbced1; } #rc-calculator-wrapper .remove-vittima-btn:active { box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* Bottone per aggiungere una vittima (stile come quello IT) */ #rc-calculator-wrapper #add-vittima-btn { display: block; width: auto; padding: 0 40px; margin-left: auto; margin-right: auto; margin-bottom: 20px; } /* ===== FINE STILI PER DANNO PARENTALE DINAMICO ===== */ /* --- Stili Sezione AI --- */ #rc-calculator-wrapper #rc-ai-assistant-button { background: #003049; color: white; text-shadow: none; } #rc-calculator-wrapper #rc-ai-assistant-button:hover { background: #7DA0CA; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } #rc-calculator-wrapper #rc-ai-assistant-button:active { background: #003049; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } #rc-calculator-wrapper #rc-ai-analysis-container { margin-top: 30px; } #rc-calculator-wrapper #ai-report-content { line-height: 1.6; } /* STILI DEFINITIVI PER INTERFACCIA AI (SPINNER + NAV) */ /* --- 1. Stili per la Rotellina di Caricamento --- */ @keyframes rc-spinner-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Stile base del contenitore della rotellina */ #rc-calculator-wrapper #ai-loading-indicator { opacity: 0; visibility: hidden; position: absolute; /* Posizionamento assoluto per centrarla nel box */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centratura perfetta */ transition: opacity 0.3s ease, visibility 0.3s ease; } /* Stile dell'icona SVG della rotellina */ #rc-calculator-wrapper #ai-loading-indicator svg { animation: rc-spinner-spin 1s linear infinite; } /* Quando il contenitore principale ha la classe .is-loading... */ #rc-calculator-wrapper #ai-analysis-container.is-loading { position: relative; /* Necessario per il posizionamento assoluto del figlio */ min-height: 150px; /* Altezza minima per contenere la rotellina */ } #rc-calculator-wrapper #ai-analysis-container.is-loading #ai-loading-indicator { opacity: 1; /* ... la rotellina diventa visibile... */ visibility: visible; } #rc-calculator-wrapper #ai-analysis-container.is-loading #ai-report-content, #rc-calculator-wrapper #ai-analysis-container.is-loading #ai-nav-bar { display: none; /* ...e il resto del contenuto scompare. */ } /* --- 2. Stili per la Barra di Navigazione dell'Analisi --- */ /* Contenitore generale della navigazione */ #rc-calculator-wrapper #ai-nav-bar { display: flex; flex-direction: column; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #7DA0CA; margin-bottom:15px; } /* Contenitore del titolo (centrato) */ #rc-calculator-wrapper #ai-analysis-header { text-align: center; margin-bottom: 5px; } /* Titolo H4 dell'analisi */ #rc-calculator-wrapper #ai-analysis-title { text-align: center; margin: 0 0 5px 0; padding: 0; border-bottom: none; /* Sovrascrive lo stile generico degli h4 */ font-size: 1.4em; font-weight: bold; } /* Contatore "Analisi X di Y" */ #rc-calculator-wrapper #ai-analysis-counter { font-size: 0.9em; color: #003049; } /* Contenitore dei bottoni (centrato con Flexbox) */ #rc-calculator-wrapper .ai-nav-buttons-container { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 15px; /* Margine/spazio tra il titolo e i bottoni */ } /* Stile dei bottoni freccia */ #rc-calculator-wrapper .ai-nav-button { width: 40px; height: 40px; font-size: 24px; line-height: 38px; padding: 0; margin-top: 0; /* Sovrascrive il margine generale */ flex-shrink: 0; background-color: #ecf0f3; color: #003049; border: 1px solid #cbced1; border-radius: 50%; cursor: pointer; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; transition: all 0.2s ease-in-out; text-shadow: none; } #rc-calculator-wrapper .ai-nav-button:hover { box-shadow: none; background-color: #a9d6e5; border-color: #003049; } #rc-calculator-wrapper .ai-nav-button:disabled { opacity: 0.5; cursor: not-allowed; background: #e0e0e0; color: #bbb; border-color: #e0e0e0; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* ===== INIZIO BLOCCO DA AGGIUNGERE (STILI REPORT AI) ===== */ #rc-calculator-wrapper #ai-analysis-container { margin-top: 30px; padding-top: 30px; border-top: 1px solid #7DA0CA; /* Aggiunge una linea di separazione blu chiaro */ } #rc-calculator-wrapper #ai-report-content h4 { font-family: 'Oswald', sans-serif !important; color: #003049 !important; font-size: 1.3rem !important; margin-top: 25px !important; margin-bottom: 15px !important; border-bottom: 1px solid #7DA0CA !important; padding-bottom: 8px !important; text-align: left; /* Assicura l'allineamento a sinistra */ } #rc-calculator-wrapper #ai-report-content h4:first-of-type { margin-top: 0 !important; } #rc-calculator-wrapper #ai-report-content ul { list-style: none !important; padding-left: 15px !important; margin-bottom: 15px !important; } #rc-calculator-wrapper #ai-report-content li { position: relative !important; padding-left: 25px !important; margin-bottom: 12px !important; line-height: 1.6 !important; font-family: 'Roboto Condensed', sans-serif !important; color: #333; /* Colore standard del testo del form */ } #rc-calculator-wrapper #ai-report-content li::before { content: '✓'; position: absolute; left: 0; top: 2px; color: #f7262d; /* Colore accento rosso */ font-weight: bold; font-size: 1.1em; } #rc-calculator-wrapper #ai-report-content strong { font-weight: 700 !important; color: #021024 !important; } /* ===== FINE BLOCCO DA AGGIUNGERE ===== */ /* ===== STILI COERENTI PER AUTH CONTAINER ===== */ #auth-container fieldset { border: none; padding: 25px; padding-top: 35px; padding-bottom: 15px; margin-top: 70px; margin-bottom: 25px; border-radius: 20px; background: #ecf0f3; box-shadow: 8px 8px 15px #cbced1, -8px -8px 15px white; transition: box-shadow 0.3s ease; position: relative; } #auth-container legend { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.3rem; color: #ecf0f3; text-shadow: 0px 0px 0px rgba(255,255,255,0.7); text-align: left; background-color: #003049; padding: 8px 20px; border-radius: 12px; box-shadow: 3px 3px 8px #cbced1, -3px -3px 8px white; display: inline-block; width: auto; margin-left: 0; margin-bottom: 10px; position: relative; top: -10px; transition: box-shadow 0.3s ease; } /* Applica lo stile neumorfico standard agli input nel container di autenticazione */ #auth-container input[type="text"], #auth-container input[type="email"], #auth-container input[type="password"] { background: #ecf0f3; padding: 10px; padding-left: 20px; height: 50px; font-size: 18px; font-weight: 500; border-radius: 50px; box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px white; margin-bottom: 10px; color: #333; border: 1px solid transparent; transition: all 0.2s ease-in-out; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: 'Roboto Condensed', sans-serif; width: 100%; box-sizing: border-box; } #auth-container input:focus { border-color: transparent; outline: 0; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* Stile per le etichette, coerente con il calcolatore principale */ #auth-container label { display: block; width: 100%; box-sizing: border-box; margin-bottom: 4px; text-align: left; color: #555; font-size: 16px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; margin-top: 15px; } /* Stile per il bottone primario, coerente con "Calcola" */ #auth-container button[type="submit"] { color: white; background: #003049; /* Blu scuro primario */ font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.1rem; text-shadow: none; border-radius: 25px; box-shadow: -5px -5px 20px white, 5px 5px 20px #cbced1; transition: all 0.2s ease-in-out; letter-spacing: 0.5px; border: 0; outline: 0; cursor: pointer; width: 100%; height: 45px; margin-top: 20px; margin-bottom: 0; padding: 0 30px; } #auth-container button[type="submit"]:hover { background: #7DA0CA; /* Blu chiaro per hover */ box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } #auth-container button[type="submit"]:active { background: #003049; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* Stile per i link "Registrati ora / Accedi" */ .auth-toggle-link { text-align: center; font-size: 0.9em; margin-top: 25px; } .auth-toggle-link a { color: #003049; font-weight: 700; text-decoration: none; } .auth-toggle-link a:hover { text-decoration: underline; } /* Rende il contenitore dei bottoni flessibile e centrato */ #auth-container .buttons-container { display: flex; justify-content: center; margin-top: 30px; margin-bottom: 10px; padding-top: 0; border-top: none; } /* Uniforma lo stile del messaggio di errore a quello del calcolatore */ #auth-feedback { margin-top: 20px; text-align: center; } /* Regola il titolo principale del box di autenticazione */ #auth-container h2 { font-family: 'Oswald', sans-serif; /* Assicura il font corretto */ font-size: 4rem; /* Leggermente più piccolo del titolo principale del calcolatore */ margin-bottom: 8px; /* Riduce lo spazio sotto al titolo */ text-align: center; } /* Stile per i titoli dei singoli form (Login/Register) */ #auth-container form h4 { display: none; } /* Stile per il testo in basso con il link per cambiare form */ #auth-container form p { font-family: 'Roboto Condensed', sans-serif; /* Assicura il font corretto */ text-align: center; margin-top: 20px; font-size: 0.95em; color: #333; /* Colore più scuro per una migliore leggibilità */ } /* Stile specifico per il link nel testo in basso */ #auth-container form p a { color: #003049; /* Usa il colore primario del tema */ font-weight: 700; /* Lo rende più evidente */ text-decoration: none; } #auth-container form p a:hover { text-decoration: underline; } /* Stile per il messaggio di blocco funzionalità IA */ .ai-lock-message { display: flex; align-items: center; margin-top: 25px; padding: 15px 20px; border-radius: 12px; background-color: rgba(0, 48, 73, 0.05); /* Sfondo leggero a tema */ border: 1px solid rgba(0, 48, 73, 0.1); color: #003049; /* Colore testo a tema */ } .ai-lock-message p { font-size: 0.9em; text-align: left; margin-bottom: 0; } /* Stile per il disclaimer nella pagina di autenticazione */ .auth-disclaimer { margin-top: 30px; padding: 15px; padding-left: 18px; background-color: rgba(0, 48, 73, 0.04); border-left: 4px solid #f7262d; border-radius: 0 8px 8px 0; font-size: 0.9rem; line-height: 1.6; text-align: left; color: #333; } .auth-disclaimer strong { color: #003049; } .auth-disclaimer a { color: #003049; font-weight: 500; } /* ========================================================= */ /* Stili Testo Descrittivo e Badge (Auth Container) /* ========================================================= */ /* Contenitore principale del testo per allineare i font */ #auth-container .auth-description { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; } /* Paragrafi del testo descrittivo */ #auth-container .auth-description p { font-size: 1rem; line-height: 1.65; color: #333; } /* Titolo 'Un Ecosistema...' */ #auth-container .auth-description h4 { font-family: 'Oswald', sans-serif; font-weight: 600; color: #003049; font-size: 1.3rem; letter-spacing: 0.5px; } /* MODIFICA: Colore per HR nella descrizione Auth */ #auth-container .auth-description hr { border: 0; height: 1px; background-image: none; background-color: #f7262d; margin: 25px 0; } /* Stile per i Badge (versione Neumorfica, come i bottoni) */ .badge { display: inline-block; background: #7DA0CA; /* Sfondo base neumorfico */ color: #fff; /* Colore testo dei bottoni */ padding: 8px 16px; border-radius: 25px; /* Stessa curvatura dei bottoni */ font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 0.9em; margin: 4px; border: none; /* Rimuove il bordo colorato precedente */ text-shadow: none; /* Ombra testo per effetto 3D */ box-shadow: -4px -4px 10px white, 4px 4px 10px #cbced1; /* Ombra principale 3D */ transition: all 0.2s ease-in-out; cursor: default; /* Indica che non è un elemento cliccabile */ } .badge:hover { box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; /* Effetto hover più leggero, come i bottoni */ transform: none; /* Rimuove l'effetto di sollevamento non necessario */ } /* Stile per il box di switch tra Login e Registrazione */ #auth-container fieldset .form-switcher { font-family: 'Roboto Condensed', sans-serif; text-align: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(0, 48, 73, 0.15); font-size: 0.95em; color: #333; } #auth-container fieldset .form-switcher a { color: #003049; font-weight: 700; text-decoration: none; } #auth-container fieldset .form-switcher a:hover { text-decoration: underline; } /* ========================================================= */ /* Stili per User Bar e Navigazione Veloce /* ========================================================= */ /* --- Stile per la User Bar (Pagina Calcolatore) --- */ .user-bar { display: flex; justify-content: flex-end; align-items: center; padding: 10px 20px; margin-bottom: 20px; border-radius: 12px; font-family: 'Roboto Condensed', sans-serif; font-size: 0.95em; color: #333; } .user-bar span { margin-right: 15px; } .user-bar strong { color: #003049; font-weight: 700; } /* Stile per il bottone di Logout */ .btn-logout { width: auto !important; /* Sovrascrive stili precedenti */ min-width: 90px !important; height: 35px !important; padding: 0 15px; margin: 0 !important; /* Rimuove margini extra */ font-size: 0.9em !important; background: #ecf0f3; color: #61677C; border: none; box-shadow: -3px -3px 7px white, 3px 3px 7px #cbced1; display: inline-block !important; /* Assicura la visualizzazione corretta */ vertical-align: middle !important; } .btn-logout:hover { box-shadow: -1px -1px 3px white, 1px 1px 3px #cbced1 !important; } .btn-logout:active { box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white !important; } /* --- Stile per la Navigazione Veloce (Pagina Auth) --- */ .auth-top-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 25px; } .btn-quick-access { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; padding: 8px 20px; border-radius: 20px; text-decoration: none; font-size: 0.9em; transition: all 0.2s ease-in-out; border: 2px solid transparent; } /* Stile del pulsante non attivo (ghost) */ .btn-quick-access { background-color: transparent; border-color: #7DA0CA; color: #003049; } .btn-quick-access:hover { background-color: #a9d6e5; border-color: #003049; } /* Stile del pulsante attivo (evidenziato) */ .btn-quick-access.active { background-color: #003049; color: white; border-color: #003049; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } /* Evidenzia il pulsante della pagina attiva */ #register-form:not([style*="display: none"]) ~ #auth-container .auth-top-nav .show-register-link, #login-form:not([style*="display: none"]) ~ #auth-container .auth-top-nav .show-login-link { background-color: #003049; color: white; border-color: #003049; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } /* Stile per i link extra nel form (es. password dimenticata) */ .form-extra-links { text-align: right; margin-top: -5px; margin-bottom: 20px; padding-right: 5px; } .form-extra-links a { font-family: 'Roboto Condensed', sans-serif; font-size: 0.9em; color: #003049; text-decoration: none; } .form-extra-links a:hover { text-decoration: underline; } /* ========================================================= */ /* Stili per il Box di Feedback (Auth) /* ========================================================= */ .feedback-message { padding: 15px 20px; margin: 0 auto 25px auto; border-radius: 12px; font-family: 'Roboto Condensed', sans-serif; font-weight: 500; text-align: center; box-shadow: -3px -3px 7px white, 3px 3px 7px #cbced1; border: 1px solid transparent; min-height: 1em; position: relative; z-index: 10; } .feedback-message.success { background-color: #e6f7f0; color: #1d7a50; border-color: #a8d5c2; } .feedback-message.error { background-color: #ffcdd2; color: #d32f2f; border-color: #e57373; } /* Regola UNIFICATA e CORRETTA per le liste con bullet point */ .subscription-box .incentive-list, #auth-container .incentive-list { list-style: none; padding-left: 10px; margin-top: 25px; margin-bottom: 25px; } .subscription-box .incentive-list li, #auth-container .incentive-list li { padding-left: 20px; text-indent: -20px; margin-bottom: 10px; font-size: 0.95rem; line-height: 1.5; } .subscription-box .incentive-list li::before, #auth-container .incentive-list li::before { content: '●'; color: #f7262d; font-weight: bold; margin-right: 10px; } #subscription-container .incentive-list { list-style: none; padding-left: 10px; } /* Centra il titolo H4 nel modale Founder, lasciando il resto del testo a sinistra */ .subscription-box .watermark-section h4 { text-align: center; } /* ========================================================= */ /* Stili per il Footer del Sito /* ========================================================= */ .site-footer { background-color: #003049; /* Blu scuro del tema */ color: #ecf0f3; /* Testo chiaro del tema */ font-family: 'Roboto Condensed', sans-serif; padding: 40px 20px; text-align: center; margin: 60px -10px -35px -10px; border-radius: 20px 20px 0 0; } .site-footer .footer-content { max-width: 850px; margin: 0 auto 30px auto; } .site-footer h3 { font-family: 'Oswald', sans-serif; color: #fff; margin-top: 0; margin-bottom: 8px; font-size: 1.8rem; } .site-footer .footer-title { font-size: 1rem; color: #a9d6e5; /* Blu più chiaro per il sottotitolo */ margin-top: 0; margin-bottom: 20px; font-weight: 400; } .site-footer .footer-availability { font-size: 0.95rem; margin-bottom: 30px; } .site-footer .footer-contacts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px 25px; /* Spazio verticale e orizzontale tra i link */ } .site-footer .footer-contacts a { color: #ecf0f3; text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 20px; transition: background-color 0.3s ease, color 0.3s ease; } .site-footer .footer-contacts a:hover { background-color: #7DA0CA; color: #003049; } .site-footer .footer-bottom { border-top: 1px solid #7DA0CA; /* Linea di separazione con colore a tema */ padding-top: 20px; margin-top: 30px; font-size: 0.85rem; color: #a9d6e5; } .site-footer .footer-bottom p { margin: 0 0 10px 0; } .site-footer .footer-legal a { color: #a9d6e5; text-decoration: none; margin: 0 8px; } .site-footer .footer-legal a:hover { text-decoration: underline; } /* ===== INIZIO STILI PER PULSANTE E FORM FEEDBACK (NUOVI) ===== */ #show-feedback-btn { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #003049; color: white; border-radius: 50%; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.8), 5px 5px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-in-out; z-index: 1000; } #show-feedback-btn:hover { background: #7DA0CA; box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.8), 2px 2px 5px rgba(0, 0, 0, 0.2); } #show-feedback-btn:active { box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 2px rgba(255, 255, 255, 0.8); } #show-feedback-btn svg { width: 28px; height: 28px; stroke: white; } #feedback-container { padding-bottom: 40px; max-width: 850px; /* Mantiene la larghezza max del form principale */ margin: 40px auto 0 auto; } #feedback-container #feedback-response { color: #003049; font-family: 'Roboto Condensed', sans-serif; } /* ===== FINE STILI PER PULSANTE E FORM FEEDBACK ===== */ /* ===== STILI PER PULSANTE NUOVO CALCOLO ===== */ #new-calculation-btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: auto; /* Adatta la larghezza al contenuto */ height: 50px; /* Leggermente più basso per un look migliore */ padding: 0 25px; /* Aggiunge spazio laterale */ gap: 10px; /* Aggiunge spazio tra icona e testo */ background: #003049; color: white; border-radius: 25px; /* Crea la forma a pillola */ border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.8), 5px 5px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-in-out; z-index: 999; } #new-calculation-btn span { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.1em; line-height: 1; /* Assicura un allineamento verticale corretto */ } #new-calculation-btn:hover { background: #7DA0CA; } #new-calculation-btn svg { width: 28px; height: 28px; stroke: white; } /* ===== FINE STILI PER PULSANTE NUOVO CALCOLO ===== */ /* ========================================================= Stile Specifico per Checkbox Consenso Feedback ========================================================= */ #feedback-container label[for="feedback-consent"] { margin-top: -10px; } /* Stili per il nuovo layout a colonne */ .content-wrapper { display: flex; justify-content: center; gap: 30px; /* Spazio tra colonna principale e sidebar */ padding: 0 20px; /* Un po' di spazio laterale per il layout */ margin: 0 auto; align-items: flex-start; } .main-column { flex: 1; /* Permette alla colonna di crescere */ max-width: 700px; /* Mantiene la larghezza originale dei tuoi contenuti */ min-width: 0; /* Fix per elementi flessibili */ } .sidebar-right { flex-basis: 300px; flex-shrink: 0; position: sticky; top: 20px; align-self: flex-start; } /* 2. NUOVA REGOLA: Applica il margine di 90px solo al blocco di contenuti principali */ .sidebar-main-content { margin-top: 50px; /* La logica per lo spazio TRA gli elementi viene spostata qui */ display: flex; flex-direction: column; gap: 0px; } /* 3. Aggiorna la regola di reset per puntare ai figli del nuovo wrapper */ .sidebar-main-content > * { margin-top: 0; margin-bottom: 0; } /* ================================================================= STILI SPECIFICI PER I FORM DI AUTENTICAZIONE NELLA SIDEBAR - Questo blocco si applica solo ai form spostati a destra - ================================================================= */ /* Selettore principale: agisce solo su .auth-form-style dentro a .sidebar-right */ .sidebar-right .auth-form-style { max-width: 100%; /* Adatta la larghezza alla sidebar */ margin: 0 0 30px 0; } /* Stile per il fieldset nella sidebar */ .sidebar-right .auth-form-style fieldset, .sidebar-right #subscription-form fieldset { border: none; padding: 25px; padding-top: 35px; padding-bottom: 15px; margin-top: 50px; margin-bottom: 25px; border-radius: 20px; background: #ecf0f3; box-shadow: 8px 8px 15px #cbced1, -8px -8px 15px white; transition: box-shadow 0.3s ease; position: relative; } /* Stile per la legend nella sidebar */ .sidebar-right .auth-form-style legend, .sidebar-right #subscription-form legend { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.3rem; color: #ecf0f3; text-shadow: 0px 0px 0px rgba(255,255,255,0.7); text-align: left; background-color: #003049; padding: 8px 20px; border-radius: 12px; box-shadow: 3px 3px 8px #cbced1, -3px -3px 8px white; display: inline-block; width: auto; margin-left: 0; margin-bottom: 10px; position: relative; top: -10px; transition: box-shadow 0.3s ease; } /* Stile per gli input nella sidebar */ .sidebar-right .auth-form-style input[type="text"], .sidebar-right .auth-form-style input[type="email"], .sidebar-right .auth-form-style input[type="password"], .sidebar-right #subscription-form input[type="text"], .sidebar-right #subscription-form input[type="email"], .sidebar-right #subscription-form input[type="tel"] { background: #ecf0f3; padding: 10px; padding-left: 20px; height: 50px; font-size: 18px; font-weight: 500; border-radius: 50px; box-shadow: inset 2px 2px 5px #cbced1, inset -5px -5px 10px white; margin-bottom: 10px; color: #333; border: 1px solid transparent; transition: all 0.2s ease-in-out; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: 'Roboto Condensed', sans-serif; width: 100%; box-sizing: border-box; } .sidebar-right .auth-form-style input:focus { border-color: transparent; outline: 0; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* Stile per le label nella sidebar */ .sidebar-right .auth-form-style label, .sidebar-right #subscription-form label { display: block; width: 100%; box-sizing: border-box; margin-bottom: 4px; text-align: left; color: #555; font-size: 16px; font-weight: 700; font-family: 'Roboto Condensed', sans-serif; margin-top: 5px; } /* ======================================================== */ /* --- BLOCCO DEFINITIVO STILI BOTTONI SIDEBAR --- */ /* ======================================================== */ /* 1. Stile di BASE per TUTTI i bottoni nella sidebar. Dà la forma, l'ombra e il font neumorfico. */ .sidebar-right .auth-form-style button, .sidebar-right #subscription-form button { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; border-radius: 25px; box-shadow: -5px -5px 15px white, 5px 5px 15px #cbced1; transition: all 0.2s ease-in-out; letter-spacing: 0.5px; border: 0; outline: 0; cursor: pointer; width: 100%; height: 45px; margin-top: 0px; margin-bottom: 0; padding: 0 15px; /* Ridotto leggermente per testi lunghi */ background: #ecf0f3; /* Sfondo grigio di default */ color: #61677C; text-shadow: 1px 1px 0 white; } .sidebar-right .auth-form-style button:hover, .sidebar-right #subscription-form button:hover { box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } .sidebar-right .auth-form-style button:active, .sidebar-right #subscription-form button:active { box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* 2. Stili SPECIFICI che SOVRASCRIVONO i colori */ /* Per i bottoni primari di submit (Login, etc.) */ .sidebar-right .auth-form-style button[type="submit"], .sidebar-right #subscription-form button[type="submit"] { color: white; background: #003049; text-shadow: none; } .sidebar-right .auth-form-style button[type="submit"]:hover, .sidebar-right #subscription-form button[type="submit"]:hover { background: #7DA0CA; } /* Per il bottone "Esporta" */ .sidebar-right .auth-form-style .btn-utility { background-color: #7DA0CA; color: white; text-shadow: none; } .sidebar-right .auth-form-style .btn-utility:hover { background: #a9d6e5; } /* Per il bottone "Elimina Account" */ .sidebar-right .auth-form-style .btn-destructive { background-color: #c82333; color: white; text-shadow: none; } .sidebar-right .auth-form-style .btn-destructive:hover { background: #e06c75; } /* ===== FINE SEZIONE STILI BOTTONI GENERICI (CORRETTA) ===== */ /* Stile per i paragrafi (es. "Hai già un account?") nella sidebar */ .sidebar-right .auth-form-style p { font-family: 'Roboto Condensed', sans-serif; text-align: center; margin-top: 20px; font-size: 0.95em; color: #333; } .sidebar-right .auth-form-style p a { color: #003049; font-weight: 700; text-decoration: none; } .sidebar-right .auth-form-style p a:hover { text-decoration: underline; } /* ========================================================= Stile Specifico per il Disclaimer nella Sidebar ========================================================= */ .sidebar-right .auth-disclaimer { /* Stili del box */ margin-bottom: 40px; padding: 15px; padding-left: 18px; background-color: rgba(0, 48, 73, 0.04); border-left: 4px solid #f7262d; border-radius: 0 8px 8px 0; /* Stili del testo e del font */ color: #333; font-family: 'Roboto Condensed', sans-serif; font-size: 0.9rem; line-height: 1.6; text-align: left; } .sidebar-right .auth-disclaimer strong { color: #003049; } .sidebar-right .auth-disclaimer a { color: #003049; font-weight: 500; } /* ========================================================= Stile per il Box Promozionale (Auth Page) ========================================================= */ .auth-description .promo-box { background-color: rgba(0, 48, 73, 0.05); /* Sfondo leggero a tema */ border: none; border-left: 4px solid #f7262d; /* Bordo rosso a sinistra per evidenza */ padding: 15px 20px; border-radius: 0 8px 8px 0; margin-top: 25px; margin-bottom: 25px; font-size: 1.05rem; line-height: 1.6; } .auth-description .promo-box strong { color: #003049; /* Blu scuro del tema */ } /* ========================================================= */ /* --- Stili Box Promozionale con Bordo Animato (Versione Definitiva) --- */ /* ========================================================= */ .promo-box-sidebar { position: relative; /* Necessario per posizionare gli strati virtuali */ overflow: hidden; padding: 25px; margin-top: 175px; margin-bottom: 30px; border-radius: 20px; text-align: center; /* Rimosso lo sfondo e l'ombra da qui, verranno gestiti dagli strati virtuali */ background: transparent; filter: drop-shadow(8px 8px 15px #cbced1) drop-shadow(-8px -8px 15px white); } /* STRATO 1: L'animazione del gradiente (sta dietro) */ .promo-box-sidebar::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200%; height: 200%; background: conic-gradient( from 0deg, #f7262d, #7DA0CA, #003049, #7DA0CA, #f7262d ); animation: spin-border 4s linear infinite; z-index: 1; /* Livello più basso */ } /* STRATO 2: Lo sfondo solido che copre l'animazione (sta in mezzo) */ .promo-box-sidebar::after { content: ''; position: absolute; inset: 4px; /* Crea un bordo di 3px lasciando scoperto il gradiente sotto */ background: #ecf0f3; /* Il colore di sfondo del box */ border-radius: 16px; /* (border-radius del box - spessore del bordo) -> 20px - 3px */ z-index: 2; /* Livello intermedio */ } /* CONTENUTO: Testo e pulsanti (stanno davanti a tutto) */ .promo-box-sidebar h5, .promo-box-sidebar p, .promo-box-sidebar .btn-promo { position: relative; z-index: 3; /* Livello più alto per essere sicuri che sia visibile */ } /* Stili specifici per gli elementi di contenuto (invariati) */ .promo-box-sidebar h5 { font-family: 'Oswald', sans-serif; font-weight: 600; color: #003049; font-size: 1.2rem; margin-top: 0; margin-bottom: 15px; } .promo-box-sidebar p { font-family: 'Roboto Condensed', sans-serif; font-size: 0.95rem; line-height: 1.6; color: #333; margin-bottom: 25px; } .promo-box-sidebar .btn-promo { display: block; width: 100%; box-sizing: border-box; padding: 12px 15px; text-decoration: none; color: white; background: #003049; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-shadow: none; border-radius: 25px; box-shadow: -5px -5px 15px white, 5px 5px 15px #cbced1; transition: all 0.2s ease-in-out; } .promo-box-sidebar .btn-promo:hover { background: #7DA0CA; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } .promo-box-sidebar .btn-promo:active { background: #003049; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* ========================================================= */ /* --- Stili Pagina Archivio (Versione Corretta) --- */ /* ========================================================= */ /* Contenitore per il titolo e la descrizione della pagina */ .archivio-header { text-align: center; margin-bottom: 40px; } /* Titolo principale "Il Mio Archivio Calcoli" */ .archivio-header h2 { font-family: 'Oswald', sans-serif; font-size: 2rem; margin-top: 40px; /* Eredita colore e altri stili dalla regola generale h2 */ } /* Paragrafo di testo e link "Torna al Calcolatore" */ .archivio-header p { font-family: 'Roboto Condensed', sans-serif; color: #555; } .archivio-header a { font-weight: 700; color: #003049; text-decoration: none; } .archivio-header a:hover { text-decoration: underline; } /* Stile per la "card" di ogni calcolo salvato (invariato) */ .calcolo-salvato-item { background: #ecf0f3; padding: 25px 30px; border-radius: 20px; box-shadow: 8px 8px 15px #cbced1, -8px -8px 15px white; margin-bottom: 25px; transition: box-shadow 0.3s ease; } .calcolo-salvato-item:hover { box-shadow: 2px 2px 5px #cbced1, -2px -2px 5px white; } /* Titolo e paragrafo dentro la card (invariati) */ .calcolo-salvato-item h3 { font-family: 'Oswald', sans-serif; font-weight: 600; color: #003049; margin-top: 0; margin-bottom: 8px; font-size: 1.4rem; border-bottom: none; text-align: left; padding-bottom: 0; } .calcolo-salvato-item p { font-family: 'Roboto Condensed', sans-serif; font-size: 0.9em; color: #555; margin-bottom: 25px; } /* Contenitore per i pulsanti dentro la card (invariato) */ .calcolo-salvato-item .buttons-container { justify-content: flex-start; gap: 15px; padding-top: 0; margin-top: 0; border-top: none; } /* --- Stili Pulsanti CORRETTI --- */ /* Stile base per i pulsanti nella card (ORA CON STILE NEUMORFICO) */ .calcolo-salvato-item button { color:#61677C; margin: 0; background: #ecf0f3; height: 40px; width: auto; min-width: 140px; padding: 0 25px; border-radius: 25px; /* Angoli arrotondati */ cursor: pointer; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 0.9em; box-shadow: -5px -5px 20px white, 5px 5px 20px #cbced1; /* Ombra Neumorfica */ transition: all 0.2s ease-in-out; letter-spacing: 0.5px; border: none; /* Nessun bordo */ outline: 0; text-shadow: 1px 1px 0 white; } .calcolo-salvato-item button:hover { box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } .calcolo-salvato-item button:active { box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* Pulsante primario "Carica Calcolo" */ .calcolo-salvato-item .btn-carica { background: #003049; color: white; text-shadow: none; } .calcolo-salvato-item .btn-carica:hover { background: #7DA0CA; } /* Pulsante secondario/distruttivo "Elimina" */ .calcolo-salvato-item .btn-elimina { background: #c82333; color: white; text-shadow: none; } .calcolo-salvato-item .btn-elimina:hover { background: #e06c75; } /* ========================================================= */ /* --- Stili Sidebar Archivio Recenti --- */ /* ========================================================= */ #sidebar-suite h4, #sidebar-archive h4, #current-calculation-display h4 { font-family: 'Oswald', sans-serif; color: #003049; font-size: 1.2rem; padding-bottom: 8px; border-bottom: 1px solid #7DA0CA; margin-bottom: 15px; } #sidebar-archive-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .sidebar-calc-item { display: block; padding: 10px 15px; background-color: #ecf0f3; border-radius: 8px; text-decoration: none; color: #333; font-family: 'Roboto Condensed', sans-serif; font-size: 1.1em; border: 1px solid transparent; /* Transizione più specifica e stabile */ transition: box-shadow 0.2s ease-in-out; box-shadow: 3px 3px 6px #cbced1, -3px -3px 6px white; } .sidebar-calc-item:hover { cursor: pointer; /* Ombra più leggera che simula una pressione delicata, per un'animazione fluida */ box-shadow: 1px 1px 3px #cbced1, -1px -1px 3px white; } .current-calc-item-box { display: block; padding: 10px 15px; background-color: #ecf0f3; border-radius: 8px; box-shadow: 3px 3px 6px #cbced1, -3px -3px 6px white; } #current-calculation-title { color: #333; font-family: 'Roboto Condensed', sans-serif; font-size: 1.1em; font-weight: 700; word-wrap: break-word; } .sidebar-calc-item .item-date, #current-calculation-date { font-family: 'Roboto Condensed', sans-serif; font-size: 0.8em; color: #666; display: block; margin-top: 2px; } .btn-full-archive { display: block; width: 100%; padding: 10px; text-align: center; font-size: 1.1rem; text-decoration: none; box-sizing: border-box; transition: all 0.2s ease-in-out; /* Proprietà uniformate allo stile primario */ background: #003049; /* Sfondo blu scuro */ color: white; /* Testo bianco */ font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-shadow: none; /* Rimuove l'ombra sul testo */ border-radius: 25px; /* Stesso arrotondamento */ height: 45px; /* Stessa altezza */ line-height: 25px; /* Per centrare il testo verticalmente */ box-shadow: -5px -5px 20px white, 5px 5px 20px #cbced1; /* Ombra standard */ border: none; } .btn-full-archive:hover { background: #7DA0CA; /* Sfondo blu chiaro in hover */ box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; /* Ombra ridotta in hover */ } /* ================== NOME CALCOLO ================== */ #current-calculation-display { margin-top: 40px; margin-bottom: 20px; } #current-calculation-display h4 { font-family: 'Oswald', sans-serif; color: #003049; font-size: 1.1rem; margin: 0 0 8px 0; padding-bottom: 5px; border-bottom: 1px solid #7DA0CA; } #current-calculation-display p { font-family: 'Roboto Condensed', sans-serif; font-size: 1rem; color: #333; font-weight: 500; margin: 0; word-wrap: break-word; /* Assicura che i titoli lunghi vadano a capo */ } /* Stile per la nota visualizzata nella pagina archivio */ .nota-salvata { font-size: 1em; font-style: italic; color: #555; /* Colore leggermente più tenue per distinguerla */ line-height: 1.5; word-wrap: break-word; /* Mantiene la capacità di andare a capo */ margin-top: -5px; /* Spazio ridotto sopra la nota */ margin-bottom: 25px; /* Spazio adeguato prima dei bottoni */ } /* =================== FINE NOME CALCOLO =================== */ /* ===== INIZIO BLOCCO TOOLTIP CON ICONA (?) ===== */ /* Contenitore per allineare label e icona tooltip */ .label-with-tooltip { display: flex; align-items: center; gap: 8px; /* Spazio tra la label e l'icona */ margin-bottom: 0px; /* Ripristina il margine che la label aveva */ } .label-with-tooltip label { margin-bottom: 0; /* Rimuove il margine dalla label interna */ margin-top: 0; } .label-with-tooltip h4 { margin-top: 15px; margin-bottom: 0px; } /* Stile dell'icona (?) del tooltip */ .tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #7DA0CA; /* Blu chiaro del tema */ color: white; border-radius: 50%; font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.2s ease-in-out; flex-shrink: 0; /* Impedisce che si rimpicciolisca */ } .tooltip-icon:hover, .tooltip-icon:focus { background-color: #003049; /* Blu scuro al passaggio del mouse/focus */ box-shadow: 0 0 0 3px rgba(125, 160, 202, 0.5); /* Anello di focus per accessibilità */ outline: none; } /* Box che contiene il testo del tooltip */ .custom-tooltip { position: absolute; background-color: #003049; color: #ecf0f3; font-family: 'Roboto Condensed', sans-serif; font-size: 0.95em; line-height: 1.6; padding: 15px 20px; border-radius: 8px; box-sizing: border-box; max-width: min(400px, 90vw); box-shadow: 0px 5px 15px rgba(0, 48, 73, 0.3); border: 1px solid #7DA0CA; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 10000; pointer-events: none; text-align: left; } .custom-tooltip.active { opacity: 1; visibility: visible; } .custom-tooltip strong { color: #a9d6e5; display: block; margin-bottom: 4px; } .checkbox-container { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; /* Aggiunge un po' di spazio dal titolo */ } .checkbox-container input[type="checkbox"] { margin-top: 4px; /* Allinea verticalmente la checkbox con la prima riga di testo */ flex-shrink: 0; } label.inline-label .tooltip-icon { margin-left: auto; } /* ===== FINE BLOCCO TOOLTIP CON ICONA (?) ===== */ /* ===== INIZIO BLOCCO STILI APPROFONDIMENTI (SOLUZIONE CON SCORRIMENTO NORMALE) ===== */ /* 1. L'OVERLAY: è questo che si occupa dello scroll. */ .approfondimento-container, #subscription-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* MODIFICATO: Sfondo leggermente più trasparente per far vedere meglio l'effetto blur */ background-color: rgba(0, 48, 73, 0.3); /* AGGIUNTO: Applica una sfocatura di 5px a tutto ciò che sta dietro */ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 2000; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 25vh 10px 5vh 10px; box-sizing: border-box; } /* Quando è attivo, l'overlay appare */ .approfondimento-container.active, #subscription-container.active { display: block; } /* 2. IL BOX: Un elemento normale, senza posizionamenti speciali, che vive dentro l'overlay. */ .approfondimento-box, .subscription-box { position: relative; background: #ecf0f3; border-radius: 20px; padding: 15px; max-width: 900px; /* Limite per desktop */ margin: 0 auto; /* Centrato orizzontalmente dentro l'overlay */ /* NESSUN LIMITE DI ALTEZZA, NESSUNO SCROLL INTERNO */ max-height: none; overflow-y: visible; /* Animazione per l'ingresso "morbido" */ transform: translateY(40px); transition: transform 0.5s ease-out; } /* Quando l'overlay è attivo, il box sale leggermente nella sua posizione finale */ .approfondimento-container.active .approfondimento-box { transform: translateY(0); } /* 3. BODY: viene bloccato per evitare il doppio scroll (il suo JS lo fa già) */ body.body-no-scroll { overflow: hidden; } /* Stili interni del box (header, body, ecc.) che rimangono validi */ .approfondimento-header, .subscription-box-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #7DA0CA; padding-bottom: 15px; margin-bottom: 15px; } .approfondimento-header h3, .subscription-box-header h3 { margin: 0; font-family: 'Oswald', sans-serif; color: #003049; font-size: 1.6rem; flex-grow: 1; text-align: center; } .approfondimento-close-btn, .subscription-close-btn { font-size: 2rem; font-weight: 300; line-height: 1; border: none; background: none; color: #555; cursor: pointer; padding: 0 10px; } .approfondimento-body, .subscription-box-body { font-family: 'Roboto Condensed', sans-serif; line-height: 1.6; color: #333; } /* ===== FINE BLOCCO STILI APPROFONDIMENTI ===== */ /* Stile per il blocco della suite e la sua lista */ #sidebar-suite { margin-bottom: 30px; } #sidebar-suite-list { display: flex; flex-direction: column; gap: 12px; /* Un po' di spazio tra un "legend" e l'altro */ } /* Stile dei link che imita i "legend" */ .sidebar-legend-link { display: block; /* Occupa tutta la larghezza disponibile */ font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1rem; /* Leggermente più piccolo del legend principale per non essere troppo invasivo */ color: #ecf0f3; text-shadow: none; text-align: center; /* Centriamo il testo */ text-decoration: none; /* Rimuoviamo la sottolineatura */ background-color: #003049; padding: 10px 15px; /* Padding leggermente adattato */ border-radius: 12px; box-shadow: 3px 3px 8px #cbced1, -3px -3px 8px white; transition: all 0.2s ease-in-out; } .sidebar-legend-link:hover { background-color: #7DA0CA; /* Cambia colore in hover */ color: #003049; box-shadow: 1px 1px 3px #cbced1, -1px -1px 3px white; /* Ombra più "pressata" */ } /* ========================================================= */ /* --- Stili di Visibilità Iniziale (Gestiti da JS) --- */ /* ========================================================= */ #sidebar-suite { display: none; /* Nascosto di default */ } /* ========================================================= */ /* --- Riduzione Ombra per Bottoni Salva e PDF --- */ /* ========================================================= */ #save-calculation-block .buttons-container button { /* Riduciamo l'offset (distanza) e il blur (sfocatura) dell'ombra */ box-shadow: -3px -3px 7px #ffffff, 3px 3px 7px #cbced1; } #save-calculation-block .buttons-container button:hover { /* Anche l'ombra al passaggio del mouse viene resa più delicata */ box-shadow: -1px -1px 3px #ffffff, 1px 1px 3px #cbced1; } /* ========================================================= */ /* --- Stile Box Modal Offerta Fondatori --- */ /* ========================================================= */ .btn-activate-offer { /* Proprietà per farlo sembrare e comportarsi come un bottone */ display: inline-block; /* Permette di dare dimensioni a un link */ text-align: center; /* Centra il testo orizzontalmente */ text-decoration: none; /* Rimuove la sottolineatura del link */ /* Proprietà 1:1 dei bottoni primari */ color: white; background: #003049; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-shadow: none; height: 45px; line-height: 45px; /* CRUCIALE: Centra il testo verticalmente */ width: auto; padding: 0 30px; border-radius: 25px; cursor: pointer; font-size: 1.1rem; box-shadow: -5px -5px 20px white, 5px 5px 20px #cbced1; transition: all 0.2s ease-in-out; letter-spacing: 0.5px; border: 0; outline: 0; margin-top: 20px; margin-bottom: 0; } .btn-activate-offer:hover { background: #7DA0CA; box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; text-decoration: none; /* Rimuove la sottolineatura anche in hover */ color: white; /* Mantiene il testo bianco in hover */ } .btn-activate-offer:active { background: #003049; box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } .suite-pills-container { display: flex; flex-wrap: wrap; justify-content: center; /* Aggiungi o modifica questa riga */ gap: 10px; margin-top: 20px; margin-bottom: 25px; } /* ========================================================= */ /* --- Correzione Centratura Bottoni in Modali e altri box --- */ /* ========================================================= */ .buttons-container { display: flex; justify-content: center; width: 100%; } /* --- Stile Margine Fieldset nel Modale Suite --- */ .approfondimento-box fieldset { margin-bottom: 40px; } /* --- Stile Testo Descrittivo nel Modale Suite --- */ .approfondimento-box fieldset p { font-size: 1em; color: #555; text-align: left; padding-top: 10px; margin-top: -30px; margin-bottom: 10px; } /* --- Stile per Sezioni con Watermark Tipografico (Versione Centrata) --- */ .watermark-section { position: relative; padding: 20px 0; margin-top: 90px; margin-bottom: 40px; text-align: center; } .watermark-section--compact { margin-bottom: 0px; /* Riduciamo il margine inferiore da 40px a 20px */ } .watermark-bg { position: absolute; z-index: 0; top: -2.4rem; left: 50%; transform: translateX(-50%); font-family: 'Oswald', sans-serif; font-size: 5rem; font-weight: 600; line-height: 1; white-space: nowrap; color: rgba(0, 48, 73, 0.15); user-select: none; pointer-events: none; } .watermark-section h4, .watermark-section p { position: relative; z-index: 1; } .watermark-section h4 { font-size: 1.4rem; color: #003049; margin-bottom: 25px; /* Aumentato leggermente il margine per dare più spazio al paragrafo */ } /* CONSIGLIO DI STILE AGGIUNTIVO */ /* Per migliore leggibilità, il testo lungo non dovrebbe essere centrato. */ /* Questa regola centra il BLOCCO di paragrafo, ma allinea il TESTO al suo interno a sinistra. */ .watermark-section p { text-align: left; max-width: 800px; /* Larghezza massima per non essere troppo lungo su schermi grandi */ margin-left: auto; margin-right: auto; } /* --- Correzione Margine Bottone Modale Sottoscrizione --- */ .subscription-box .buttons-container { margin-bottom: 20px; } .form-feedback-area { margin-top: 15px; margin-bottom: 20px; /* AGGIUNTO: Spazio sotto il messaggio */ font-family: 'Roboto Condensed', sans-serif; /* AGGIUNTO: Font coerente con l'app */ font-weight: 700; text-align: center; min-height: 1.2em; /* Evita che il layout "salti" quando il testo appare */ transition: color 0.3s ease; } /* ========================================================= */ /* --- Stili Bottone Offerta Founder Fluttuante --- */ /* ========================================================= */ #founder-offer-btn { /* --- Posizionamento --- */ position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 998; /* Leggermente sotto "Nuovo Calcolo" per sicurezza */ /* --- Dimensioni e Aspetto --- */ height: 50px; padding: 0 35px; border-radius: 25px; /* Forma a pillola */ border: none; cursor: pointer; overflow: hidden; /* Cruciale per contenere i pseudo-elementi */ /* --- Stile Testo --- */ font-family: 'Oswald', sans-serif; font-weight: 600; color: #003049; font-size: 1.1rem; /* --- Contesto per animazione, ombra e transizione --- */ background: transparent; filter: drop-shadow(8px 8px 15px #cbced1) drop-shadow(-8px -8px 15px white); transition: filter 0.3s ease-in-out; /* --- Allineamento testo --- */ display: flex; justify-content: center; align-items: center; } #founder-offer-btn:hover { filter: drop-shadow(4px 4px 8px #cbced1) drop-shadow(-4px -4px 8px white); } /* STRATO 1: L'animazione del gradiente (sta dietro) */ #founder-offer-btn::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250%; /* Aumentato per coprire la forma rettangolare durante la rotazione */ height: 400%; background: conic-gradient( from 0deg, #f7262d, #7DA0CA, #003049, #7DA0CA, #f7262d ); animation: spin-border 4s linear infinite; z-index: 1; /* Livello più basso */ } /* STRATO 2: Lo sfondo solido che copre l'animazione (sta in mezzo) */ #founder-offer-btn::after { content: ''; position: absolute; inset: 4px; /* Crea un bordo di 4px */ background: #ecf0f3; /* Il colore di sfondo del bottone */ border-radius: 21px; /* (border-radius del bottone - spessore) -> 25px - 4px */ z-index: 2; /* Livello intermedio */ } /* CONTENUTO: Il testo (sta davanti a tutto) */ #founder-offer-btn span { position: relative; z-index: 3; /* Livello più alto per essere visibile */ } /* --- Correzione Stile Pagina Offerta Founder --- */ .main-column .subscription-box { background: none; box-shadow: none; padding-top: 0; } /* ===== INIZIO SEZIONE STILI BOTTONI GENERICI ===== */ /* Stile per azioni secondarie o di utilità (es. Esporta) */ .btn-utility { background-color: #7DA0CA; /* Blu chiaro del tema */ color: white; text-shadow: none; } .btn-utility:hover { background: #a9d6e5; /* Un hover più chiaro */ } /* Stile per azioni distruttive (es. Elimina) */ .btn-destructive { background-color: #c82333; /* Rosso di pericolo */ color: white; text-shadow: none; } .btn-destructive:hover { background: #e06c75; /* Un rosso più chiaro per l'hover */ } /* ===== FINE SEZIONE STILI BOTTONI GENERICI ===== */ /* --- Stili Menu Tooltip Universale (Desktop & Mobile) --- */ /* Contenitore e Icona Trigger (Hamburger) */ .main-column { position: relative; } .menu-toggle { display: none; } /* 1. Contenitore Sticky */ .hamburger-container { position: sticky; top: 25px; left: 25px; width: 54px; height: 54px; z-index: 1001; } /* 2. Icona Hamburger (Trigger) */ .hamburger { position: absolute; top: 0; left: 10px; display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; box-sizing: content-box; padding: 12px; background-color: #ecf0f3; border-radius: 20%; box-shadow: 3px 3px 8px #cbced1, -3px -3px 8px white; cursor: pointer; transition: all 0.2s ease-in-out; } .hamburger:hover { box-shadow: 1px 1px 4px #cbced1, -1px -1px 4px white; } .hamburger span { display: block; width: 100%; height: 3px; background-color: #003049; border-radius: 2px; transition: all 0.3s ease; } /* 3. Checkbox Nascosto e Animazione 'X' */ .menu-toggle { display: none; } .hamburger:active { box-shadow: inset 1px 1px 2px #cbced1, inset -1px -1px 2px white; } /* MODIFICATO: Rimuove l'effetto "schiacciato" quando il menu è aperto */ .menu-toggle:checked + .hamburger { /* Mantiene l'ombra "sollevata" ma leggermente ridotta, come al passaggio del mouse, per dare un feedback visivo che il menu è attivo. */ box-shadow: 1px 1px 4px #cbced1, -1px -1px 4px white; } .menu-toggle:checked + .hamburger span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; } .menu-toggle:checked + .hamburger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* 4. Pannello del Menu (Tooltip) */ .main-navigation { position: absolute; top: 65px; left: 0; width: 280px; background-color: #ecf0f3; border-radius: 12px; box-shadow: 5px 5px 20px #cbced1, -5px -5px 20px white; border: 1px solid rgba(0, 48, 73, 0.1); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .main-navigation ul { list-style: none; padding: 8px 0; margin: 0; } .main-navigation li a { display: block; padding: 12px 20px; color: #003049; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 500; transition: background-color 0.2s ease; border-radius: 8px; margin: 4px 8px; } .main-navigation li a:hover { background-color: rgba(0, 48, 73, 0.05); } .main-navigation li.separator hr { border: 0; height: 1px; background-color: rgba(0, 48, 73, 0.15); margin: 5px 0; } .main-navigation li.separator { padding: 0; } /* 5. Overlay per Chiusura al Click Esterno */ .menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 999; cursor: pointer; } /* 6. Logica di Apertura */ .menu-toggle:checked ~ .main-navigation { opacity: 1; visibility: visible; transform: translateY(0); } /* Quando il menu è aperto, mostra anche l'overlay */ .menu-toggle:checked ~ .menu-overlay { display: block; } #mainForm > fieldset:first-of-type > legend > .approfondimento-trigger { display: none !important; } /* 1. Modifica la regola principale */ .promo-box-sidebar { position: relative; overflow: hidden; padding: 25px; margin-top: 40px; /* VALORE PER MOBILE COME DEFAULT */ margin-bottom: 30px; border-radius: 20px; text-align: center; background: transparent; filter: drop-shadow(8px 8px 15px #cbced1) drop-shadow(-8px -8px 15px white); } /* 2. Aggiungi questa nuova regola alla fine del file CSS */ @media (min-width: 769px) { .promo-box-sidebar { margin-top: 175px; /* Applica il margine alto SOLO su schermi grandi */ } } /* ========================================================= */ /* --- Stili per Legenda Fluttuante Contestuale --- */ /* ========================================================= */ .legend-flottante-container { /* --- Posizionamento --- */ position: sticky; top: 25px; /* Si allinea verticalmente con l'hamburger menu */ z-index: 900; /* Sta sopra il contenuto ma sotto i modali/menu (che hanno z-index > 1000) */ /* --- Aspetto (ereditato dalle legend esistenti) --- */ font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.3rem; color: #ecf0f3; background-color: #003049; padding: 8px 20px; border-radius: 12px; box-shadow: 3px 3px 8px #cbced1, -3px -3px 8px white; text-align: center; /* --- Gestione Visibilità e Transizioni --- */ /* Parte invisibile di default, con un leggero offset verso l'alto */ opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* pointer-events: none; */ /* --- Gestione Testo Lungo --- */ white-space: nowrap; /* Impedisce al testo di andare a capo */ /* overflow: hidden; Nasconde il testo che non entra */ text-overflow: ellipsis; /* Aggiunge '...' se il testo è troppo lungo */ max-width: 50%; /* Limita la larghezza per un effetto gradevole */ margin: 0 auto 15px auto; /* Centra la barra e aggiunge margine inferiore */ } /* Classe che viene aggiunta da JavaScript per mostrare la barra */ .legend-flottante-container.visible { opacity: 1; transform: translateY(0); } /* ========================================================= */ /* --- Stili per Ellipsis su Titolo Legenda Flottante --- */ /* ========================================================= */ #current-legend-title { display: block; /* Necessario per applicare overflow/ellipsis */ overflow: hidden; white-space: nowrap; /* Già ereditato, ma lo esplicitiamo */ text-overflow: ellipsis; /* Opzionale: puoi dare una larghezza massima se necessario, ma il flex container dovrebbe già limitarlo. max-width: calc(100% - 24px); /* Esempio: lascia spazio per la freccia */ } /* ========================================================= */ /* --- Fine Stili Ellipsis --- */ /* ========================================================= */ /* ========================================================= */ /* --- Stili Menu Dropdown Legenda Flottante --- */ /* ========================================================= */ /* Rende cliccabile l'header della legenda */ #legend-header { cursor: pointer; } /* Stili per la lista dropdown */ #fieldset-nav-list { position: absolute; /* Sgancia dal flusso normale */ top: 100%; /* Posiziona subito sotto la barra */ left: 50%; /* Centra orizzontalmente rispetto al container */ transform: translateX(-50%); /* Corregge il centraggio */ width: auto; /* Adatta la larghezza al contenuto */ min-width: 250px; /* Larghezza minima per leggibilità */ max-width: 90%; /* Limita su schermi piccoli */ background-color: #ecf0f3; border-radius: 8px; box-shadow: 5px 5px 15px #cbced1, -5px -5px 15px white; padding: 8px; margin-top: 8px; /* Spazio tra barra e menu */ z-index: 1001; /* Sopra altri elementi sticky ma sotto modali */ max-height: 50vh; /* Limita altezza su mobile */ overflow-y: auto; /* Abilita scroll se necessario */ display: none; /* Nascosto di default */ border: 1px solid rgba(0, 48, 73, 0.1); } /* Stile per le voci del menu */ #fieldset-nav-list li a { display: block; padding: 10px 15px; color: #003049; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 500; transition: background-color 0.2s ease; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } #fieldset-nav-list li a:hover { background-color: rgba(0, 48, 73, 0.08); } /* Animazione freccia quando il menu è aperto */ .legend-flottante-container.menu-open #legend-arrow { transform: rotate(180deg); } /* Mostra il menu quando il container ha la classe 'menu-open' */ .legend-flottante-container.menu-open #fieldset-nav-list { display: block !important; } /* ========================================================= */ /* --- Fine Stili Menu Dropdown --- */ /* ========================================================= */ /* ===== INIZIO SEZIONE RESPONSIVE CORRETTA ===== */ @media (max-width: 992px) { #rc-calculator-wrapper .col-quarter { max-width: 50%; flex-basis: 50%; } } @media (max-width: 768px) { /* Adatta le colonne a larghezza piena per tablet in ENTRAMBI i contenitori */ #rc-calculator-wrapper .col-third, #feedback-container .col-third, .subscription-box .col-third, #rc-calculator-wrapper .col-half, #feedback-container .col-half, .subscription-box .col-half { max-width: 100%; flex-basis: 100%; } /* Rimuove la causa dell'overflow in ENTRAMBI i contenitori */ #rc-calculator-wrapper .row, #feedback-container .row { margin-left: 0; margin-right: 0; } /* Rimuove il padding laterale in ENTRAMBI i contenitori */ #rc-calculator-wrapper .col-half, #feedback-container .col-half, #rc-calculator-wrapper .col-third, #feedback-container .col-third, #rc-calculator-wrapper .col-quarter, #feedback-container .col-quarter, #rc-calculator-wrapper .col-full, #feedback-container .col-full { padding-left: 0; padding-right: 0; } /* --- Riduzione Font Titolo Principale su Mobile --- */ #auth-container h2 { font-size: 2.8rem; } /* --- Riduzione Margine Watermark su Mobile --- */ .watermark-section { margin-top: 40px; } /* ========================================================= Correzione Margine Verticale Mobile per Box Feedback ========================================================= */ #feedback-container .col-third { margin-bottom: 0; } /* ========================================================= Layout e Padding Definitivi per Mobile ========================================================= */ /* 1. Sistema il contenitore principale */ .content-wrapper { flex-direction: column; padding: 0; gap: 0; } /* 2. Applica un unico padding alle colonne e le rende a larghezza piena */ .main-column, .sidebar-right { flex-basis: 100%; max-width: 100%; padding: 0 10px; /* Unico padding di 10px ai lati per dare respiro */ box-sizing: border-box; } /* 3. Rimuove stili specifici dai contenitori interni */ #auth-container, .neumorphic-form-wrapper { padding: 0; /* Rimuove il padding per non sommarlo a quello della colonna */ max-width: 100%; /* Assicura che si espandano completamente */ } /* 4. Sistema la sidebar */ .sidebar-right { position: static; margin-top: 40px; } /* Stili per la "tendina" mobile degli approfondimenti */ .approfondimento-box, .subscription-box { position: relative; /* transform: none; */ /* transition: none; */ max-height: none; width: 100%; margin: 0 auto; border-radius: 20px 20px 0 0; margin-bottom: 0; /* AGGIUNTO: La soluzione chiave. Forza il padding a rimanere DENTRO la larghezza del 100% */ box-sizing: border-box; } .approfondimento-box.snapping { transition: transform 0.2s ease-out; } .approfondimento-header { touch-action: auto; cursor: default; } .approfondimento-container, #subscription-container { padding: 25vh 0 0 0; overflow-x: hidden; } .hamburger-container { top: 15px; left: 10px; width: 44px; height: 44px; } .hamburger { left: 0px; width: 24px; height: 18px; padding: 10px; } .menu-toggle:checked + .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle:checked + .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .main-navigation { top: 55px; width: 250px; } /* Regola per la legenda fluttuante su mobile */ .legend-flottante-container { font-size: 1.1rem; /* Riduciamo leggermente il font */ padding: 6px 15px; /* Riduciamo il padding per renderla più compatta */ top: 15px; /* La avviciniamo un po' al bordo superiore */ } } @media (max-width: 576px) { /* Le colonne sono già al 100% dalla regola precedente, quindi questa media query potrebbe essere semplificata o rimossa se non ci sono altre regole specifiche per 576px. La mantengo per coerenza con il file originale. */ #rc-calculator-wrapper .col-half, #rc-calculator-wrapper .col-third, #rc-calculator-wrapper .col-quarter, #rc-calculator-wrapper .col-full { max-width: 100%; flex-basis: 100%; } } /* ===== FINE SEZIONE RESPONSIVE CORRETTA ===== */ /* ========================================================= */ /* --- Stili Responsive per Bottoni di Salvataggio --- */ /* ========================================================= */ @media (max-width: 768px) { /* Seleziona il contenitore dei bottoni specifici del blocco di salvataggio */ #save-calculation-block .buttons-container { flex-direction: column; /* Impila i bottoni verticalmente */ align-items: center; /* Li centra orizzontalmente nel loro spazio */ gap: 15px; /* Aggiunge spazio tra i bottoni impilati */ } /* Rimuove il margine e imposta una larghezza massima per i bottoni */ #save-calculation-block .buttons-container button { margin-left: 0; /* Annulla il margine che spingeva il secondo bottone */ width: 100%; /* Fa espandere i bottoni per tutta la larghezza disponibile */ max-width: 350px; /* Limita la larghezza massima per un aspetto gradevole */ } .subscription-box-body .buttons-container { justify-content: center; } } /* Definizione dell'animazione per il bordo rotante */ @keyframes spin-border { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* --- Stile Watermark per Schermi Grandi --- */ @media (min-width: 992px) { .watermark-bg { font-size: 7.5rem; /* Aumenta la dimensione da 5rem a 7.5rem */ } } /* ===== INIZIO BLOCCO STILI PER SLIDER DANNO MORALE ===== */ .moral-damage-section { background: #ecf0f3; border-radius: 15px; padding: 0px 0px 15px 0px; margin-top: 20px; margin-bottom: 20px; /* box-shadow: inset 3px 3px 6px #cbced1, inset -3px -3px 6px white;*/ } .slider-group { margin-top: 15px; } .slider-group label { font-size: 0.9em !important; margin-bottom: 10px !important; font-weight: 500 !important; color: #333 !important; } .slider-group { display: flex; align-items: center; gap: 15px; } .slider-group input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: transparent; outline: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; } /* --- Stile Track (la barra) --- */ .slider-group input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #dde1e4; border-radius: 5px; box-shadow: inset 2px 2px 4px #cbced1, inset -2px -2px 4px white; } .slider-group input[type="range"]::-moz-range-track { width: 100%; height: 8px; cursor: pointer; background: #dde1e4; border-radius: 5px; box-shadow: inset 2px 2px 4px #cbced1, inset -2px -2px 4px white; } /* --- Stile Thumb (il pallino) --- */ .slider-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 22px; width: 22px; border-radius: 50%; background: #ecf0f3; box-shadow: -3px -3px 7px white, 3px 3px 7px #cbced1; cursor: pointer; margin-top: -7px; /* Centra il thumb verticalmente sulla track */ transition: box-shadow 0.2s ease; } .slider-group input[type="range"]::-moz-range-thumb { height: 22px; width: 22px; border-radius: 50%; background: #ecf0f3; box-shadow: -3px -3px 7px white, 3px 3px 7px #cbced1; cursor: pointer; border: none; transition: box-shadow 0.2s ease; } /* Effetto al focus/hover sul pallino */ .slider-group input[type="range"]:focus::-webkit-slider-thumb, .slider-group input[type="range"]:hover::-webkit-slider-thumb { box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } .slider-group input[type="range"]:focus::-moz-range-thumb, .slider-group input[type="range"]:hover::-moz-range-thumb { box-shadow: -2px -2px 5px white, 2px 2px 5px #cbced1; } .slider-value { font-family: 'Oswald', sans-serif; font-weight: 600; color: #003049; background-color: #ecf0f3; padding: 5px 10px; border-radius: 8px; box-shadow: 2px 2px 5px #cbced1, -2px -2px 5px white; min-width: 50px; text-align: center; font-size: 0.9em; } /* ===== FINE BLOCCO STILI PER SLIDER ===== */ /* --- Riduzione Font Watermark su Mobile --- */ @media (max-width: 768px) { .hero-watermark-section .watermark-bg { font-size: 6rem; /* Riduciamo la dimensione da 9rem */ } .watermark-section .watermark-bg { font-size: 3.5rem; /* Riduciamo la dimensione da 5rem */ } .watermark-section .watermark-bg { top: 0rem; } } @media (min-width: 769px) { .promo-box-sidebar { margin-top: 175px; /* Stato iniziale */ /* AGGIUNGI QUESTA RIGA per l'animazione fluida */ transition: margin-top 0.4s ease-out; } /* AGGIUNGI QUESTA NUOVA REGOLA per lo stato "compresso" */ .promo-box-sidebar.scrolled { margin-top: 50px; /* Stato finale dopo lo scroll */ } }