/* ============================================ Memoriis Memorial - Stile Moderno tipo Hostinger ============================================ */ /* Reset e Variabili CSS */ :root { /* Colori Principali */ --color-primary: #751dc9; --color-primary-dark: #5a189a; --color-primary-light: #9446d4; --color-secondary: #6C757D; --color-success: #28A745; --color-danger: #DC3545; --color-warning: #FFC107; --color-info: #17A2B8; /* Colori Testo */ --color-text-primary: #212529; --color-text-secondary: #6C757D; --color-text-light: #ADB5BD; --color-text-white: #FFFFFF; /* Colori Sfondo */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F8F9FA; --color-bg-light: #F1F3F5; --color-bg-dark: #0B1D3D; /* Bordi */ --color-border: #DEE2E6; --color-border-light: #E9ECEF; --color-border-dark: #ADB5BD; /* Ombre */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2); /* Spaziatura */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Tipografia */ --font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* Transizioni */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; } /* Reset Globale */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Sfondo body: gestito da base.html (Tailwind + blocco page_shell_bg), non da qui — altrimenti sovrascrive bg-white / gradienti */ body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); } .container-narrow { max-width: 800px; margin: 0 auto; padding: 0 var(--spacing-lg); } .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); } /* Navbar */ nav { background-color: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); padding: var(--spacing-md) 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } nav .container { display: flex; justify-content: space-between; align-items: center; min-height: 70px; /* Altezza minima per allineamento */ } .logo-link { display: flex; align-items: center; text-decoration: none; height: 100%; } .logo-link img { height: 50px; width: auto; max-width: 180px; display: block; } .nav-links { display: flex; gap: var(--spacing-xl); align-items: center; height: 100%; flex: 1; justify-content: center; /* Centra i link nel mezzo */ margin: 0 var(--spacing-lg); } .nav-links a { color: var(--color-text-primary); text-decoration: none; font-weight: 500; font-size: var(--font-size-base); transition: color var(--transition-base); } .nav-links a:hover { color: var(--color-primary); } .auth-buttons { display: flex; align-items: center; gap: var(--spacing-md); } /* Main Content Wrapper — niente sfondo qui: lo definisce (page_shell_bg / Tailwind), altrimenti il grigio copre tutto incluso il padding della navbar */ .main-content-wrapper { min-height: calc(100vh - 60px); background-color: transparent; } /* Navbar floating: niente colore proprio — si vede lo sfondo del body (.page-shell-bg-site = gradiente globale in base) */ .navbar-sticky-shell { background-color: transparent; background-image: none; } /* Card */ .card { background-color: var(--color-bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--spacing-xl); margin-bottom: var(--spacing-lg); border: 1px solid var(--color-border-light); } .card-header { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border-light); } .card-header h2, .card-header h3 { margin: 0; color: var(--color-text-primary); font-weight: 600; } .card-body { margin-bottom: var(--spacing-md); } .card-footer { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-light); display: flex; gap: var(--spacing-md); justify-content: flex-end; } /* Form Elements */ .form-group { margin-bottom: var(--spacing-lg); } .form-label { display: block; margin-bottom: var(--spacing-sm); font-weight: 500; color: var(--color-text-primary); font-size: var(--font-size-sm); } .form-label.required::after { content: " *"; color: var(--color-danger); } .form-control { width: 100%; padding: 0.75rem 1rem; font-size: var(--font-size-base); font-family: var(--font-family); color: var(--color-text-primary); background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--transition-base); } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(117, 29, 201, 0.12); } .form-control::placeholder { color: var(--color-text-light); } textarea.form-control { resize: vertical; min-height: 100px; } select.form-control { cursor: pointer; } input[type="file"].form-control { padding: 0.5rem; cursor: pointer; } .form-text { display: block; margin-top: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .form-error { display: block; margin-top: var(--spacing-xs); font-size: var(--font-size-sm); color: var(--color-danger); } /* Buttons */ .btn { display: inline-block; padding: 0.75rem 1.5rem; font-size: var(--font-size-base); font-weight: 500; font-family: var(--font-family); text-align: center; text-decoration: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); line-height: 1.5; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary { background-color: var(--color-primary); color: var(--color-text-white); } .btn-primary:hover:not(:disabled) { background-color: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background-color: var(--color-secondary); color: var(--color-text-white); } .btn-secondary:hover:not(:disabled) { background-color: #5A6268; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-success { background-color: var(--color-success); color: var(--color-text-white); } .btn-success:hover:not(:disabled) { background-color: #218838; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-danger { background-color: var(--color-danger); color: var(--color-text-white); } .btn-danger:hover:not(:disabled) { background-color: #C82333; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-outline { background-color: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } .btn-outline:hover:not(:disabled) { background-color: var(--color-primary); color: var(--color-text-white); } .btn-sm { padding: 0.5rem 1rem; font-size: var(--font-size-sm); } .btn-lg { padding: 1rem 2rem; font-size: var(--font-size-lg); } /* Messages */ .messages { list-style: none; padding: 0; margin: var(--spacing-lg) 0; } .messages li { padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-radius: var(--radius-md); font-weight: 500; } .messages .success { background-color: #D4EDDA; color: #155724; border: 1px solid #C3E6CB; } .messages .error { background-color: #F8D7DA; color: #721C24; border: 1px solid #F5C6CB; } .messages .warning { background-color: #FFF3CD; color: #856404; border: 1px solid #FFEAA7; } .messages .info { background-color: #D1ECF1; color: #0C5460; border: 1px solid #BEE5EB; } /* Alert Boxes */ .alert { padding: var(--spacing-md); margin-bottom: var(--spacing-lg); border-radius: var(--radius-md); border-left: 4px solid; } .alert-success { background-color: #D4EDDA; color: #155724; border-color: var(--color-success); } .alert-danger { background-color: #F8D7DA; color: #721C24; border-color: var(--color-danger); } .alert-warning { background-color: #FFF3CD; color: #856404; border-color: var(--color-warning); } .alert-info { background-color: #D1ECF1; color: #0C5460; border-color: var(--color-info); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: var(--spacing-md); color: var(--color-text-primary); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } p { margin-bottom: var(--spacing-md); } /* Grid System */ .row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--spacing-md)); } .col { flex: 1; padding: 0 var(--spacing-md); } .col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 var(--spacing-md); } .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 0 var(--spacing-md); } .col-3 { flex: 0 0 25%; max-width: 25%; padding: 0 var(--spacing-md); } /* Media Gallery */ .media-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-lg); } .media-item { background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all var(--transition-base); } .media-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .media-item-image { width: 100%; height: 200px; object-fit: cover; display: block; } .media-item-video { width: 100%; height: 200px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); display: flex; align-items: center; justify-content: center; color: var(--color-text-white); font-size: var(--font-size-2xl); } .media-item-body { padding: var(--spacing-md); } .media-item-title { font-weight: 600; margin-bottom: var(--spacing-xs); font-size: var(--font-size-sm); } .media-item-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); } .media-item-actions { display: flex; gap: var(--spacing-sm); } /* Section Headers */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-border-light); } .section-title { margin: 0; font-size: var(--font-size-2xl); font-weight: 600; color: var(--color-text-primary); } /* Badge */ .badge { display: inline-block; padding: 0.25rem 0.5rem; font-size: var(--font-size-xs); font-weight: 600; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.5px; } .badge-success { background-color: var(--color-success); color: var(--color-text-white); } .badge-danger { background-color: var(--color-danger); color: var(--color-text-white); } .badge-warning { background-color: var(--color-warning); color: var(--color-text-primary); } .badge-info { background-color: var(--color-info); color: var(--color-text-white); } /* Utility Classes */ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--color-text-secondary); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-sm); } .mt-2 { margin-top: var(--spacing-md); } .mt-3 { margin-top: var(--spacing-lg); } .mt-4 { margin-top: var(--spacing-xl); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-sm); } .mb-2 { margin-bottom: var(--spacing-md); } .mb-3 { margin-bottom: var(--spacing-lg); } .mb-4 { margin-bottom: var(--spacing-xl); } /* Responsive */ @media (max-width: 768px) { .nav-links { display: none; } .col-6, .col-4, .col-3 { flex: 0 0 100%; max-width: 100%; } .media-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .card-footer { flex-direction: column; } .card-footer .btn { width: 100%; } } /* Login Page Specific */ .login-page { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl); } .login-card { background-color: var(--color-bg-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--spacing-xxl); width: 100%; max-width: 450px; } .login-card h2 { text-align: center; margin-bottom: var(--spacing-xl); color: var(--color-text-primary); } /* Assicura che i form Django ereditino le classi */ input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="url"], input[type="file"], textarea, select { width: 100%; padding: 0.75rem 1rem; font-size: var(--font-size-base); font-family: var(--font-family); color: var(--color-text-primary); background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all var(--transition-base); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="url"]:focus, input[type="file"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(117, 29, 201, 0.12); } /* ============================================ TEMA SCURO ALTERNATIVO (DEFAULT) ============================================ */ body.theme-dark { --color-primary: #af2aff; /* Colore accento viola/magenta (lettera 'e' del logo) */ --color-primary-dark: #8B1FD9; --color-primary-light: #C855FF; --color-accent: #FFD700; /* Colore oro elegante e premium */ --color-accent-dark: #DAA520; --color-secondary: #8B8B8B; --color-success: #4CAF50; --color-danger: #F44336; --color-warning: #FFC107; --color-info: #2196F3; /* Colori Testo */ --color-text-primary: #E0E0E0; --color-text-secondary: #B0B0B0; --color-text-light: #808080; --color-text-white: #FFFFFF; /* Colori Sfondo */ --color-bg-primary: #1e1e1e; --color-bg-secondary: #1e1e1e; --color-bg-light: #2a2a2a; --color-bg-dark: #151515; /* Bordi */ --color-border: #3a3a3a; --color-border-light: #2f2f2f; --color-border-dark: #4a4a4a; /* Ombre */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); } body.theme-dark { background-color: var(--color-bg-primary); color: var(--color-text-primary); } body.theme-dark nav { background-color: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body.theme-dark .main-content-wrapper { background-color: var(--color-bg-primary); } body.theme-dark .card { background-color: var(--color-bg-light); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } body.theme-dark .form-control { background-color: var(--color-bg-light); border-color: var(--color-border); color: var(--color-text-primary); } body.theme-dark .form-control:focus { background-color: var(--color-bg-light); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(175, 42, 255, 0.2); } body.theme-dark .form-control::placeholder { color: var(--color-text-light); } body.theme-dark input[type="text"], body.theme-dark input[type="email"], body.theme-dark input[type="password"], body.theme-dark input[type="date"], body.theme-dark input[type="url"], body.theme-dark input[type="file"], body.theme-dark textarea, body.theme-dark select { background-color: var(--color-bg-light); border-color: var(--color-border); color: var(--color-text-primary); } body.theme-dark input[type="text"]:focus, body.theme-dark input[type="email"]:focus, body.theme-dark input[type="password"]:focus, body.theme-dark input[type="date"]:focus, body.theme-dark input[type="url"]:focus, body.theme-dark input[type="file"]:focus, body.theme-dark textarea:focus, body.theme-dark select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(175, 42, 255, 0.2); } body.theme-dark .btn-primary { background-color: var(--color-primary); color: var(--color-text-white); font-weight: 600; border: 2px solid var(--color-primary); } body.theme-dark .btn-primary:hover:not(:disabled) { background-color: var(--color-primary-dark); box-shadow: 0 4px 12px rgba(175, 42, 255, 0.4); color: var(--color-text-white); transform: translateY(-1px); } body.theme-dark .btn-secondary { background-color: var(--color-secondary); color: var(--color-text-white); font-weight: 600; border: 2px solid var(--color-secondary); } body.theme-dark .btn-secondary:hover:not(:disabled) { background-color: #6B6B6B; color: var(--color-text-white); transform: translateY(-1px); } body.theme-dark .btn-outline { border: 2px solid var(--color-primary); color: var(--color-primary); background-color: transparent; font-weight: 600; } body.theme-dark .btn-outline:hover:not(:disabled) { background-color: var(--color-primary); color: var(--color-text-white); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(175, 42, 255, 0.3); } body.theme-dark .nav-links a { color: var(--color-text-primary); } body.theme-dark .nav-links a:hover { color: var(--color-primary); } body.theme-dark .section-header { border-bottom-color: var(--color-border); } body.theme-dark .card-header { border-bottom-color: var(--color-border); } body.theme-dark .card-footer { border-top-color: var(--color-border); } body.theme-dark .media-item { background-color: var(--color-bg-light); border-color: var(--color-border); } body.theme-dark .media-item:hover { box-shadow: 0 4px 12px rgba(175, 42, 255, 0.2); } body.theme-dark .messages .success { background-color: rgba(76, 175, 80, 0.2); color: #81C784; border-color: rgba(76, 175, 80, 0.4); } body.theme-dark .messages .error { background-color: rgba(244, 67, 54, 0.2); color: #EF5350; border-color: rgba(244, 67, 54, 0.4); } body.theme-dark .messages .warning { background-color: rgba(255, 193, 7, 0.2); color: #FFD54F; border-color: rgba(255, 193, 7, 0.4); } body.theme-dark .messages .info { background-color: rgba(33, 150, 243, 0.2); color: #64B5F6; border-color: rgba(33, 150, 243, 0.4); } body.theme-dark .alert-success { background-color: rgba(76, 175, 80, 0.15); color: #81C784; border-color: var(--color-success); } body.theme-dark .alert-danger { background-color: rgba(244, 67, 54, 0.15); color: #EF5350; border-color: var(--color-danger); } body.theme-dark .alert-warning { background-color: rgba(255, 193, 7, 0.15); color: #FFD54F; border-color: var(--color-warning); } body.theme-dark .alert-info { background-color: rgba(33, 150, 243, 0.15); color: #64B5F6; border-color: var(--color-info); } body.theme-dark .login-page { background: linear-gradient(135deg, #1e1e1e 0%, #151515 100%); } body.theme-dark .login-card { background-color: var(--color-bg-light); border: 1px solid var(--color-border); } body.theme-dark .text-muted { color: var(--color-text-secondary); } body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: var(--color-text-primary); } body.theme-dark .badge-success { background-color: var(--color-success); color: var(--color-text-white); } body.theme-dark .badge-danger { background-color: var(--color-danger); color: var(--color-text-white); } body.theme-dark .badge-warning { background-color: var(--color-warning); color: var(--color-text-primary); } body.theme-dark .badge-info { background-color: var(--color-info); color: var(--color-text-white); } /* Modali nel tema scuro */ body.theme-dark .modal { background-color: rgba(0, 0, 0, 0.8); } body.theme-dark .modal-content { background-color: var(--color-bg-light); border: 1px solid var(--color-border); } body.theme-dark .modal-header { border-bottom-color: var(--color-border); } body.theme-dark .modal-close { color: var(--color-text-secondary); } body.theme-dark .modal-close:hover { color: var(--color-text-primary); } /* Tabelle nel tema scuro */ body.theme-dark table { color: var(--color-text-primary); } body.theme-dark .targhe-table th { background-color: var(--color-bg-dark); color: var(--color-text-primary); border-bottom-color: var(--color-border); } body.theme-dark .targhe-table td { color: var(--color-text-primary); border-bottom-color: var(--color-border); } body.theme-dark .targhe-table tr:hover { background-color: var(--color-bg-dark); } /* Stat cards nel tema scuro */ body.theme-dark .stat-card { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-text-white); } /* Status badges nel tema scuro */ body.theme-dark .status-giacenza { background-color: rgba(67, 56, 202, 0.2); color: #A5B4FC; } body.theme-dark .status-impegnata { background-color: rgba(146, 64, 14, 0.2); color: #FCD34D; } body.theme-dark .status-attiva { background-color: rgba(6, 95, 70, 0.2); color: #6EE7B7; } /* Card grid nel tema scuro */ body.theme-dark .card-grid { gap: var(--spacing-lg); } body.theme-dark .card-grid .card { background-color: var(--color-bg-light); border-color: var(--color-border); } /* Intermediario theme nel tema scuro */ body.theme-dark .intermediario-theme .stat-card { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); } body.theme-dark .intermediario-theme .card-header h3 { color: var(--color-primary); border-bottom-color: var(--color-primary); } body.theme-dark .intermediario-theme .btn-primary { background-color: var(--color-primary); } body.theme-dark .intermediario-theme .btn-primary:hover:not(:disabled) { background-color: var(--color-primary-dark); } /* ============================================ STILI HOME PAGE ============================================ */ .hero-section { background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-dark) 100%); padding: 6rem 0; text-align: center; color: var(--color-text-primary); } .hero-section h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: var(--spacing-lg); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-logo { display: flex; justify-content: center; align-items: center; margin-bottom: var(--spacing-md); } .hero-logo-img { max-width: 500px; width: 100%; height: auto; object-fit: contain; } .hero-section .lead { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-xl); } .hero-section .lead { font-size: var(--font-size-xl); color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); max-width: 600px; margin-left: auto; margin-right: auto; } .cta-buttons { display: flex; gap: var(--spacing-md); justify-content: center; margin-top: var(--spacing-xl); } /* Sezioni con sfondo alternato */ .info-section { padding: 4rem 0; background-color: var(--color-bg-primary); } .info-section-alt { padding: 4rem 0; background-color: var(--color-bg-light); } .pricing-section { padding: 4rem 0; background-color: var(--color-bg-primary); } .pricing-section-alt { padding: 4rem 0; background-color: var(--color-bg-light); } .resellers-section { padding: 4rem 0; background-color: var(--color-bg-light); } .faq-section { padding: 4rem 0; background-color: var(--color-bg-primary); } /* Info Grid Orizzontale */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); max-width: 1200px; margin-left: auto; margin-right: auto; } .info-card { background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; transition: all var(--transition-base); } .info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .info-card h3 { color: var(--color-primary); margin-bottom: var(--spacing-md); font-size: var(--font-size-xl); } .info-card p { color: var(--color-text-secondary); margin: 0; } /* Pricing Cards Orizzontali */ .pricing-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); } .pricing-carousel { display: flex; gap: var(--spacing-lg); overflow-x: auto; padding: var(--spacing-lg) 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .pricing-carousel::-webkit-scrollbar { height: 8px; } .pricing-carousel::-webkit-scrollbar-track { background: var(--color-bg-dark); border-radius: var(--radius-sm); } .pricing-carousel::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-sm); } .pricing-card { flex: 0 0 350px; background-color: var(--color-bg-light); border: 2px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-xl); position: relative; scroll-snap-align: start; transition: all var(--transition-base); } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--color-primary); } .pricing-card.popular { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(175, 42, 255, 0.1); } .pricing-card.popular::before { content: "POPOLARE"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-text-white); padding: 0.25rem 1rem; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .pricing-badge { position: absolute; top: var(--spacing-md); right: var(--spacing-md); background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); color: #1e1e1e; padding: 0.5rem 1rem; border-radius: 50px; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); } .pricing-card h3 { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--spacing-sm); color: var(--color-text-primary); } .pricing-card .pricing-description { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); min-height: 40px; } .pricing-card .pricing-price { margin: var(--spacing-lg) 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); } .pricing-card .pricing-price-original { color: var(--color-text-light); text-decoration: line-through; font-size: var(--font-size-lg); } .pricing-card .pricing-price-current { font-size: 3rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; white-space: nowrap; } .pricing-card .pricing-price-period { font-size: var(--font-size-base); white-space: nowrap; } .pricing-card-full .pricing-price { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); } .pricing-card-full .pricing-price-current { font-size: 2.5rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; white-space: nowrap; } .pricing-card-full .pricing-price-period { font-size: var(--font-size-base); white-space: nowrap; } .pricing-price-original-text { color: var(--color-text-light); font-size: var(--font-size-sm); margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); font-style: italic; text-align: center; display: block; width: 100%; } .pricing-card .pricing-price-period { color: var(--color-text-secondary); font-size: var(--font-size-base); white-space: nowrap; } .pricing-card .pricing-features { list-style: none; padding: 0; margin: var(--spacing-xl) 0 var(--spacing-lg) 0; } .pricing-card-full .pricing-features { list-style: none; padding: 0; margin: var(--spacing-lg) 0; } .pricing-card .pricing-features li { padding: var(--spacing-sm) 0; color: var(--color-text-primary); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--spacing-sm); } .pricing-card .pricing-features li::before { content: "✓"; color: var(--color-primary); font-weight: 700; font-size: var(--font-size-lg); } .pricing-card .pricing-button { width: 100%; margin-top: var(--spacing-xl); padding: var(--spacing-md) var(--spacing-xl); font-weight: 600; } .pricing-card-full .pricing-button { width: 100%; margin-top: var(--spacing-xl); padding: var(--spacing-md) var(--spacing-xl); font-weight: 600; } .pricing-card-full .pricing-price { margin-bottom: var(--spacing-lg); } /* Sezione FAQ */ .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); max-width: 1200px; margin-left: auto; margin-right: auto; } .faq-item { background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); } .faq-item h4 { color: var(--color-primary); margin-bottom: var(--spacing-sm); } .faq-item p { color: var(--color-text-secondary); margin: 0; font-size: var(--font-size-sm); } /* Grid completo per tutti i piani */ .pricing-grid-full { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); max-width: 1400px; margin-left: auto; margin-right: auto; } .pricing-card-full { background-color: var(--color-bg-light); border: 2px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--spacing-xl); position: relative; transition: all var(--transition-base); } .pricing-card-full:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--color-primary); } .pricing-card-full.popular { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(175, 42, 255, 0.1); } .pricing-card-full.popular::before { content: "POPOLARE"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-text-white); padding: 0.25rem 1rem; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* Responsive */ @media (max-width: 768px) { .hero-section h1 { font-size: 2.5rem; } .info-grid { grid-template-columns: 1fr; } .pricing-card { flex: 0 0 300px; } .pricing-grid-full { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } } /* — Modifica profilo: chevron SVG al posto della freccia nativa del . Chrome/Edge/Safari usano ::-webkit-calendar-picker-indicator; Firefox può restare con icona nativa. — */ .prof-edit-page input[type="date"].form-control, .prof-edit-page input[type="date"] { padding-right: 2.625rem !important; } .prof-edit-page input[type="date"].form-control::-webkit-calendar-picker-indicator, .prof-edit-page input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1 !important; width: 1.25rem !important; height: 1.25rem !important; cursor: pointer !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; } .prof-edit-page input[type="date"].form-control:focus::-webkit-calendar-picker-indicator, .prof-edit-page input[type="date"]:focus::-webkit-calendar-picker-indicator { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23751dc9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; } body.theme-dark .prof-edit-page input[type="date"].form-control::-webkit-calendar-picker-indicator, body.theme-dark .prof-edit-page input[type="date"]::-webkit-calendar-picker-indicator { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; } body.theme-dark .prof-edit-page input[type="date"].form-control:focus::-webkit-calendar-picker-indicator, body.theme-dark .prof-edit-page input[type="date"]:focus::-webkit-calendar-picker-indicator { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; } /* Ancora più specifico (nessun dubbio su quale pagina): sidebar + form */ #visibilita-select.prof-edit-select-custom, select.prof-edit-select-custom:not([multiple]) { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 2.625rem !important; background-color: var(--color-bg-primary) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 1.125rem 1.125rem !important; } #visibilita-select.prof-edit-select-custom:focus, select.prof-edit-select-custom:not([multiple]):focus { background-color: var(--color-bg-primary) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23751dc9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; } body.theme-dark #visibilita-select.prof-edit-select-custom, body.theme-dark select.prof-edit-select-custom:not([multiple]) { background-color: var(--color-bg-light) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; } body.theme-dark #visibilita-select.prof-edit-select-custom:focus, body.theme-dark select.prof-edit-select-custom:not([multiple]):focus { background-color: var(--color-bg-light) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; }