/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.16.1764923192
Updated: 2025-12-05 08:26:32

*/
@import url('https://fonts.googleapis.com/css2? family=Raleway:wght@400;600;700&display=swap');

:root {
--color-primary: #F29322; /* arancione principale */
--color-bg-light: #F6F6F6; /* grigio chiaro background */
--color-black: #000000; /* nero */
--color-white: #FFFFFF; /* bianco */
--color-text-secondary: #555555; /* testi grigi */
--color-text-main: #262626; /* titoli e testi principali */
--color-border-light: #C0C0BE; /* bordi / elementi neutri */
--max-width-hero: 1180px;
--max-width-text: 900px;
--max-width-form: 760px;
--max-width-result: 860px;
--font-main: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* RESET BASE */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-main);
	
color: var(--color-text-main);
background-color: var(--color-white);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* HEADER MINIMALE */
.header {
background-color: var(--color-primary);
color: var(--color-white);
padding: 12px 20px;
}
.header-inner {
max-width: var(--max-width-hero);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-logo {
display: flex;
align-items: center;
	gap: 8px;
}
.header-logo img {
height: 32px;
width: auto;
object-fit: cover;
}
.header-logo span {
font-weight: 700;
font-size: 20px;
}
.header-minimal-text {
font-size: 14px;
}
/* SEZIONI GENERALI */
.section {
padding: 80px 20px;
}
.section--hero {
padding-top: 120px;
padding-bottom: 80px;
background-color: var(--color-white);
}
.section--light {
background-color: var(--color-bg-light);
}
/* Paragrafo problemi – padding specifico 40/40 come da specifiche */
.section--problems {
padding-top: 40px;
padding-bottom: 40px;
}
/* Risultato – padding 100/100 */
.section--result {
padding-top: 100px;
padding-bottom: 100px;
}
/* Form finale – padding 100/100 */
.section--form {
padding-top: 100px;
padding-bottom: 100px;
}
/* Conferma – padding 120/120 */
.section--confirm {
padding-top: 120px;
padding-bottom: 120px;
}
.section-inner {
max-width: var(--max-width-hero);
margin: 0 auto;
}
/* LAYOUT HERO – 2 COLONNE (circa 6/12 – 6/12) */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.section--hero {
padding-top: 80px;
padding-bottom: 60px;
}
.hero-grid {
grid-template-columns: 1fr;
}
}
/* TIPOGRAFIA BASE */
h1,
h2,
h3 {
margin: 0;
color: var(--color-text-main);
}
.hero-title {
font-weight: 700;
font-size: 48px;
line-height: 1.1;
max-width: 700px;
}
.hero-subtitle {
margin-top: 20px;
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: var(--color-text-secondary);
max-width: 650px;
}
.section-title {
font-weight: 600;
font-size: 32px;
line-height: 1.2;
margin-bottom: 30px;
}
.section-text {
font-size: 20px;
line-height: 1.5;
color: var(--color-text-main);
}
/* Font-size mobile per testi principali e liste */
@media (max-width: 600px) {
.hero-title {
font-size: 30px;
}
.hero-subtitle {
font-size: 18px;
}
.section-title {
font-size: 26px;
}
.section-text,
.bullet-list li,
.check-list li {
font-size: 18px;
}
}
/* LISTE PUNTATE (problemi + benefici) */

