/* ============================================================ T.R.E. — Talaria Roero Experience indice.css — Design System + Pagina Indice ============================================================ */ /* ── Google Fonts preconnect è nel , qui solo i custom props ── */ /* ── 1. DESIGN TOKENS ─────────────────────────────────────── */ :root { /* Palette brand TRE */ --verde-brand: #58901b; --verde-scuro: #4a5b46; --ocra: #c89f55; --beige-sabbia: #dcc9a3; --marrone: #6d513c; --grigio: #8b8b8b; --bianco-sporco: #f5f3ef; /* Semantic colors */ --color-bg: #f5f3ef; --color-surface: #faf9f6; --color-surface-2: #f0ece4; --color-border: #dcc9a3; --color-text: #2a1e14; --color-text-muted: #6d513c; --color-text-faint: #9b8a78; --color-text-inverse: #f5f3ef; --color-primary: #58901b; --color-primary-hover: #4a7a14; --color-accent: #c89f55; --color-accent-hover: #b08940; /* Type scale fluid */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem); /* Spacing 4px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Radius — curve sinuose come le colline */ --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 2rem; --radius-xl: 3rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(42, 30, 20, 0.08); --shadow-md: 0 6px 20px rgba(42, 30, 20, 0.12); --shadow-lg: 0 16px 48px rgba(42, 30, 20, 0.18); --shadow-glow: 0 0 40px rgba(88, 144, 27, 0.25); /* Fonts */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Work Sans', 'Helvetica Neue', sans-serif; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); /* Layout widths */ --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px; } /* ── Dark mode ── */ [data-theme="dark"] { --color-bg: #1a1710; --color-surface: #201d15; --color-surface-2: #26231a; --color-border: #3d3628; --color-text: #e8e0d0; --color-text-muted: #b09878; --color-text-faint: #7a6a55; --color-text-inverse: #1a1710; --color-primary: #7ab830; --color-primary-hover: #8ece3a; --color-accent: #d4ab60; --color-accent-hover: #e0bc72; --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 6px 20px rgba(0,0,0,0.35); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(122, 184, 48, 0.2); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #1a1710; --color-surface: #201d15; --color-surface-2: #26231a; --color-border: #3d3628; --color-text: #e8e0d0; --color-text-muted: #b09878; --color-text-faint: #7a6a55; --color-text-inverse: #1a1710; --color-primary: #7ab830; --color-primary-hover: #8ece3a; --color-accent: #d4ab60; --color-accent-hover: #e0bc72; } } /* ── 2. BASE RESET ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--space-16); } body { min-height: 100dvh; line-height: 1.6; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; } img, picture, video, canvas { display: block; max-width: 100%; height: auto; } ul[role="list"], ol[role="list"] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); } p, li { text-wrap: pretty; max-width: 72ch; } button { cursor: pointer; background: none; border: none; } ::selection { background: rgba(88, 144, 27, 0.2); color: var(--color-text); } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── 3. HEADER / NAVIGAZIONE ──────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--space-4) var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), padding 0.4s var(--ease-out); } .site-header--scrolled { background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-sm); padding-block: var(--space-3); } /* Logo */ .site-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text-inverse); transition: opacity var(--transition-interactive); } .site-logo:hover { opacity: 0.85; } .site-header--scrolled .site-logo { color: var(--color-text); } .logo-img { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); transition: filter var(--transition-interactive), width 0.4s var(--ease-out), height 0.4s var(--ease-out); } .site-header--scrolled .logo-img { width: 42px; height: 42px; filter: none; } .logo-text { display: flex; flex-direction: column; line-height: 1.1; } .logo-text .brand-tre { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.04em; color: white; text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .logo-text .brand-full { font-size: var(--text-xs); font-weight: 400; color: rgba(255,255,255,0.8); letter-spacing: 0.06em; text-transform: uppercase; } .site-header--scrolled .logo-text .brand-tre { color: var(--color-primary); text-shadow: none; } .site-header--scrolled .logo-text .brand-full { color: var(--color-text-muted); } /* Nav */ .main-nav { display: flex; align-items: center; gap: var(--space-2); } .nav-link { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, 0.9); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); transition: color var(--transition-interactive), background var(--transition-interactive); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%) scaleX(0); width: 60%; height: 2px; background: var(--color-accent); border-radius: var(--radius-full); transition: transform 0.3s var(--ease-out); } .nav-link:hover { color: white; } .nav-link:hover::after { transform: translateX(-50%) scaleX(1); } .site-header--scrolled .nav-link { color: var(--color-text-muted); } .site-header--scrolled .nav-link:hover { color: var(--color-primary); background: rgba(88, 144, 27, 0.08); } /* CTA nav */ .nav-cta { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-decoration: none; color: var(--color-text-inverse); background: var(--color-primary); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); transition: background var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); } .nav-cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .nav-cta:active { transform: translateY(0); } /* Theme toggle */ .theme-toggle { color: rgba(255,255,255,0.8); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); transition: color var(--transition-interactive), background var(--transition-interactive); flex-shrink: 0; } .theme-toggle:hover { color: white; background: rgba(255,255,255,0.1); } .site-header--scrolled .theme-toggle { color: var(--color-text-muted); } .site-header--scrolled .theme-toggle:hover { background: var(--color-surface-2); color: var(--color-text); } /* Hamburger mobile */ .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); color: white; transition: color var(--transition-interactive); } .menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: var(--radius-full); transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); } .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity: 0; } .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header--scrolled .menu-toggle { color: var(--color-text-muted); } /* Mobile nav overlay */ .mobile-nav-overlay { position: fixed; inset: 0; z-index: 99; background: color-mix(in srgb, var(--color-bg) 97%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-out); } .mobile-nav-overlay.open { opacity: 1; pointer-events: all; } .mobile-nav-overlay .nav-link { color: var(--color-text); font-size: var(--text-xl); text-transform: none; letter-spacing: 0; font-family: var(--font-display); } .mobile-nav-overlay .nav-link:hover { color: var(--color-primary); } .mobile-nav-overlay .nav-link::after { display: none; } .mobile-nav-overlay .nav-cta { font-size: var(--text-base); margin-top: var(--space-4); } /* ── 4. HERO — VIDEO SFONDO ──────────────────────────────── */ .hero { position: relative; width: 100%; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } /* Video sfondo */ /* Slideshow di sfondo dell'hero (sostituisce il video) */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(145deg, #3a4a38 0%, #4a5b46 40%, #2a3a28 100%); } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease-in-out; will-change: opacity; } .hero-slide.is-active { opacity: 1; /* lieve zoom "Ken Burns" mentre la foto è in primo piano */ animation: heroKenBurns 6s ease-out both; } @keyframes heroKenBurns { from { transform: scale(1.06); } to { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } .hero-slide.is-active { animation: none; transform: none; } } /* Overlay scuro sfumato — evoca tramonto sulle colline */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(20, 14, 6, 0.35) 0%, rgba(20, 14, 6, 0.15) 40%, rgba(20, 14, 6, 0.55) 80%, rgba(20, 14, 6, 0.75) 100% ); } /* Texture colline — curva sinuosa in fondo */ .hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; z-index: 2; line-height: 0; } .hero-wave svg { width: 100%; height: auto; display: block; } /* Contenuto hero */ .hero-content { position: relative; z-index: 3; text-align: center; padding: var(--space-20) var(--space-8) var(--space-32); max-width: var(--content-wide); width: 100%; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-5); } .hero-eyebrow::before, .hero-eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--color-accent); opacity: 0.7; } .hero-title { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700; color: white; text-shadow: 0 2px 32px rgba(0,0,0,0.5); margin-bottom: var(--space-6); line-height: 1.05; } .hero-title em { font-style: italic; color: var(--color-accent); text-shadow: 0 2px 20px rgba(200, 159, 85, 0.4); } .hero-subtitle { font-size: var(--text-lg); color: rgba(255, 255, 255, 0.85); font-weight: 300; max-width: 600px; margin: 0 auto var(--space-12); line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,0.3); } /* CTA buttons */ .hero-cta-group { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; text-decoration: none; color: white; background: var(--color-primary); padding: var(--space-4) var(--space-8); border-radius: var(--radius-full); border: 2px solid var(--color-primary); transition: background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); box-shadow: 0 4px 20px rgba(88, 144, 27, 0.35); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(88, 144, 27, 0.5); } .btn-primary:active { transform: translateY(0); } .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; text-decoration: none; color: white; background: rgba(255,255,255,0.1); padding: var(--space-4) var(--space-8); border-radius: var(--radius-full); border: 2px solid rgba(255,255,255,0.4); backdrop-filter: blur(4px); transition: background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive); } .btn-ghost:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.7); transform: translateY(-2px); } .btn-ghost:active { transform: translateY(0); } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: var(--space-10); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: rgba(255,255,255,0.5); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: color var(--transition-interactive); animation: bounce-fade 2.5s ease-in-out infinite; } .scroll-indicator:hover { color: rgba(255,255,255,0.9); } .scroll-indicator svg { animation: scroll-arrow 2s ease-in-out infinite; } @keyframes bounce-fade { 0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); } 50% { opacity: 1; transform: translateX(-50%) translateY(6px); } } @keyframes scroll-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ── 5. SEZIONE INTRO / PILLARS ──────────────────────────── */ .section-intro { background: var(--color-bg); padding: clamp(var(--space-16), 8vw, var(--space-32)) var(--space-8); text-align: center; } .section-tag { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-4); } .section-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-5); max-width: 800px; margin-inline: auto; margin-bottom: var(--space-5); } .section-lead { font-size: var(--text-base); color: var(--color-text-muted); max-width: 600px; margin: 0 auto var(--space-16); line-height: 1.7; } /* Pillars grid */ .pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); max-width: var(--content-wide); margin: 0 auto; } .pillar-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center; transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive); } .pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .pillar-icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); background: linear-gradient(135deg, rgba(88, 144, 27, 0.12), rgba(200, 159, 85, 0.12)); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; } .pillar-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); } .pillar-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; max-width: 100%; } /* ── 6. SEZIONE PERCORSI (anteprima) ─────────────────────── */ .section-percorsi { background: var(--color-surface-2, #e8e2d6); padding: clamp(var(--space-16), 8vw, var(--space-32)) var(--space-8); position: relative; overflow: hidden; } /* Curva decorativa sinuosa in cima */ .section-percorsi::before { content: ''; position: absolute; top: -60px; left: -10%; right: -10%; height: 120px; background: var(--color-bg); border-radius: 0 0 50% 50% / 0 0 100% 100%; } .percorsi-inner { max-width: var(--content-wide); margin: 0 auto; text-align: center; } .percorsi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } .percorso-card { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6) var(--space-10); text-align: left; border: 1px solid var(--color-border); transition: transform var(--transition-interactive), box-shadow var(--transition-interactive); position: relative; overflow: hidden; } .percorso-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* Striscia colorata in cima */ .percorso-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } .percorso-badge { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); background: rgba(88, 144, 27, 0.1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); margin-bottom: var(--space-4); } .percorso-prezzo { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); } .percorso-prezzo span { font-size: var(--text-base); font-family: var(--font-body); color: var(--color-text-muted); font-weight: 400; } .percorso-nome { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-4); } .percorso-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); } .percorso-features li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); } .percorso-features li::before { content: '✓'; color: var(--color-primary); font-weight: 700; flex-shrink: 0; } .percorso-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); text-decoration: none; transition: gap var(--transition-interactive), color var(--transition-interactive); } .percorso-link:hover { color: var(--color-primary-hover); gap: var(--space-3); } /* Card evidenziata (percorso premium) */ .percorso-card--featured { background: linear-gradient(145deg, var(--verde-scuro), #3a4a38); border-color: transparent; color: white; } .percorso-card--featured::before { background: linear-gradient(90deg, var(--color-accent), #e6c870); } .percorso-card--featured .percorso-badge { color: var(--color-accent); background: rgba(200, 159, 85, 0.15); } .percorso-card--featured .percorso-prezzo, .percorso-card--featured .percorso-nome { color: white; } .percorso-card--featured .percorso-prezzo span { color: rgba(255,255,255,0.65); } .percorso-card--featured .percorso-features li { color: rgba(255,255,255,0.75); } .percorso-card--featured .percorso-features li::before { color: var(--color-accent); } .percorso-card--featured .percorso-link { color: var(--color-accent); } /* ── 7. SEZIONE RIASSUNTO ESPERIENZIALE ───────────────────── */ .section-experience { background: var(--color-bg); padding: clamp(var(--space-16), 8vw, var(--space-32)) var(--space-8); } .experience-inner { max-width: var(--content-wide); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .experience-text .section-title { text-align: left; margin-inline: 0; } .experience-text .section-lead { text-align: left; margin-inline: 0; } .experience-quote { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; color: var(--color-primary); border-left: 3px solid var(--color-accent); padding-left: var(--space-6); margin: var(--space-8) 0; line-height: 1.4; } .experience-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); } .stat-number { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: var(--space-1); } .stat-label { font-size: var(--text-sm); color: var(--color-text-muted); } /* Immagine lato destro — placeholder estetico */ .experience-visual { position: relative; } .experience-img-main { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } /* Se non c'è immagine, sfondo verde brand */ .experience-img-placeholder { width: 100%; aspect-ratio: 4/5; border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--verde-brand), var(--verde-scuro)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); } .experience-img-placeholder svg { opacity: 0.3; width: 60%; height: 60%; } /* Badge floating sull'immagine */ .experience-badge { position: absolute; bottom: var(--space-6); left: calc(-1 * var(--space-6)); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-md); display: flex; align-items: center; gap: var(--space-3); max-width: 220px; } .experience-badge-icon { font-size: 2rem; flex-shrink: 0; } .experience-badge-text strong { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-text); } .experience-badge-text span { font-size: var(--text-xs); color: var(--color-text-muted); } /* ── 8. SEZIONE LINK PAGINE (Quick Access) ────────────────── */ .section-pages { background: var(--verde-scuro); padding: clamp(var(--space-16), 7vw, var(--space-24)) var(--space-8); position: relative; overflow: hidden; } /* Pattern colline decorativo */ .section-pages::before { content: ''; position: absolute; top: -80px; left: -10%; right: -10%; height: 160px; background: var(--color-bg); border-radius: 0 0 50% 50% / 0 0 100% 100%; } .section-pages::after { content: ''; position: absolute; bottom: -80px; left: -10%; right: -10%; height: 160px; background: var(--color-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 1; } .pages-inner { position: relative; z-index: 2; max-width: var(--content-wide); margin: 0 auto; text-align: center; } .pages-inner .section-tag { color: var(--color-accent); } .pages-inner .section-title { color: white; } .pages-inner .section-lead { color: rgba(255,255,255,0.7); } .pages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); margin-top: var(--space-10); } .page-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-5); text-decoration: none; color: white; text-align: center; transition: background var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .page-card:hover { background: rgba(255,255,255,0.12); border-color: var(--color-accent); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); } .page-card:active { transform: translateY(-1px); } .page-card-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.08); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; transition: background var(--transition-interactive); } .page-card:hover .page-card-icon { background: rgba(200, 159, 85, 0.2); } .page-card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: white; } .page-card-desc { font-size: var(--text-xs); color: rgba(255,255,255,0.6); line-height: 1.5; max-width: 100%; } .page-card-arrow { font-size: var(--text-xs); color: var(--color-accent); margin-top: auto; transition: transform var(--transition-interactive); } .page-card:hover .page-card-arrow { transform: translateX(4px); } /* ── 9. SEZIONE REQUISITI (rapida) ────────────────────────── */ .section-info { background: var(--color-bg); padding: clamp(var(--space-16), 7vw, var(--space-24)) var(--space-8); padding-top: clamp(var(--space-20), 10vw, var(--space-32)); } .info-inner { max-width: var(--content-default); margin: 0 auto; text-align: center; } .info-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-10); } .info-chip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; } .info-chip-icon { font-size: 1.1rem; } /* ── 10. FOOTER ──────────────────────────────────────────── */ .site-footer { background: #1e1a12; color: #e8e0d0; padding: var(--space-16) var(--space-8) var(--space-8); position: relative; } /* Onda decorativa sopra il footer */ .footer-wave { position: absolute; top: -2px; left: 0; right: 0; line-height: 0; } .footer-wave svg { width: 100%; display: block; } .footer-inner { max-width: var(--content-wide); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-12); padding-top: var(--space-8); } .footer-brand .logo-text .brand-tre { color: var(--color-accent); text-shadow: none; } .footer-brand .logo-text .brand-full { color: rgba(255,255,255,0.5); } .footer-tagline { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-size: var(--text-base); color: rgba(255,255,255,0.7); line-height: 1.5; } .footer-col h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-5); } .footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .footer-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.6); text-decoration: none; transition: color var(--transition-interactive); } .footer-links a:hover { color: white; } .footer-contact-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin-bottom: var(--space-3); } .footer-contact-item svg { flex-shrink: 0; margin-top: 2px; } .footer-bottom { max-width: var(--content-wide); margin: var(--space-12) auto 0; padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .footer-bottom p { font-size: var(--text-xs); color: rgba(255,255,255,0.4); max-width: none; } .footer-bottom a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: var(--text-xs); transition: color var(--transition-interactive); } .footer-bottom a:hover { color: rgba(255,255,255,0.8); } /* ── 11. SCROLL REVEALS ──────────────────────────────────── */ .fade-in { opacity: 1; /* Fallback */ } @supports (animation-timeline: scroll()) { .fade-in { opacity: 0; animation: reveal-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; } } @keyframes reveal-fade { to { opacity: 1; } } /* ── 12. RESPONSIVE MOBILE ───────────────────────────────── */ @media (max-width: 900px) { .experience-inner { grid-template-columns: 1fr; } .experience-visual { order: -1; } .experience-badge { left: auto; right: var(--space-4); } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner > :first-child { grid-column: 1 / -1; } } @media (max-width: 768px) { .main-nav { display: none; } .menu-toggle { display: flex; } .nav-cta { display: none; } .logo-text .brand-tre { font-size: var(--text-base); } .logo-text .brand-full { font-size: 0.62rem; letter-spacing: 0.04em; } .hero-title { font-size: clamp(2.2rem, 8vw, 4rem); } .hero-content { padding-inline: var(--space-5); } .pillars-grid { grid-template-columns: repeat(2, 1fr); } .percorsi-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } .pages-grid { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); } .footer-inner > :first-child { grid-column: auto; } .footer-bottom { flex-direction: column; text-align: center; } .experience-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .pillars-grid { grid-template-columns: 1fr; } .pages-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } .hero-cta-group { flex-direction: column; align-items: stretch; } .hero-cta-group .btn-primary, .hero-cta-group .btn-ghost { text-align: center; justify-content: center; } } /* ── 13. MOTORBIKE PARTICLE DECORATION ───────────────────── */ /* Linea curva decorativa SVG — richiama curve stradali */ .road-curve-deco { position: absolute; pointer-events: none; opacity: 0.06; z-index: 0; }