/*
=== Concilium Services - Premium CSS ===
Version: 5.0 - 2025 Edition
Ottimizzato per una visualizzazione professionale su tutti i dispositivi
*/
/* === VARIABILI === */
:root {
/* Palette colori principale */
--color-gold: #C19A52;
--color-gold-light: #D7B776;
--color-gold-lighter: #E5D0A1;
--color-gold-dark: #9A7A41;
--color-gold-darker: #725A30;
--color-gold-transparent: rgba(193, 154, 82, 0.1);
--color-gold-transparent-medium: rgba(193, 154, 82, 0.2);
--color-gold-transparent-heavy: rgba(193, 154, 82, 0.35);
/* Neutrali */
--color-black: #111111;
--color-black-soft: #222222;
--color-black-transparent: rgba(17, 17, 17, 0.8);
--color-white: #FFFFFF;
--color-white-off: #F9F9F9;
--color-white-soft: #F4F4F4;
--color-gray-lightest: #EEEEEE;
--color-gray-light: #E0E0E0;
--color-gray-medium: #9A9A9A;
--color-gray-dark: #565656;
--color-gray-darkest: #2A2A2A;
/* Tipografia */
--font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
--font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 1.75rem; /* 28px */
--font-size-3xl: 2rem; /* 32px */
--font-size-4xl: 2.5rem; /* 40px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 4rem; /* 64px */
/* Pesi del font */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Spaziature */
--space-3xs: 0.25rem; /* 4px */
--space-2xs: 0.5rem; /* 8px */
--space-xs: 0.75rem; /* 12px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4rem; /* 64px */
--space-3xl: 6rem; /* 96px */
--space-4xl: 8rem; /* 128px */
/* Layout & Container */
--container-max: 1440px;
--container-standard: 1280px;
--container-narrow: 1024px;
--section-padding-desktop: var(--space-3xl);
--section-padding-tablet: var(--space-2xl);
--section-padding-mobile: var(--space-xl);
--content-padding: var(--space-md);
/* Transizioni */
--transition-fast: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
--transition-medium: 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
--transition-slow: 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
--transition-extra-slow: 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
--transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* Ombre */
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
--shadow-inner: inset 0 2px 5px rgba(0, 0, 0, 0.05);
--shadow-gold: 0 5px 15px rgba(193, 154, 82, 0.2);
--shadow-gold-strong: 0 8px 25px rgba(193, 154, 82, 0.25);
/* Border Radius */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-round: 50%;
--radius-pill: 9999px;
/* Z-index */
--z-negative: -1;
--z-elevate: 1;
--z-dropdown: 300;
--z-sticky: 400;
--z-navbar: 500;
--z-overlay: 800;
--z-modal: 900;
--z-tooltip: 950;
--z-preloader: 1000;
/* Gradienti */
--gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
--gradient-gold-light: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
--gradient-dark: linear-gradient(135deg, var(--color-black) 0%, var(--color-gray-darkest) 100%);
--gradient-overlay: linear-gradient(to right, rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.4));
--gradient-overlay-strong: linear-gradient(to right, rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.65));
--gradient-overlay-gold: linear-gradient(to right, rgba(193, 154, 82, 0.2), rgba(193, 154, 82, 0.05));
}
/* === RESET & GLOBALE === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-gray-medium) var(--color-gray-lightest);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
height: 100%;
}
body {
font-family: var(--font-secondary);
font-weight: var(--weight-regular);
font-size: var(--font-size-base);
color: var(--color-black);
line-height: 1.7;
overflow-x: hidden;
background-color: var(--color-white);
opacity: 0;
transition: opacity var(--transition-slow);
min-height: 100%;
display: flex;
flex-direction: column;
}
body.loaded {
opacity: 1;
}
body.no-scroll {
overflow: hidden;
height: 100vh;
touch-action: none;
}
main {
flex: 1 0 auto;
}
img, svg, video {
max-width: 100%;
height: auto;
display: block;
object-fit: cover;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition-fast);
cursor: pointer;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
background: none;
outline: none;
appearance: none;
}
button {
cursor: pointer;
}
/* Link per l'accessibilità */
.skip-link {
position: absolute;
top: -100px;
left: 0;
padding: 10px;
background-color: var(--color-gold);
color: var(--color-white);
text-align: center;
z-index: 9999;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 0;
}
/* Stile Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-gray-lightest);
}
::-webkit-scrollbar-thumb {
background: var(--color-gray-medium);
border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-gold);
}
/* Stile Selezione */
::selection {
background-color: var(--color-gold-transparent-medium);
color: var(--color-black);
}
/* Elementi Container */
.section-container {
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
padding: 0 var(--content-padding);
position: relative;
}
.container-narrow {
max-width: var(--container-narrow);
width: 100%;
margin: 0 auto;
padding: 0 var(--content-padding);
position: relative;
}
section {
padding: var(--section-padding-desktop) 0;
position: relative;
overflow: hidden;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* === TIPOGRAFIA === */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: var(--weight-semibold);
line-height: 1.2;
margin-bottom: var(--space-sm);
color: var(--color-black);
text-align: left;
}
h1 {
font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
letter-spacing: -0.01em;
}
h3 {
font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
}
h4 {
font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
}
h5 {
font-size: var(--font-size-md);
font-weight: var(--weight-medium);
}
h6 {
font-size: var(--font-size-base);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
}
p {
margin-bottom: var(--space-md);
line-height: 1.7;
text-align: left;
}
.section-tag, .services-tag, .feature-tag {
display: inline-block;
font-family: var(--font-primary);
font-size: var(--font-size-sm);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-gold);
margin-bottom: var(--space-xs);
position: relative;
padding-left: 40px;
text-align: left;
}
.section-tag::before, .services-tag::before, .feature-tag::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 1px;
background-color: var(--color-gold);
transform: translateY(-50%);
}
.section-title, .services-title, .feature-title {
margin-bottom: var(--space-md);
position: relative;
text-align: left;
}
.section-title::after, .services-title::after, .feature-title::after {
content: '';
display: block;
width: 60px;
height: 1px;
background: var(--gradient-gold);
margin-top: var(--space-sm);
border-radius: var(--radius-pill);
transition: width var(--transition-medium);
}
.section-header:hover .section-title::after,
.services-header:hover .services-title::after,
.feature-content:hover .feature-title::after {
width: 80px;
}
.section-subtitle, .services-subtitle {
font-size: var(--font-size-md);
color: var(--color-gray-medium);
margin-bottom: var(--space-lg);
max-width: 700px;
line-height: 1.6;
text-align: left;
}
/* === PULSANTI === */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
font-family: var(--font-primary);
font-weight: var(--weight-medium);
font-size: var(--font-size-sm);
border-radius: var(--radius-md);
transition: all var(--transition-medium);
overflow: hidden;
position: relative;
isolation: isolate;
letter-spacing: 0.03em;
box-shadow: var(--shadow-sm);
text-align: center;
}
.btn-text {
position: relative;
z-index: 1;
transition: transform var(--transition-fast);
}
.btn-icon {
margin-left: var(--space-xs);
position: relative;
z-index: 1;
transition: transform var(--transition-fast);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
transform: translateX(-100%);
transition: transform var(--transition-medium);
z-index: 0;
}
.btn:hover::before,
.btn:focus-visible::before {
transform: translateX(0);
}
.btn:hover .btn-icon,
.btn:focus-visible .btn-icon {
transform: translateX(5px);
}
.btn-primary {
background: var(--gradient-gold);
color: var(--color-white);
border: 1px solid transparent;
}
.btn-primary:hover,
.btn-primary:focus-visible {
box-shadow: var(--shadow-gold-strong);
transform: translateY(-2px);
}
.btn-secondary {
background: var(--gradient-dark);
color: var(--color-white);
border: 1px solid transparent;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.btn-outline {
border: 1.5px solid var(--color-white);
color: var(--color-white);
box-shadow: none;
}
.btn-outline:hover,
.btn-outline:focus-visible {
background-color: var(--color-white);
color: var(--color-black);
transform: translateY(-2px);
}
.btn-outline-gold {
border: 1.5px solid var(--color-gold);
color: var(--color-gold);
box-shadow: none;
}
.btn-outline-gold:hover,
.btn-outline-gold:focus-visible {
background-color: var(--color-gold);
color: var(--color-white);
transform: translateY(-2px);
}
.btn-text-link {
display: inline-flex;
align-items: center;
background: none;
padding: 0;
color: var(--color-white);
position: relative;
font-weight: var(--weight-medium);
}
.text-btn-text {
display: inline-block;
transition: transform var(--transition-fast);
}
.text-btn-line {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 1.5px;
background-color: var(--color-gold);
transform: scaleX(0.3);
transform-origin: left;
transition: transform var(--transition-fast);
}
.btn-text-link:hover .text-btn-text,
.btn-text-link:focus-visible .text-btn-text {
transform: translateX(5px);
color: var(--color-gold);
}
.btn-text-link:hover .text-btn-line,
.btn-text-link:focus-visible .text-btn-line {
transform: scaleX(1);
}
/* === NAVIGATION === */
.main-navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: var(--z-navbar);
padding: var(--space-lg) 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-md);
transition: padding var(--transition-medium);
}
.main-navigation.scrolled {
padding: var(--space-xs) 0;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--content-padding);
}
.nav-logo {
z-index: var(--z-dropdown);
}
.logo-link {
display: flex;
align-items: center;
font-family: var(--font-primary);
font-weight: var(--weight-bold);
font-size: var(--font-size-xl);
transition: transform var(--transition-fast);
}
.logo-link:hover,
.logo-link:focus-visible {
transform: scale(1.05);
}
.nav-logo .logo-image {
height: 70px;
}
.logo-text {
color: var(--color-black);
transition: color var(--transition-fast);
}
.logo-accent {
color: var(--color-gold);
margin-left: var(--space-2xs);
}
/* Remove this rule since we don't want white text anymore */
.main-navigation:not(.scrolled) .logo-text {
color: var(--color-black);
}
.nav-menu {
display: flex;
gap: var(--space-md);
}
.nav-link {
position: relative;
padding: var(--space-2xs) var(--space-xs);
font-size: var(--font-size-sm);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gold);
transition: color var(--transition-fast);
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--color-gold);
}
.nav-link.active {
color: var(--color-gold);
font-weight: var(--weight-semibold);
}
.nav-item.dropdown .nav-link {
display: flex;
align-items: center;
gap: 4px;
}
/* Navigation links are now gold by default */
.main-navigation:not(.scrolled) .nav-link {
color: var(--color-gold);
}
.nav-link::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--color-gold);
font-weight: var(--weight-semibold);
transform: translateY(12px);
opacity: 0;
transition: transform var(--transition-medium), opacity var(--transition-medium);
}
.nav-link:hover::before,
.nav-link:focus-visible::before {
transform: translateY(0);
opacity: 1;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 5px;
height: 5px;
background-color: var(--color-gold);
border-radius: var(--radius-round);
}
.nav-right {
display: flex;
align-items: center;
gap: var(--space-md);
z-index: var(--z-dropdown);
}
.nav-contact {
display: flex;
gap: var(--space-sm);
}
.contact-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-round);
background-color: var(--color-gold-transparent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
font-size: var(--font-size-sm);
transition: background-color var(--transition-fast),
transform var(--transition-bounce),
box-shadow var(--transition-fast),
color var(--transition-fast);
}
.contact-icon:hover,
.contact-icon:focus-visible {
background-color: var(--color-gold);
color: var(--color-white);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
.nav-toggle {
width: 30px;
height: 22px;
position: relative;
display: none;
flex-direction: column;
justify-content: space-between;
z-index: var(--z-dropdown);
cursor: pointer;
}
.toggle-line {
width: 100%;
height: 2px;
background-color: var(--color-black);
border-radius: var(--radius-pill);
transition: transform var(--transition-medium),
opacity var(--transition-medium),
background-color var(--transition-fast),
width var(--transition-medium);
}
.toggle-line:nth-child(2) {
width: 70%;
align-self: flex-start;
}
.toggle-line:nth-child(3) {
width: 50%;
align-self: flex-start;
}
.nav-toggle:hover .toggle-line,
.nav-toggle:focus-visible .toggle-line {
width: 100%;
}
.main-navigation:not(.scrolled) .toggle-line {
background-color: var(--color-black);
}
.main-navigation.menu-open .toggle-line:nth-child(1) {
transform: translateY(10px) rotate(45deg);
width: 100%;
}
.main-navigation.menu-open .toggle-line:nth-child(2) {
opacity: 0;
width: 100%;
}
.main-navigation.menu-open .toggle-line:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
width: 100%;
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background-color: var(--color-black);
z-index: var(--z-overlay);
transition: right var(--transition-medium), opacity var(--transition-medium);
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.mobile-menu.active {
right: 0;
}
.mobile-menu-container {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--space-xl) var(--content-padding);
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-xl);
}
.mobile-logo {
font-family: var(--font-primary);
font-weight: var(--weight-bold);
font-size: var(--font-size-xl);
color: var(--color-gold);
}
.mobile-close {
width: 40px;
height: 40px;
border-radius: var(--radius-round);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: var(--font-size-lg);
transition: background-color var(--transition-fast),
transform var(--transition-fast);
}
.mobile-close:hover,
.mobile-close:focus-visible {
background-color: var(--color-gold-transparent);
transform: rotate(90deg);
}
.mobile-nav-menu {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.mobile-nav-link {
display: flex;
align-items: center;
font-family: var(--font-primary);
font-size: var(--font-size-xl);
font-weight: var(--weight-semibold);
transition: transform var(--transition-medium);
text-align: left;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
transform: translateX(10px);
}
.mobile-nav-number {
color: var(--color-gold);
font-size: var(--font-size-sm);
margin-right: var(--space-md);
opacity: 0.8;
font-family: var(--font-secondary);
font-weight: var(--weight-medium);
}
.mobile-nav-text {
position: relative;
}
.mobile-nav-text::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-medium);
}
.mobile-nav-link:hover .mobile-nav-text::after,
.mobile-nav-link:focus-visible .mobile-nav-text::after {
transform: scaleX(1);
}
.mobile-menu-footer {
margin-top: auto;
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-contact {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.mobile-contact-item {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--color-gray-light);
text-align: left;
}
.mobile-contact-item i {
color: var(--color-gold);
}
.mobile-contact-item a {
transition: color var(--transition-fast);
}
.mobile-contact-item a:hover,
.mobile-contact-item a:focus-visible {
color: var(--color-gold);
}
.mobile-social {
display: flex;
gap: var(--space-md);
}
.social-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-round);
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-light);
transition: background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-bounce);
}
.social-icon:hover,
.social-icon:focus-visible {
background-color: var(--color-gold);
color: var(--color-white);
transform: translateY(-5px);
}
/* === HERO SECTION === */
.hero-section {
position: relative;
width: 100%;
height: 100vh;
min-height: 800px;
display: flex;
align-items: center;
overflow: hidden;
}
/* Hero section with white border frame for home page */
.hero-section.hero-framed {
margin: 20px auto;
border: 15px solid var(--color-white);
border-radius: 12px;
height: calc(100vh - 40px);
min-height: calc(800px - 40px);
box-shadow: var(--shadow-xl);
width: calc(100% - 40px);
max-width: none;
}
.hero-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-image-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-image-inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
z-index: 1;
}
/* Overlay più chiaro come richiesto */
.hero-overlay-light {
background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}
.hero-container {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--content-padding);
}
/* Logo nella hero section */
.hero-logo {
margin-bottom: 1.5rem;
max-width: 300px;
opacity: 0;
transform: translateY(20px);
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
opacity 0.8s ease;
transition-delay: 0.2s;
}
.loaded .hero-logo {
opacity: 1;
transform: translateY(0);
}
.hero-logo-image {
width: 100%;
height: auto;
background: none;
border: none;
box-shadow: none;
}
.hero-content {
color: var(--color-white);
max-width: 800px;
}
.hero-title .subtitle {
font-size: 1.8rem;
font-weight: 500;
margin-top: 1rem;
opacity: 0.85;
letter-spacing: 0.05em;
transform: translateY(30px);
opacity: 0;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
opacity 0.8s ease;
transition-delay: 0.7s;
}
.loaded .hero-title .subtitle {
transform: translateY(0);
opacity: 0.85;
}
/* Bottoni con angoli arrotondati - stile lusso */
.rounded-btn, .btn-primary {
border-radius: 8px;
padding: 0.75rem 2rem;
overflow: hidden;
position: relative;
background: var(--gradient-gold);
color: var(--color-white);
font-weight: var(--weight-medium);
letter-spacing: 0.05em;
transition: all 0.3s ease;
border: 2px solid var(--color-gold);
}
.rounded-btn:hover, .rounded-btn:focus, .btn-primary:hover, .btn-primary:focus {
transform: translateY(-2px);
box-shadow: var(--shadow-gold-strong);
background: var(--color-gold-light);
border-color: var(--color-gold-light);
}
/* Floating Contact Bar - Grouped CTA buttons */
.floating-contact-bar {
position: fixed;
right: 20px;
bottom: 20px;
z-index: var(--z-navbar);
display: flex;
flex-direction: column;
gap: 10px;
}
.floating-contact-btn {
width: 55px;
height: 55px;
background: var(--color-white);
border-radius: var(--radius-round);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: all var(--transition-medium);
color: var(--color-gold);
font-size: 20px;
}
.floating-contact-btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
background: var(--color-gold);
color: var(--color-white);
}
/* WhatsApp button with white background and gold icon */
.floating-contact-btn.whatsapp-btn {
background: var(--color-white);
color: var(--color-gold);
border: 2px solid var(--color-gold-light);
}
.floating-contact-btn.whatsapp-btn:hover {
background: var(--color-gold);
color: var(--color-white);
border-color: var(--color-gold);
}
/* Responsive adjustments */
@media (max-width: 991px) {
.hero-section {
min-height: 700px;
}
.hero-section.hero-framed {
margin: 15px auto;
border-width: 12px;
height: calc(100vh - 30px);
min-height: calc(700px - 30px);
width: calc(100% - 30px);
max-width: none;
}
.hero-logo {
max-width: 150px;
}
}
@media (max-width: 767px) {
.hero-section {
min-height: 600px;
}
.hero-section.hero-framed {
margin: 10px auto;
border-width: 10px;
height: calc(100vh - 20px);
min-height: calc(600px - 20px);
border-radius: 8px;
width: calc(100% - 20px);
max-width: none;
}
.hero-tagline {
display: none !important;
}
.hero-logo {
max-width: 180px;
margin: 0 auto 1.5rem;
}
.hero-content {
text-align: center;
}
.hero-tagline, .hero-actions {
justify-content: center;
}
.hero-title h1, .hero-description {
text-align: center;
}
.title-line {
text-align: center;
}
}
@media (max-width: 575px) {
.hero-section {
min-height: 500px;
}
}
.hero-tagline {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
transform: translateY(30px);
opacity: 0;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
opacity 0.8s ease;
transition-delay: 0.3s;
justify-content: flex-start;
font-size: 2rem;
font-weight: 700;
}
.loaded .hero-tagline {
transform: translateY(0);
opacity: 1;
}
.tagline-line {
width: 40px;
height: 2px;
background-color: var(--color-gold);
margin-right: 0.75rem;
position: relative;
overflow: hidden;
}
.tagline-line::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
animation: shimmer 2.5s infinite;
}
.hero-title {
margin-bottom: 2rem;
overflow: hidden;
line-height: 1.15;
text-align: left;
}
.hero-title h1 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
color: var(--color-white);
text-align: left;
}
.title-line {
display: block;
transform: translateY(100%);
opacity: 0;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1),
opacity 1s ease;
text-align: left;
}
.title-line:nth-child(1) { transition-delay: 0.4s; }
.title-line:nth-child(2) { transition-delay: 0.5s; }
.title-line:nth-child(3) { transition-delay: 0.6s; }
.loaded .title-line {
transform: translateY(0);
opacity: 1;
}
.hero-description {
margin-bottom: 2.5rem;
font-size: clamp(1rem, 1.2vw, 1.125rem);
line-height: 1.6;
max-width: 600px;
transform: translateY(30px);
opacity: 0;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
opacity 0.8s ease;
transition-delay: 0.6s;
}
.loaded .hero-description {
transform: translateY(0);
opacity: 1;
}
.hero-actions {
display: flex;
align-items: center;
gap: 2rem;
transform: translateY(30px);
opacity: 0;
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
opacity 0.8s ease;
transition-delay: 0.8s;
justify-content: flex-start;
}
.loaded .hero-actions {
transform: translateY(0);
opacity: 1;
}
.hero-scroll {
position: absolute;
left: var(--content-padding);
bottom: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
z-index: 10;
opacity: 0;
transition: opacity 0.8s ease, transform 0.3s ease;
transition-delay: 1s;
}
.loaded .hero-scroll {
opacity: 1;
}
.hero-scroll:hover {
transform: translateY(5px);
}
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--color-white);
}
.scroll-line {
width: 1.5px;
height: 70px;
background-color: rgba(255, 255, 255, 0.2);
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
}
.scroll-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
background-color: var(--color-gold);
animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
0% { transform: translateY(0); height: 0; }
40% { height: 40%; }
60% { transform: translateY(40px); height: 40%; }
100% { transform: translateY(70px); height: 0; }
}
.scroll-text {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.7);
}
/* === SERVICES SHOWCASE === */
.services-showcase {
padding: 6rem 0;
position: relative;
background-color: var(--color-white);
overflow: hidden;
}
.services-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
z-index: 0;
opacity: 0.5;
}
.services-container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 0 1.5rem;
position: relative;
z-index: 1;
}
.services-header {
text-align: left;
max-width: 800px;
margin: 0 0 4rem 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
position: relative;
}
.service-showcase-card {
position: relative;
background-color: var(--color-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
box-shadow 0.5s ease;
will-change: transform;
height: 100%;
display: flex;
flex-direction: column;
}
.service-showcase-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
0 5px 15px rgba(193, 154, 82, 0.2);
}
.service-image-wrapper {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.service-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease-out;
will-change: transform;
}
.service-showcase-card:hover .service-image {
transform: scale(1.05);
}
.service-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(17, 17, 17, 0.7) 0%, rgba(17, 17, 17, 0) 50%);
transition: background 0.3s ease;
}
.service-showcase-card:hover .service-overlay {
background: linear-gradient(to top, rgba(193, 154, 82, 0.7) 0%, rgba(193, 154, 82, 0) 60%);
}
.service-content {
padding: 2rem;
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: var(--color-white);
text-align: left;
}
.service-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(to bottom, var(--color-gold), var(--color-gold-dark));
transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0.8;
}
.service-showcase-card:hover .service-content::before {
height: 100%;
}
.service-icon {
position: absolute;
top: -30px;
left: 25px;
width: 60px;
height: 60px;
background-color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 2;
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
background-color 0.3s ease;
}
.service-showcase-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
background-color: var(--color-gold);
}
.icon-svg {
width: 30px;
height: 30px;
fill: var(--color-gold);
transition: fill 0.3s ease;
}
.service-showcase-card:hover .icon-svg {
fill: var(--color-white);
}
.service-number {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-family: var(--font-primary);
font-size: 3.5rem;
font-weight: 700;
color: var(--color-gray-lightest);
opacity: 0.5;
z-index: 0;
transition: color 0.3s ease, opacity 0.3s ease;
line-height: 1;
}
.service-showcase-card:hover .service-number {
color: rgba(193, 154, 82, 0.2);
opacity: 1;
}
.service-name {
font-family: var(--font-primary);
font-size: 1.5rem;
font-weight: 600;
color: var(--color-black);
margin-bottom: 0.75rem;
margin-top: 1.25rem;
position: relative;
z-index: 1;
transition: color 0.3s ease;
text-align: left;
}
.service-showcase-card:hover .service-name {
color: var(--color-gold);
}
.service-description {
font-size: 1rem;
color: var(--color-gray-dark);
line-height: 1.6;
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
flex-grow: 1;
text-align: left;
}
.service-link {
display: inline-flex;
align-items: center;
font-weight: 500;
color: var(--color-gold);
position: relative;
z-index: 1;
align-self: flex-start;
margin-top: auto;
}
.link-text {
margin-right: 0.5rem;
transition: transform 0.3s ease;
}
.link-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: rgba(193, 154, 82, 0.1);
transition: background-color 0.3s ease,
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.link-arrow svg {
width: 16px;
height: 16px;
stroke: var(--color-gold);
stroke-width: 2;
fill: none;
transition: stroke 0.3s ease;
}
.service-link:hover .link-text {
transform: translateX(5px);
}
.service-link:hover .link-arrow {
background-color: var(--color-gold);
transform: scale(1.1);
}
.service-link:hover .link-arrow svg {
stroke: var(--color-white);
}
/* === ADVANTAGES SECTION === */
.advantages-section {
background-color: var(--color-white-soft);
position: relative;
padding: var(--section-padding-desktop) 0;
overflow: hidden;
}
.advantages-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
z-index: 0;
}
.advantages-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-xl);
align-items: flex-start;
position: relative;
z-index: 1;
}
.advantages-header {
padding-right: var(--space-lg);
}
.advantages-header .section-title {
font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
line-height: 1.2;
margin-bottom: var(--space-md);
}
.advantages-header .section-subtitle {
font-size: var(--font-size-md);
line-height: 1.6;
color: var(--color-gray-medium);
}
.advantages-content {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.advantage-item {
position: relative;
border-radius: var(--radius-lg);
padding: var(--space-xl) var(--space-lg);
box-shadow: var(--shadow-md);
transition: transform var(--transition-medium),
box-shadow var(--transition-medium);
overflow: hidden;
z-index: 1;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-size: cover;
background-position: center;
color: var(--color-white);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.advantage-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4));
z-index: 0;
transition: background var(--transition-medium);
}
.advantage-item:hover::before {
background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.5));
}
.advantage-icon {
width: 54px;
height: 54px;
border-radius: var(--radius-round);
background-color: var(--color-gold);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
transition: background-color var(--transition-medium),
transform var(--transition-bounce);
position: relative;
z-index: 1;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.advantage-icon svg {
width: 24px;
height: 24px;
stroke: var(--color-white);
stroke-width: 2;
fill: none;
transition: stroke var(--transition-medium);
}
.advantage-item:hover .advantage-icon,
.advantage-item:focus-within .advantage-icon {
transform: scale(1.1);
}
.advantage-text {
position: relative;
z-index: 2;
}
.advantage-text h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-sm);
color: var(--color-white);
font-weight: var(--weight-bold);
text-align: left;
}
.advantage-text p {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 0;
text-align: left;
}
/* Responsive adjustments */
@media (max-width: 991px) {
.advantage-item {
min-height: 260px;
}
}
@media (max-width: 767px) {
.advantage-item {
min-height: 240px;
}
}
@media (max-width: 575px) {
.advantage-item {
min-height: 220px;
}
.advantage-text h3 {
font-size: var(--font-size-md);
}
.advantage-text p {
font-size: var(--font-size-sm);
}
}
/* === FEATURE SECTIONS === */
.feature-section {
position: relative;
padding: var(--section-padding-desktop) 0;
}
.feature-section:nth-child(odd) {
background-color: var(--color-white);
}
.feature-section:nth-child(even) {
background-color: var(--color-white-soft);
}
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: center;
}
.feature-media {
position: relative;
}
.feature-image {
padding: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.image-container {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.feature-image {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.5s ease;
}
.feature-image:hover {
transform: scale(1.03);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
transition: background 0.3s ease;
}
.image-overlay.golden {
background: linear-gradient(to right, rgba(193, 154, 82, 0.2), rgba(193, 154, 82, 0));
}
.image-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
opacity: 0.3;
}
.feature-media:hover .image-container,
.feature-media:focus-within .image-container {
transform: scale(1.05);
}
.feature-content {
padding: var(--space-lg) 0;
text-align: left;
}
.feature-header {
text-align: left;
}
.feature-description {
color: var(--color-gray-medium);
margin-bottom: var(--space-lg);
line-height: 1.7;
text-align: left;
}
.feature-list {
margin-bottom: var(--space-xl);
}
.feature-item {
display: flex;
align-items: flex-start;
margin-bottom: var(--space-sm);
transition: transform var(--transition-medium);
text-align: left;
}
.feature-item:hover {
transform: translateX(8px);
}
.feature-check {
width: 28px;
height: 28px;
border-radius: var(--radius-round);
background-color: var(--color-gold-transparent);
color: var(--color-gold);
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-sm);
flex-shrink: 0;
transition: background-color var(--transition-medium), color var(--transition-medium);
}
.feature-item:hover .feature-check {
background-color: var(--color-gold);
color: var(--color-white);
}
.feature-text {
color: var(--color-gray-dark);
padding-top: var(--space-3xs);
text-align: left;
}
/* Feature section with background shape */
.feature-with-shape {
position: relative;
overflow: visible;
}
.background-shape {
position: absolute;
width: 500px;
height: 500px;
background-color: var(--color-gold-transparent);
border-radius: 39% 61% 70% 30% / 40% 50% 50% 60%;
z-index: -1;
opacity: 0.2;
animation: morphShape 15s ease-in-out infinite;
}
.background-shape.top-left {
top: -250px;
left: -250px;
}
.background-shape.bottom-right {
bottom: -250px;
right: -250px;
}
@keyframes morphShape {
0%, 100% {
border-radius: 39% 61% 70% 30% / 40% 50% 50% 60%;
}
25% {
border-radius: 58% 42% 50% 50% / 35% 65% 35% 65%;
}
50% {
border-radius: 31% 69% 40% 60% / 60% 30% 70% 40%;
}
75% {
border-radius: 50% 50% 35% 65% / 65% 35% 65% 35%;
}
}
/* === PROPERTY BANNER === */
.property-banner {
position: relative;
background-color: var(--color-black);
background-image: url('../hero.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: var(--space-2xl) 0;
color: var(--color-white);
overflow: hidden;
width: 100%;
min-height: 400px;
transition: min-height 0.3s ease-in-out, opacity 0.5s ease-in-out;
opacity: 1;
z-index: 1;
}
/* Overlay solo per i banner con immagine di sfondo */
.property-banner.with-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: -1;
}
/* Banner nero solido */
.property-banner.solid-black {
background-image: none;
background-color: var(--color-black);
}
.property-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: -1;
}
/* Banner nero per Property Management */
.property-banner.property-management {
background: var(--color-black) !important;
background-image: none !important;
position: relative;
z-index: 1;
}
.property-banner.property-management::before {
display: none !important;
}
.property-banner.property-management .banner-content {
position: relative;
z-index: 2;
}
.property-banner.property-management .section-tag {
color: var(--color-gold);
border-color: var(--color-gold);
}
.property-banner.property-management .banner-title {
color: var(--color-white);
margin-bottom: var(--space-md);
}
.property-banner.property-management .banner-description {
color: var(--color-white);
opacity: 0.9;
}
.property-banner.property-management .btn-outline {
border-color: var(--color-white);
color: var(--color-white);
}
.property-banner.property-management .btn-outline:hover {
background-color: var(--color-white);
color: var(--color-black);
}
.banner-container {
position: relative;
z-index: 2;
max-width: var(--container-standard);
margin: 0 auto;
padding: 0 var(--content-padding);
text-align: center;
}
.banner-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
padding: var(--space-xl) 0;
}
.banner-title {
font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
margin-bottom: var(--space-md);
font-weight: 700;
line-height: 1.2;
color: var(--color-white);
}
.banner-description {
font-size: var(--font-size-lg);
margin-bottom: var(--space-lg);
color: var(--color-white-soft);
line-height: 1.6;
}
.property-banner .hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
.property-banner.banner-loaded {
opacity: 1;
}
/* Responsive styles for property banner */
@media (max-width: 768px) {
.property-banner {
background-attachment: scroll;
min-height: 300px;
padding: var(--space-lg) 0;
}
.banner-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-sm);
}
.banner-description {
font-size: var(--font-size-base);
margin-bottom: var(--space-md);
}
.property-banner .hero-actions {
flex-direction: column;
width: 100%;
}
.property-banner .btn {
width: 100%;
justify-content: center;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.property-banner {
background-attachment: scroll;
min-height: 350px;
}
.banner-title {
font-size: var(--font-size-2xl);
}
.banner-description {
font-size: var(--font-size-md);
}
}
/* === TESTIMONIALS SECTION === */
.testimonials-section {
background-color: var(--color-white);
padding: var(--section-padding-desktop) 0;
position: relative;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
background-color: var(--color-white-soft);
z-index: 0;
}
.section-header {
text-align: left;
position: relative;
z-index: 1;
}
.testimonials-slider {
position: relative;
margin: var(--space-xl) 0;
z-index: 1;
}
.slider-track {
display: flex;
overflow: hidden;
}
.testimonial-slide {
flex: 0 0 100%;
padding: 0 var(--content-padding);
transition: transform var(--transition-medium);
}
.testimonial-card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-gray-light);
transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.testimonial-quote {
position: relative;
margin-bottom: var(--space-lg);
}
.quote-icon {
position: absolute;
top: -25px;
left: -10px;
width: 48px;
height: 48px;
stroke: var(--color-gold);
stroke-width: 1.5;
fill: none;
opacity: 0.3;
}
.quote-text {
font-size: var(--font-size-md);
font-style: italic;
color: var(--color-gray-dark);
line-height: 1.7;
text-align: left;
}
.testimonial-author {
display: flex;
align-items: center;
border-top: 1px solid var(--color-gray-light);
padding-top: var(--space-md);
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: var(--radius-round);
overflow: hidden;
margin-right: var(--space-md);
border: 2px solid var(--color-gold-transparent);
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info {
flex-grow: 1;
}
.author-name {
font-size: var(--font-size-md);
margin-bottom: var(--space-2xs);
font-family: var(--font-primary);
font-weight: var(--weight-semibold);
text-align: left;
}
.author-position {
font-size: var(--font-size-sm);
color: var(--color-gold);
margin: 0;
text-align: left;
}
.author-rating {
display: flex;
gap: 2px;
margin-top: var(--space-2xs);
}
.star {
color: var(--color-gold);
font-size: var(--font-size-sm);
}
/* === FOOTER === */
.footer {
background-color: var(--color-black);
color: var(--color-white);
padding-top: var(--space-2xl);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
z-index: 0;
opacity: 0.05;
}
.footer-container {
max-width: var(--container-max);
width: 100%;
margin: 0 auto;
padding: 0 var(--content-padding);
position: relative;
z-index: 1;
}
.footer-top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-xl);
padding-bottom: var(--space-xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo {
margin-bottom: var(--space-md);
}
.footer-tagline {
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--space-sm);
font-size: var(--font-size-base);
line-height: 1.4;
text-align: left;
}
.concilium-highlight {
border-bottom: 2px solid var(--color-gold);
padding-bottom: 2px;
}
.footer-vat {
color: rgba(255, 255, 255, 0.5);
font-size: var(--font-size-sm);
margin-bottom: var(--space-lg);
text-align: left;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
}
.footer-title {
font-size: var(--font-size-md);
margin-bottom: var(--space-md);
padding-bottom: var(--space-xs);
position: relative;
color: var(--color-white);
text-align: left;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 2px;
background: var(--gradient-gold);
}
.footer-menu {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.footer-menu a {
color: rgba(255, 255, 255, 0.6);
transition: color var(--transition-fast), transform var(--transition-fast);
display: inline-block;
position: relative;
padding-left: var(--space-sm);
text-align: left;
}
.footer-menu a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: var(--radius-round);
background-color: var(--color-gold);
opacity: 0;
transition: opacity var(--transition-fast);
}
.footer-menu a:hover,
.footer-menu a:focus-visible {
color: var(--color-gold);
transform: translateX(5px);
}
.footer-menu a:hover::before,
.footer-menu a:focus-visible::before {
opacity: 1;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.footer-contact li {
display: flex;
align-items: center;
gap: var(--space-xs);
transition: transform var(--transition-medium);
text-align: left;
}
.footer-contact li:hover {
transform: translateX(5px);
}
.footer-contact i {
color: var(--color-gold);
}
.footer-contact a {
color: rgba(255, 255, 255, 0.6);
transition: color var(--transition-fast);
}
.footer-contact a:hover,
.footer-contact a:focus-visible {
color: var(--color-gold);
}
.subscribe-text {
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--space-md);
line-height: 1.6;
text-align: left;
}
.subscribe-form {
margin-bottom: var(--space-lg);
}
.subscribe-form .form-group {
display: flex;
overflow: hidden;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.subscribe-input {
flex-grow: 1;
padding: var(--space-sm) var(--space-md);
background-color: rgba(255, 255, 255, 0.05);
border: none;
color: var(--color-white);
transition: background-color var(--transition-fast);
}
.subscribe-input:focus {
background-color: rgba(255, 255, 255, 0.1);
outline: none;
}
.subscribe-input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.subscribe-button {
background: var(--gradient-gold);
color: var(--color-white);
padding: 0 var(--space-md);
transition: filter var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.subscribe-button:hover,
.subscribe-button:focus-visible {
filter: brightness(1.1);
}
.social-links {
display: flex;
gap: var(--space-sm);
}
.social-link {
width: 40px;
height: 40px;
border-radius: var(--radius-round);
background-color: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-gold);
opacity: 0;
transition: opacity var(--transition-medium);
z-index: 0;
}
.social-link i {
position: relative;
z-index: 1;
}
.social-link:hover,
.social-link:focus-visible {
color: var(--color-white);
transform: translateY(-5px);
}
.social-link:hover::before,
.social-link:focus-visible::before {
opacity: 1;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-md) 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.4);
}
.copyright {
text-align: left;
}
.legal-links {
display: flex;
gap: var(--space-md);
}
.legal-links a {
transition: color var(--transition-fast);
position: relative;
text-align: left;
}
.legal-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background-color: var(--color-gold);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-fast);
}
.legal-links a:hover,
.legal-links a:focus-visible {
color: var(--color-gold);
}
.legal-links a:hover::after,
.legal-links a:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
/* Footer Credits */
.footer-credits {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: var(--space-sm) 0;
text-align: center;
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.3);
}
.footer-credits p {
margin: 0;
}
.bymarke-link {
color: var(--color-gold);
font-weight: var(--weight-medium);
transition: color var(--transition-fast);
}
.bymarke-link:hover {
color: var(--color-gold-light);
}
/* === WHATSAPP BUTTON === */
.whatsapp-button {
position: fixed;
bottom: var(--space-md);
right: var(--space-md);
z-index: var(--z-sticky);
display: flex;
align-items: center;
}
.whatsapp-icon {
width: 60px;
height: 60px;
border-radius: var(--radius-round);
background: var(--gradient-gold);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
box-shadow: var(--shadow-gold-strong);
transition: transform var(--transition-bounce);
}
.whatsapp-tooltip {
position: absolute;
right: 70px;
padding: var(--space-xs) var(--space-sm);
background-color: var(--color-black);
color: var(--color-white);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
opacity: 0;
transform: translateX(10px);
pointer-events: none;
transition: opacity var(--transition-fast),
transform var(--transition-fast);
box-shadow: var(--shadow-md);
white-space: nowrap;
text-align: left;
}
.whatsapp-tooltip::after {
content: '';
position: absolute;
top: 50%;
right: -5px;
transform: translateY(-50%) rotate(45deg);
width: 10px;
height: 10px;
background-color: var(--color-black);
}
.whatsapp-button:hover .whatsapp-icon,
.whatsapp-button:focus .whatsapp-icon {
transform: scale(1.1);
background: var(--color-gold-light);
box-shadow: var(--shadow-gold);
}
.whatsapp-button:hover .whatsapp-tooltip,
.whatsapp-button:focus .whatsapp-tooltip {
opacity: 1;
transform: translateX(0);
}
/* Animation for WhatsApp button */
.whatsapp-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius-round);
background: var(--gradient-gold);
animation: pulse-gold 2s infinite;
z-index: -1;
}
@keyframes pulse-gold {
0% {
transform: scale(0.8);
opacity: 0.8;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
/* === ANIMAZIONI === */
[data-aos] {
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),
transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
[data-aos="fade-up"] {
transform: translateY(30px);
}
[data-aos="fade-down"] {
transform: translateY(-30px);
}
[data-aos="fade-left"] {
transform: translateX(30px);
}
[data-aos="fade-right"] {
transform: translateX(-30px);
}
[data-aos="zoom-in"] {
transform: scale(0.9);
}
[data-aos="zoom-out"] {
transform: scale(1.1);
}
[data-aos].aos-animate {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
/* Gradient animation */
.gradient-animation {
background: linear-gradient(-45deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light), var(--color-gold));
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Floating animation */
.float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Shimmer effect */
.shimmer {
position: relative;
overflow: hidden;
}
.shimmer::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* === MEDIA QUERIES === */
/* Large Desktops (1400px and up) */
@media (min-width: 1400px) {
:root {
--section-padding-desktop: var(--space-4xl);
}
.hero-content {
max-width: 900px;
}
h1 {
font-size: var(--font-size-6xl);
}
.services-grid {
gap: 3rem;
}
.service-image-wrapper {
height: 280px;
}
.service-content {
padding: 2.5rem;
}
}
/* Medium Desktops (1200px - 1399px) */
@media (max-width: 1399px) {
.footer-nav {
grid-template-columns: repeat(3, 1fr);
}
.footer-column.subscribe {
grid-column: span 3;
margin-top: var(--space-lg);
}
}
/* Small Desktops & Tablets (992px - 1199px) */
@media (max-width: 1199px) {
:root {
--section-padding-desktop: var(--space-2xl);
--space-3xl: 5rem;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.advantages-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.advantages-header {
padding-right: 0;
max-width: 700px;
margin-bottom: var(--space-lg);
}
.feature-section {
padding: var(--section-padding-tablet) 0;
}
}
/* Tablets (768px - 991px) */
@media (max-width: 991px) {
:root {
--content-padding: var(--space-md);
--section-padding-tablet: var(--space-xl);
}
.nav-menu {
display: none;
}
/* Reset nav-link color to black on mobile */
.nav-link {
color: var(--color-black);
}
.nav-toggle {
display: flex;
}
.services-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.advantages-content {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.feature-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.feature-media {
order: -1;
}
.feature-image {
padding-bottom: 56.25%; /* 16:9 aspect ratio */
max-height: 300px;
margin-bottom: var(--space-md);
}
.feature-content {
padding: var(--space-md);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-top: -40px;
position: relative;
z-index: 1;
}
.feature-section {
overflow: visible;
padding: var(--section-padding-tablet) 0;
}
.feature-section .section-container {
padding: 0 var(--space-md);
}
.feature-tag {
display: inline-block;
margin-bottom: var(--space-xs);
}
.feature-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-sm);
}
.feature-description {
font-size: var(--font-size-base);
margin-bottom: var(--space-md);
line-height: 1.5;
}
.feature-list {
margin-bottom: var(--space-md);
}
.feature-item {
margin-bottom: var(--space-xs);
padding: var(--space-xs) 0;
align-items: center;
}
.feature-check {
width: 24px;
height: 24px;
min-width: 24px;
}
.feature-text {
font-size: var(--font-size-sm);
}
.feature-action {
margin-top: var(--space-sm);
}
.footer-top {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.footer-nav {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg) var(--space-xl);
}
.footer-column.subscribe {
grid-column: span 2;
}
.hero-scroll {
bottom: 20px;
}
}
/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
:root {
--space-3xl: 4rem;
--space-2xl: 3rem;
--space-xl: 2.5rem;
--space-lg: 1.5rem;
--space-md: 1rem;
--section-padding-mobile: var(--space-lg);
}
section {
padding: var(--section-padding-mobile) 0;
}
.feature-section {
padding-top: var(--space-md);
padding-bottom: var(--space-xl);
}
.feature-content {
padding: var(--space-md);
margin-top: -50px;
}
.feature-image {
max-height: 220px;
}
.feature-title {
font-size: var(--font-size-lg);
}
.feature-description {
font-size: var(--font-size-sm);
}
.hero-content {
padding: 0 var(--content-padding);
}
.hero-actions {
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
width: 100%;
}
.hero-actions .btn {
width: 100%;
}
.section-title {
font-size: var(--font-size-2xl);
}
.section-subtitle {
font-size: var(--font-size-base);
}
.testimonial-author {
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.footer-nav {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.footer-column.subscribe {
grid-column: span 1;
}
.footer-bottom {
flex-direction: column;
gap: var(--space-md);
align-items: flex-start;
text-align: left;
}
.legal-links {
justify-content: flex-start;
flex-wrap: wrap;
}
.hero-scroll {
display: none;
}
}
/* Mobile Portrait (Up to 575px) */
@media (max-width: 575px) {
:root {
--space-xl: 2rem;
--space-lg: 1.25rem;
--space-md: 0.875rem;
--content-padding: var(--space-sm);
}
.logo-link {
font-size: var(--font-size-lg);
}
.hero-title {
font-size: var(--font-size-2xl);
}
.hero-description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-lg);
}
.section-tag, .services-tag, .feature-tag {
font-size: var(--font-size-xs);
}
.service-icon {
width: 50px;
height: 50px;
}
.icon-svg {
width: 25px;
height: 25px;
}
.service-number {
font-size: 2.5rem;
}
.service-name {
font-size: var(--font-size-lg);
}
.advantage-icon {
width: 44px;
height: 44px;
}
.advantage-text h3 {
font-size: var(--font-size-base);
}
.footer-title {
font-size: var(--font-size-base);
}
.footer-tagline {
font-size: var(--font-size-sm);
}
.social-link {
width: 36px;
height: 36px;
}
.feature-section {
padding-top: var(--space-sm);
padding-bottom: var(--space-lg);
}
.feature-content {
padding: var(--space-sm);
margin-top: -30px;
}
.feature-media {
margin-bottom: -20px;
}
.feature-image {
max-height: 180px;
border-radius: var(--radius-md);
}
.feature-title {
font-size: var(--font-size-md);
margin-bottom: var(--space-xs);
}
.feature-description {
font-size: var(--font-size-xs);
margin-bottom: var(--space-sm);
}
.feature-list {
margin-bottom: var(--space-sm);
}
.feature-item {
margin-bottom: var(--space-2xs);
}
.feature-check {
width: 20px;
height: 20px;
min-width: 20px;
margin-right: var(--space-xs);
}
.feature-text {
font-size: var(--font-size-xs);
}
.feature-action .btn {
padding: var(--space-xs) var(--space-sm);
font-size: var(--font-size-xs);
}
.mobile-nav-link {
font-size: var(--font-size-lg);
}
.mobile-menu-container {
padding: var(--space-lg) var(--space-sm);
}
.mobile-nav-number {
min-width: 24px;
margin-right: var(--space-sm);
}
.mobile-contact-item {
font-size: var(--font-size-sm);
}
.whatsapp-button {
bottom: var(--space-sm);
right: var(--space-sm);
}
.whatsapp-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
}
/* === ACCESSIBILITÀ === */
/* Focus outline per utenti tastiera */
:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
/* Preferenze per motion ridotte */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-aos] {
opacity: 1;
transform: none;
transition: none;
}
html, body {
scroll-behavior: auto;
}
.scroll-line::after,
.whatsapp-button::before,
.shimmer::after {
animation: none !important;
}
.hero-image-inner {
transform: none;
transition: none;
}
}
/* Modalità a contrasto elevato */
@media (forced-colors: active) {
.btn,
.nav-link,
.service-showcase-card,
.advantage-item,
.feature-check,
.contact-icon,
.social-link {
border: 1px solid currentColor;
}
.section-tag::before,
.section-tag::after,
.section-title::after,
.feature-title::after {
background-color: currentColor;
}
}
/* === SUPPORTO DARK MODE === */
@media (prefers-color-scheme: dark) {
:root {
--color-white: #111111;
--color-white-off: #191919;
--color-white-soft: #222222;
--color-gray-lightest: #2A2A2A;
--color-gray-light: #333333;
--color-gray-medium: #777777;
--color-gray-dark: #AAAAAA;
--color-gray-darkest: #CCCCCC;
--color-black: #F9F9F9;
--color-black-soft: #EEEEEE;
}
.main-navigation.scrolled {
background-color: rgba(17, 17, 17, 0.95);
}
.service-showcase-card,
.advantage-item,
.testimonial-card {
background-color: var(--color-white-off);
border-color: var(--color-gray-lightest);
}
.footer {
background-color: var(--color-white);
color: var(--color-black);
}
.footer-menu a,
.footer-contact a,
.footer-tagline,
.subscribe-text,
.footer-bottom {
color: rgba(249, 249, 249, 0.6);
}
.legal-links a,
.social-link {
color: rgba(249, 249, 249, 0.6);
}
.social-link {
background-color: rgba(249, 249, 249, 0.05);
}
.subscribe-input {
background-color: rgba(249, 249, 249, 0.05);
}
.subscribe-input:focus {
background-color: rgba(249, 249, 249, 0.1);
}
.subscribe-input::placeholder {
color: rgba(249, 249, 249, 0.3);
}
.footer-title {
color: var(--color-black);
}
.feature-content {
background-color: var(--color-white-off);
}
}
/* === UTILITÀ === */
.hidden {
display: none !important;
}
.margin-bottom-none {
margin-bottom: 0 !important;
}
.margin-top-none {
margin-top: 0 !important;
}
.bg-white {
background-color: var(--color-white) !important;
}
.bg-light {
background-color: var(--color-white-soft) !important;
}
.bg-gold {
background-color: var(--color-gold) !important;
}
.bg-black {
background-color: var(--color-black) !important;
}
.bg-gradient-gold {
background: var(--gradient-gold) !important;
}
.block {
display: block !important;
}
.flex {
display: flex !important;
}
.inline-flex {
display: inline-flex !important;
}
.grid {
display: grid !important;
}
.w-full {
width: 100% !important;
}
.h-full {
height: 100% !important;
}
.rounded {
border-radius: var(--radius-md) !important;
}
.rounded-lg {
border-radius: var(--radius-lg) !important;
}
.rounded-full {
border-radius: var(--radius-round) !important;
}
.shadow {
box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
box-shadow: var(--shadow-lg) !important;
}
.overflow-hidden {
overflow: hidden !important;
}
.z-top {
z-index: 10 !important;
}
.transition {
transition: all var(--transition-medium) !important;
}
/* === STILI PER LA STAMPA === */
@media print {
body {
font-size: 12pt;
color: #000;
background: #fff;
}
a {
color: #000;
text-decoration: underline;
}
.main-navigation,
.hero-scroll,
.mobile-menu,
.whatsapp-button,
.footer {
display: none !important;
}
.section-container,
.container-narrow {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
.service-showcase-card,
.advantage-item,
.feature-grid,
.testimonial-card {
page-break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ddd;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
color: #000;
}
img {
max-width: 100% !important;
page-break-inside: avoid;
}
}
/* === OTTIMIZZAZIONI SPECIFICHE PER DISPOSITIVI MOBILI === */
/* Fix per dispositivi mobili specifici */
html body.is-mobile {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
html body.is-mobile .hero-section {
min-height: 100vh;
height: auto;
padding: 80px 0 40px;
position: relative;
overflow: hidden;
}
html body.is-mobile .hero-media {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 0;
}
html body.is-mobile .hero-image-inner {
transform: none !important;
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
opacity: 1;
}
html body.is-mobile .hero-overlay {
background: linear-gradient(to top, rgba(17, 17, 17, 0.6) 0%, transparent 70%);
opacity: 1;
}
html body.is-mobile .hero-content {
position: relative;
z-index: 10;
width: 100%;
max-width: 100%;
padding: 0 var(--space-md);
margin-top: 30px;
}
html body.is-mobile .hero-title {
margin-bottom: var(--space-md);
}
html body.is-mobile .hero-title h1 {
font-size: calc(var(--font-size-2xl) + 0.25rem);
line-height: 1.2;
opacity: 1;
}
html body.is-mobile .title-line {
transform: none;
opacity: 1;
margin-bottom: 0.5rem;
color: rgba(255, 255, 255, 0.9);
}
html body.is-mobile .hero-description {
font-size: var(--font-size-base);
margin-bottom: var(--space-lg);
opacity: 1;
transform: none;
color: rgba(255, 255, 255, 0.9);
}
html body.is-mobile .hero-actions {
margin-top: var(--space-md);
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: var(--space-md);
opacity: 1;
transform: none;
}
html body.is-mobile .hero-actions .btn {
width: 100%;
display: flex;
justify-content: center;
}
html body.is-mobile .btn-text-link {
margin-top: 0.5rem;
align-self: flex-start;
}
/* Fix per la sezione servizi su mobile */
html body.is-mobile .services-showcase {
padding: var(--space-xl) 0;
overflow: hidden;
position: relative;
z-index: 1;
}
html body.is-mobile .services-container {
width: 100%;
padding: 0 var(--space-md);
max-width: 100%;
}
html body.is-mobile .services-header {
margin-bottom: var(--space-xl);
text-align: left;
}
html body.is-mobile .services-tag {
display: inline-block;
margin-bottom: var(--space-sm);
font-size: var(--font-size-xs);
}
html body.is-mobile .services-title {
font-size: var(--font-size-xl);
margin-bottom: var(--space-md);
line-height: 1.3;
}
html body.is-mobile .services-subtitle {
font-size: var(--font-size-sm);
line-height: 1.5;
}
/* Fix per lo spazio nei servizi su mobile */
html body.is-mobile .services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
padding: 0 var(--space-xs);
}
html body.is-mobile .service-showcase-card {
margin-bottom: var(--space-lg);
height: auto;
}
html body.is-mobile .service-image-wrapper {
height: 200px;
}
html body.is-mobile .service-content {
padding: var(--space-lg);
}
/* Fix per header mobile */
@media (max-width: 991px) {
.main-navigation {
padding: 15px 0 !important;
height: auto !important;
min-height: 80px;
display: flex;
align-items: center;
}
.nav-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center !important;
padding: 0 var(--space-sm) !important;
position: relative;
}
.logo-link {
font-size: var(--font-size-lg) !important;
padding: 0;
}
.logo-accent {
font-size: var(--font-size-lg) !important;
}
.nav-right {
display: flex !important;
position: absolute;
right: var(--space-sm);
top: 50%;
transform: translateY(-50%);
}
.nav-contact {
display: none !important;
}
.contact-icon {
display: none !important;
}
.nav-toggle {
width: 24px !important;
height: 18px !important;
display: flex !important;
z-index: var(--z-dropdown);
}
.toggle-line {
height: 2px !important;
}
/* Fix per colori nell'header */
.main-navigation:not(.scrolled) .logo-text,
.main-navigation:not(.scrolled) .logo-accent {
color: var(--color-black) !important;
}
.main-navigation:not(.scrolled) .toggle-line {
background-color: var(--color-black) !important;
}
.main-navigation:not(.scrolled) .contact-icon {
color: var(--color-gold) !important;
background-color: rgba(193, 154, 82, 0.1) !important;
}
}
/* Fix per form su mobile */
@media (max-width: 767px) {
.form-row {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.form-group {
margin-bottom: var(--space-md);
}
.form-label {
font-size: var(--font-size-sm);
}
.form-input,
.form-select,
.subscribe-input {
font-size: var(--font-size-sm);
padding: var(--space-sm);
}
.btn {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
}
}
/* Fix alta priorità per menu e navigazione */
/* Mobile header: show only hamburger menu on mobile */
@media (max-width: 991px) {
.main-navigation .nav-container .nav-right {
display: flex !important;
position: absolute;
right: var(--space-sm);
top: 50%;
transform: translateY(-50%);
}
.main-navigation .nav-container .nav-right .nav-contact {
display: none !important;
}
.main-navigation .nav-container .nav-right .nav-toggle {
display: flex !important;
}
}
/* Header compatto */
.main-navigation {
min-height: 0 !important;
max-height: 90px !important;
padding: 15px 0 !important;
}
.main-navigation .nav-container {
max-width: 100% !important;
padding: 0 var(--space-sm) !important;
}
.logo-link {
font-size: var(--font-size-lg) !important;
transform: scale(0.95) !important;
}
/* Stili logo */
.logo-image {
max-height: 65px;
width: auto;
display: block;
}
.mobile-logo .logo-image {
max-height: 40px;
margin: 0 auto;
}
@media (max-width: 767px) {
.logo-image {
max-height: 55px;
}
.mobile-logo .logo-image {
max-height: 50px;
}
}
@media (max-width: 575px) {
.logo-image {
max-height: 50px;
}
.mobile-logo .logo-image {
max-height: 45px;
}
}
/* Logo footer */
.footer-logo-image {
max-height: 50px;
width: auto;
margin-bottom: 15px;
display: block;
}
@media (max-width: 767px) {
.footer-logo-image {
max-height: 45px;
margin-bottom: 12px;
}
}
@media (max-width: 575px) {
.footer-logo-image {
max-height: 40px;
margin-bottom: 10px;
}
}
/* === OTTIMIZZAZIONI PERFORMANCE === */
/* Ridurre il consumo di risorse su dispositivi meno potenti */
@media (prefers-reduced-data: reduce) {
img, video {
max-resolution: 0.5dppx;
}
video {
display: none;
}
.hero-image-inner,
.service-image,
.feature-image,
.author-avatar img {
filter: none !important;
}
.background-shape {
display: none;
}
}
/* === MIGLIORAMENTI DELLE TRANSIZIONI === */
.page-transition {
transition: opacity var(--transition-medium) ease;
}
.link-hover {
position: relative;
overflow: hidden;
}
.link-hover::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: var(--color-gold);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-medium);
}
.link-hover:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* === STILI INTERATTIVI === */
.interactive-card {
transition: transform var(--transition-medium), box-shadow var(--transition-medium);
will-change: transform;
}
.interactive-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.interactive-icon {
transition: transform var(--transition-bounce), color var(--transition-fast), background-color var(--transition-fast);
}
.interactive-icon:hover {
transform: scale(1.1);
}
/* === EFFETTI HOVER AVANZATI === */
.hover-lift {
transition: transform var(--transition-medium);
}
.hover-lift:hover {
transform: translateY(-5px);
}
.hover-scale {
transition: transform var(--transition-medium);
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-rotate {
transition: transform var(--transition-medium);
}
.hover-rotate:hover {
transform: rotate(5deg);
}
.hover-brightness {
transition: filter var(--transition-medium);
}
.hover-brightness:hover {
filter: brightness(1.1);
}
/* === ULTERIORI PERFEZIONAMENTI RESPONSIVE === */
/* iPad Pro / Tablet grandi */
@media only screen and (min-width: 992px) and (max-width: 1199px) and (min-height: 1000px) {
.hero-section {
height: 80vh;
}
.service-image-wrapper {
height: 220px;
}
.advantage-item {
min-height: 260px;
}
}
/* iPhone e dispositivi stretti in portrait */
@media only screen and (max-width: 375px) {
:root {
--font-size-base: 0.9375rem;
--content-padding: 0.75rem;
}
.hero-title h1 {
font-size: var(--font-size-xl);
}
.hero-description {
font-size: var(--font-size-xs);
}
.section-title {
font-size: var(--font-size-xl);
}
.section-subtitle {
font-size: var(--font-size-xs);
}
.service-name {
font-size: var(--font-size-md);
}
.service-description {
font-size: var(--font-size-xs);
}
.advantage-text h3 {
font-size: var(--font-size-sm);
}
.advantage-text p {
font-size: var(--font-size-xs);
}
.feature-content {
padding: var(--space-xs);
}
.footer-title {
font-size: var(--font-size-sm);
}
.whatsapp-icon {
width: 45px;
height: 45px;
font-size: 1.25rem;
}
}
/* Fix per schermi ad alta risoluzione */
@media only screen and (min-width: 1800px) {
:root {
--container-max: 1600px;
--section-padding-desktop: 8rem;
}
html {
font-size: 18px;
}
.service-image-wrapper {
height: 320px;
}
.advantage-item {
min-height: 320px;
}
.feature-image {
max-height: 500px;
}
}
/* Ottimizzazioni per dispositivi pieghevoli in diverse modalità */
@media (max-width: 767px) and (min-height: 1000px) {
.service-showcase-card {
margin-bottom: var(--space-lg);
}
.hero-section {
min-height: 650px;
height: 60vh;
}
}
/* Fix per rimuovere interruzioni di riga nei titoli su mobile */
html body.is-mobile .section-title br,
html body.is-mobile .services-title br,
html body.is-mobile .feature-title br {
display: none;
}
/* Fixes generali per layout mobile */
@media (max-width: 991px) {
html body.is-mobile section {
padding: var(--space-xl) 0 !important;
overflow: hidden !important;
width: 100% !important;
}
html body.is-mobile .section-container {
width: 100% !important;
padding: 0 var(--space-md) !important;
max-width: 100% !important;
}
/* Menu mobile migliorato */
html body.is-mobile .mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100vh !important;
max-width: 100% !important;
max-height: 100vh !important;
overflow-y: auto;
background-color: var(--color-black);
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
html body.is-mobile .mobile-menu.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
html body.is-mobile .mobile-menu-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: var(--space-md);
overflow-y: auto;
}
html body.is-mobile .mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) 0;
margin-bottom: var(--space-md);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html body.is-mobile .mobile-logo {
font-size: var(--font-size-xl);
font-weight: var(--weight-semibold);
color: var(--color-white);
}
html body.is-mobile .mobile-close {
background: none;
border: none;
color: var(--color-white);
font-size: var(--font-size-xl);
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
html body.is-mobile .mobile-close:hover,
html body.is-mobile .mobile-close:focus {
background-color: var(--color-gold);
}
html body.is-mobile .mobile-nav-menu {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl);
flex-grow: 1;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
html body.is-mobile .mobile-nav-item {
margin-bottom: var(--space-sm);
}
html body.is-mobile .mobile-nav-link {
display: flex;
align-items: center;
padding: var(--space-sm) 0;
color: var(--color-white);
text-decoration: none;
font-size: var(--font-size-lg);
transition: color 0.3s ease;
text-align: left;
}
}
/* === CURSORE PERSONALIZZATO === */
.cursor-dot,
.cursor-outline {
position: fixed;
pointer-events: none;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.cursor-dot {
width: 8px;
height: 8px;
background-color: var(--color-gold);
border-radius: 50%;
transform: translate(-50%, -50%);
top: 0;
left: 0;
}
.cursor-outline {
width: 40px;
height: 40px;
border: 1px solid var(--color-gold);
border-radius: 50%;
transform: translate(-50%, -50%);
top: 0;
left: 0;
transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}
.cursor-loaded .cursor-dot,
.cursor-loaded .cursor-outline {
opacity: 1;
}
/* Stili stati diversi del cursore */
.cursor-link .cursor-dot {
transform: translate(-50%, -50%) scale(1.5);
background-color: var(--color-white);
}
.cursor-link .cursor-outline {
border-color: var(--color-white);
transform: translate(-50%, -50%) scale(1.2);
}
.cursor-button .cursor-dot {
transform: translate(-50%, -50%) scale(2);
background-color: var(--color-gold);
}
.cursor-button .cursor-outline {
width: 50px;
height: 50px;
border-color: var(--color-gold);
background-color: rgba(193, 154, 82, 0.1);
}
.cursor-text .cursor-dot {
width: 2px;
height: 20px;
border-radius: 0;
}
.cursor-text .cursor-outline {
opacity: 0;
}
/* === FAQ Section Styles === */
.faq-section {
padding: var(--space-2xl) 0;
background-color: var(--color-light);
position: relative;
overflow: hidden;
}
.faq-container {
margin-top: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-md);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.faq-item {
background-color: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all var(--transition-medium);
}
.faq-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.faq-question {
padding: var(--space-md) var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all var(--transition-medium);
}
.faq-question h3 {
margin: 0;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-dark);
}
.faq-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--color-primary-light);
color: var(--color-primary);
transition: all var(--transition-medium);
flex-shrink: 0;
margin-left: var(--space-md);
}
.faq-icon i {
font-size: 12px;
transition: transform var(--transition-medium);
}
.faq-item.active .faq-icon {
background-color: var(--color-primary);
color: var(--color-white);
}
.faq-item.active .faq-icon i {
transform: rotate(45deg);
}
.faq-answer {
padding: 0 var(--space-lg);
max-height: 0;
overflow: hidden;
transition: all var(--transition-medium);
opacity: 0;
}
.faq-item.active .faq-answer {
padding: 0 var(--space-lg) var(--space-md);
max-height: 1000px;
opacity: 1;
}
.faq-answer p {
margin: 0;
color: var(--color-gray);
font-size: var(--font-size-sm);
line-height: 1.6;
}
.faq-cta {
margin-top: var(--space-xl);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
.faq-cta p {
font-size: var(--font-size-base);
color: var(--color-dark);
margin-bottom: var(--space-sm);
}
/* Responsive styles for FAQ section */
@media (max-width: 991px) {
.faq-container {
padding: 0 var(--space-md);
}
.faq-question {
padding: var(--space-md);
}
.faq-item.active .faq-answer {
padding: 0 var(--space-md) var(--space-md);
}
}
@media (max-width: 767px) {
.faq-section {
padding: var(--space-xl) 0;
}
.faq-question h3 {
font-size: calc(var(--font-size-sm) + 0.125rem);
}
.faq-icon {
width: 20px;
height: 20px;
}
.faq-cta {
margin-top: var(--space-lg);
}
}
/* Responsive styles for feature images */
@media (max-width: 768px) {
.feature-image {
max-height: 350px;
padding: 0;
margin: 15px 0;
object-fit: cover;
}
.image-container {
overflow: hidden;
border-radius: 8px;
height: auto;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.feature-image {
max-height: 400px;
padding: 0;
margin: 20px 0;
object-fit: cover;
}
.image-container {
overflow: hidden;
border-radius: 10px;
height: auto;
}
}
@media (min-width: 1025px) {
.feature-image {
max-height: 500px;
padding: 0;
margin: 25px 0;
object-fit: cover;
}
.image-container {
overflow: hidden;
border-radius: 12px;
height: auto;
}
}
/* Property banner specific styles */
.property-banner.page-banner {
min-height: 300px;
margin-bottom: 0;
}
@media (max-width: 768px) {
.property-banner.page-banner {
min-height: 250px;
}
.property-banner.page-banner .banner-title {
font-size: var(--font-size-xl);
}
.property-banner.page-banner .banner-description {
font-size: var(--font-size-base);
}
}
/* Margin utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
/* Property Management page specific styles */
.two-column-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
@media (max-width: 768px) {
.two-column-list {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
}
/* Benefits grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
margin-top: var(--space-xl);
}
.benefit-card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.benefit-icon {
width: 60px;
height: 60px;
margin: 0 auto var(--space-md);
background-color: var(--color-gold-transparent);
border-radius: var(--radius-round);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
font-size: 24px;
}
.benefit-title {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--space-sm);
color: var(--color-black);
}
.benefit-description {
color: var(--color-gray-medium);
font-size: var(--font-size-base);
line-height: 1.6;
}
@media (max-width: 1200px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.benefits-grid {
grid-template-columns: 1fr;
}
}
/* Case Study Elements */
.case-study-container {
position: relative;
padding: var(--space-xl) 0;
}
.case-study-header {
text-align: center;
margin-bottom: var(--space-lg);
}
.case-subtitle {
font-size: var(--font-size-lg);
color: var(--color-gray-dark);
margin-bottom: var(--space-sm);
}
.kpi-highlight {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-gold);
margin-bottom: var(--space-md);
}
.micro-stats {
display: flex;
justify-content: center;
gap: var(--space-xl);
margin-top: var(--space-xl);
flex-wrap: wrap;
}
.stat-item {
text-align: center;
flex: 0 0 auto;
}
.stat-number {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-gold);
margin-bottom: var(--space-xs);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-gray-dark);
}
.case-study-cta {
text-align: center;
margin-top: var(--space-xl);
}
@media (max-width: 767px) {
.micro-stats {
flex-direction: column;
gap: var(--space-md);
}
.stat-item {
width: 100%;
margin-bottom: var(--space-md);
}
}
/* === STORY HERO SECTION === */
.story-hero-section {
padding: 80px 0;
background-color: #f8f9fa;
}
.story-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.story-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.story-media {
order: -1;
}
.story-image {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.story-image:hover {
transform: translateY(-10px);
}
.story-image img {
width: 100%;
height: auto;
display: block;
}
.story-actions {
margin-top: 30px;
display: flex;
gap: 15px;
}
@media (min-width: 768px) {
.story-grid {
grid-template-columns: 1fr 1fr;
}
.story-media {
order: 1;
}
.story-hero-section {
padding: 100px 0;
}
}
/* === TIMELINE SECTION === */
.timeline-section {
padding: 80px 0;
background-color: #fff;
}
.timeline-wrapper {
margin-top: 60px;
position: relative;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::before {
content: '';
position: absolute;
width: 2px;
background-color: #ddd;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 80px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-marker {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--primary-color);
border: 4px solid white;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
box-shadow: 0 0 0 4px rgba(189, 157, 82, 0.2);
}
.timeline-content {
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: calc(50% - 40px);
margin-left: auto;
transition: transform 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
}
.timeline-item:nth-child(odd) .timeline-content {
margin-left: 0;
margin-right: auto;
}
.timeline-date {
display: inline-block;
padding: 4px 12px;
background-color: var(--primary-color);
color: white;
border-radius: 4px;
font-size: 0.9rem;
margin-bottom: 10px;
}
.timeline-title {
margin-top: 0;
margin-bottom: 15px;
color: var(--dark-color);
font-size: 1.4rem;
}
.timeline-body {
margin-bottom: 20px;
}
.timeline-image {
border-radius: 8px;
overflow: hidden;
margin-top: 20px;
}
.timeline-image img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.timeline-image:hover img {
transform: scale(1.05);
}
/* Mobile timeline adjustments */
@media (max-width: 767px) {
.timeline::before {
left: 40px;
}
.timeline-marker {
left: 40px;
transform: none;
}
.timeline-content {
width: calc(100% - 80px);
margin-left: 80px;
}
.timeline-item:nth-child(odd) .timeline-content {
margin-left: 80px;
margin-right: 0;
}
}
/* Call to Action Section */
.cta-section {
padding: 80px 0;
background-color: #f8f9fa;
}
.cta-wrapper {
max-width: 800px;
margin: 0 auto;
}
.cta-box {
background-color: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
text-align: center;
}
.cta-title {
font-size: 1.8rem;
margin-bottom: 15px;
color: var(--dark-color);
}
.cta-text {
margin-bottom: 30px;
font-size: 1.1rem;
color: var(--text-color);
}
.button-group {
display: flex;
justify-content: center;
gap: 15px;
}
@media (max-width: 576px) {
.button-group {
flex-direction: column;
}
}
/* Section decoration */
.section-decoration {
width: 80px;
height: 2px;
background-color: #eee;
margin: 20px 0 30px;
position: relative;
}
.section-decoration span {
display: block;
width: 40px;
height: 2px;
background-color: var(--primary-color);
position: absolute;
top: 0;
left: 0;
}
.text-center .section-decoration {
margin-left: auto;
margin-right: auto;
}
/* Section Title and Subtitle */
.section-title {
font-size: 2.5rem;
margin-bottom: 15px;
color: var(--dark-color);
}
.section-subtitle {
font-size: 1.2rem;
margin-bottom: 20px;
color: var(--text-color);
font-weight: 400;
}
.section-description {
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-color);
}
/* AOS animation fallback */
[data-aos] {
transition-duration: 0.8s;
transition-property: opacity, transform;
transition-timing-function: ease-in-out;
}
[data-aos="fade-right"] {
transform: translateX(-20px);
opacity: 0;
}
[data-aos="fade-left"] {
transform: translateX(20px);
opacity: 0;
}
[data-aos].aos-animate {
transform: translateX(0);
opacity: 1;
}
.flash-messages {
position: fixed;
top: 20px;
right: 20px;
z-index: var(--z-tooltip);
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 400px;
}
.flash-message {
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
background-color: var(--color-white);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: space-between;
animation: slideIn 0.3s ease-out;
}
.flash-message.success {
border-left: 4px solid #4CAF50;
color: #2E7D32;
}
.flash-message.error {
border-left: 4px solid #F44336;
color: #C62828;
}
.flash-close {
background: none;
border: none;
color: inherit;
font-size: var(--font-size-xl);
line-height: 1;
padding: 0 var(--space-2xs);
cursor: pointer;
opacity: 0.7;
transition: opacity var(--transition-fast);
}
.flash-close:hover {
opacity: 1;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* === PRELOADER === */
.site-preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-black);
z-index: var(--z-preloader);
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
.site-preloader.hidden {
opacity: 0;
visibility: hidden;
}
.preloader-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 32px;
transform: translateY(0);
transition: transform 0.5s ease-out;
}
.site-preloader.hidden .preloader-content {
transform: translateY(-20px);
}
.preloader-logo {
width: 180px;
height: auto;
margin-bottom: 0;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease-out forwards;
display: block;
}
.loading-bar {
width: 200px;
height: 2px;
background-color: rgba(193, 154, 82, 0.2);
border-radius: var(--radius-pill);
overflow: hidden;
position: relative;
margin: 0 auto;
opacity: 0;
animation: fadeIn 0.5s ease-out 0.3s forwards;
}
.loading-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: var(--gradient-gold);
border-radius: var(--radius-pill);
transition: width 0.3s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Aggiungi la classe no-scroll al body quando il preloader è attivo */
body.preloader-active {
overflow: hidden;
}
/* Dropdown Menu */
.nav-item.dropdown {
position: relative;
}
.nav-item.dropdown .nav-link {
display: flex;
align-items: center;
gap: 4px;
padding: 2px;
}
.nav-item.dropdown .fa-chevron-down {
font-size: 10px;
transition: transform var(--transition-fast);
}
.nav-item.dropdown:hover .fa-chevron-down {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: var(--color-white);
border-radius: var(--radius-sm);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: var(--space-xs) 0;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: opacity var(--transition-fast),
visibility var(--transition-fast),
transform var(--transition-fast);
z-index: var(--z-dropdown);
border: 1px solid rgba(var(--color-gold-rgb), 0.1);
}
.nav-item.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.dropdown-link {
display: block;
padding: var(--space-xs) var(--space-md);
color: var(--color-black);
font-size: var(--font-size-sm);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color var(--transition-fast),
background-color var(--transition-fast);
}
.dropdown-link:hover {
color: var(--color-gold);
background-color: rgba(var(--color-gold-rgb), 0.05);
}
/* Hide dropdown on mobile */
@media (max-width: 991px) {
.dropdown-menu {
display: none;
}
.nav-item.dropdown .fa-chevron-down {
display: none;
}
}
/* Mobile Submenu */
.mobile-submenu {
padding-left: 25px;
margin-bottom: var(--space-xs);
}
.mobile-nav-link.mobile-sub-link {
padding: var(--space-xs) var(--space-sm);
opacity: 0.8;
border-left: 1px solid var(--color-gold-transparent);
}
.mobile-nav-link.mobile-sub-link .mobile-nav-text {
font-size: calc(var(--font-size-base) - 2px);
}
.mobile-nav-link.mobile-sub-link .mobile-nav-text::after {
bottom: -2px;
height: 1px;
}
html body.is-mobile .hero-tagline {
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
html body.is-mobile .hero-title {
margin-bottom: var(--space-md);
}
html body.is-mobile .hero-title .subtitle {
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
html body.is-mobile .hero-title h1 {
font-size: calc(var(--font-size-2xl) + 0.25rem);
line-height: 1.2;
opacity: 1;
transform: none;
color: rgba(255, 255, 255, 0.9);
text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
}
html body.is-mobile .hero-actions {
margin-top: var(--space-md);
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: var(--space-md);
opacity: 1;
transform: none;
}
html body.is-mobile .hero-actions .btn {
width: 100%;
display: flex;
justify-content: center;
}
html body.is-mobile .btn-text-link {
margin-top: 0.5rem;
align-self: flex-start;
}
/* === COOKIE CONSENT BANNER === */
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--color-black-soft);
backdrop-filter: blur(10px);
color: var(--color-white);
padding: var(--space-md);
box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);
transform: translateY(100%);
transition: transform var(--transition-medium);
z-index: 9999;
}
.cookie-consent.show {
transform: translateY(0);
}
.cookie-consent-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-standard);
margin: 0 auto;
gap: var(--space-md);
}
.cookie-consent-text {
flex: 1;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.cookie-consent-text a {
color: var(--color-gold);
text-decoration: underline;
}
.cookie-consent-actions {
display: flex;
gap: var(--space-xs);
flex-shrink: 0;
}
.cookie-btn {
padding: var(--space-xs) var(--space-md);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
}
.cookie-btn-accept {
background: var(--color-gold);
color: var(--color-black);
}
.cookie-btn-accept:hover {
background: var(--color-gold-light);
}
.cookie-btn-reject {
background: transparent;
color: var(--color-white);
border: 1px solid var(--color-gray-medium);
}
.cookie-btn-reject:hover {
background: var(--color-gray-darkest);
}
/* Responsive cookie banner */
@media (max-width: 768px) {
.cookie-consent-content {
flex-direction: column;
text-align: center;
gap: var(--space-sm);
}
.cookie-consent-actions {
width: 100%;
justify-content: center;
}
.cookie-btn {
flex: 1;
}
}
/* === LEGAL PAGES === */
.legal-page {
padding: calc(var(--section-padding-desktop) + 80px) 0 var(--section-padding-desktop);
background: var(--color-white);
min-height: 80vh;
}
.legal-header {
text-align: center;
margin-bottom: var(--space-3xl);
padding-bottom: var(--space-lg);
border-bottom: 2px solid var(--color-gold);
}
.legal-header h1 {
font-size: var(--font-size-4xl);
font-weight: var(--weight-bold);
color: var(--color-black);
margin-bottom: var(--space-sm);
}
.legal-subtitle {
font-size: var(--font-size-md);
color: var(--color-gray-dark);
font-style: italic;
}
.legal-content {
max-width: 800px;
margin: 0 auto;
line-height: 1.7;
}
.legal-section {
margin-bottom: var(--space-2xl);
}
.legal-section h2 {
font-size: var(--font-size-2xl);
font-weight: var(--weight-semibold);
color: var(--color-black);
margin-bottom: var(--space-md);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-gold-transparent);
}
.legal-section h3 {
font-size: var(--font-size-xl);
font-weight: var(--weight-medium);
color: var(--color-gold-dark);
margin: var(--space-lg) 0 var(--space-sm);
}
.legal-section p {
font-size: var(--font-size-base);
color: var(--color-gray-darkest);
margin-bottom: var(--space-md);
}
.legal-section ul {
margin: var(--space-md) 0;
padding-left: var(--space-lg);
}
.legal-section li {
font-size: var(--font-size-base);
color: var(--color-gray-darkest);
margin-bottom: var(--space-xs);
}
.legal-section a {
color: var(--color-gold);
text-decoration: underline;
transition: color var(--transition-fast);
}
.legal-section a:hover {
color: var(--color-gold-dark);
}
.legal-section strong {
color: var(--color-black);
font-weight: var(--weight-semibold);
}
/* Responsive legal pages */
@media (max-width: 768px) {
.legal-page {
padding: calc(var(--section-padding-mobile) + 60px) var(--space-md) var(--section-padding-mobile);
}
.legal-header h1 {
font-size: var(--font-size-3xl);
}
.legal-section h2 {
font-size: var(--font-size-xl);
}
.legal-section h3 {
font-size: var(--font-size-lg);
}
}