.bullet-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.bullet-list li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
font-size: 20px;
line-height: 1.4;
}
.bullet-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-primary);
}
/* LISTA QUALIFICAZIONE (check) */
.check-list {
list-style: none;
	padding: 0;
margin: 0 0 24px 0;
}
.check-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
font-size: 20px;
}
.check-icon {
width: 18px;
height: 18px;
border-radius: 4px;
background-color: var(--color-primary);
}
/* Allineamento sezione qualificazione:
left su desktop, center su mobile */
.qual-section {
text-align: left;
}
@media (max-width: 600px) {
.qual-section {
text-align: center;
	}
.qual-section .qual-content {
margin-left: auto;
margin-right: auto;
}
.qual-section .check-list {
display: inline-block;
text-align: left;
}
}
/* CTA – BOTTONI */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 32px;
border-radius: 6px;
border: none;
font-weight: 600;
font-size: 20px;
text-decoration: none;
cursor: pointer;
background-color: var(--color-primary);
color: var(--color-white);
transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
	
}
.btn:hover,
.btn:focus-visible {
/* Hover specificato: #d67f1d */
background-color: #d67f1d;
box-shadow: 0 0 0 3px var(--color-border-light);
transform: translateY(-1px);
}
.btn:focus-visible {
outline: 2px solid var(--color-text-main);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
background-color: var(--color-border-light);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btn--full {
width: 100%;
}
/* MICROCOPY SOPRA CTA */	
.cta-microcopy {
font-size: 18px;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
/* IMMAGINE HERO */
.hero-image-wrapper {
width: 100%;
}
.hero-image {
width: 100%;
max-width: 620px;
height: 540px;
object-fit: cover;
border-radius: 8px;
}
/* PARAGRAFO PROBLEMI */
.problems {
max-width: var(--max-width-text);
margin: 0 auto;
}
/* SEZIONE QUALIFICAZIONE */
.qual-section .section-inner {
max-width: var(--max-width-hero);
	}
.qual-content {
max-width: var(--max-width-text);
}
/* =========================================
TEST – PARTE 2
========================================= */
.test-section {
max-width: var(--max-width-form);
margin: 0 auto;
}
.test-progress {
font-size: 16px;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
.test-step {
display: none;
}
.test-step--active {
display: block;
}
.test-question-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 32px;
color: var(--color-text-main);
}
@media (max-width: 600px) {
.test-question-title {
font-size: 22px;
}
}
/* RADIO GROUP – LAYOUT */
.radio-group {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 32px;
}
.radio-option {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
color: var(--color-text-main);
	}
/* RADIO BUTTON – STILE CUSTOM */
.radio-group input[type="radio"] {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--color-text-main); /* #262626 */
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
display: inline-block;
position: relative;
background-color: var(--color-white);
}
.radio-group input[type="radio"]:checked {
background-color: var(--color-primary); /* #F29322 */
}
.radio-group input[type="radio"]:focus-visible {
box-shadow: 0 0 0 3px var(--color-text-main); /* #262626 */
}
/* =========================================
RISULTATO – PARTE 3
========================================= */
.result-section {
max-width: var(--max-width-result);
margin: 0 auto;
}
.result-badge {
font-weight: 700;
font-size: 36px;
margin-bottom: 16px;
color: var(--color-text-main);
}
.result-subtitle {
font-size: 22px;
color: var(--color-text-secondary);
margin-bottom: 24px;
}
/* =========================================
FORM – PARTE 4
========================================= */
.form-section {
max-width: var(--max-width-form);
margin: 0 auto;
}
.form-field {
margin-bottom: 18px;
}
.form-label {
display: block;
font-size: 18px;
margin-bottom: 6px;
color: var(--color-text-main);
}
.form-input,
.form-textarea {
width: 100%;
font-size: 18px;
font-family: var(--font-main);
padding: 14px;
border-radius: 6px;
border: 1px solid var(--color-border-light);
color: var(--color-text-main);
background-color: var(--color-white);
}
/* Altezza 54px per i campi input singoli, come da specifiche */
.form-input {
height: 54px;
}
.form-input:focus-visible,
.form-textarea:focus-visible {
outline: 3px solid var(--color-primary); /* #F29322 */
border-color: var(--color-primary);
}
.form-textarea {
min-height: 140px;
resize: vertical;
}
.form-privacy {
margin: 18px 0;
font-size: 16px;
color: var(--color-text-secondary);
}
.form-privacy a {
color: var(--color-primary);
text-decoration: underline;
}
/* =========================================
CONFERMA – PARTE 5
========================================= */
.confirm-text-main {
font-size: 22px;
margin-bottom: 12px;
color: var(--color-text-main);
}
.confirm-note {
font-size: 16px;
color: var(--color-text-secondary);
}
/* FOOTER ESSENZIALE */
.footer {
background-color: var(--color-black);
color: var(--color-white);
padding: 32px 20px;
font-size: 14px;
}
.footer-inner {
max-width: var(--max-width-hero);
margin: 0 auto;
}
.footer-links {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.footer-links a {
color: var(--color-primary);
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}