:root {
--primary-color: #6f2c91; /* Colore principale (viola) */
--primary-color-light: #a77bca; /* Colore chiaro (rosa chiaro) */
--primary-color-lighter: #f0d9f5; /* Colore chiaro (rosa chiaro) */
--link-color: #9b59b6; /* Colore dei link */
--link-hover-color: #d39bcf; /* Colore dei link al passaggio del mouse */
--red-color: #e03131;
--yellow-color: #f59f00;
--green-color: #2b8a3e;
--background-color: #ffffff;
--text-color: #212529;
--card-bg-color: #f8f9fa;
--border-color: #dee2e6;
}
@media (prefers-color-scheme: dark) {
:root {
/* Fondali e testi */
--background-color: #212529;
--text-color: #f8f9fa;
--card-bg-color: #343a40; 
--border-color: #495057;

/* Colori accentati */
--primary-color: #8e44ad;
--primary-color-light: #af7ac5;
--link-color: #c39bd3; 
--link-hover-color: #d2b4de;

--red-color: #fa5252;
--yellow-color: #fcc419;
--green-color: #40c057;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
padding: 20px;
max-width: 1200px;
margin: 0 auto;
transition: all 0.3s ease;
}
h1, h2, h3 {
line-height: 1.2;
margin-bottom: 20px;
}
h1 {
font-size: 2.5rem;
text-align: center;
margin-top: 40px;
}
h2 {
font-size: 2rem;
margin-top: 30px;
}
.question-container {
text-align: center;
margin: 40px 0;
}
.main-question {
font-size: 1.5rem;
margin-bottom: 30px;
font-weight: 600;
}
/* Miglioramento stile link */
a {
color: var(--link-color);
text-decoration: none;
position: relative;
font-weight: bold;
transition: color 0.3s ease;
}
a:visited {
color: var(--link-color); /* Mantiene lo stesso colore anche dopo la visita */
}
a:hover {
color: var(--link-hover-color);
}
/* Effetto sottolineatura animata */
a:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: 0;
left: 0;
background-color: var(--link-color);
transition: width 0.3s ease;
}
a:hover:after {
width: 100%;
}
/* Miglioramento stile liste */
ul, ol {
margin: 1.2em 0;
padding-left: 2em; /* Aumentato padding a sinistra */
}
li {
margin-bottom: 0.7em; /* Spazio tra elementi lista */
line-height: 1.5;
}
/* Stile specifico per liste nei contenuti */
.result-text ul, .result-text ol,
.final-advice ul, .final-advice ol,
#yes-screen ul, #yes-screen ol {
margin-left: 1em;
margin-top: 1em;
margin-bottom: 1em;
}
/* Migliorare allineamento liste annidate */
li > ul, li > ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* Stili specifici per le liste numerate */
ol {
counter-reset: item;
}
ol > li {
display: block;
position: relative;
}
/* Optional: stile bullet personalizzato per liste non ordinate */
ul > li {
list-style-type: disc;
}
ul > li > ul > li {
list-style-type: circle;
}
ul > li > ul > li > ul > li {
list-style-type: square;
}
.btn {
display: inline-block;
padding: 12px 24px;
margin: 10px;
font-size: 1.2rem;
border-radius: 8px;
cursor: pointer;
text-align: center;
border: none;
background-color: var(--primary-color);
color: white;
transition: transform 0.1s, box-shadow 0.1s;
font-weight: 600;
min-width: 120px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn:active {
transform: translateY(0);
box-shadow: none;
}
.category-container {
margin: 40px 0;
}
.category-title {
font-size: 1rem;
color: white;
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 600;
padding: 0.5em;
background-color: var(--primary-color);
}

.bubbles-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.bubble {
padding: 12px 20px;
background-color: var(--card-bg-color);
border-radius: 30px;
cursor: pointer;
display: flex;
align-items: center;
border: 2px solid var(--border-color);
font-size: 1rem;
user-select: none;
transition: background-color 0.2s, transform 0.1s;
}
.bubble.selected {
border-color: var(--primary-color);
background-color: var(--primary-color-light);
color: white;
transform: scale(1.02);
}
/* Stili base per i pallini in tutte le pagine */
.bubble-dot {
margin-right: 10px;
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
border-radius: 50%;
flex-shrink: 0;
}
/* Stile per la lista dei risultati nella pagina "Your VPN Needs" */
.result-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.item-content {
display: flex;
align-items: center;
}
.item-text {
font-weight: 600;
font-size: 1.2rem;
}
.result-list .result-item {
display: flex;
align-items: center; /* Cambiato da flex-start a center per allineare verticalmente */
margin-bottom: 10px;
padding-left: 0;
}
.result-list .bubble-dot {
margin-right: 10px;
margin-top: 3px; /* Ridotto da 5px a 3px per un migliore allineamento */
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
border-radius: 50%;
flex-shrink: 0;
}
.result-list .item-text {
flex: 1;
line-height: 1.4; /* Assicura una altezza di linea costante */
font-weight: 600;
font-size: 1.2rem;
}
.bubble-dot.green { background-color: var(--green-color); }
.bubble-dot.yellow { background-color: var(--yellow-color); }
.bubble-dot.red { background-color: var(--red-color); }
/* Stile specifico per i risultati */
#results-container .result-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px; /* Spazio tra elementi quando vanno a capo */
}
#results-container .result-item {
display: flex;
align-items: flex-start;
}
#results-container .item-text {
padding-top: 2px; /* Allinea meglio il testo col pallino */
}
/* Stile per la pagina "Rivedi tutte le risposte" */
#all-answers-screen .answer-item h3 {
display: flex;
align-items: flex-start;
}
#all-answers-screen .answer-item h3 .bubble-dot {
margin-top: 3px;
}
.submit-container {
text-align: center;
margin: 40px 0;
}
.submit-btn {
background-color: var(--primary-color);
padding: 15px 30px;
font-size: 1.3rem;
}
.result-container {
margin: 30px 0;
}
.result-title {
font-size: 1.5rem;
margin-bottom: 15px;
font-weight: 600;
}
.result-text {
margin-bottom: 20px;
background-color: var(--card-bg-color);
padding: 20px;
border-radius: 8px;
}

