/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Miglioramenti per mobile performance */
*,
*::before,
*::after {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Permettere la selezione del testo */
p, h1, h2, h3, h4, h5, h6, span, div {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* ======================================================
Hero: comportamento unificato per tutti gli schermi ≤1200px
- Nessuna differenza tra 118px, 600px, ecc. per la sezione hero
- Unifica immagine, CTA e bordi inferiori come nel layout ≤1200px
- Mantiene la differenza solo tra ≤1200px e >1200px
====================================================== */
/* Ottimizzazione mobile migliorata */
@media (max-width: 1200px) {
.hero {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
min-height: auto !important;
height: auto !important;
padding: calc(70px + var(--space-4)) 0 0 0 !important;
align-items: flex-start;
}
.hero-container {
padding: 0 var(--space-4);
}
.hero-content {
grid-template-columns: 1fr;
gap: var(--space-6);
padding: var(--space-6) 0;
min-height: auto;
}
.hero-text {
order: 1;
padding-right: 0;
max-width: 100%;
text-align: left;
}
.hero-visual {
order: 2;
height: auto;
padding: var(--space-4) 0 0 0;
}
.hero .main-visual-container {
position: static;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
height: 280px;
overflow: hidden;
border-radius: var(--radius-lg);
}
.hero .main-visual-container .hero-photo {
width: 100%;
max-width: 100%;
height: 280px;
max-height: 280px;
object-fit: cover;
object-position: center;
transform: none;
border-radius: var(--radius-lg);
filter: none;
}
.hero .main-visual-container::before {
display: none !important;
}
.hero .golden-glow-left,
.hero .golden-glow-right {
display: none !important;
}
.floating-elements {
display: none !important;
}
.hero .btn-pulse {
width: 100%;
max-width: 400px;
justify-content: center;
padding: var(--space-4) var(--space-6);
font-size: var(--font-size-lg);
margin: 0 auto;
}
.hero .btn-content {
align-items: center;
}
.hero .btn-main {
font-size: var(--font-size-lg);
}
.hero .btn-sub {
font-size: var(--font-size-sm);
}
}
:root {
/* Color Palette - Colori istituzionali come richiesto */
--primary-color: #1e40af; /* Blu istituzionale */
--secondary-color: #fbbf24; /* Giallo accento */
--neutral-color: #6b7280; /* Grigio neutro */
--dark-color: #1f2937; /* Grigio scuro */
--light-color: #f9fafb; /* Grigio chiaro */
--white: #ffffff;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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;
--font-size-5xl: 3rem;
--font-size-6xl: 3.75rem;
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-base: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-6xl: 8rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Transitions */
--transition-fast: 0.15s ease-in-out;
--transition-base: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--dark-color);
/* Match the color of the next (stats) section so the curved hero blends seamlessly */
background-color: var(--light-color);
overflow-x: hidden;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-4);
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: var(--transition-base);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-4);
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
.nav-logo a {
font-size: var(--font-size-xl);
font-weight: 800;
color: var(--primary-color);
text-decoration: none;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-menu {
display: flex;
gap: var(--space-8);
align-items: center;
}
.nav-link {
text-decoration: none;
color: var(--dark-color);
font-weight: 500;
position: relative;
transition: var(--transition-base);
}
.nav-link:hover {
color: var(--primary-color);
}
.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition-base);
}
.nav-link:hover::after {
width: 100%;
}
.nav-cta {
background: var(--primary-color);
color: var(--white) !important;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
transition: var(--transition-base);
}
.nav-cta:hover {
background: var(--secondary-color);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.nav-cta::after {
display: none;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.nav-toggle .bar {
width: 25px;
height: 3px;
background: var(--dark-color);
margin: 3px 0;
transition: var(--transition-base);
}
/* Mobile Navigation */
@media (max-width: 768px) {
.nav-container {
padding: 0 var(--space-4);
height: 60px;
}
.nav-logo a {
font-size: var(--font-size-lg);
}
.nav-toggle {
display: flex;
z-index: 1001;
}
.nav-menu {
position: fixed;
top: 60px;
left: -100%;
width: 100%;
height: calc(100vh - 60px);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: var(--space-6);
padding: var(--space-8) var(--space-4) calc(var(--space-8) + 60px) var(--space-4);
transition: left 0.3s ease-in-out;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Migliore compatibilità con Safari mobile */
min-height: calc(100vh - 60px);
box-sizing: border-box;
}
.nav-menu.active {
left: 0;
}
.nav-link {
font-size: var(--font-size-lg);
padding: var(--space-3) 0;
width: 100%;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav-cta {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-6);
border-bottom: none;
}
.nav-toggle.active .bar:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.nav-toggle.active .bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.active .bar:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Previeni lo scroll del body quando il menu mobile è aperto */
body.nav-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
}
/* Desktop: aumenta lo spazio tra il logo e il menu (es. Home) */
@media (min-width: 769px) {
/* Aumenta la distanza tra il logo (MercatoLibero) e i link della navbar
senza modificare il layout mobile. Usa variabili di spaziatura già
presenti per rimanere coerenti con il design. */
.nav-logo {
margin-right: var(--space-12); /* 3rem */
}
/* Opzionale: aumenta leggermente il gap tra i link per migliorare
la leggibilità su desktop. */
.nav-menu {
gap: calc(var(--space-8) + 0.5rem);
}
}
/* Hero Section */
.hero {
background: linear-gradient(135deg,
#1e293b 0%,
#334155 30%,
#475569 70%,
#64748b 100%);
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 0;
/* Slightly softer rounded bottom corners (less pronounced) */
border-bottom-left-radius: clamp(4rem, 12vw, 16rem);
border-bottom-right-radius: clamp(4rem, 12vw, 16rem);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Velo giallo molto leggero su tutta la sezione (opacità ridotte) */
linear-gradient(135deg, rgba(251, 191, 36, 0.06) 0%, rgba(251, 191, 36, 0.03) 100%),
/* Gradiente blu molto sottile negli angoli */
radial-gradient(ellipse at 75% 85%, rgba(59, 130, 246, 0.06) 0%, transparent 55%);
z-index: 1;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
z-index: 1;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
/* Sfumature dorate negli angoli inferiori per effetto di diffusione della luce */
.hero .golden-glow-left {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: clamp(8rem, 20vw, 28rem);
height: clamp(6rem, 15vw, 20rem);
background: radial-gradient(ellipse at bottom left,
rgba(251, 191, 36, 0.18) 0%,
rgba(251, 191, 36, 0.10) 35%,
transparent 65%);
z-index: 2;
border-bottom-left-radius: inherit;
pointer-events: none;
}
.hero .golden-glow-right {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: clamp(8rem, 20vw, 28rem);
height: clamp(6rem, 15vw, 20rem);
background: radial-gradient(ellipse at bottom right,
rgba(251, 191, 36, 0.18) 0%,
rgba(251, 191, 36, 0.10) 35%,
transparent 65%);
z-index: 2;
border-bottom-right-radius: inherit;
pointer-events: none;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.1) 0%,
rgba(30, 58, 138, 0.05) 50%,
rgba(15, 23, 42, 0.08) 100%);
z-index: 1;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
}
.floating-icon {
position: absolute;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.3);
font-size: 16px;
animation: floatIconSubtle 12s ease-in-out infinite;
}
.icon-1 { top: 15%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 25%; right: 15%; animation-delay: -2s; }
.icon-3 { bottom: 30%; left: 15%; animation-delay: -4s; }
.icon-4 { top: 60%; right: 25%; animation-delay: -1s; }
.icon-5 { bottom: 15%; right: 10%; animation-delay: -3s; }
@keyframes floatIconSubtle {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.2; }
50% { transform: translateY(-10px) rotate(90deg); opacity: 0.4; }
}
.hero-container {
position: relative;
z-index: 3;
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-6);
width: 100%;
}
.hero-content {
display: grid;
/* left column for text, right column reserved for the visual (50/50) */
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
min-height: 100vh;
padding: var(--space-16) 0;
max-width: 1200px;
margin: 0 auto;
}
.hero-text {
color: var(--white);
z-index: 4;
position: relative;
max-width: 600px;
padding-right: var(--space-6);
}
.hero-title {
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
font-weight: 600;
line-height: 1.3;
margin-bottom: var(--space-10);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
letter-spacing: -0.02em;
}
.title-highlight {
background: linear-gradient(135deg,
#fbbf24 0%,
#f59e0b 50%,
#d97706 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
text-shadow: none;
filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.2));
margin-bottom: var(--space-2);
font-weight: 700;
}
.title-main {
display: block;
font-weight: 500;
opacity: 0.95;
font-size: 0.65em;
line-height: 1.4;
margin-top: var(--space-2);
letter-spacing: 0.01em;
}
.hero-description {
font-size: var(--font-size-lg);
margin-bottom: var(--space-6);
opacity: 0.9;
line-height: 1.8;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
font-weight: 400;
max-width: 90%;
}
.hero-subdescription {
font-size: var(--font-size-base);
margin-bottom: var(--space-8);
opacity: 0.8;
line-height: 1.75;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
font-weight: 300;
max-width: 85%;
}
.hero-cta {
margin-top: var(--space-10);
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
align-items: center;
}
/* Common hero button styles - ensures consistent sizing */
.hero-btn {
font-size: var(--font-size-lg);
font-weight: 600;
padding: var(--space-5) var(--space-7);
border-radius: var(--radius-lg);
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-3);
border: none;
cursor: pointer;
min-width: 200px;
justify-content: center;
}
.btn-pulse {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: var(--white);
box-shadow:
0 10px 25px rgba(251, 191, 36, 0.25),
0 0 0 0 rgba(251, 191, 36, 0.5);
animation: pulseButtonSubtle 3s infinite;
}
.btn-pulse:hover {
transform: translateY(-2px);
box-shadow:
0 15px 35px rgba(251, 191, 36, 0.35),
0 0 0 0 rgba(251, 191, 36, 0.5);
color: var(--white);
text-decoration: none;
}
.btn-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
}
.btn-main {
font-weight: 700;
font-size: var(--font-size-xl);
line-height: 1.2;
}
.btn-sub {
font-size: var(--font-size-base);
font-weight: 400;
opacity: 0.8;
line-height: 1.2;
}
@keyframes pulseButtonSubtle {
0% { box-shadow: 0 10px 25px rgba(251, 191, 36, 0.25), 0 0 0 0 rgba(251, 191, 36, 0.5); }
70% { box-shadow: 0 10px 25px rgba(251, 191, 36, 0.25), 0 0 0 15px rgba(251, 191, 36, 0); }
100% { box-shadow: 0 10px 25px rgba(251, 191, 36, 0.25), 0 0 0 0 rgba(251, 191, 36, 0); }
}
/* Secondary CTA Button */
.btn-pulse-secondary {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
color: var(--white);
box-shadow:
0 10px 25px rgba(59, 130, 246, 0.25),
0 0 0 0 rgba(59, 130, 246, 0.5);
animation: pulseButtonSecondary 3s infinite;
}
.btn-pulse-secondary:hover {
transform: translateY(-2px);
box-shadow:
0 15px 35px rgba(59, 130, 246, 0.35),
0 0 0 0 rgba(59, 130, 246, 0.5);
color: var(--white);
text-decoration: none;
}
@keyframes pulseButtonSecondary {
0% { box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25), 0 0 0 0 rgba(59, 130, 246, 0.5); }
70% { box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25), 0 0 0 15px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25), 0 0 0 0 rgba(59, 130, 246, 0); }
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border: none;
border-radius: var(--radius-lg);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition-slow);
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: var(--secondary-color);
color: var(--dark-color);
box-shadow: var(--shadow-lg);
}
.btn-primary:hover {
background: #f59e0b;
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-secondary:hover {
background: var(--white);
color: var(--primary-color);
}
.btn-full {
width: 100%;
justify-content: center;
}
/* Hero Visual */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: auto;
z-index: 4;
padding: var(--space-4);
}
.main-visual-container {
position: relative;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
padding-right: 0;
margin-right: 0; /* remove offset so the image stays within its column */
}
/* Make sure image fills its column */
.hero-image, .main-visual-container img, .main-visual-container .hero-photo {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.hero-content {
grid-template-columns: 1fr; /* stack vertically */
}
.hero-visual {
order: 2;
padding: var(--space-4) 0;
}
}
/* Make the hero visual extend to the right edge of the viewport */
.hero { /* root hero section should be relative to allow absolute positioning inside */
position: relative;
overflow: visible;
/* Preserve the rounded bottom corners when right-side visual overflows */
border-bottom-left-radius: clamp(4rem, 12vw, 16rem);
border-bottom-right-radius: clamp(4rem, 12vw, 16rem);
}
.hero .main-visual-container {
position: absolute;
/* shift outward so the container's right edge sits flush with the viewport edge
(the element is positioned relative to the centered .hero-container) */
right: calc((100% - 50vw));
top: 0;
width: 45vw; /* visually occupy the right half of the screen */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.hero .main-visual-container .hero-photo {
width: 100%;
height: 100%;
object-fit: cover;
border-top-left-radius: var(--radius-full);
border-bottom-left-radius: var(--radius-full);
/* Subtle yellow-tinted glow to harmonize with hero accents */
filter: drop-shadow(-22px 0 36px rgba(251, 191, 36, 0.18))
drop-shadow(-6px 0 14px rgba(251, 191, 36, 0.25));
}
/* Rimuovi completamente l'overlay giallo dal lato sinistro dell'immagine hero */
.hero .main-visual-container::before {
display: none !important;
}
/* Overlay giallo rimosso dal lato sinistro dell'immagine hero
.hero .main-visual-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: clamp(80px, 12vw, 220px);
background: linear-gradient(
to right,
rgba(251, 191, 36, 0.28) 0%,
rgba(251, 191, 36, 0.12) 40%,
rgba(251, 191, 36, 0.0) 85%
);
pointer-events: none;
z-index: 2;
border-top-left-radius: var(--radius-full);
border-bottom-left-radius: var(--radius-full);
}
*/
@media (max-width: 1024px) {
/* reduce the visual width on medium screens to avoid covering nav */
.hero .main-visual-container {
width: 48vw;
}
.hero .main-visual-container::before {
width: clamp(60px, 16vw, 160px);
background: linear-gradient(
to right,
rgba(251, 191, 36, 0.20) 0%,
rgba(251, 191, 36, 0.10) 40%,
rgba(251, 191, 36, 0.0) 80%
);
}
.hero .main-visual-container .hero-photo {
filter: drop-shadow(-16px 0 28px rgba(251, 191, 36, 0.14))
drop-shadow(-4px 0 10px rgba(251, 191, 36, 0.18));
}
}
@media (max-width: 768px) {
.hero .main-visual-container {
position: static;
width: 100%;
height: auto;
order: 2;
}
.hero .main-visual-container .hero-photo {
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
height: auto;
filter: drop-shadow(-10px 0 18px rgba(251, 191, 36, 0.12))
drop-shadow(-3px 0 8px rgba(251, 191, 36, 0.16));
}
/* Overlay giallo rimosso anche per questa media query
.hero .main-visual-container::before {
width: clamp(40px, 20vw, 120px);
background: linear-gradient(
to right,
rgba(251, 191, 36, 0.16) 0%,
rgba(251, 191, 36, 0.08) 40%,
rgba(251, 191, 36, 0.0) 75%
);
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
*/
}
.floating-card {
position: absolute;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: var(--space-5);
border-radius: var(--radius-xl);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
gap: var(--space-4);
font-weight: 600;
color: var(--dark-color);
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.3);
min-width: 220px;
max-width: 280px;
}
.floating-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 35px 70px rgba(0, 0, 0, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.3);
color: var(--dark-color);
text-decoration: none;
background: rgba(255, 255, 255, 0.98);
}
.card-1 {
top: 5%;
left: 5%;
z-index: 15;
}
.card-2 {
top: 15%;
right: 10%;
z-index: 14;
}
.card-3 {
bottom: 35%;
left: 15%;
z-index: 13;
}
.card-4 {
bottom: 10%;
right: 15%;
z-index: 12;
}
.card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
position: relative;
overflow: hidden;
}
.card-icon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.floating-card:hover .card-icon::before {
left: 100%;
}
.card-icon i {
color: var(--white);
font-size: var(--font-size-2xl);
z-index: 1;
position: relative;
}
.card-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
}
.card-title {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--dark-color);
line-height: 1.3;
}
.card-subtitle {
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
.card-badge {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-color);
color: var(--neutral-color);
font-size: var(--font-size-sm);
}
.card-badge.verified {
background: linear-gradient(135deg, var(--success-color), #34d399);
color: var(--white);
}
.card-badge.eco {
background: linear-gradient(135deg, var(--success-color), #10b981);
color: var(--white);
}
.animated-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.energy-wave {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid rgba(251, 191, 36, 0.15);
border-radius: 50%;
animation: energyPulse 6s ease-in-out infinite;
}
.wave-1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 0s;
}
.wave-2 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -2s;
width: 300px;
height: 300px;
}
.wave-3 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -4s;
width: 400px;
height: 400px;
}
@keyframes energyPulse {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.2;
}
100% {
transform: translate(-50%, -50%) scale(1.6);
opacity: 0;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Animazioni personalizzate per l'hero */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Applicazione delle animazioni */
.hero-text {
animation: fadeInLeft 1s ease-out;
}
.hero-visual {
animation: fadeInRight 1s ease-out 0.3s both;
}
.hero-title {
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero-description {
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.hero-benefits {
animation: fadeInUp 0.8s ease-out 0.6s both;
}
.hero-cta {
animation: fadeInUp 0.8s ease-out 0.8s both;
}
.floating-card {
animation: scaleIn 0.6s ease-out both;
}
.card-1 { animation-delay: 1s; }
.card-2 { animation-delay: 1.2s; }
.card-3 { animation-delay: 1.4s; }
.card-4 { animation-delay: 1.6s; }
/* Riduce animazione per utenti che preferiscono meno movimento */
@media (prefers-reduced-motion: reduce) {
.wave-svg {
animation: waveContinuous 20s linear infinite;
}
.hero {
animation: none;
}
.floating-icon,
.floating-card,
.energy-wave {
animation-duration: 30s;
}
.btn-pulse {
animation: none;
}
}
/* Responsive Design per Hero */
@media (max-width: 1200px) {
.hero-content {
grid-template-columns: 1fr;
gap: var(--space-16);
text-align: center;
padding: var(--space-16) 0;
max-width: 100%;
}
.hero-text {
max-width: 100%;
}
/* Centra il contenuto testuale della hero sui dispositivi stretti */
.hero-text {
text-align: center;
padding-right: 0;
margin: 0 auto;
}
.hero-description,
.hero-subdescription {
margin-left: auto;
margin-right: auto;
}
.hero-cta {
display: flex;
justify-content: center;
align-items: center;
}
.btn-content {
align-items: center;
}
.hero-visual {
height: 500px;
/* Metti l'immagine sotto al testo sotto i 1200px */
order: 2;
}
/* Rendi l'immagine rettangolare e nel flusso normale sotto i 1200px */
.hero .main-visual-container {
position: static;
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.hero .main-visual-container .hero-photo {
width: 100%;
height: auto;
/* forma rettangolare */
border-radius: 0;
/* niente ombre forti per un look più pulito */
filter: none;
}
.hero .main-visual-container::before {
/* rimuovi l’overlay curvo a sinistra per mantenere forma rettangolare */
display: none;
}
/* Riduci ulteriormente l'immagine sotto i 1200px: molto più sottile in altezza e larga */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
/* sezione visiva compatta */
height: auto;
padding-top: var(--space-3);
padding-bottom: var(--space-3);
}
/* riduci la parte inferiore della hero: far coincidere il bottom della hero
con il bottom dell'immagine full-bleed */
.hero {
min-height: 0 !important;
height: auto !important;
padding-bottom: 0 !important;
align-items: flex-start; /* evita l'allineamento verticale che aggiunge spazio */
}
/* rimuovi gli arrotondamenti inferiori della hero per schermi piccoli */
.hero {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* aumenta lo spazio superiore della hero per separare il titolo dalla navbar fissa */
.hero {
padding-top: calc(70px + var(--space-6)); /* 70px nav + spazio extra */
}
.hero-content {
padding-top: var(--space-8);
}
.hero-container {
padding-bottom: 0;
}
.hero-content {
padding-bottom: 0;
}
/* nascondi i glow che si estendono oltre il bordo inferiore */
.hero .golden-glow-left,
.hero .golden-glow-right {
display: none !important;
}
/* assicurati che overlay e background non estendano la hero */
.hero::before,
.hero::after,
.hero-background,
.hero-overlay,
.floating-elements {
bottom: 0 !important;
max-height: none !important;
}
.hero .main-visual-container {
/* full-bleed: i bordi laterali coincidono con i bordi dello schermo */
width: 100vw;
max-width: none;
/* centra il full-bleed rispetto al contenitore centrato */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 0;
/* altezza mantenuta per mostrare metà dell'iPad */
height: 420px;
overflow: hidden;
}
.hero .main-visual-container .hero-photo {
max-width: 100%;
/* immagine più alta per mostrare il soggetto rilevante */
height: 420px;
max-height: 420px;
object-fit: cover; /* mantiene il ritaglio estetico */
/* sposta il focus ulteriormente verso il basso per mostrare più del tablet */
object-position: center 85%;
display: block;
transition: height 200ms ease, max-height 200ms ease, transform 200ms ease;
transform: translateY(24px); /* abbassa visivamente l'immagine */
}
.floating-card {
min-width: 200px;
max-width: 250px;
padding: var(--space-4);
}
.card-icon {
width: 50px;
height: 50px;
}
.card-icon i {
font-size: var(--font-size-xl);
}
}
@media (max-width: 768px) {
.hero {
min-height: auto;
padding: calc(70px + var(--space-4)) 0 var(--space-8) 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.hero-container {
padding: 0 var(--space-4);
}
.hero-content {
gap: var(--space-6);
padding: var(--space-4) 0;
grid-template-columns: 1fr;
min-height: auto;
}
.hero-title {
font-size: clamp(1.5rem, 6vw, 2.2rem);
margin-bottom: var(--space-4);
line-height: 1.2;
text-align: left;
}
.title-highlight {
font-size: 1.1em;
margin-bottom: var(--space-1);
}
.title-main {
font-size: 0.75em;
line-height: 1.3;
margin-top: var(--space-1);
}
.hero-description {
font-size: var(--font-size-base);
margin-bottom: var(--space-3);
max-width: 100%;
line-height: 1.6;
}
.hero-subdescription {
font-size: var(--font-size-sm);
margin-bottom: var(--space-6);
max-width: 100%;
line-height: 1.6;
}
.hero .main-visual-container {
height: 240px;
margin: 0;
border-radius: var(--radius-lg);
}
.hero .main-visual-container .hero-photo {
height: 240px;
border-radius: var(--radius-lg);
object-position: center center;
}
.btn-pulse {
width: 100%;
max-width: 100%;
justify-content: center;
padding: var(--space-4) var(--space-5);
font-size: var(--font-size-base);
margin: var(--space-2) 0;
}
.btn-content {
align-items: center;
}
.btn-main {
font-size: var(--font-size-lg);
font-weight: 600;
}
.btn-sub {
font-size: var(--font-size-sm);
opacity: 0.9;
}
.floating-card {
display: none;
}
.floating-icon {
display: none;
}
}
.btn-main {
font-size: var(--font-size-lg);
}
.hero-visual {
height: 400px;
}
.floating-card {
min-width: 160px;
max-width: 200px;
padding: var(--space-3);
gap: var(--space-3);
}
.card-1 { top: 5%; left: 5%; }
.card-2 { top: 5%; right: 5%; }
.card-3 { bottom: 25%; left: 5%; }
.card-4 { bottom: 5%; right: 5%; }
.card-icon {
width: 40px;
height: 40px;
}
.card-icon i {
font-size: var(--font-size-lg);
}
.card-title {
font-size: var(--font-size-base);
line-height: 1.2;
}
.card-subtitle {
font-size: var(--font-size-xs);
}
.floating-icon {
width: 35px;
height: 35px;
font-size: 16px;
}
.energy-wave {
width: 150px;
height: 150px;
}
.wave-2 {
width: 200px;
height: 200px;
}
.wave-3 {
width: 250px;
height: 250px;
}
@media (max-width: 480px) {
.hero {
padding: calc(60px + var(--space-3)) 0 var(--space-6) 0;
}
.hero-container {
padding: 0 var(--space-3);
}
.hero-content {
padding: var(--space-3) 0;
gap: var(--space-4);
}
.hero-title {
font-size: clamp(1.25rem, 5vw, 1.8rem);
margin-bottom: var(--space-3);
line-height: 1.1;
}
.title-highlight {
font-size: 1em;
margin-bottom: var(--space-1);
}
.title-main {
font-size: 0.8em;
line-height: 1.2;
}
.hero-description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-2);
line-height: 1.5;
}
.hero-subdescription {
font-size: var(--font-size-xs);
margin-bottom: var(--space-4);
line-height: 1.5;
}
.hero .main-visual-container {
height: 200px;
}
.hero .main-visual-container .hero-photo {
height: 200px;
object-position: center center;
}
.btn-pulse {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
}
.btn-main {
font-size: var(--font-size-base);
}
.btn-sub {
font-size: var(--font-size-xs);
}
.hero-cta {
margin-top: var(--space-4);
}
}
/* Media query per ridurre le animazioni se l'utente preferisce */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.btn-pulse {
animation: none !important;
}
.floating-icon {
animation: none !important;
}
}
/* Ottimizzazioni per schermi molto piccoli */
@media (max-width: 360px) {
.hero {
padding: calc(60px + var(--space-2)) 0 var(--space-4) 0;
}
.hero-container {
padding: 0 var(--space-2);
}
.hero-title {
font-size: clamp(1.1rem, 4.5vw, 1.5rem);
}
.title-highlight {
font-size: 0.9em;
}
.title-main {
font-size: 0.75em;
}
.hero-description {
font-size: 0.9rem;
}
.hero-subdescription {
font-size: 0.8rem;
}
.hero .main-visual-container {
height: 180px;
}
.hero .main-visual-container .hero-photo {
height: 180px;
}
.btn-pulse {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-xs);
}
.btn-main {
font-size: var(--font-size-sm);
}
.btn-sub {
font-size: 0.75rem;
}
}
/* Miglioramenti generali per il mobile */
@media (max-width: 768px) {
/* Impedisce lo scroll orizzontale su mobile */
body {
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Migliora il touch target per i link */
.nav-link {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Impedisce il body di scrollare quando il menu è aperto */
body.nav-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* Ottimizza i tap targets per mobile */
.btn-pulse {
min-height: 44px;
touch-action: manipulation;
}
/* Nasconde elementi decorativi che possono creare problemi su mobile */
.hero::before,
.hero::after {
display: none;
}
}
/* Impact Numbers Section - Aligned with site patterns */
.impact-section {
padding: var(--space-24) 0;
background: var(--white);
position: relative;
overflow: hidden;
}
.impact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(30, 64, 175, 0.02) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.impact-wrapper {
position: relative;
z-index: 1;
}
.impact-header {
text-align: center;
margin-bottom: var(--space-16);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.impact-header h2 {
font-size: var(--font-size-4xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
line-height: 1.2;
}
.impact-header p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-8);
margin-top: var(--space-12);
}
.impact-card {
background: var(--white);
padding: var(--space-8);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
text-align: center;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.impact-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.impact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: rgba(30, 64, 175, 0.2);
}
.impact-card:hover::before {
transform: scaleX(1);
}
.impact-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--secondary-color);
/* Use the brand yellow for highlights instead of orange/orange gradient */
background: linear-gradient(135deg,
var(--secondary-color) 0%,
rgba(251,191,36,0.85) 50%,
rgba(251,191,36,0.7) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-2);
line-height: 1;
}
.impact-label {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-1);
}
.impact-description {
font-size: var(--font-size-sm);
color: var(--neutral-color);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Stats Section - Hide original stats */
.stats-section {
display: none;
}
/* Services Modern Section - Aligned with site patterns */
.services-modern {
padding: var(--space-24) 0;
background: var(--light-color);
position: relative;
}
.services-intro {
text-align: center;
margin-bottom: var(--space-16);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.services-intro h2 {
font-size: var(--font-size-4xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
line-height: 1.2;
}
.services-intro p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.services-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: start;
margin-top: var(--space-16);
}
.service-main {
background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a8a 100%);
color: var(--white);
padding: var(--space-12);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.service-main::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.service-visual {
position: relative;
margin-bottom: var(--space-8);
}
.service-icon-large {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--white);
margin-bottom: var(--space-4);
backdrop-filter: blur(10px);
}
.service-badge {
position: absolute;
top: 0;
right: 0;
background: var(--secondary-color);
color: var(--dark-color);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.service-info h3 {
font-size: var(--font-size-3xl);
font-weight: 800;
margin-bottom: var(--space-4);
color: var(--white);
}
.service-info p {
font-size: var(--font-size-lg);
line-height: 1.6;
margin-bottom: var(--space-8);
color: rgba(255, 255, 255, 0.9);
}
.service-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--white);
color: var(--primary-color);
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-full);
text-decoration: none;
font-weight: 600;
font-size: var(--font-size-lg);
transition: var(--transition-base);
}
.service-cta:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.services-secondary {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.service-item {
background: var(--white);
padding: var(--space-8);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
transition: var(--transition-base);
display: flex;
align-items: flex-start;
gap: var(--space-6);
position: relative;
overflow: hidden;
}
.service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: rgba(30, 64, 175, 0.2);
}
.service-item:hover::before {
transform: scaleX(1);
}
.service-icon-small {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--white);
flex-shrink: 0;
}
.service-content h4 {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-3);
}
.service-content p {
font-size: var(--font-size-base);
color: var(--neutral-color);
line-height: 1.6;
margin-bottom: var(--space-4);
}
.service-content a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: var(--space-1);
transition: var(--transition-base);
}
.service-content a:hover {
color: var(--secondary-color);
}
/* Timeline Revolution Section - Aligned with site patterns */
.timeline-revolution {
padding: var(--space-24) 0;
background: var(--white);
position: relative;
overflow: hidden;
}
.timeline-revolution::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(30, 64, 175, 0.02) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.timeline-intro {
text-align: center;
margin-bottom: var(--space-16);
position: relative;
z-index: 1;
}
.timeline-badge {
display: inline-block;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-6);
}
.timeline-intro h2 {
font-size: var(--font-size-4xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
line-height: 1.1;
}
.timeline-intro h2 span {
display: block;
}
.timeline-intro h2 span:first-child {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.timeline-intro p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.timeline-flow {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: var(--space-12) 0;
}
.timeline-step {
display: flex;
align-items: center;
margin-bottom: var(--space-16);
position: relative;
z-index: 2;
}
.timeline-step:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-step:last-child {
margin-bottom: 0;
}
.step-marker {
position: relative;
z-index: 3;
flex-shrink: 0;
}
.step-marker i {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--white);
position: relative;
z-index: 1;
box-shadow: var(--shadow-lg);
}
.step-marker.critical i {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
animation: pulseMarker 2s ease-in-out infinite;
}
@keyframes pulseMarker {
0%, 100% {
transform: scale(1);
box-shadow: var(--shadow-lg);
}
50% {
transform: scale(1.05);
box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4), 0 0 25px rgba(239, 68, 68, 0.2);
}
}
.step-pulse {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid var(--primary-color);
border-radius: 50%;
animation: stepPulse 2s ease-out infinite;
}
.step-pulse.critical {
border-color: #f59e0b;
animation: stepPulseCritical 2s ease-out infinite;
}
@keyframes stepPulse {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
@keyframes stepPulseCritical {
0% {
transform: scale(0.8);
opacity: 1;
border-color: #f59e0b;
}
50% {
border-color: #ef4444;
}
100% {
transform: scale(1.6);
opacity: 0;
border-color: #f59e0b;
}
}
.step-content {
flex: 1;
background: var(--white);
padding: var(--space-8);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
margin: 0 var(--space-8);
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.step-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.timeline-step.critical .step-content::before {
background: linear-gradient(135deg, #f59e0b, #ef4444);
animation: contentGlow 2s ease-in-out infinite alternate;
}
@keyframes contentGlow {
0% {
box-shadow: 0 0 0 rgba(245, 158, 11, 0);
}
100% {
box-shadow: 0 -4px 20px rgba(245, 158, 11, 0.2);
}
}
.step-content:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
border-color: rgba(30, 64, 175, 0.2);
}
.step-date {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
}
.step-date.critical {
color: #f59e0b;
}
.step-content h3 {
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-4);
line-height: 1.3;
}
.step-content p {
font-size: var(--font-size-base);
color: var(--neutral-color);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.step-status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
}
.step-status.completed {
background: rgba(16, 185, 129, 0.1);
color: #065f46;
}
.step-status.critical {
background: rgba(245, 158, 11, 0.1);
color: #92400e;
}
.timeline-connector {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: var(--space-16);
background: linear-gradient(180deg, var(--primary-color) 0%, transparent 100%);
top: 80px;
}
.timeline-connector.active {
background: linear-gradient(180deg, #10b981 0%, #f59e0b 100%);
animation: connectorFlow 3s ease-in-out infinite;
}
@keyframes connectorFlow {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
transform: translateX(-50%) scaleY(1.1);
}
}
.timeline-insight {
margin-top: var(--space-20);
background: var(--white);
padding: var(--space-10);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
display: flex;
align-items: flex-start;
gap: var(--space-6);
position: relative;
overflow: hidden;
transition: var(--transition-base);
}
.timeline-insight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.timeline-insight:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
border-color: rgba(30, 64, 175, 0.2);
}
.insight-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--white);
flex-shrink: 0;
}
.insight-content h4 {
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.insight-content p {
font-size: var(--font-size-base);
color: var(--neutral-color);
line-height: 1.7;
margin-bottom: var(--space-6);
}
.insight-links {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
}
.insight-links a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
padding: var(--space-3) var(--space-4);
border: 2px solid transparent;
border-radius: var(--radius-lg);
transition: var(--transition-base);
}
.insight-links a:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-2px);
}
/* Timeline Section - Hide original timeline */
.timeline-section {
display: none;
}
.section-header {
text-align: center;
margin-bottom: var(--space-16);
}
.section-title {
font-size: var(--font-size-4xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.section-subtitle {
font-size: var(--font-size-lg);
color: var(--neutral-color);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-8);
}
.service-card {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: var(--space-8);
text-align: center;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: var(--transition-base);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-6);
color: var(--white);
font-size: var(--font-size-2xl);
transition: var(--transition-base);
}
.service-card:hover .service-icon {
transform: scale(1.1);
}
.service-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.service-description {
color: var(--neutral-color);
margin-bottom: var(--space-6);
line-height: 1.7;
}
.service-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: var(--transition-base);
}
.service-link:hover {
color: var(--secondary-color);
transform: translateX(5px);
}
/* Timeline Section - Coerente con Hero Section */
.timeline-section {
padding: var(--space-24) 0;
background: linear-gradient(135deg,
#1e293b 0%,
#334155 30%,
#475569 70%,
#64748b 100%);
position: relative;
overflow: hidden;
min-height: 100vh;
}
.timeline-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 25% 15%, rgba(251, 191, 36, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 75% 15%, rgba(59, 130, 246, 0.12) 0%, transparent 55%);
z-index: 1;
}
.timeline-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
z-index: 1;
}
/* Sfumature dorate negli angoli superiori per coerenza con la hero */
.timeline-section .golden-glow-left {
position: absolute;
top: 0;
left: 0;
width: clamp(8rem, 20vw, 28rem);
height: clamp(6rem, 15vw, 20rem);
background: radial-gradient(ellipse at top left,
rgba(251, 191, 36, 0.18) 0%,
rgba(251, 191, 36, 0.10) 35%,
transparent 65%);
z-index: 2;
pointer-events: none;
}
.timeline-section .golden-glow-right {
position: absolute;
top: 0;
right: 0;
width: clamp(8rem, 20vw, 28rem);
height: clamp(6rem, 15vw, 20rem);
background: radial-gradient(ellipse at top right,
rgba(251, 191, 36, 0.18) 0%,
rgba(251, 191, 36, 0.10) 35%,
transparent 65%);
z-index: 2;
pointer-events: none;
}
.timeline-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
/* Elementi floating come nella hero section */
.timeline-section .floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
}
.timeline-section .floating-icon {
position: absolute;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.3);
font-size: 16px;
animation: floatIconSubtle 12s ease-in-out infinite;
}
.timeline-section .icon-1 { top: 15%; left: 10%; animation-delay: 0s; }
.timeline-section .icon-2 { top: 25%; right: 15%; animation-delay: -2s; }
.timeline-section .icon-3 { bottom: 30%; left: 15%; animation-delay: -4s; }
.timeline-section .icon-4 { top: 60%; right: 25%; animation-delay: -1s; }
.timeline-section .icon-5 { bottom: 15%; right: 10%; animation-delay: -3s; }
.timeline-section .section-header {
text-align: center;
margin-bottom: var(--space-20);
position: relative;
z-index: 3;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
border: 1px solid rgba(251, 191, 36, 0.3);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--secondary-color);
margin-bottom: var(--space-4);
backdrop-filter: blur(10px);
}
.timeline-section .section-title {
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
font-weight: 600;
color: var(--white);
margin-bottom: var(--space-6);
line-height: 1.3;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
letter-spacing: -0.02em;
}
/* Styling del titolo simile alla hero section */
.timeline-section .title-highlight {
background: linear-gradient(135deg,
#fbbf24 0%,
#f59e0b 50%,
#d97706 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
text-shadow: none;
filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.2));
margin-bottom: var(--space-2);
font-weight: 700;
}
.timeline-section .title-main {
display: block;
font-weight: 500;
opacity: 0.95;
font-size: 0.65em;
line-height: 1.4;
margin-top: var(--space-2);
letter-spacing: 0.01em;
}
.timeline-section .section-subtitle {
font-size: var(--font-size-lg);
color: rgba(255, 255, 255, 0.8);
line-height: 1.75;
max-width: 600px;
margin: 0 auto;
opacity: 0.9;
font-weight: 400;
}
.timeline-container {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 3;
}
.timeline-progress {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-50%);
width: 4px;
z-index: 0;
}
.progress-line {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.progress-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 66%;
background: linear-gradient(180deg, #10b981, var(--secondary-color));
border-radius: 2px;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
animation: progressGlow 3s ease-in-out infinite alternate;
}
@keyframes progressGlow {
0% {
box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}
100% {
box-shadow: 0 0 30px rgba(16, 185, 129, 0.8), 0 0 40px rgba(251, 191, 36, 0.3);
}
}
.timeline-item {
display: flex;
align-items: center;
margin-bottom: var(--space-20);
position: relative;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-point {
display: flex;
flex-direction: column;
align-items: center;
z-index: 3;
position: relative;
}
.timeline-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
position: relative;
margin-bottom: var(--space-4);
transition: all 0.4s ease;
z-index: 10;
}
.icon-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--white), #f8fafc);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.timeline-icon.completed .icon-bg {
background: linear-gradient(135deg, #10b981, #059669);
}
.timeline-icon.critical .icon-bg {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.timeline-icon i {
position: relative;
z-index: 2;
color: var(--white);
}
.timeline-icon.completed i {
color: var(--white);
}
.timeline-icon.critical i {
color: var(--white);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.icon-ring {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: rotate 10s linear infinite;
}
.timeline-icon.completed .icon-ring {
border-color: rgba(16, 185, 129, 0.4);
}
.timeline-icon.critical .icon-ring {
border-color: rgba(245, 158, 11, 0.4);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.icon-pulse {
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: 3px solid rgba(245, 158, 11, 0.6);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
.timeline-content-wrapper {
flex: 1;
margin: 0 var(--space-12);
}
.timeline-item:nth-child(even) .timeline-content-wrapper {
text-align: right;
}
.timeline-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
transition: all 0.4s ease;
z-index: 5;
}
.timeline-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
.timeline-content.completed::before {
background: linear-gradient(90deg, #10b981, #059669);
}
.timeline-content.critical::before {
background: linear-gradient(90deg, #f59e0b, #ef4444);
animation: criticalGlow 2s ease-in-out infinite alternate;
}
@keyframes criticalGlow {
0% {
box-shadow: 0 0 5px rgba(245, 158, 11, 0.5);
}
100% {
box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 0 30px rgba(239, 68, 68, 0.4);
}
}
.timeline-content:hover {
transform: translateY(-10px);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.content-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-6);
}
.timeline-item:nth-child(even) .content-header {
flex-direction: row-reverse;
}
.timeline-date {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
color: var(--white);
padding: var(--space-3);
border-radius: var(--radius-lg);
min-width: 80px;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.timeline-date.critical {
background: linear-gradient(135deg, #f59e0b, #ef4444);
animation: dateGlow 2s ease-in-out infinite alternate;
}
@keyframes dateGlow {
0% {
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
100% {
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6), 0 0 20px rgba(239, 68, 68, 0.4);
}
}
.date-day {
font-size: var(--font-size-2xl);
font-weight: 900;
line-height: 1;
}
.date-month {
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.date-year {
font-size: var(--font-size-sm);
font-weight: 500;
opacity: 0.9;
}
.timeline-status {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
font-size: var(--font-size-sm);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
}
.timeline-status.completed {
background: rgba(16, 185, 129, 0.1);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.timeline-status.critical {
background: rgba(245, 158, 11, 0.1);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.2);
animation: statusPulse 3s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% {
background: rgba(245, 158, 11, 0.1);
}
50% {
background: rgba(245, 158, 11, 0.2);
}
}
.content-body h3 {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
line-height: 1.3;
}
.content-body p {
color: var(--neutral-color);
line-height: 1.7;
font-size: var(--font-size-base);
margin-bottom: var(--space-6);
}
.info-details {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
padding: var(--space-4);
background: rgba(30, 64, 175, 0.03);
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-color);
}
.detail-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--font-size-sm);
color: var(--dark-color);
}
.detail-item i {
color: var(--primary-color);
font-size: var(--font-size-base);
margin-top: 2px;
flex-shrink: 0;
}
.understanding-box {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.05), rgba(30, 64, 175, 0.05));
border: 1px solid rgba(251, 191, 36, 0.2);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin-top: var(--space-6);
}
.understanding-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.understanding-header i {
font-size: var(--font-size-xl);
color: var(--secondary-color);
}
.understanding-header h4 {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--dark-color);
margin: 0;
}
.understanding-content {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.understanding-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-3);
background: rgba(255, 255, 255, 0.7);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.understanding-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-sm);
flex-shrink: 0;
}
.understanding-text {
flex: 1;
font-size: var(--font-size-sm);
line-height: 1.6;
color: var(--dark-color);
}
.understanding-text strong {
color: var(--primary-color);
font-weight: 600;
}
.content-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.timeline-info-simple {
margin-top: var(--space-12);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(30, 64, 175, 0.1);
}
.timeline-info-simple .info-content {
display: flex;
gap: var(--space-3);
align-items: center;
}
.timeline-info-simple .info-icon {
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
color: var(--white);
flex-shrink: 0;
}
.timeline-info-simple .info-text p {
color: var(--neutral-color);
line-height: 1.6;
margin: 0;
font-size: var(--font-size-sm);
font-weight: 400;
}
/* Responsive Design */
@media (max-width: 768px) {
.timeline-section {
padding: var(--space-16) 0;
}
.timeline-section .section-title {
font-size: var(--font-size-3xl);
}
.timeline-progress {
left: 30px;
transform: none;
}
.timeline-item,
.timeline-item:nth-child(even) {
flex-direction: row;
}
.timeline-content-wrapper {
margin-left: var(--space-8);
margin-right: 0;
}
.timeline-item:nth-child(even) .timeline-content-wrapper {
text-align: left;
}
.content-header,
.timeline-item:nth-child(even) .content-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.understanding-item {
flex-direction: column;
text-align: center;
gap: var(--space-2);
}
.info-links {
justify-content: center;
}
.timeline-info-simple .info-content {
flex-direction: column;
text-align: center;
gap: var(--space-3);
}
.timeline-info-simple {
margin-top: var(--space-8);
padding: var(--space-4);
}
.timeline-info-simple .info-text p {
font-size: var(--font-size-xs);
}
.info-details {
padding: var(--space-3);
}
.detail-item {
font-size: var(--font-size-xs);
}
}
/* Contact Hero Section - Aligned with site patterns */
.contact-hero {
padding: var(--space-24) 0;
background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a8a 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.contact-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
pointer-events: none;
}
.contact-hero::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: var(--space-16);
align-items: start;
position: relative;
z-index: 2;
}
.contact-text {
position: relative;
}
.contact-text h2 {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--space-6);
line-height: 1.2;
color: var(--white);
position: relative;
}
.contact-text h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: var(--secondary-color);
border-radius: 2px;
}
.contact-text p {
font-size: var(--font-size-lg);
line-height: 1.7;
margin-bottom: var(--space-8);
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
}
.contact-benefits {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.benefit {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-md);
transition: all 0.3s ease;
position: relative;
}
.benefit:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateX(4px);
}
.benefit i {
color: var(--secondary-color);
font-size: var(--font-size-lg);
margin-top: 2px;
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(251, 191, 36, 0.1);
border-radius: 50%;
border: 1px solid rgba(251, 191, 36, 0.2);
}
.benefit span {
font-size: var(--font-size-base);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.contact-form-card {
background: var(--white);
padding: var(--space-10);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.contact-form-card:hover {
transform: translateY(-2px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.contact-form-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.modern-form {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.form-field {
position: relative;
}
.form-field label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-2);
}
.form-field input {
width: 100%;
padding: var(--space-4);
border: 2px solid #e5e7eb;
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
transition: var(--transition-base);
background: var(--white);
}
.form-field input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.form-field input:hover {
border-color: #d1d5db;
}
.checkbox-field {
margin-top: var(--space-2);
}
.checkbox-container {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.checkbox-container input {
margin: 0;
width: auto;
flex-shrink: 0;
}
.checkbox-container .checkmark {
width: 18px;
height: 18px;
border: 2px solid #d1d5db;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
background: var(--white);
transition: var(--transition-base);
}
.checkbox-container input:checked + .checkmark {
background: var(--primary-color);
border-color: var(--primary-color);
}
.checkbox-container input:checked + .checkmark::after {
content: '✓';
color: var(--white);
font-size: 12px;
font-weight: 600;
}
.checkbox-container a {
color: var(--primary-color);
text-decoration: underline;
}
.submit-btn {
background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
color: var(--white);
padding: var(--space-5) var(--space-8);
border: none;
border-radius: var(--radius-full);
font-size: var(--font-size-lg);
font-weight: 600;
cursor: pointer;
transition: var(--transition-base);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-4);
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(30, 64, 175, 0.4);
}
.submit-btn:active {
transform: translateY(0);
}
.submit-btn i {
transition: transform 0.3s ease;
}
.submit-btn:hover i {
transform: translateX(2px);
}
/* Form Section - Hide original form */
.form-section {
display: none;
}
/* Responsive Design for New Sections - Aligned with site patterns */
@media (max-width: 1024px) {
.services-showcase {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.contact-content {
grid-template-columns: 1fr;
gap: var(--space-12);
}
.contact-form-card {
order: -1;
}
.timeline-flow {
max-width: 100%;
padding: var(--space-8) 0;
}
.timeline-step {
flex-direction: column !important;
text-align: center;
gap: var(--space-6);
}
.step-content {
margin: 0;
max-width: 100%;
}
.timeline-connector {
display: none;
}
.timeline-insight {
flex-direction: column;
text-align: center;
gap: var(--space-4);
}
.insight-links {
justify-content: center;
}
.intro-content {
grid-template-columns: 1fr;
gap: var(--space-12);
}
}
@media (max-width: 768px) {
.impact-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-6);
}
.impact-header h2,
.services-intro h2,
.timeline-intro h2,
.contact-text h2 {
font-size: var(--font-size-3xl);
}
.service-main {
padding: var(--space-8);
}
.service-icon-large {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.service-info h3 {
font-size: var(--font-size-2xl);
}
.services-secondary {
gap: var(--space-6);
}
.service-item {
flex-direction: column;
text-align: center;
gap: var(--space-4);
}
.service-icon-small {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.step-marker i {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.step-content {
padding: var(--space-6);
}
.step-content h3 {
font-size: var(--font-size-xl);
}
.timeline-insight {
padding: var(--space-6);
}
.contact-hero {
padding: var(--space-16) 0;
}
.contact-content {
grid-template-columns: 1fr;
gap: var(--space-12);
}
.contact-form-card {
padding: var(--space-8);
order: -1;
}
.contact-text h2 {
font-size: var(--font-size-3xl);
}
.page-title {
font-size: var(--font-size-4xl);
}
.page-subtitle {
font-size: var(--font-size-lg);
}
}
@media (max-width: 480px) {
.impact-header h2,
.services-intro h2,
.timeline-intro h2 {
font-size: var(--font-size-2xl);
}
.impact-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.impact-number {
font-size: 2.5rem;
}
.service-main,
.service-item,
.step-content,
.contact-form-card {
padding: var(--space-4);
}
.contact-hero {
padding: var(--space-12) 0;
}
.contact-form-card {
padding: var(--space-4);
}
.contact-text h2 {
font-size: var(--font-size-2xl);
}
.contact-text h2 {
font-size: var(--font-size-2xl);
}
.contact-text p {
font-size: var(--font-size-base);
}
.timeline-insight {
padding: var(--space-4);
}
.page-title {
font-size: var(--font-size-3xl);
}
.page-subtitle {
font-size: var(--font-size-base);
}
.section-title {
font-size: var(--font-size-2xl);
}
.section-subtitle {
font-size: var(--font-size-base);
}
}
.form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(30, 64, 175, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.form-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
position: relative;
z-index: 1;
}
.form-title {
font-size: var(--font-size-3xl);
font-weight: 800;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-4);
line-height: 1.2;
}
.form-description {
font-size: var(--font-size-lg);
color: #475569;
margin-bottom: var(--space-8);
line-height: 1.7;
font-weight: 400;
}
.form-benefits {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
color: var(--dark-color);
font-weight: 500;
padding: var(--space-3);
background: rgba(255, 255, 255, 0.9);
border-radius: var(--radius-lg);
border: 1px solid #f1f5f9;
transition: var(--transition-base);
}
.benefit-item:hover {
background: var(--white);
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.08);
border-color: rgba(30, 64, 175, 0.1);
}
.benefit-item i {
color: var(--secondary-color);
font-size: var(--font-size-lg);
margin-top: 2px;
flex-shrink: 0;
}
.form-wrapper {
background: var(--white);
padding: var(--space-10);
border-radius: var(--radius-2xl);
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(30, 64, 175, 0.08);
border: 1px solid #f1f5f9;
position: relative;
}
.form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}
.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.form-group label {
font-weight: 600;
color: var(--dark-color);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.form-group input,
.form-group select {
padding: var(--space-4);
border: 2px solid #e2e8f0;
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
transition: all 0.3s ease;
background: var(--white);
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow:
0 0 0 4px rgba(30, 64, 175, 0.1),
0 4px 12px rgba(30, 64, 175, 0.15);
background: var(--white);
transform: translateY(-2px);
}
.checkbox-group {
flex-direction: row;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
background: #f8fafc;
border-radius: var(--radius-lg);
border: 1px solid #e5e7eb;
}
.checkbox-group input[type="checkbox"] {
width: auto;
margin: 0;
transform: scale(1.2);
}
.checkbox-group label {
font-size: var(--font-size-sm);
color: var(--neutral-color);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.checkbox-group a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
}
.checkbox-group a:hover {
text-decoration: underline;
}
.btn-full {
width: 100%;
padding: var(--space-4) var(--space-6);
font-size: var(--font-size-lg);
font-weight: 600;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border: none;
border-radius: var(--radius-lg);
color: var(--white);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 14px 0 rgba(30, 64, 175, 0.3);
position: relative;
overflow: hidden;
}
.btn-full::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-full:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px 0 rgba(30, 64, 175, 0.4);
}
.btn-full:hover::before {
left: 100%;
}
.btn-full:active {
transform: translateY(0);
}
/* Hero image replacement styles */
.hero-photo {
width: 100%;
height: 100%;
max-height: 650px;
object-fit: cover;
/* Use full radius for a semicircular left edge */
border-top-left-radius: var(--radius-full);
border-bottom-left-radius: var(--radius-full);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1);
filter: brightness(0.95) contrast(1.05);
transition: all 0.3s ease;
}
.hero-photo:hover {
transform: translateY(-2px);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.15);
}
@media (max-width: 768px) {
.hero-photo {
max-height: 400px;
/* On small screens keep a smaller radius to avoid layout issues */
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/* Footer */
.footer {
background: var(--dark-color);
color: var(--white);
padding: var(--space-20) 0 var(--space-8);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.footer-title {
font-size: var(--font-size-xl);
font-weight: 800;
margin-bottom: var(--space-4);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-subtitle {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-4);
color: var(--white);
}
.footer-description {
color: #9ca3af;
margin-bottom: var(--space-6);
line-height: 1.7;
}
.footer-social {
display: flex;
gap: var(--space-4);
}
.social-link {
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-decoration: none;
transition: var(--transition-base);
}
.social-link:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer-links a {
color: #9ca3af;
text-decoration: none;
transition: var(--transition-base);
}
.footer-links a:hover {
color: var(--white);
}
.footer-contact p {
color: #9ca3af;
margin-bottom: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-3);
}
.footer-contact i {
color: var(--primary-color);
width: 20px;
}
.newsletter-form {
display: flex;
gap: var(--space-2);
}
.newsletter-form input {
flex: 1;
padding: var(--space-3);
border: none;
border-radius: var(--radius-base);
background: #374151;
color: var(--white);
}
.newsletter-form input::placeholder {
color: #9ca3af;
}
.newsletter-form button {
padding: var(--space-3);
background: var(--primary-color);
border: none;
border-radius: var(--radius-base);
color: var(--white);
cursor: pointer;
transition: var(--transition-base);
}
.newsletter-form button:hover {
background: var(--secondary-color);
}
.footer-bottom {
border-top: 1px solid #374151;
padding-top: var(--space-8);
}
.footer-disclaimer {
background: #374151;
padding: var(--space-4);
border-radius: var(--radius-base);
margin-bottom: var(--space-6);
}
.footer-disclaimer p {
font-size: var(--font-size-sm);
color: #9ca3af;
line-height: 1.6;
}
.footer-legal {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.legal-links {
display: flex;
gap: var(--space-6);
}
.legal-links a {
color: #9ca3af;
text-decoration: none;
font-size: var(--font-size-sm);
transition: var(--transition-base);
}
.legal-links a:hover {
color: var(--white);
}
/* Back to Top */
.back-to-top {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
width: 50px;
height: 50px;
background: var(--primary-color);
border: none;
border-radius: 50%;
color: var(--white);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition-base);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--secondary-color);
transform: translateY(-2px);
}
/* AOS Animations */
[data-aos] {
pointer-events: none;
}
[data-aos].aos-animate {
pointer-events: auto;
}
/* Page Header Styles */
.page-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: calc(70px + var(--space-20)) 0 var(--space-20);
color: var(--white);
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.page-header-content {
position: relative;
z-index: 2;
}
.page-title {
font-size: var(--font-size-5xl);
font-weight: 800;
margin-bottom: var(--space-4);
line-height: 1.1;
}
.page-subtitle {
font-size: var(--font-size-xl);
opacity: 0.9;
margin-bottom: var(--space-6);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
opacity: 0.8;
}
.breadcrumb a {
color: var(--white);
text-decoration: none;
transition: var(--transition-base);
}
.breadcrumb a:hover {
opacity: 1;
}
/* Introduction Section */
.intro-section {
padding: var(--space-24) 0;
background: var(--white);
}
.intro-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.intro-description {
font-size: var(--font-size-lg);
color: var(--neutral-color);
margin-bottom: var(--space-8);
line-height: 1.8;
}
.intro-highlights {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.highlight-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background: var(--light-color);
border-radius: var(--radius-lg);
font-weight: 600;
color: var(--dark-color);
}
.highlight-item i {
color: var(--primary-color);
font-size: var(--font-size-lg);
width: 24px;
}
.intro-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.visual-card {
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: var(--transition-base);
}
.main-card {
width: 200px;
height: 200px;
border: 3px solid var(--primary-color);
z-index: 2;
}
.main-card i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: var(--space-3);
}
.main-card h3 {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-2);
}
.main-card p {
color: var(--neutral-color);
font-size: var(--font-size-sm);
}
.floating-card-1,
.floating-card-2,
.floating-card-3 {
position: absolute;
width: 120px;
height: 80px;
padding: var(--space-3);
animation: float 3s ease-in-out infinite;
/* Assicurati che le card fluttuanti stiano sopra la main-card */
z-index: 3;
}
.floating-card-1 {
top: 10%;
left: 10%;
animation-delay: -1s;
}
.floating-card-2 {
top: 20%;
right: 10%;
animation-delay: -2s;
}
.floating-card-3 {
/* Posiziona più in basso rispetto alla versione precedente e rimani sotto la main-card */
bottom: 5%;
left: 20%;
animation-delay: -0.5s;
/* Mantienila sotto la main-card (main-card ha z-index:2) */
z-index: 1;
}
.floating-card-1 i,
.floating-card-2 i,
.floating-card-3 i {
color: var(--secondary-color);
font-size: var(--font-size-xl);
margin-bottom: var(--space-2);
}
.floating-card-1 span,
.floating-card-2 span,
.floating-card-3 span {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--dark-color);
}
/* Features Section */
.features-section {
padding: var(--space-24) 0;
background: var(--light-color);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
}
.feature-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-base);
transition: var(--transition-base);
border-top: 4px solid transparent;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-top-color: var(--primary-color);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
margin-bottom: var(--space-6);
transition: var(--transition-base);
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.feature-description {
color: var(--neutral-color);
margin-bottom: var(--space-6);
line-height: 1.7;
}
.feature-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.feature-list li {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--dark-color);
font-weight: 500;
font-size: var(--font-size-sm);
}
.feature-list li::before {
content: '✓';
background: var(--success-color);
color: var(--white);
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xs);
font-weight: 700;
flex-shrink: 0;
}
/* Timeline Detailed Section */
.timeline-section-detailed {
padding: var(--space-24) 0;
background: var(--white);
}
.timeline-detailed {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.timeline-item-detailed {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-8);
align-items: start;
position: relative;
}
.timeline-item-detailed:not(:last-child)::after {
content: '';
position: absolute;
left: 100px;
top: 120px;
bottom: -64px;
width: 2px;
background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
}
.timeline-date-large {
background: var(--white);
border: 3px solid var(--primary-color);
border-radius: var(--radius-xl);
padding: var(--space-6);
text-align: center;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
position: relative;
z-index: 2;
}
.date-day {
font-size: var(--font-size-4xl);
font-weight: 800;
color: var(--primary-color);
line-height: 1;
}
.date-month {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin: var(--space-1) 0;
}
.date-year {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--secondary-color);
}
.timeline-content-detailed {
background: var(--light-color);
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
transition: var(--transition-base);
}
.timeline-content-detailed:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.timeline-badge {
position: absolute;
top: -20px;
left: var(--space-8);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-lg);
}
.timeline-badge.gas {
background: #ff6b35;
}
.timeline-badge.electricity {
background: #ffd23f;
color: var(--dark-color);
}
.timeline-badge.stg {
background: var(--primary-color);
}
.timeline-content-detailed h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
margin-top: var(--space-2);
}
.timeline-content-detailed p {
color: var(--neutral-color);
line-height: 1.7;
margin-bottom: var(--space-6);
}
.timeline-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
}
.timeline-stats .stat {
text-align: center;
padding: var(--space-4);
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.timeline-stats .stat-number {
display: block;
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--primary-color);
}
.timeline-stats .stat-label {
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
.timeline-features {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.timeline-features .feature {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background: var(--white);
border-radius: var(--radius-base);
font-weight: 500;
color: var(--dark-color);
}
.timeline-features .feature i {
color: var(--primary-color);
width: 20px;
}
/* STG Section */
.stg-section {
padding: var(--space-24) 0;
background: var(--light-color);
}
.stg-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.stg-description {
font-size: var(--font-size-lg);
color: var(--neutral-color);
margin-bottom: var(--space-8);
line-height: 1.8;
}
.stg-features h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-6);
}
.stg-feature-list {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.stg-feature {
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.feature-number {
width: 40px;
height: 40px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.feature-content h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-2);
}
.feature-content p {
color: var(--neutral-color);
line-height: 1.6;
}
.stg-diagram {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
position: relative;
}
.diagram-item {
background: var(--white);
border: 2px solid var(--primary-color);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-align: center;
min-width: 150px;
box-shadow: var(--shadow-base);
transition: var(--transition-base);
}
.diagram-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
.diagram-item i {
font-size: var(--font-size-2xl);
color: var(--primary-color);
margin-bottom: var(--space-2);
}
.diagram-item span {
display: block;
font-weight: 600;
color: var(--dark-color);
}
.diagram-item small {
color: var(--neutral-color);
font-weight: 400;
}
.diagram-arrow {
color: var(--primary-color);
font-size: var(--font-size-xl);
}
.diagram-side-arrow {
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%);
color: var(--secondary-color);
font-size: var(--font-size-xl);
}
.free-market {
position: absolute;
right: -200px;
top: 50%;
transform: translateY(-50%);
border-color: var(--secondary-color);
}
.free-market i {
color: var(--secondary-color);
}
/* 2027 Future Section */
.future-2027-section {
padding: var(--space-24) 0;
background: linear-gradient(135deg, var(--light-color), var(--white));
position: relative;
overflow: hidden;
}
.future-2027-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(30, 64, 175, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.future-content {
position: relative;
z-index: 1;
}
.future-intro {
margin-bottom: var(--space-16);
}
.intro-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-12);
display: flex;
align-items: center;
gap: var(--space-8);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(30, 64, 175, 0.1);
position: relative;
overflow: hidden;
}
.intro-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.intro-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-4xl);
flex-shrink: 0;
box-shadow: 0 10px 25px rgba(30, 64, 175, 0.2);
}
.intro-text h3 {
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.intro-text p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
line-height: 1.8;
}
.future-changes {
margin-bottom: var(--space-16);
}
.changes-title {
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-8);
text-align: center;
}
.changes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-8);
}
.change-item {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-8);
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(30, 64, 175, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.change-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.change-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.change-item:hover::before {
transform: scaleX(1);
}
.change-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
margin: 0 auto var(--space-6);
transition: transform 0.3s ease;
}
.change-item:hover .change-icon {
transform: scale(1.1) rotate(5deg);
}
.change-item h4 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.change-item p {
color: var(--neutral-color);
line-height: 1.7;
}
.future-importance {
margin-bottom: var(--space-16);
}
.importance-content {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-12);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(30, 64, 175, 0.1);
}
.importance-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.importance-header i {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--secondary-color), var(--warning-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
}
.importance-header h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
}
.importance-warning {
margin-bottom: var(--space-8);
}
.warning-box {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.warning-box i {
color: var(--warning-color);
font-size: var(--font-size-xl);
margin-top: var(--space-1);
flex-shrink: 0;
}
.warning-box p {
margin: 0;
color: var(--dark-color);
line-height: 1.7;
}
.importance-benefits h4 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-6);
}
.benefits-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.benefit-item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--light-color);
border-radius: var(--radius-lg);
border-left: 4px solid var(--success-color);
transition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(16, 185, 129, 0.05);
transform: translateX(5px);
}
.benefit-item i {
color: var(--success-color);
font-size: var(--font-size-lg);
width: 20px;
flex-shrink: 0;
}
.benefit-item span {
color: var(--dark-color);
font-weight: 500;
line-height: 1.6;
}
.future-timeline {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-12);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(30, 64, 175, 0.1);
}
.timeline-2027 .timeline-header {
text-align: center;
margin-bottom: var(--space-10);
}
.timeline-2027 .timeline-header h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.countdown-visual {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
flex-wrap: wrap;
}
.countdown-item {
text-align: center;
min-width: 200px;
}
.countdown-number {
font-size: var(--font-size-3xl);
font-weight: 800;
margin-bottom: var(--space-2);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.countdown-label {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-3);
}
.countdown-status {
display: inline-block;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.countdown-status.completed {
background: rgba(16, 185, 129, 0.1);
color: var(--success-color);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.countdown-status.active {
background: rgba(245, 158, 11, 0.1);
color: var(--warning-color);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.countdown-status.upcoming {
background: rgba(30, 64, 175, 0.1);
color: var(--primary-color);
border: 1px solid rgba(30, 64, 175, 0.2);
}
.countdown-arrow {
color: var(--primary-color);
font-size: var(--font-size-2xl);
margin: 0 var(--space-4);
}
/* Responsive Design for 2027 Future Section */
@media (max-width: 768px) {
.future-2027-section {
padding: var(--space-16) 0;
}
.intro-card {
flex-direction: column;
text-align: center;
gap: var(--space-6);
padding: var(--space-8);
}
.intro-icon {
width: 80px;
height: 80px;
font-size: var(--font-size-3xl);
}
.intro-text h3 {
font-size: var(--font-size-2xl);
}
.intro-text p {
font-size: var(--font-size-base);
}
.changes-title {
font-size: var(--font-size-2xl);
}
.changes-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.change-item {
padding: var(--space-6);
}
.change-icon {
width: 60px;
height: 60px;
font-size: var(--font-size-xl);
}
.importance-header {
flex-direction: column;
text-align: center;
gap: var(--space-3);
}
.importance-header i {
width: 50px;
height: 50px;
font-size: var(--font-size-xl);
}
.countdown-visual {
flex-direction: column;
gap: var(--space-6);
}
.countdown-arrow {
transform: rotate(90deg);
margin: var(--space-2) 0;
}
.countdown-item {
min-width: auto;
width: 100%;
}
.countdown-number {
font-size: var(--font-size-2xl);
}
}
/* CTA Section */
.cta-section {
padding: var(--space-24) 0;
background: linear-gradient(135deg, var(--dark-color), var(--primary-color));
color: var(--white);
text-align: center;
}
.cta-title {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--space-4);
}
.cta-description {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--space-8);
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
.cta-buttons {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
/* Legal Framework Section */
.legal-framework-section {
padding: var(--space-24) 0;
background: var(--white);
}
.legal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
}
@media (max-width: 768px) {
.legal-grid {
grid-template-columns: 1fr;
}
}
.legal-card {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: var(--space-8);
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.legal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: var(--transition-base);
}
.legal-card:hover::before {
transform: scaleX(1);
}
.legal-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.legal-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
margin-bottom: var(--space-6);
transition: var(--transition-base);
}
.legal-card:hover .legal-icon {
transform: scale(1.1) rotate(5deg);
}
.legal-header {
margin-bottom: var(--space-6);
}
.legal-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-2);
}
.legal-subtitle {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--secondary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.legal-description {
color: var(--neutral-color);
margin-bottom: var(--space-6);
line-height: 1.7;
}
.legal-highlights {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.highlight {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--dark-color);
}
.highlight i {
color: var(--primary-color);
width: 16px;
}
.legal-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: var(--transition-base);
}
.legal-link:hover {
color: var(--secondary-color);
transform: translateX(5px);
}
/* Detailed Sections */
.detailed-sections {
padding: var(--space-24) 0;
background: var(--light-color);
}
.detailed-section {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-12);
margin-bottom: var(--space-16);
box-shadow: var(--shadow-base);
transition: var(--transition-base);
}
.detailed-section:hover {
box-shadow: var(--shadow-lg);
}
.detailed-header {
border-bottom: 2px solid var(--light-color);
padding-bottom: var(--space-6);
margin-bottom: var(--space-8);
}
.detailed-title {
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--dark-color);
margin-bottom: var(--space-4);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.detailed-meta {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
.meta-item i {
color: var(--primary-color);
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-12);
align-items: start;
}
.content-text h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.content-text h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin: var(--space-6) 0 var(--space-4);
}
.content-text p {
color: var(--neutral-color);
line-height: 1.8;
margin-bottom: var(--space-4);
}
.innovation-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.innovation-list li {
padding: var(--space-4);
background: var(--light-color);
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-color);
line-height: 1.6;
}
.innovation-list strong {
color: var(--dark-color);
font-weight: 600;
}
.timeline-visual {
background: var(--light-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.timeline-visual h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-6);
text-align: center;
}
.timeline-mini {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.timeline-mini-item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-3);
background: var(--white);
border-radius: var(--radius-base);
box-shadow: var(--shadow-sm);
}
.timeline-mini-item .year {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--primary-color);
min-width: 50px;
}
.timeline-mini-item p {
margin: 0;
font-size: var(--font-size-sm);
color: var(--neutral-color);
}
.progress-chart {
background: var(--light-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.progress-chart h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-6);
text-align: center;
}
.progress-items {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.progress-item {
display: flex;
align-items: center;
gap: var(--space-4);
}
.progress-date {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--neutral-color);
min-width: 60px;
}
.progress-bar {
flex: 1;
height: 8px;
background: #e5e7eb;
border-radius: var(--radius-full);
position: relative;
overflow: hidden;
}
.progress-bar::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--neutral-color);
border-radius: var(--radius-full);
}
.progress-item.current .progress-date {
color: var(--primary-color);
}
.progress-item.current .progress-bar::before {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.progress-label {
font-size: var(--font-size-sm);
color: var(--neutral-color);
min-width: 120px;
}
.delibere-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-6);
}
.delibera-card {
background: var(--light-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: var(--transition-base);
}
.delibera-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.delibera-card h3 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-3);
}
.delibera-card p {
color: var(--neutral-color);
font-size: var(--font-size-sm);
line-height: 1.6;
margin-bottom: var(--space-4);
}
.delibera-features {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.feature-tag {
background: var(--primary-color);
color: var(--white);
font-size: var(--font-size-xs);
font-weight: 600;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stg-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
.mechanism-steps {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.step {
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.step-number {
width: 40px;
height: 40px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.step-content h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--space-2);
}
.step-content p {
color: var(--neutral-color);
line-height: 1.6;
margin: 0;
}
.rights-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.rights-list li {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--dark-color);
font-weight: 500;
}
/* Resources Section */
.resources-section {
padding: var(--space-24) 0;
background: var(--white);
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
}
.resource-card {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: var(--space-8);
text-align: center;
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.resource-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: var(--transition-base);
}
.resource-card:hover::before {
transform: scaleX(1);
}
.resource-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.resource-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
margin: 0 auto var(--space-6);
transition: var(--transition-base);
}
.resource-card:hover .resource-icon {
transform: scale(1.1) rotate(5deg);
}
.resource-title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.resource-description {
color: var(--neutral-color);
margin-bottom: var(--space-6);
line-height: 1.7;
}
.resource-links {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.resource-links a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--primary-color);
border-radius: var(--radius-base);
transition: var(--transition-base);
}
/* Comparison Overview */
.comparison-overview {
padding: var(--space-20) 0;
background: var(--white);
}
.overview-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-12);
align-items: center;
}
.overview-description {
font-size: var(--font-size-lg);
color: var(--neutral-color);
line-height: 1.8;
}
.overview-stats {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.stat-box {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-6);
background: var(--light-color);
border-radius: var(--radius-lg);
transition: var(--transition-base);
}
.stat-box:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
}
.stat-icon.tutelato {
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
}
.stat-icon.libero {
background: linear-gradient(135deg, var(--secondary-color), #f59e0b);
}
.stat-number {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--dark-color);
display: block;
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
/* Comparison Table */
.comparison-table-section {
padding: var(--space-24) 0;
background: var(--light-color);
}
.comparison-table-wrapper {
overflow-x: auto;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
background: var(--white);
}
.comparison-table {
width: 100%;
min-width: 800px;
}
.table-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background: linear-gradient(135deg, var(--dark-color), var(--primary-color));
color: var(--white);
}
.header-cell {
padding: var(--space-6);
text-align: center;
}
.header-cell.characteristic {
background: var(--dark-color);
}
.market-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.market-badge i {
font-size: var(--font-size-2xl);
}
.market-badge h3 {
font-size: var(--font-size-lg);
font-weight: 700;
margin: 0;
}
.market-badge.tutelato {
color: #93c5fd;
}
.market-badge.libero {
color: #fde68a;
}
.table-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 1px solid #e5e7eb;
transition: var(--transition-base);
}
.table-row:hover {
background: var(--light-color);
}
.table-row:last-child {
border-bottom: none;
}
.cell {
padding: var(--space-6);
border-right: 1px solid #e5e7eb;
}
.cell:last-child {
border-right: none;
}
.cell.characteristic {
background: #f8fafc;
border-right: 2px solid var(--primary-color);
}
.char-content {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: 600;
color: var(--dark-color);
}
.char-content i {
color: var(--primary-color);
font-size: var(--font-size-lg);
width: 24px;
}
.cell-content {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.main-text {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--dark-color);
}
.sub-text {
font-size: var(--font-size-sm);
color: var(--neutral-color);
line-height: 1.5;
}
.pros-cons {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.pro, .con {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
font-weight: 500;
}
.pro {
color: var(--success-color);
}
.con {
color: var(--danger-color);
}
.rating {
display: flex;
gap: var(--space-1);
color: var(--secondary-color);
}
.offer-types {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.offer-tag {
background: var(--primary-color);
color: var(--white);
font-size: var(--font-size-xs);
font-weight: 600;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.offer-tag.standard {
background: var(--neutral-color);
}
.offer-tag.fisso {
background: var(--primary-color);
}
.offer-tag.variabile {
background: var(--warning-color);
}
.offer-tag.green {
background: var(--success-color);
}
.offer-tag.dual {
background: #8b5cf6;
}
.status-indicator {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
width: fit-content;
}
.status-indicator.ending {
background: #fef3c7;
color: #d97706;
}
.status-indicator.permanent {
background: #d1fae5;
color: #059669;
}
.savings-meter {
display: flex;
align-items: center;
gap: var(--space-3);
}
.meter-fill {
width: 100px;
height: 8px;
background: #e5e7eb;
border-radius: var(--radius-full);
position: relative;
overflow: hidden;
}
.meter-fill::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: var(--neutral-color);
border-radius: var(--radius-full);
}
.savings-meter.low .meter-fill::before {
width: 30%;
background: var(--warning-color);
}
.savings-meter.high .meter-fill::before {
width: 85%;
background: var(--success-color);
}
.savings-meter span {
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
}
/* Advantages Section */
.advantages-section {
padding: var(--space-24) 0;
background: var(--white);
}
.advantages-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
}
.market-analysis {
background: var(--white);
border: 2px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: var(--space-8);
transition: var(--transition-base);
}
.market-analysis:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.market-analysis.tutelato {
border-color: var(--primary-color);
}
.market-analysis.libero {
border-color: var(--secondary-color);
}
.market-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-8);
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--light-color);
}
.market-analysis .market-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
}
.market-analysis.tutelato .market-icon {
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
}
.market-analysis.libero .market-icon {
background: linear-gradient(135deg, var(--secondary-color), #f59e0b);
}
.market-header h3 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin: 0;
}
.analysis-content {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.advantages h4,
.disadvantages h4 {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-6);
}
.advantages h4 {
color: var(--success-color);
}
.disadvantages h4 {
color: var(--danger-color);
}
.advantage-list,
.disadvantage-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.advantage-list li,
.disadvantage-list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-lg);
transition: var(--transition-base);
}
.advantage-list li {
background: #f0fdf4;
border-left: 4px solid var(--success-color);
}
.disadvantage-list li {
background: #fef2f2;
border-left: 4px solid var(--danger-color);
}
.advantage-list li:hover,
.disadvantage-list li:hover {
transform: translateX(5px);
}
.advantage-list i {
color: var(--success-color);
font-size: var(--font-size-lg);
margin-top: 2px;
flex-shrink: 0;
}
.disadvantage-list i {
color: var(--danger-color);
font-size: var(--font-size-lg);
margin-top: 2px;
flex-shrink: 0;
}
.advantage-list div,
.disadvantage-list div {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.advantage-list strong,
.disadvantage-list strong {
color: var(--dark-color);
font-weight: 600;
}
.advantage-list span,
.disadvantage-list span {
font-size: var(--font-size-sm);
color: var(--neutral-color);
line-height: 1.5;
}
/* Decision Guide */
.decision-guide {
padding: var(--space-24) 0;
background: var(--light-color);
}
.consumer-profiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-8);
}
.profile-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-8);
transition: var(--transition-base);
position: relative;
overflow: hidden;
}
.profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
transition: var(--transition-base);
}
.profile-card.conservative::before {
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
}
.profile-card.active::before {
background: linear-gradient(135deg, var(--secondary-color), #f59e0b);
}
.profile-card.green::before {
background: linear-gradient(135deg, var(--success-color), #22c55e);
}
.profile-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.profile-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.profile-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
}
.profile-card.conservative .profile-icon {
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
}
.profile-card.active .profile-icon {
background: linear-gradient(135deg, var(--secondary-color), #f59e0b);
}
.profile-card.green .profile-icon {
background: linear-gradient(135deg, var(--success-color), #22c55e);
}
.profile-header h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin: 0;
}
.profile-description {
margin-bottom: var(--space-6);
}
.profile-description p {
color: var(--neutral-color);
line-height: 1.7;
}
.profile-features {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.profile-features .feature {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--dark-color);
}
.profile-features i {
color: var(--primary-color);
width: 20px;
}
.profile-recommendation {
padding: var(--space-4);
border-radius: var(--radius-lg);
border-left: 4px solid;
}
.profile-recommendation.tutelato {
background: #dbeafe;
border-color: var(--primary-color);
}
.profile-recommendation.libero {
background: #fef3c7;
border-color: var(--secondary-color);
}
.profile-recommendation.green {
background: #d1fae5;
border-color: var(--success-color);
}
.profile-recommendation strong {
color: var(--dark-color);
font-weight: 600;
display: block;
margin-bottom: var(--space-2);
}
.profile-recommendation p {
font-size: var(--font-size-sm);
color: var(--neutral-color);
line-height: 1.5;
margin: 0;
}
/* Calculator Teaser */
.calculator-teaser {
padding: var(--space-24) 0;
background: linear-gradient(135deg, var(--dark-color), var(--primary-color));
color: var(--white);
}
.teaser-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
}
.teaser-text h2 {
font-size: var(--font-size-3xl);
font-weight: 800;
margin-bottom: var(--space-4);
}
.teaser-text p {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--space-6);
line-height: 1.7;
}
.teaser-features {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.teaser-features li {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: 500;
}
.teaser-features i {
color: var(--secondary-color);
width: 20px;
}
.teaser-action {
text-align: center;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.savings-preview {
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
padding: var(--space-8);
backdrop-filter: blur(10px);
}
.savings-amount {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.currency {
font-size: var(--font-size-2xl);
font-weight: 600;
opacity: 0.8;
}
.amount {
font-size: var(--font-size-6xl);
font-weight: 800;
background: linear-gradient(135deg, var(--secondary-color), #fde68a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.savings-label {
font-size: var(--font-size-lg);
font-weight: 600;
opacity: 0.9;
}
.btn-large {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-lg);
}
/* Filter Section */
.filter-section {
padding: var(--space-16) 0;
background: var(--light-color);
}
.filter-wrapper {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-10);
box-shadow: var(--shadow-lg);
}
.filter-header {
text-align: center;
margin-bottom: var(--space-10);
}
.filter-header h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.filter-header p {
color: var(--neutral-color);
font-size: var(--font-size-lg);
}
.comparison-form {
display: flex;
flex-direction: column;
gap: var(--space-10);
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.form-group label {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
}
.form-group label i {
color: var(--primary-color);
width: 20px;
}
.radio-grid,
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
}
.radio-option,
.checkbox-option {
position: relative;
cursor: pointer;
}
.radio-option input,
.checkbox-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-label,
.checkbox-label {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
border: 2px solid #e5e7eb;
border-radius: var(--radius-lg);
transition: var(--transition-base);
text-align: center;
}
.radio-label i,
.checkbox-label i {
font-size: var(--font-size-xl);
color: var(--neutral-color);
transition: var(--transition-base);
}
.radio-label strong,
.checkbox-label strong {
font-weight: 600;
color: var(--dark-color);
}
.radio-label small,
.checkbox-label small {
font-size: var(--font-size-xs);
color: var(--neutral-color);
font-weight: 400;
}
.radio-option input:checked + .radio-label,
.checkbox-option input:checked + .checkbox-label {
border-color: var(--primary-color);
background: #dbeafe;
}
.radio-option input:checked + .radio-label i,
.checkbox-option input:checked + .checkbox-label i {
color: var(--primary-color);
}
.range-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.range-wrapper input[type="range"] {
width: 100%;
height: 8px;
border-radius: var(--radius-full);
background: #e5e7eb;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.range-wrapper input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
box-shadow: var(--shadow-md);
}
.range-wrapper input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
border: none;
box-shadow: var(--shadow-md);
}
.range-labels {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
color: var(--neutral-color);
}
#consumoValue {
background: var(--primary-color);
color: var(--white);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-weight: 600;
}
.consumption-guide {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-3);
}
.guide-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
padding: var(--space-2);
border-radius: var(--radius-md);
background: #f8fafc;
}
.guide-range {
font-weight: 600;
color: var(--primary-color);
}
.guide-type {
color: var(--neutral-color);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3);
}
.feature-option {
position: relative;
cursor: pointer;
}
.feature-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.feature-label {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 2px solid #e5e7eb;
border-radius: var(--radius-lg);
transition: var(--transition-base);
font-weight: 500;
color: var(--dark-color);
}
.feature-label i {
color: var(--neutral-color);
transition: var(--transition-base);
width: 20px;
}
.feature-option input:checked + .feature-label {
border-color: var(--primary-color);
background: #dbeafe;
}
.feature-option input:checked + .feature-label i {
color: var(--primary-color);
}
.select-input {
padding: var(--space-3);
border: 2px solid #e5e7eb;
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
background: var(--white);
transition: var(--transition-base);
}
.select-input:focus {
outline: none;
border-color: var(--primary-color);
}
.form-actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
/* Offers Section */
.offers-section {
padding: var(--space-20) 0;
background: var(--white);
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-12);
flex-wrap: wrap;
gap: var(--space-4);
}
.results-header h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin: 0;
}
.results-summary {
display: flex;
flex-direction: column;
gap: var(--space-1);
text-align: right;
}
.results-count {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
}
.potential-savings {
font-size: var(--font-size-sm);
color: var(--success-color);
font-weight: 500;
}
.offers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: var(--space-8);
margin-bottom: var(--space-12);
}
.offer-card {
background: var(--white);
border: 2px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
transition: var(--transition-base);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.offer-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.offer-card.featured {
border-color: var(--primary-color);
background: linear-gradient(135deg, #fafbff, #f0f7ff);
}
.offer-badge {
position: absolute;
top: -2px;
right: var(--space-6);
background: var(--primary-color);
color: var(--white);
padding: var(--space-2) var(--space-4);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-2);
}
.offer-badge.green {
background: var(--success-color);
}
.provider-info {
display: flex;
align-items: center;
gap: var(--space-4);
}
.provider-logo {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.provider-details h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin: 0 0 var(--space-1) 0;
}
.provider-name {
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
.rating {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
}
.stars {
color: var(--secondary-color);
font-size: var(--font-size-sm);
}
.rating-score {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--dark-color);
}
.offer-price {
text-align: center;
padding: var(--space-4);
background: var(--light-color);
border-radius: var(--radius-lg);
}
.current-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--space-1);
}
.price-value {
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--dark-color);
}
.price-unit {
font-size: var(--font-size-lg);
color: var(--neutral-color);
font-weight: 500;
}
.price-comparison {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-2);
}
.old-price {
font-size: var(--font-size-sm);
color: var(--neutral-color);
text-decoration: line-through;
}
.savings {
background: var(--success-color);
color: var(--white);
font-size: var(--font-size-xs);
font-weight: 600;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
}
.offer-features .feature-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.feature-item {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--dark-color);
}
.feature-item i {
color: var(--primary-color);
width: 20px;
font-size: var(--font-size-base);
}
.savings-estimate {
text-align: center;
padding: var(--space-4);
background: #f0fdf4;
border: 2px solid var(--success-color);
border-radius: var(--radius-lg);
}
.savings-estimate .amount {
font-size: var(--font-size-2xl);
font-weight: 800;
color: var(--success-color);
}
.savings-estimate .period {
font-size: var(--font-size-sm);
color: var(--dark-color);
font-weight: 600;
margin-left: var(--space-2);
}
.savings-details {
font-size: var(--font-size-xs);
color: var(--neutral-color);
margin-top: var(--space-2);
}
.offer-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: auto;
}
.btn-full {
width: 100%;
justify-content: center;
}
.load-more {
text-align: center;
}
/* Calculator Section */
.calculator-section {
padding: var(--space-20) 0;
background: var(--light-color);
}
.calculator-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.calculator-header {
margin-bottom: var(--space-10);
}
.calculator-header h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.calculator-header p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
}
.calculator-form {
background: var(--white);
padding: var(--space-8);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.input-group {
display: flex;
flex-direction: column;
gap: var(--space-3);
text-align: left;
}
.input-group label {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--dark-color);
}
.input-with-icon {
position: relative;
}
.input-with-icon i {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--neutral-color);
}
.input-with-icon input {
padding-left: var(--space-10);
}
.input-group input,
.input-group select {
padding: var(--space-3);
border: 2px solid #e5e7eb;
border-radius: var(--radius-lg);
font-size: var(--font-size-base);
transition: var(--transition-base);
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1);
}
/* Help Section */
.help-section {
padding: var(--space-20) 0;
background: var(--white);
}
.help-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-12);
align-items: center;
}
.help-text h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.help-text p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
margin-bottom: var(--space-6);
line-height: 1.7;
}
.help-features {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.help-feature {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--light-color);
border-radius: var(--radius-lg);
}
.help-feature i {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--primary-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.help-feature div {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.help-feature strong {
font-weight: 600;
color: var(--dark-color);
}
.help-feature span {
font-size: var(--font-size-sm);
color: var(--neutral-color);
}
.help-actions {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* FAQ Search */
.faq-search {
padding: var(--space-16) 0;
background: var(--light-color);
}
.search-wrapper {
max-width: 800px;
margin: 0 auto;
}
.search-input-wrapper {
position: relative;
margin-bottom: var(--space-6);
}
.search-input-wrapper i {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--neutral-color);
font-size: var(--font-size-lg);
}
.search-input-wrapper input {
width: 100%;
padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
border: 2px solid #e5e7eb;
border-radius: var(--radius-xl);
font-size: var(--font-size-lg);
background: var(--white);
transition: var(--transition-base);
}
.search-input-wrapper input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.clear-btn {
position: absolute;
right: var(--space-4);
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--neutral-color);
font-size: var(--font-size-lg);
cursor: pointer;
padding: var(--space-2);
border-radius: 50%;
transition: var(--transition-base);
display: none;
}
.clear-btn:hover {
background: #f3f4f6;
color: var(--dark-color);
}
.clear-btn.visible {
display: block;
}
.search-suggestions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.suggestion-label {
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
.suggestion-tag {
background: var(--white);
border: 1px solid #e7eaf0;
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
color: var(--dark-color);
cursor: pointer;
transition: var(--transition-base);
}
.suggestion-tag:hover {
border-color: var(--primary-color);
background: #dbeafe;
color: var(--primary-color);
}
/* FAQ Categories */
.faq-categories {
padding: var(--space-16) 0;
background: var(--white);
}
.categories-header {
text-align: center;
margin-bottom: var(--space-12);
}
.categories-header h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.categories-header p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-6);
}
.category-card {
background: var(--white);
border: 2px solid #e5e7eb;
border-radius: var(--radius-xl);
padding: var(--space-6);
text-align: center;
transition: var(--transition-base);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.category-card.active {
border-color: var(--primary-color);
background: #dbeafe;
}
.category-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
transition: var(--transition-base);
}
.category-card.active .category-icon {
background: linear-gradient(135deg, var(--secondary-color), #f59e0b);
}
.category-card h3 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin: 0;
}
.question-count {
font-size: var(--font-size-sm);
color: var(--neutral-color);
font-weight: 500;
}
/* FAQ Content */
.faq-content {
padding: var(--space-20) 0;
background: var(--light-color);
}
.faq-wrapper {
max-width: 900px;
margin: 0 auto;
}
.faq-group {
margin-bottom: var(--space-12);
}
.faq-group-title {
display: flex;
align-items: center;
gap: var(--space-4);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-8);
padding-bottom: var(--space-4);
border-bottom: 3px solid var(--primary-color);
}
.faq-group-title i {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
}
.faq-item {
background: var(--white);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
overflow: hidden;
}
.faq-item:hover {
box-shadow: var(--shadow-md);
}
.faq-question {
width: 100%;
background: none;
border: none;
padding: var(--space-6);
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
transition: var(--transition-base);
}
.faq-question:hover {
background: var(--light-color);
}
.faq-question i {
color: var(--primary-color);
transition: var(--transition-base);
font-size: var(--font-size-base);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-item.active .faq-answer {
max-height: 1000px;
transition: max-height 0.5s ease-in;
}
.answer-content {
padding: 0 var(--space-6) var(--space-6) var(--space-6);
border-top: 1px solid #e5e7eb;
}
.answer-content p {
color: var(--neutral-color);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.answer-highlights {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-4);
}
.highlight-item {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--success-color);
font-weight: 500;
}
.highlight-item i {
width: 20px;
}
.timeline-info {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-4);
}
.timeline-item {
display: flex;
gap: var(--space-4);
padding: var(--space-4);
background: #f8fafc;
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-color);
}
.timeline-date {
font-weight: 700;
color: var(--primary-color);
min-width: 120px;
}
.timeline-desc {
color: var(--neutral-color);
}
.vulnerable-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.category-item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: #f0fdf4;
border-radius: var(--radius-lg);
border-left: 4px solid var(--success-color);
}
.category-item i {
color: var(--success-color);
font-size: var(--font-size-xl);
width: 30px;
}
.category-item div {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.category-item strong {
color: var(--dark-color);
font-weight: 600;
}
.category-item span {
font-size: var(--font-size-sm);
color: var(--neutral-color);
}
.warning-box {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background: #fef3c7;
border: 1px solid var(--warning-color);
border-radius: var(--radius-lg);
margin-top: var(--space-4);
}
.warning-box i {
color: var(--warning-color);
font-size: var(--font-size-xl);
margin-top: 2px;
}
.warning-box div {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.warning-box strong {
color: var(--dark-color);
font-weight: 600;
}
.warning-box span {
color: var(--neutral-color);
font-size: var(--font-size-sm);
}
.cost-breakdown {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-4);
}
.cost-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-3);
border-radius: var(--radius-lg);
}
.cost-item.free {
background: #f0fdf4;
}
.cost-item i {
color: var(--success-color);
margin-right: var(--space-3);
}
.cost-item strong {
color: var(--success-color);
font-weight: 600;
}
.process-timeline {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-4);
}
.process-step {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.step-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.step-content strong {
color: var(--dark-color);
font-weight: 600;
}
.step-content span {
color: var(--neutral-color);
}
.step-content small {
font-size: var(--font-size-xs);
color: var(--primary-color);
font-weight: 500;
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.advantage-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: #f0f7ff;
border-radius: var(--radius-lg);
text-align: center;
}
.advantage-card i {
color: var(--primary-color);
font-size: var(--font-size-2xl);
}
.advantage-card strong {
color: var(--dark-color);
font-weight: 600;
}
.advantage-card span {
font-size: var(--font-size-sm);
color: var(--neutral-color);
}
.evaluation-checklist {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-top: var(--space-4);
}
.checklist-section h4 {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--dark-color);
font-weight: 600;
margin-bottom: var(--space-3);
}
.checklist-section h4 i {
color: var(--primary-color);
width: 20px;
}
.checklist-section ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.checklist-section li {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--neutral-color);
font-size: var(--font-size-sm);
}
.checklist-section li::before {
content: '•';
color: var(--primary-color);
font-weight: bold;
font-size: var(--font-size-lg);
}
.bill-breakdown {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-4);
}
.bill-component {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: #f8fafc;
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-color);
}
.component-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 700;
font-size: var(--font-size-sm);
}
.component-icon.energy {
background: var(--primary-color);
}
.component-icon.transport {
background: var(--secondary-color);
}
.component-icon.system {
background: var(--warning-color);
}
.component-icon.taxes {
background: var(--neutral-color);
}
.component-info {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.component-info strong {
color: var(--dark-color);
font-weight: 600;
}
.component-info span {
color: var(--neutral-color);
font-size: var(--font-size-sm);
}
.green-sources {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
margin: var(--space-4) 0;
}
.source-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
background: #f0fdf4;
border-radius: var(--radius-lg);
text-align: center;
}
.source-item i {
color: var(--success-color);
font-size: var(--font-size-xl);
}
.source-item strong {
color: var(--dark-color);
font-weight: 600;
font-size: var(--font-size-sm);
}
.info-box {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background: #dbeafe;
border: 1px solid var(--primary-color);
border-radius: var(--radius-lg);
margin-top: var(--space-4);
}
.info-box i {
color: var(--primary-color);
font-size: var(--font-size-lg);
margin-top: 2px;
}
.info-box p {
color: var(--neutral-color);
font-size: var(--font-size-sm);
margin: 0;
}
.no-results {
text-align: center;
padding: var(--space-16) 0;
}
.no-results-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.no-results-content i {
font-size: var(--font-size-6xl);
color: var(--neutral-color);
opacity: 0.5;
}
.no-results-content h3 {
font-size: var(--font-size-xl);
color: var(--dark-color);
margin: 0;
}
.no-results-content p {
color: var(--neutral-color);
margin: 0;
}
/* Contact Support */
.contact-support {
padding: var(--space-20) 0;
background: var(--white);
}
.support-content {
text-align: center;
}
.support-text {
margin-bottom: var(--space-12);
}
.support-text h2 {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.support-text p {
font-size: var(--font-size-lg);
color: var(--neutral-color);
max-width: 600px;
margin: 0 auto;
}
.support-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-8);
}
.support-option {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-8);
background: var(--light-color);
border-radius: var(--radius-xl);
transition: var(--transition-base);
}
.support-option:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.option-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), #3b82f6);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
flex-shrink: 0;
}
.option-content {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: left;
}
.option-content h3 {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin: 0;
}
.option-content p {
color: var(--neutral-color);
margin: 0;
}
.option-content strong {
color: var(--primary-color);
font-weight: 700;
}
/* Hidden elements */
.faq-group.hidden {
display: none;
}
.faq-item.hidden {
display: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.search-suggestions {
flex-direction: column;
align-items: flex-start;
}
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
}
.support-options {
grid-template-columns: 1fr;
}
.support-option {
flex-direction: column;
text-align: center;
}
.support-option .option-content {
text-align: center;
}
.vulnerable-categories,
.advantages-grid,
.green-sources {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-container {
padding: 0 var(--space-2);
}
.hero-content {
padding: var(--space-4) 0;
}
.hero-badge {
padding: var(--space-2) var(--space-3);
font-size: 11px;
}
.hero-title {
font-size: var(--font-size-2xl);
}
.hero-title .title-main {
font-size: var(--font-size-xl);
}
.hero-title .title-sub {
font-size: var(--font-size-base);
}
.hero-description {
font-size: var(--font-size-sm);
}
.hero-benefits .benefit-item {
font-size: var(--font-size-sm);
}
.main-visual-container {
height: 250px;
padding: var(--space-2);
}
.energy-meter {
width: 120px;
height: 120px;
}
.meter-display i {
font-size: 1.5rem;
}
.meter-value {
font-size: var(--font-size-lg);
}
}
/* ======================================
ENHANCED HERO SECTION STYLES
====================================== */
/* Hero Background */
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.hero-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Prefer custom hero image; fallback to bundled Pexels photo when missing */
/* WebP prima, fallback JPEG (se presente), quindi fallback generico */
background-image: url('../img/hero-coppia-tablet.webp'), url('../img/hero-coppia-tablet.jpg'), url('../pexels-marcus-aurelius-6787959.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(30, 64, 175, 0.1) 0%, rgba(79, 70, 229, 0.05) 50%, rgba(251, 191, 36, 0.08) 100%);
z-index: 2;
}
/* Floating Elements */
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.floating-icon {
position: absolute;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
font-size: 24px;
animation: float 6s ease-in-out infinite;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.floating-icon.icon-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-icon.icon-2 {
top: 30%;
right: 15%;
animation-delay: 1s;
}
.floating-icon.icon-3 {
bottom: 40%;
left: 5%;
animation-delay: 2s;
}
.floating-icon.icon-4 {
bottom: 30%;
right: 10%;
animation-delay: 3s;
}
.floating-icon.icon-5 {
top: 60%;
left: 50%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-10px) rotate(5deg); }
50% { transform: translateY(-20px) rotate(0deg); }
75% { transform: translateY(-10px) rotate(-5deg); }
}
/* Hero Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(239, 68, 68, 0.9);
color: var(--white);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: var(--space-6);
animation: pulse 2s infinite;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Enhanced Hero Title */
.hero-title .title-main {
background: linear-gradient(135deg, #ffffff 0%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
}
.hero-title .title-sub {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
font-size: var(--font-size-2xl);
}
/* Hero Benefits */
.hero-benefits {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: var(--space-6) 0 var(--space-6) 0;
}
.hero-benefits .benefit-item {
display: flex;
align-items: center;
gap: var(--space-3);
color: rgba(255, 255, 255, 0.95);
font-size: var(--font-size-lg);
padding: var(--space-2) 0;
}
.hero-benefits .benefit-item i {
color: var(--success-color);
font-size: var(--font-size-xl);
}
/* Enhanced CTA Buttons */
.btn-pulse {
position: relative;
overflow: hidden;
animation: buttonPulse 3s infinite;
}
.btn-pulse::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.btn-pulse:hover::before {
left: 100%;
}
@keyframes buttonPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); }
50% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); }
}
.btn-primary span {
display: block;
}
.btn-primary small {
font-size: var(--font-size-xs);
opacity: 0.9;
font-weight: 400;
}
/* Enhanced Visual Section */
.main-visual-container {
position: relative;
width: 100%;
height: 800px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: var(--space-8);
padding-right: 0;
margin-right: -8%;
}
.central-graphic {
position: relative;
z-index: 10;
display: none; /* Nasconde la box centrale */
}
.energy-meter {
width: 200px;
height: 200px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
animation: rotate 10s linear infinite;
}
.meter-display {
text-align: center;
color: white;
}
.meter-display i {
font-size: 3rem;
color: var(--secondary-color);
margin-bottom: var(--space-2);
}
.meter-value {
display: block;
font-size: var(--font-size-3xl);
font-weight: 800;
color: var(--secondary-color);
}
.meter-label {
display: block;
font-size: var(--font-size-sm);
opacity: 0.9;
margin-top: var(--space-1);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Enhanced Floating Cards */
.floating-card {
position: absolute;
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-xl);
padding: var(--space-4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all var(--transition-base);
min-width: 180px;
z-index: 15; /* Sopra i cerchi animati */
}
.floating-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.floating-card .card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-3);
color: white;
font-size: var(--font-size-xl);
}
.card-content {
flex: 1;
}
.card-title {
display: block;
font-weight: 700;
color: var(--dark-color);
font-size: var(--font-size-base);
margin-bottom: var(--space-1);
}
.card-subtitle {
display: block;
font-size: var(--font-size-sm);
color: var(--neutral-color);
}
.card-badge {
position: absolute;
top: -10px;
right: -10px;
width: 40px;
height: 40px;
background: var(--success-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: var(--font-size-sm);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.card-badge.verified {
background: var(--success-color);
}
.card-badge.eco {
background: var(--success-color);
}
/* Card Positioning */
.floating-card.card-1 {
top: 15%; /* Energia Elettrica - leggermente più in alto */
right: 30%;
animation-delay: 0s;
}
.floating-card.card-2 {
top: 33%; /* Gas Naturale - leggermente più in basso */
right: -5%;
animation-delay: 1s;
}
.floating-card.card-3 {
bottom: 30%; /* Protezione ARERA - leggermente più in alto */
right: 20%;
animation-delay: 2s;
}
.floating-card.card-4 {
bottom: 10%; /* Energia Verde - leggermente più in basso */
right: -10%;
animation-delay: 3s;
}
/* Animated Background */
.animated-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5; /* Sotto le floating cards */
}
.energy-wave {
position: absolute;
width: 300px;
height: 300px;
border: 2px solid rgba(251, 191, 36, 0.3);
border-radius: 50%;
animation: wave 8s ease-in-out infinite;
}
.energy-wave.wave-1 {
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
animation-delay: 0s;
}
.energy-wave.wave-2 {
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
animation-delay: 2s;
width: 400px;
height: 400px;
}
.energy-wave.wave-3 {
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
animation-delay: 4s;
width: 500px;
height: 500px;
}
@keyframes wave {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.5;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.hero-container {
padding: 0 var(--space-4);
}
.hero-content {
gap: var(--space-12);
}
.floating-card.card-1 {
right: 15%;
top: 22%; /* Energia Elettrica - leggermente più in alto */
}
.floating-card.card-2 {
right: -10%;
top: 38%; /* Gas Naturale - leggermente più in basso */
}
.floating-card.card-3 {
right: 15%;
bottom: 38%; /* Protezione ARERA - leggermente più in alto */
}
.floating-card.card-4 {
right: -10%;
bottom: 22%; /* Energia Verde - leggermente più in basso */
}
}
@media (max-width: 768px) {
.hero {
min-height: auto;
padding: var(--space-8) 0;
}
.hero-container {
padding: 0 var(--space-3);
}
.hero-content {
grid-template-columns: 1fr;
gap: var(--space-8);
text-align: center;
padding: var(--space-6) 0;
}
.hero-text {
order: 1;
margin-bottom: var(--space-6);
}
.hero-image {
order: 2;
}
.hero-badge {
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-4);
font-size: var(--font-size-xs);
}
.hero-title {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-4);
}
.hero-title .title-main {
font-size: var(--font-size-2xl);
}
.hero-title .title-sub {
font-size: var(--font-size-lg);
}
.hero-description {
font-size: var(--font-size-sm);
}
.hero-benefits .benefit-item {
font-size: var(--font-size-sm);
}
.main-visual-container {
height: 400px;
padding: var(--space-4);
}
.energy-meter {
width: 150px;
height: 150px;
}
.meter-display i {
font-size: 2rem;
}
.meter-value {
font-size: var(--font-size-lg);
}
.floating-elements .floating-icon {
display: none;
}
}
@media (max-width: 480px) {
.hero-container {
padding: 0 var(--space-2);
}
.hero-content {
padding: var(--space-4) 0;
}
.hero-badge {
padding: var(--space-2) var(--space-3);
font-size: 11px;
}
.hero-title {
font-size: var(--font-size-2xl);
}
.hero-title .title-main {
font-size: var(--font-size-xl);
}
.hero-title .title-sub {
font-size: var(--font-size-base);
}
.hero-description {
font-size: var(--font-size-sm);
}
.hero-benefits .benefit-item {
font-size: var(--font-size-sm);
}
.main-visual-container {
height: 250px;
padding: var(--space-2);
}
.energy-meter {
width: 120px;
height: 120px;
}
.meter-display i {
font-size: 1.5rem;
}
.meter-value {
font-size: var(--font-size-lg);
}
}
/* Contact Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s ease-out;
}
.modal-content {
background-color: var(--white);
margin: 5% auto;
padding: 0;
border-radius: var(--radius-lg);
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-xl);
animation: slideIn 0.3s ease-out;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-6);
border-bottom: 1px solid #e5e7eb;
background-color: var(--light-color);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-header h2 {
margin: 0;
color: var(--dark-color);
font-size: var(--font-size-xl);
font-weight: 600;
}
.close {
color: var(--neutral-color);
font-size: var(--font-size-2xl);
font-weight: bold;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
}
.close:hover,
.close:focus {
color: var(--danger-color);
background-color: #fee2e2;
}
.modal-body {
padding: var(--space-6);
}
.modal-body p {
margin-bottom: var(--space-6);
color: var(--neutral-color);
line-height: 1.6;
}
/* Form Styles */
.form-group {
margin-bottom: var(--space-5);
}
.form-group label {
display: block;
margin-bottom: var(--space-2);
font-weight: 500;
color: var(--dark-color);
font-size: var(--font-size-sm);
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"] {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 2px solid #e5e7eb;
border-radius: var(--radius-base);
font-size: var(--font-size-base);
font-family: var(--font-family);
transition: all 0.2s ease;
background-color: var(--white);
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.form-group input:invalid:not(:focus):not(:placeholder-shown) {
border-color: var(--danger-color);
}
.checkbox-group {
margin-bottom: var(--space-6);
}
.checkbox-label {
display: flex;
align-items: flex-start;
cursor: pointer;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--neutral-color);
}
.checkbox-label input[type="checkbox"] {
margin: 0;
margin-right: var(--space-3);
width: 18px;
height: 18px;
accent-color: var(--primary-color);
cursor: pointer;
}
.checkbox-label a {
color: var(--primary-color);
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
.error-message {
display: block;
margin-top: var(--space-2);
color: var(--danger-color);
font-size: var(--font-size-xs);
font-weight: 500;
min-height: 1rem;
}
.form-actions {
display: flex;
gap: var(--space-3);
justify-content: flex-end;
padding-top: var(--space-4);
border-top: 1px solid #e5e7eb;
margin-top: var(--space-6);
}
.form-actions .btn {
min-width: 100px;
padding: var(--space-3) var(--space-5);
}
/* Animation keyframes */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Mobile responsiveness for modal */
@media (max-width: 768px) {
.modal-content {
margin: 10% auto;
width: 95%;
max-height: 80vh;
}
.modal-header,
.modal-body {
padding: var(--space-4);
}
.form-actions {
flex-direction: column;
}
.form-actions .btn {
width: 100%;
min-width: auto;
}
}
/* Hero image replacement styles */
.hero-photo {
width: auto;
height: 100vh;
min-height: 100vh;
object-fit: cover;
/* ensure left semicircle is enforced here too */
border-top-left-radius: var(--radius-full);
border-bottom-left-radius: var(--radius-full);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
box-shadow: var(--shadow-xl);
}
@media (max-width: 768px) {
.hero-photo {
height: 100vh;
min-height: 100vh;
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/* Legal Pages Styles */
.legal-content {
padding: var(--space-16) 0;
background-color: var(--light-color);
}
.legal-wrapper {
max-width: 800px;
margin: 0 auto;
background: var(--white);
padding: var(--space-12);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-base);
}
.legal-text h1 {
color: var(--primary-color);
font-size: var(--font-size-4xl);
font-weight: 700;
margin-bottom: var(--space-6);
line-height: 1.2;
}
.legal-text h2 {
color: var(--dark-color);
font-size: var(--font-size-2xl);
font-weight: 600;
margin: var(--space-8) 0 var(--space-4) 0;
line-height: 1.3;
border-bottom: 2px solid var(--secondary-color);
padding-bottom: var(--space-2);
}
.legal-text h3 {
color: var(--primary-color);
font-size: var(--font-size-xl);
font-weight: 600;
margin: var(--space-6) 0 var(--space-3) 0;
line-height: 1.4;
}
.legal-text p {
color: var(--neutral-color);
font-size: var(--font-size-base);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.legal-text ul,
.legal-text ol {
margin: var(--space-4) 0;
padding-left: var(--space-6);
}
.legal-text li {
color: var(--neutral-color);
font-size: var(--font-size-base);
line-height: 1.7;
margin-bottom: var(--space-2);
}
.legal-text a {
color: var(--primary-color);
text-decoration: underline;
transition: color 0.3s ease;
}
.legal-text a:hover {
color: var(--secondary-color);
}
.legal-text strong {
color: var(--dark-color);
font-weight: 600;
}
@media (max-width: 768px) {
.legal-content {
padding: var(--space-8) 0;
}
.legal-wrapper {
margin: 0 var(--space-4);
padding: var(--space-6);
}
.legal-text h1 {
font-size: var(--font-size-3xl);
}
.legal-text h2 {
font-size: var(--font-size-xl);
}
.legal-text h3 {
font-size: var(--font-size-lg);
}
}
/* Cookie Banner Styles */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--dark-color);
color: var(--white);
z-index: 10000;
padding: var(--space-6);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
border-top: 3px solid var(--secondary-color);
}
.cookie-banner-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: var(--space-6);
}
.cookie-banner-text {
flex: 1;
}
.cookie-banner-text h3 {
color: var(--white);
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-3);
line-height: 1.4;
}
.cookie-banner-text p {
color: #d1d5db;
font-size: var(--font-size-sm);
line-height: 1.6;
margin: 0;
}
.cookie-banner-text a {
color: var(--secondary-color);
text-decoration: underline;
transition: color 0.3s ease;
}
.cookie-banner-text a:hover {
color: var(--white);
}
.cookie-banner-buttons {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex-shrink: 0;
}
.cookie-btn {
padding: var(--space-3) var(--space-6);
border: none;
border-radius: var(--radius-base);
font-weight: 500;
font-size: var(--font-size-sm);
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
text-align: center;
}
.cookie-btn-accept {
background: var(--secondary-color);
color: var(--dark-color);
}
.cookie-btn-accept:hover {
background: #f59e0b;
transform: translateY(-1px);
}
.cookie-btn-settings {
background: transparent;
color: var(--white);
border: 1px solid #4b5563;
}
.cookie-btn-settings:hover {
background: #374151;
border-color: var(--secondary-color);
}
/* Cookie Settings Modal */
.cookie-settings-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
z-index: 10001;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.cookie-settings-content {
background: var(--white);
border-radius: var(--radius-lg);
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
position: relative;
}
.cookie-settings-header {
padding: var(--space-6);
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: between;
align-items: center;
}
.cookie-settings-header h2 {
color: var(--dark-color);
font-size: var(--font-size-xl);
font-weight: 600;
margin: 0;
}
.cookie-settings-close {
background: none;
border: none;
font-size: var(--font-size-2xl);
color: var(--neutral-color);
cursor: pointer;
padding: var(--space-2);
line-height: 1;
}
.cookie-settings-body {
padding: var(--space-6);
}
.cookie-category {
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid #f3f4f6;
}
.cookie-category:last-child {
border-bottom: none;
margin-bottom: 0;
}
.cookie-category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
}
.cookie-category h3 {
color: var(--dark-color);
font-size: var(--font-size-lg);
font-weight: 600;
margin: 0;
}
.cookie-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.cookie-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cookie-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.cookie-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .cookie-slider {
background-color: var(--primary-color);
}
input:checked + .cookie-slider:before {
transform: translateX(26px);
}
.cookie-category p {
color: var(--neutral-color);
font-size: var(--font-size-sm);
line-height: 1.6;
margin: 0;
}
.cookie-settings-actions {
padding: var(--space-6);
border-top: 1px solid #e5e7eb;
display: flex;
gap: var(--space-3);
justify-content: flex-end;
}
@media (max-width: 768px) {
.cookie-banner {
padding: var(--space-4);
}
.cookie-banner-content {
flex-direction: column;
gap: var(--space-4);
}
.cookie-banner-buttons {
flex-direction: row;
width: 100%;
}
.cookie-btn {
flex: 1;
min-width: auto;
}
.cookie-settings-content {
margin: var(--space-4);
max-height: calc(100vh - 2rem);
}
.cookie-settings-actions {
flex-direction: column;
}
}
/* ===========================================
COMPANIES PAGE STYLES
=========================================== */
.companies-section {
padding: var(--space-10) 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.company-card {
background: white;
border-radius: 20px;
padding: var(--space-8);
margin-bottom: var(--space-6);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.company-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.company-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.company-card:hover::before {
transform: scaleX(1);
}
.company-header {
display: flex;
align-items: center;
margin-bottom: var(--space-6);
gap: var(--space-4);
}
.company-rank {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.company-info {
flex: 1;
}
.company-name {
font-size: 24px;
font-weight: 700;
color: var(--text-color);
margin-bottom: var(--space-2);
line-height: 1.2;
}
.company-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.badge {
padding: var(--space-1) var(--space-3);
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.badge-leader {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.badge-public {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
}
.badge-innovation {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
}
.badge-energy {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}
.badge-multiutility {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: white;
}
.badge-sustainable {
background: linear-gradient(135deg, #84cc16, #65a30d);
color: white;
}
.badge-historic {
background: linear-gradient(135deg, #92400e, #78350f);
color: white;
}
.badge-renewables {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
}
.badge-circular {
background: linear-gradient(135deg, #e879f9, #d946ef);
color: white;
}
.badge-carbon-neutral {
background: linear-gradient(135deg, #14b8a6, #0d9488);
color: white;
}
.badge-municipal {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: white;
}
.badge-emerging {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
}
.badge-digital {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
}
.badge-international {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
color: white;
}
.badge-green {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: white;
}
.badge-south {
background: linear-gradient(135deg, #f97316, #ea580c);
color: white;
}
.company-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-6);
align-items: start;
}
.company-description {
color: var(--text-secondary);
line-height: 1.7;
}
.company-description p {
margin-bottom: var(--space-4);
}
.company-description p:last-child {
margin-bottom: 0;
}
.company-stats {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 15px;
border: 1px solid #e2e8f0;
}
.stat-item {
text-align: center;
padding: var(--space-3);
background: white;
border-radius: 10px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.stat-number {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: var(--space-1);
}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.company-contact {
grid-column: 1 / -1;
margin-top: var(--space-4);
padding: var(--space-4);
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-radius: 12px;
border: 1px solid #f59e0b;
display: flex;
align-items: center;
gap: var(--space-3);
}
.company-contact i {
color: var(--primary-color);
font-size: 18px;
}
.company-contact span {
color: var(--text-color);
font-weight: 500;
}
.company-contact strong {
color: var(--primary-color);
font-weight: 700;
}
/* CTA Section */
.cta-section {
padding: var(--space-12) 0;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: var(--space-4);
color: white;
}
.cta-content p {
font-size: 18px;
margin-bottom: var(--space-8);
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn {
padding: var(--space-4) var(--space-6);
font-size: 16px;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
transition: all 0.3s ease;
}
.btn-primary {
background: var(--secondary-color);
color: var(--dark-color);
border: 2px solid var(--secondary-color);
}
.btn-primary:hover {
background: #f59e0b;
color: var(--dark-color);
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1024px) {
.company-content {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.company-stats {
flex-direction: row;
justify-content: space-around;
}
.stat-item {
flex: 1;
margin: 0 var(--space-1);
}
}
@media (max-width: 768px) {
.companies-section {
padding: var(--space-8) 0;
}
.company-card {
padding: var(--space-6);
margin-bottom: var(--space-4);
border-radius: 15px;
}
.company-header {
flex-direction: column;
text-align: center;
gap: var(--space-3);
}
.company-rank {
width: 50px;
height: 50px;
font-size: 20px;
}
.company-name {
font-size: 20px;
text-align: center;
}
.company-badges {
justify-content: center;
}
.company-stats {
flex-direction: column;
gap: var(--space-2);
}
.stat-item {
margin: 0;
}
.stat-number {
font-size: 18px;
}
.company-contact {
flex-direction: column;
text-align: center;
gap: var(--space-2);
}
.cta-content h2 {
font-size: 28px;
}
.cta-content p {
font-size: 16px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 480px) {
.company-card {
padding: var(--space-4);
}
.company-name {
font-size: 18px;
}
.badge {
font-size: 10px;
padding: var(--space-1) var(--space-2);
}
.stat-number {
font-size: 16px;
}
.stat-label {
font-size: 11px;
}
}
/* Desktop styles for dual CTA buttons */
@media (min-width: 769px) {
.hero-cta {
gap: var(--space-5);
}
.hero-cta .hero-btn {
flex: 0 1 auto;
min-width: 200px;
max-width: 240px;
}
/* Make secondary button same height as primary button on desktop */
.hero-btn.btn-pulse-secondary {
padding: var(--space-3) var(--space-5) !important;
}
.hero-btn.btn-pulse-secondary .btn-main {
font-size: var(--font-size-base) !important;
font-weight: 600 !important;
}
.hero-btn.btn-pulse-secondary .btn-sub {
font-size: var(--font-size-xs) !important;
}
}
/* ================================
LEGAL PAGE STYLES
================================ */
.legal-content {
padding: var(--space-20) 0;
background: var(--white);
}
.legal-section {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--space-8);
padding: var(--space-8);
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
}
.legal-section:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.legal-title {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--dark-color);
margin-bottom: var(--space-4);
}
.legal-title i {
color: var(--primary-color);
font-size: var(--font-size-lg);
}
.legal-text {
color: var(--neutral-color);
line-height: 1.7;
}
.legal-text p {
margin-bottom: var(--space-4);
}
.legal-text p:last-child {
margin-bottom: 0;
}
.legal-list {
list-style: none;
padding-left: 0;
margin: var(--space-4) 0;
}
.legal-list li {
position: relative;
padding-left: var(--space-6);
margin-bottom: var(--space-3);
color: var(--neutral-color);
line-height: 1.6;
}
.legal-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: 700;
font-size: var(--font-size-lg);
}
.legal-text a {
color: var(--primary-color);
text-decoration: underline;
font-weight: 500;
}
.legal-text a:hover {
color: var(--secondary-color);
text-decoration: none;
}
/* Responsive adjustments for legal page */
@media (max-width: 768px) {
.legal-content {
padding: var(--space-12) 0;
}
.legal-section {
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.legal-title {
font-size: var(--font-size-lg);
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
.legal-title i {
font-size: var(--font-size-base);
}
.legal-list li {
padding-left: var(--space-5);
}
}
@media (max-width: 480px) {
.legal-section {
padding: var(--space-4);
border-left-width: 3px;
}
.legal-title {
font-size: var(--font-size-base);
font-weight: 600;
}
}
/* ================================
FLOATING CALL BUTTON
================================ */
.floating-call-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white !important;
text-decoration: none;
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
z-index: 9999;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.floating-call-btn a {
color: white !important;
text-decoration: none !important;
}
.floating-call-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(34, 197, 94, 0.6);
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: white !important;
text-decoration: none;
}
.floating-call-btn:hover a {
color: white !important;
text-decoration: none !important;
}
.floating-call-btn i {
font-size: 24px;
transition: transform 0.3s ease;
color: white !important;
}
.floating-call-btn:hover i {
transform: scale(1.1);
color: white !important;
}
/* Pulse animation for the floating call button */
.floating-call-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: rgba(34, 197, 94, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: callPulse 2s infinite;
z-index: -1;
}
@keyframes callPulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
/* Ensure it's above the back-to-top button */
.back-to-top {
z-index: 9998;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.floating-call-btn {
bottom: 100px; /* Move up on mobile to avoid conflicts with mobile navigation */
right: 15px;
width: 55px;
height: 55px;
}
.floating-call-btn i {
font-size: 22px;
}
}