/* ============================================= SINDROME DI DOWN - UNIPD Design System & Custom Styles Compatibile con Bootstrap 5 + WordPress ============================================= */ /* ─── Google Fonts (aggiungere nel ) ─── */ /* ─── CSS Custom Properties (Design Tokens) ─── */ :root { /* Palette principale — soft e istituzionale */ --color-sage: #7DA87B; /* verde salvia — accento primario */ --color-sage-light: #A8C5A6; /* verde salvia chiaro */ --color-sage-dark: #5A8A58; /* verde salvia scuro (hover) */ --color-sky: #6DAFC2; /* azzurro chiaro — accento secondario */ --color-sky-light: #B3D9E6; /* azzurro molto chiaro (bg sezioni) */ --color-beige: #F5F0E8; /* beige caldo — sfondo alternato */ --color-beige-dark: #E8DFC9; /* beige scuro per separatori */ --color-coral: #E8927C; /* corallo tenue — CTA caldi */ --color-lavender: #A99DC5; /* lavanda — accento terziario */ /* Neutrali */ --color-white: #FFFFFF; --color-gray-50: #FAFAFA; --color-gray-100: #F4F4F4; --color-gray-200: #E8E8E8; --color-gray-400: #9E9E9E; --color-gray-600: #5E5E5E; --color-gray-800: #2E2E2E; --color-gray-900: #1A1A1A; /* Testo */ --text-primary: #2C3E35; /* verde scurissimo, non nero puro */ --text-secondary: #5A6B61; --text-muted: #8A9E94; --text-on-dark: #FFFFFF; /* Tipografia */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Lora', Georgia, serif; /* Spaziatura */ --section-padding-y: 80px; --section-padding-sm: 48px; /* Border radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 100px; /* Ombre */ --shadow-card: 0 4px 20px rgba(44, 62, 53, 0.08); --shadow-hover: 0 8px 32px rgba(44, 62, 53, 0.14); --shadow-deep: 0 16px 48px rgba(44, 62, 53, 0.16); /* Transizioni */ --transition-fast: 0.18s ease; --transition-base: 0.28s ease; --transition-slow: 0.45s ease; } /* ─── Reset & Base ─── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--text-primary); background-color: var(--color-white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.25; color: var(--text-primary); font-weight: 600; } h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); } h4 { font-size: 1.25rem; } p { margin-bottom: 1rem; color: var(--text-secondary); } a { color: var(--color-sage-dark); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-sage); } img { max-width: 100%; height: auto; } /* ─── Skip Link (accessibilità) ─── */ .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--color-sage); color: white; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-weight: 600; z-index: 10000; transition: top var(--transition-fast); } .skip-link:focus { top: 1rem; } /* ─── NAVBAR ─── */ .navbar-main { background-color: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-gray-200); padding: 0; transition: box-shadow var(--transition-base); position: sticky; top: 0; z-index: 1000; } .navbar-main.scrolled { box-shadow: 0 2px 16px rgba(44,62,53,0.10); } .navbar-brand-wrap { display: flex; align-items: center; gap: 0px; padding: 12px 0; } .navbar-brand-logo { max-height: 80px; width: auto; } .navbar-brand-text { display: flex; flex-direction: column; } .navbar-brand-text .brand-title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; } .navbar-brand-text .brand-subtitle { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; letter-spacing: 0.02em; } .navbar-nav .nav-link { font-size: 0.88rem; font-weight: 500; color: var(--text-secondary) !important; padding: 1.4rem 0.9rem !important; transition: color var(--transition-fast); position: relative; letter-spacing: 0.01em; } .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 0.8rem; left: 0.9rem; right: 0.9rem; height: 2px; background: var(--color-sage); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform var(--transition-fast); } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--color-sage-dark) !important; } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1); } .navbar-cta { background: var(--color-sage); color: white !important; border-radius: var(--radius-pill); padding: 0.5rem 1.25rem !important; font-size: 0.85rem !important; font-weight: 600 !important; margin-left: 0.5rem; transition: background var(--transition-fast), transform var(--transition-fast); } .navbar-cta::after { display: none !important; } .navbar-cta:hover { background: var(--color-sage-dark) !important; color: white !important; transform: translateY(-1px); } /* Navbar con molte voci: font leggermente più compatto */ @media (min-width: 992px) { .navbar-nav .nav-link { padding: 1.4rem 0.7rem !important; font-size: 0.84rem; } } /* ─── DROPDOWN NAVBAR ─── */ .dropdown-custom { border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-hover); padding: 0.5rem; min-width: 200px; margin-top: 4px !important; } .dropdown-custom .dropdown-item { border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 500; color: var(--text-secondary); padding: 0.55rem 0.9rem; display: flex; align-items: center; transition: background var(--transition-fast), color var(--transition-fast); } .dropdown-custom .dropdown-item i { color: var(--color-sage-dark); } .dropdown-custom .dropdown-item:hover, .dropdown-custom .dropdown-item:focus { background: rgba(125,168,123,0.10); color: var(--color-sage-dark); } .dropdown-custom .dropdown-item.active, .dropdown-custom .dropdown-item:active { background: var(--color-sage); color: white; } .dropdown-custom .dropdown-item.active i, .dropdown-custom .dropdown-item:active i { color: white; } /* Indicatore dropdown in navbar */ .navbar-nav .dropdown-toggle::after { margin-left: 5px; vertical-align: 0.15em; border-top: 0.3em solid var(--color-sage-dark); } .navbar-nav .dropdown:hover > .dropdown-toggle::after { border-top-color: var(--color-sage); } /* Top bar universitario */ .top-bar { background: var(--color-gray-800); color: var(--color-gray-400); font-size: 0.78rem; padding: 6px 0; } .top-bar a { color: var(--color-gray-400); } .top-bar a:hover { color: white; } .top-bar .unipd-badge { display: flex; align-items: center; gap: 6px; font-weight: 500; } /* ─── HERO ─── */ .hero-section { background: linear-gradient(135deg, var(--color-beige) 0%, var(--color-sky-light) 100%); padding: 80px 0 70px; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -120px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(109,175,194,0.18) 0%, transparent 70%); pointer-events: none; } .hero-section::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(125,168,123,0.15) 0%, transparent 70%); pointer-events: none; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(125,168,123,0.15); color: var(--color-sage-dark); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 1.5rem; border: 1px solid rgba(125,168,123,0.3); } .hero-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; color: var(--text-primary); line-height: 1.18; margin-bottom: 1.25rem; } .hero-title .accent { color: var(--color-sage); } .hero-lead { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.75; max-width: 520px; margin-bottom: 2rem; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; } .hero-image-wrap img { border-radius: var(--radius-xl); box-shadow: var(--shadow-deep); object-fit: cover; width: 100%; max-width: 520px; aspect-ratio: 4/3; } .hero-image-badge { position: absolute; bottom: -16px; left: 20px; background: white; border-radius: var(--radius-md); padding: 14px 20px; box-shadow: var(--shadow-hover); display: flex; align-items: center; gap: 12px; min-width: 220px; } .hero-image-badge .badge-icon { width: 40px; height: 40px; background: var(--color-sky-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-sky); font-size: 1.1rem; flex-shrink: 0; } .hero-image-badge .badge-text strong { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .hero-image-badge .badge-text span { font-size: 0.76rem; color: var(--text-muted); } /* Stats strip */ .hero-stats { background: white; border-top: 1px solid var(--color-gray-200); padding: 28px 0; margin-top: 60px; } .stat-item { text-align: center; padding: 0 24px; border-right: 1px solid var(--color-gray-200); } .stat-item:last-child { border-right: none; } .stat-item .stat-number { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-sage); line-height: 1; } .stat-item .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; font-weight: 500; } /* ─── BUTTONS ─── */ .btn-primary-sage { background: var(--color-sage); color: white; border: 2px solid var(--color-sage); border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; } .btn-primary-sage:hover { background: var(--color-sage-dark); border-color: var(--color-sage-dark); color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(90,138,88,0.35); } .btn-outline-sage { background: transparent; color: var(--color-sage-dark); border: 2px solid var(--color-sage); border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.92rem; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; } .btn-outline-sage:hover { background: var(--color-sage); color: white; transform: translateY(-2px); } .btn-sky { background: var(--color-sky); color: white; border: 2px solid var(--color-sky); border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.92rem; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; } .btn-sky:hover { background: #5A9BB0; border-color: #5A9BB0; color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(109,175,194,0.35); } /* ─── SECTION WRAPPER ─── */ .section-pad { padding: var(--section-padding-y) 0; } .section-pad-sm { padding: var(--section-padding-sm) 0; } .section-bg-beige { background-color: var(--color-beige); } .section-bg-sky { background-color: #EBF6FA; } .section-bg-sage { background-color: #EBF2EB; } .section-bg-gray { background-color: var(--color-gray-50); } .section-eyebrow { display: inline-block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sage-dark); margin-bottom: 0.75rem; } .section-title { font-family: var(--font-heading); font-weight: 600; margin-bottom: 1rem; } .section-lead { font-size: 1.05rem; color: var(--text-secondary); max-width: 600px; line-height: 1.75; } /* Divisore decorativo */ .divider-leaf { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; } .divider-leaf::before, .divider-leaf::after { content: ''; flex: 1; height: 1px; background: var(--color-beige-dark); } .divider-leaf span { color: var(--color-sage-light); font-size: 1.1rem; } /* ─── CARDS ─── */ .card-service { background: white; border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--color-gray-200); box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); height: 100%; display: flex; flex-direction: column; } .card-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-sage-light); } .card-service .card-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.25rem; flex-shrink: 0; } .card-icon-sage { background: rgba(125,168,123,0.15); color: var(--color-sage-dark); } .card-icon-sky { background: rgba(109,175,194,0.15); color: #4A8BA0; } .card-icon-coral { background: rgba(232,146,124,0.15); color: #C4634A; } .card-icon-lavender { background: rgba(169,157,197,0.15); color: #7A6EA5; } .card-service h4 { font-size: 1.1rem; margin-bottom: 0.6rem; color: var(--text-primary); } .card-service p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; flex: 1; margin-bottom: 1.25rem; } .card-service .card-link { font-size: 0.85rem; font-weight: 600; color: var(--color-sage-dark); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; transition: gap var(--transition-fast); } .card-service .card-link:hover { gap: 10px; } /* Card notizia */ .card-news { background: white; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-gray-200); box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card-news:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .card-news .card-img-wrap { overflow: hidden; height: 200px; } .card-news .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .card-news:hover .card-img-wrap img { transform: scale(1.05); } .card-news .card-body { padding: 1.5rem; } .card-news .card-category { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 0.75rem; display: inline-block; } .cat-ricerca { background: rgba(109,175,194,0.15); color: #3A7E94; } .cat-eventi { background: rgba(125,168,123,0.15); color: var(--color-sage-dark); } .cat-famiglia { background: rgba(232,146,124,0.15); color: #C4634A; } .card-news h4 { font-size: 1.05rem; margin-bottom: 0.5rem; } .card-news p { font-size: 0.87rem; margin-bottom: 0; } .card-news .card-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.75rem; display: flex; align-items: center; gap: 6px; } /* Card ricerca / team */ .card-team { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--color-gray-200); transition: transform var(--transition-base), box-shadow var(--transition-base); } .card-team:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } .card-team .team-photo { width: 100%; height: 220px; object-fit: cover; object-position: center top; } .card-team .team-body { padding: 1.4rem; } .card-team .team-name { font-size: 1.05rem; margin-bottom: 0.2rem; color: var(--text-primary); } .card-team .team-role { font-size: 0.82rem; color: var(--color-sage-dark); font-weight: 600; margin-bottom: 0.6rem; } .card-team .team-bio { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 0; line-height: 1.55; } /* ─── FEATURE ROW (immagine + testo alternati) ─── */ .feature-row { padding: 64px 0; } .feature-row + .feature-row { border-top: 1px solid var(--color-gray-200); } .feature-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .feature-image img { width: 100%; height: 380px; object-fit: cover; } .feature-content { padding: 0 24px; } .feature-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-sage-dark); margin-bottom: 1rem; } .feature-tag::before { content: ''; width: 24px; height: 2px; background: var(--color-sage); border-radius: 2px; } /* ─── HIGHLIGHT / QUOTE ─── */ .quote-block { background: white; border-left: 4px solid var(--color-sage); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.75rem 2rem; margin: 2rem 0; box-shadow: var(--shadow-card); } .quote-block p { font-family: var(--font-heading); font-size: 1.15rem; color: var(--text-primary); font-style: italic; margin-bottom: 0.5rem; } .quote-block cite { font-size: 0.82rem; color: var(--text-muted); font-style: normal; font-weight: 600; } /* Highlight box */ .highlight-box { background: linear-gradient(135deg, rgba(125,168,123,0.12), rgba(109,175,194,0.10)); border: 1px solid rgba(125,168,123,0.25); border-radius: var(--radius-lg); padding: 2rem 2.25rem; } .highlight-box.coral { background: linear-gradient(135deg, rgba(232,146,124,0.10), rgba(232,146,124,0.05)); border-color: rgba(232,146,124,0.25); } /* ─── ACCORDION (FAQ) ─── */ .accordion-custom .accordion-item { border: 1px solid var(--color-gray-200); border-radius: var(--radius-md) !important; margin-bottom: 0.75rem; overflow: hidden; } .accordion-custom .accordion-button { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--text-primary); background: white; padding: 1.1rem 1.5rem; } .accordion-custom .accordion-button:not(.collapsed) { color: var(--color-sage-dark); background: rgba(125,168,123,0.06); box-shadow: none; } .accordion-custom .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235A8A58' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); } .accordion-custom .accordion-body { padding: 0.75rem 1.5rem 1.25rem; font-size: 0.93rem; color: var(--text-secondary); line-height: 1.7; } /* ─── BREADCRUMB ─── */ .breadcrumb-section { background: var(--color-gray-50); border-bottom: 1px solid var(--color-gray-200); padding: 12px 0; } .breadcrumb { margin-bottom: 0; font-size: 0.82rem; } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } .breadcrumb-item a { color: var(--text-secondary); } .breadcrumb-item.active { color: var(--color-sage-dark); font-weight: 600; } /* ─── PAGE HEADER (pagine interne) ─── */ .page-header { background: linear-gradient(135deg, var(--color-beige) 0%, rgba(179,217,230,0.3) 100%); padding: 56px 0 48px; border-bottom: 1px solid var(--color-gray-200); } .page-header h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-bottom: 0.75rem; } .page-header .page-lead { font-size: 1.05rem; color: var(--text-secondary); max-width: 640px; line-height: 1.7; } /* ─── PROGRESS / TIMELINE ─── */ .timeline { position: relative; padding-left: 2.5rem; } .timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--color-beige-dark); } .timeline-item { position: relative; padding-bottom: 2rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -2.5rem; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: white; border: 3px solid var(--color-sage); z-index: 1; } .timeline-dot.active { background: var(--color-sage); } .timeline-date { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; } .timeline-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; } .timeline-body { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; } /* ─── INFO BOXES ─── */ .info-pill { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--color-gray-200); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; } .info-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sage); flex-shrink: 0; } /* ─── CTA SECTION ─── */ .cta-section { background: linear-gradient(135deg, var(--color-sage-dark) 0%, #3D6B5A 100%); color: white; padding: 72px 0; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; background: rgba(255,255,255,0.05); border-radius: 50%; } .cta-section::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 400px; height: 400px; background: rgba(255,255,255,0.04); border-radius: 50%; } .cta-section h2 { color: white; } .cta-section p { color: rgba(255,255,255,0.82); } .btn-white { background: white; color: var(--color-sage-dark); border: 2px solid white; border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; font-weight: 700; font-size: 0.92rem; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .btn-white:hover { background: transparent; color: white; transform: translateY(-2px); } .btn-outline-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; font-weight: 600; font-size: 0.92rem; transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: white; color: white; transform: translateY(-2px); } /* ─── PARTNER LOGOS ─── */ .partners-section { padding: 48px 0; border-top: 1px solid var(--color-gray-200); } .partners-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-bottom: 2rem; } .partner-logo { display: flex; align-items: center; justify-content: center; padding: 12px 20px; filter: grayscale(100%); opacity: 0.5; transition: filter var(--transition-base), opacity var(--transition-base); } .partner-logo:hover { filter: grayscale(0%); opacity: 1; } .partner-logo img { max-height: 40px; max-width: 120px; object-fit: contain; } /* ─── FOOTER ─── */ .footer-main { background: var(--color-gray-900); color: rgba(255,255,255,0.7); padding: 64px 0 0; } .footer-brand .footer-logo { height: 40px; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: 0.85; } .footer-brand .footer-desc { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.55); max-width: 280px; } .footer-heading { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 1.25rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.6rem; } .footer-links a { color: rgba(255,255,255,0.6); font-size: 0.9rem; transition: color var(--transition-fast); text-decoration: none; } .footer-links a:hover { color: var(--color-sage-light); } .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; } .footer-contact-item i { color: var(--color-sage-light); margin-top: 3px; } .footer-bottom { margin-top: 48px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin: 0; } .footer-social { display: flex; gap: 10px; } .social-btn { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 0.85rem; transition: all var(--transition-fast); text-decoration: none; } .social-btn:hover { background: var(--color-sage); color: white; transform: translateY(-2px); } /* ─── SEARCH BAR ─── */ .search-bar { position: relative; max-width: 480px; } .search-bar input { background: white; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-pill); padding: 0.65rem 1rem 0.65rem 1rem; padding-right: 3.5rem; font-size: 0.9rem; width: 100%; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); color: var(--text-primary); } .search-bar input:focus { outline: none; border-color: var(--color-sage-light); box-shadow: 0 0 0 3px rgba(125,168,123,0.18); } .search-bar button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: var(--color-sage); border: none; border-radius: var(--radius-pill); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; transition: background var(--transition-fast); } .search-bar button:hover { background: var(--color-sage-dark); } /* ─── FORM ELEMENTS ─── */ .form-group-custom { margin-bottom: 1.25rem; } .form-label-custom { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; display: block; } .form-control-custom { width: 100%; background: white; border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 0.7rem 1rem; font-size: 0.9rem; color: var(--text-primary); font-family: var(--font-body); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-control-custom:focus { outline: none; border-color: var(--color-sage-light); box-shadow: 0 0 0 3px rgba(125,168,123,0.15); } .form-control-custom::placeholder { color: var(--color-gray-400); } /* ─── ALERT BANNER ─── */ .alert-info-custom { background: rgba(109,175,194,0.12); border: 1px solid rgba(109,175,194,0.35); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--text-primary); } .alert-info-custom i { color: var(--color-sky); margin-top: 2px; flex-shrink: 0; } /* ─── LOADING / SKELETON (accessibilità) ─── */ .skeleton { background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ─── BACK TO TOP ─── */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: var(--color-sage); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; z-index: 999; box-shadow: 0 4px 12px rgba(90,138,88,0.35); opacity: 0; transform: translateY(16px); transition: all var(--transition-base); text-decoration: none; border: none; } .back-to-top.visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { background: var(--color-sage-dark); color: white; } /* ─── FOCUS (accessibilità WCAG) ─── */ :focus-visible { outline: 3px solid var(--color-sage); outline-offset: 3px; border-radius: 2px; } /* ─── RESPONSIVE UTILITIES ─── */ @media (max-width: 991.98px) { :root { --section-padding-y: 56px; } .hero-section { padding: 56px 0 48px; } .stat-item { padding: 0 14px; } .feature-content { padding: 2rem 0 0; } } @media (max-width: 767.98px) { :root { --section-padding-y: 40px; } .hero-actions { flex-direction: column; align-items: flex-start; } .hero-image-badge { display: none; } .stat-item { border-right: none; border-bottom: 1px solid var(--color-gray-200); padding: 16px 0; } .stat-item:last-child { border-bottom: none; } .footer-bottom { flex-direction: column; text-align: center; } .feature-image { margin-bottom: 2rem; } } /* ─── PRINT ─── */ @media print { .navbar-main, .back-to-top, .hero-actions, .cta-section { display: none !important; } body { font-size: 12pt; color: black; } h1, h2, h3 { color: black; } } /* ─── MEMBER CARD (Chi Siamo / Collaborazioni) ─── */ .member-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; } .member-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.13); } .member-photo { width: 100%; height: 220px; object-fit: cover; object-position: top; } .member-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .member-name { font-family: 'Lora', serif; font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; } .member-role { font-size: 0.8rem; font-weight: 600; color: var(--color-sage-dark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.85rem; } .member-bio { font-size: 0.875rem; color: var(--color-text-light); line-height: 1.75; flex: 1; } /* ─── ARTICLE LIST (Pubblicazioni) ─── */ .article-item { padding: 1.25rem 0; border-bottom: 1px solid var(--color-gray-200); } .article-item:last-child { border-bottom: none; }