.result-text a:hover {
text-decoration: underline;
}
.result-text.neutral {
border-left: 5px solid var(--border-color);
}
.result-text.green {
border-left: 5px solid var(--green-color);
}
.result-text.yellow {
border-left: 5px solid var(--yellow-color);
}
.result-text.red {
border-left: 5px solid var(--red-color);
}
.final-advice {
margin: 50px 0;
padding: 25px;
background-color: var(--card-bg-color);
border-radius: 8px;
border: 1px solid var(--border-color);
}
.final-advice h3 {
font-size: 1.6rem;
margin-bottom: 20px;
}
.final-advice ol, .final-advice ul {
margin-left: 25px;
}
.final-advice li {
margin-bottom: 10px;
}
footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.footer-credit {
opacity: 0.7;
font-size: 0.9rem;
}
footer a {
color: var(--link-color);
text-decoration: none;
margin: 10px;
opacity: 1;
}
footer a:hover {
text-decoration: underline;
opacity: 1;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.popup-content {
background-color: var(--background-color);
padding: 25px;
border-radius: 8px;
max-width: 500px;
width: 90%;
}
.popup h3 {
margin-bottom: 15px;
}
.copy-link-container {
display: flex;
margin: 15px 0;
}
#share-link {
flex: 1;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 4px 0 0 4px;
background-color: var(--card-bg-color);
}
#copy-link-btn {
padding: 10px 15px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
#close-popup-btn {
padding: 8px 16px;
background-color: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 4px;
margin-top: 10px;
cursor: pointer;
}
#all-answers-container {
margin: 30px 0;
}
.answer-category {
margin-bottom: 40px;
}
.answer-category h2 {
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
margin-bottom: 20px;
}
.answer-item {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px dashed var(--border-color);
}
.answer-item h3 {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.answer-text {
background-color: var(--card-bg-color);
padding: 15px;
border-radius: 8px;
}
/* Stili per la sezione di spiegazione nella pagina "Rivedi tutte le risposte" */
.explanation-section {
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 2px solid var(--border-color);
}
.decision-process h2,
.recommendations-table h2,
.categories-header {
margin-top: 30px;
margin-bottom: 20px;
color: var(--text-color);
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
.process-steps {
background-color: var(--card-bg-color);
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.process-steps p {
margin-bottom: 15px;
}
.process-steps ul {
margin-left: 25px;
margin-bottom: 20px;
}
.outcome-list {
list-style: none;
padding-left: 0;
}
.outcome-list li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.outcome-list .bubble-dot {
margin-right: 10px;
}
.table-container {
overflow-x: auto;
margin-bottom: 30px;
}
.recommendations-table table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border-color);
}
.recommendations-table th,
.recommendations-table td {
padding: 12px 15px;
text-align: left;
border: 1px solid var(--border-color);
}
.recommendations-table th {
background-color: var(--primary-color);
color: white;
font-weight: bold;
}
.recommendations-table tr:nth-child(even) {
background-color: var(--card-bg-color);
}
.recommendations-table tr:hover {
background-color: var(--primary-color-light);
color: white;
}
.recommendations-table tr:hover a{
color: white;
}
/* Effetto sottolineatura animata */
.recommendations-table tr:hover a:after {
background-color: white;
}
/* Responsive per tabella su mobile */
@media (max-width: 768px) {
.recommendations-table th,
.recommendations-table td {
padding: 8px;
font-size: 0.9rem;
}
}
/* Stile per i bollini nella tabella */
.recommendations-table td .bubble-dot {
vertical-align: middle;
display: inline-block;
margin-right: 10px;
}
/* Miglior allineamento per le celle della tabella con bollini */
.recommendations-table td {
padding: 12px 15px;
text-align: left;
border: 1px solid var(--border-color);
vertical-align: middle; /* Assicura allineamento verticale centrale */
}
/* Stili per le raccomandazioni responsive */
.recommendations-container {
display: grid;
gap: 20px;
width: 100%;
}
.recommendation-item {
background-color: var(--card-bg-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: transform 0.2s, box-shadow 0.2s;
}
.recommendation-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.outcome-label {
background-color: var(--primary-color-lighter);
padding: 12px 15px;
display: flex;
align-items: center;
font-weight: 600;
}
.outcome-text {
display: inline-block;
/* Impedisce che il testo vada a capo rispetto al bollino */
white-space: normal;
/* Permette il wrapping normale all'interno dello span */
}
.recommendation-content {
padding: 15px;
}
/* Desktop: visualizza come tabella tradizionale */
@media (min-width: 768px) {
.recommendations-container {
display: table;
border-collapse: collapse;
width: 100%;
}
.recommendation-item {
display: table-row;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.recommendation-item:nth-child(even) .outcome-label,
.recommendation-item:nth-child(even) .recommendation-content {
background-color: var(--card-bg-color);
}
.outcome-label, .recommendation-content {
display: table-cell;
padding: 12px 15px;
border: 1px solid var(--border-color);
vertical-align: middle;
}
.outcome-label {
background-color: transparent;
color: var(--text-color);
width: 30%;
font-weight: normal;
}
/* Intestazioni della tabella */
.recommendations-container:before {
content: "";
display: table-row;
}
.recommendations-container:before .outcome-label,
.recommendations-container:before .recommendation-content {
content: attr(data-title);
font-weight: bold;
padding: 12px 15px;
background-color: var(--primary-color);
color: white;
border: 1px solid var(--border-color);
}
}
/* For tablets and larger phones */
@media (min-width: 576px) {
h1 {
font-size: 3rem;
}
.main-question {
font-size: 1.8rem;
}
}
/* For desktop */
@media (min-width: 992px) {
h1 {
font-size: 3.5rem;
}
.main-question {
font-size: 2rem;
}
.bubble {
font-size: 0.8rem;
}
.btn {
font-size: 1.3rem;
}
}
.hidden {
display: none;
}
/* Desktop: visualizza come tabella tradizionale */
@media (min-width: 768px) {
.recommendations-container {
display: table;
border-collapse: collapse;
width: 100%;
}
.recommendation-item {
display: table-row;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.recommendation-item:nth-child(even) .outcome-label,
.recommendation-item:nth-child(even) .recommendation-content {
background-color: var(--card-bg-color);
}
.outcome-label, .recommendation-content {
display: table-cell;
padding: 12px 15px;
border: 1px solid var(--border-color);
vertical-align: middle;
}
.outcome-label {
background-color: transparent;
color: var(--text-color);
width: 30%;
font-weight: normal;
}
/* Assicuriamo che i bollini siano visibili in versione desktop */
.outcome-label .bubble-dot {
display: inline-block;
margin-right: 10px;
vertical-align: middle;
margin-bottom: 3px;
}
/* Aggiunta intestazioni tabella */
.recommendations-container:before {
content: "Selection outcomes / Topline recommendation";
display: table-caption;
caption-side: top;
font-weight: bold;
padding: 12px;
background-color: var(--primary-color);
color: white;
border: 1px solid var(--border-color);
display: none; /* Nascosto perché uso h2 separato */
}
}
/* Stili per mobile */
@media (max-width: 768px) {
  footer {
    flex-direction: column; /* Disposizione verticale */
    align-items: center; /* Centra gli elementi */
    text-align: center; /* Centra il testo nei link */
  }

  .footer-credit {
    width: 100%;
  }

  /* Mantiene i link inline dentro il footer-credit */
  .footer-credit a {
    display: inline;
    white-space: nowrap; /* Impedisce il capo forzato */
  }

  /* I link del footer vanno uno sotto l'altro */
  footer > a {
    display: block;
    margin: 1px; /* Uniforma la distanza tra i link */
  }

  /* Rimuove il margine extra dall'ultimo link */
  footer > a:first-of-type {
    margin-top: 2em;
  }
.outcome-list {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 25px;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.outcome-list li {
padding: 12px;
margin: 0;
border-bottom: 1px solid var(--border-color);
}
.outcome-list li:last-child {
border-bottom: none;
}
.outcome-list .bubble-dot {
margin-right: 12px;
min-width: 16px;
}
}