/* ========================================================================== EB Components — stili condivisi dei widget custom Law2Business. Self-contained: ogni widget porta i propri token, niente dipendenze dal tema. Replica lo stile "awwwards-like" del reference (about/services/expertise/contact). ========================================================================== */ .eb-pagehero, .eb-split, .eb-stats, .eb-values, .eb-cards, .eb-steps, .eb-timeline, .eb-featrows, .eb-team, .eb-cta, .eb-footer, .eb-footer-menu, .eb-chips, .eb-plans, .eb-cta-link { --c-dark: #0a1f3d; --c-text: #191615; --c-text-2: #474747; --c-muted: #888; --c-orange: #f9973f; --c-orange-dark: #e07a1a; --c-blue: #0070d4; --c-blue-dark: #005aac; --c-accent: #b5179e; --c-cream: #f7f5f1; --c-off-white: #f8f9fa; --c-white: #ffffff; --c-divider: rgba(0,0,0,0.1); --t-bright: rgba(255,255,255,0.9); --t-primary: rgba(255,255,255,0.75); --t-secondary: rgba(255,255,255,0.5); --t-muted: rgba(255,255,255,0.35); --ff-serif: 'Lora', Georgia, 'Times New Roman', serif; --ff-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-btn: 'Inter', system-ui, sans-serif; --radius-lg: 20px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --pad-x: clamp(20px, 8vw, 156px); --s-section: clamp(72px, 12vw, 180px); --s-header-gap: clamp(40px, 6vw, 80px); --eb-bullet: url('../img/marquee-icon.svg'); } .eb-pagehero *, .eb-split *, .eb-stats *, .eb-values *, .eb-cards *, .eb-steps *, .eb-timeline *, .eb-featrows *, .eb-team *, .eb-cta *, .eb-footer *, .eb-footer-menu *, .eb-chips *, .eb-plans *, .eb-pagehero *::before, .eb-split *::before, .eb-stats *::before, .eb-values *::before, .eb-cards *::before, .eb-steps *::before, .eb-timeline *::before, .eb-featrows *::before, .eb-team *::before, .eb-cta *::before, .eb-footer *::before, .eb-footer-menu *::before, .eb-chips *::before, .eb-plans *::before { box-sizing: border-box; } /* ---- Shared primitives ---- */ .eb-comp .container, .eb-comp__container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); } /* Classe raddoppiata (specificità 0,2,0) per vincere su regole come `.eb-about__text p` che altrimenti sovrascrivono il colore dell'eyebrow. */ .eb-eyebrow.eb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-accent, #b5179e); background: #fff; border: 1px solid var(--c-accent, #b5179e); padding: 6px 14px; border-radius: 999px; line-height: 1.4; width: max-content; max-width: 100%; } .eb-title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(40px,6vw,80px); line-height: 1; letter-spacing: -0.035em; color: var(--c-text); } .eb-title--sm { font-size: clamp(32px,5vw,60px); letter-spacing: -0.03em; } .eb-lead { font-family: var(--ff-body); color: var(--c-text-2); max-width: 640px; font-size: 16px; line-height: 1.6; } .eb-section-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: var(--s-header-gap); } .eb-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 10px 40px; font-family: var(--ff-btn); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; border-radius: 8px; border: 1px solid transparent; transition: all .4s var(--ease); white-space: nowrap; cursor: pointer; text-decoration: none; } /* Classi concatenate: specificità (0,2,0) per vincere sul colore link del kit Elementor (.elementor-kit-NN a). */ .eb-btn.eb-btn--primary { background: var(--c-orange); color: #fff; } .eb-btn.eb-btn--primary:hover { background: var(--c-orange-dark); box-shadow: 0 8px 30px rgba(249,151,63,0.35); color: #fff; } .eb-btn.eb-btn--outline { background: transparent; color: var(--c-orange); border-color: var(--c-orange); } .eb-btn.eb-btn--outline:hover { background: var(--c-orange); color: #fff; } .eb-btn.eb-btn--ghost { background: transparent; color: #fff; border-color: var(--t-muted); } .eb-btn.eb-btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--t-secondary); color: #fff; } /* CTA a link sottolineato (testo, nessun box) — widget EB CTA Link. Ogni proprietà è anche un controllo Style nell'editor: il selettore generato lì ({{WRAPPER}} .eb-cta-link, con l'ID dell'istanza) ha specificità maggiore di questa regola e vince sempre quando l'utente imposta un valore. Classe raddoppiata (specificità 0,2,0), stesso motivo di `.eb-btn.eb- btn--primary` sopra: `.elementor a{text-decoration:none}` del CSS core di Elementor (0,1,1) altrimenti cancella la sottolineatura di default — nessun controllo Style copre `text-decoration-line` in sé (solo spessore/distanza/colore), quindi senza questo boost la riga sparisce sempre, anche impostando gli altri valori dall'editor. */ .eb-cta-link.eb-cta-link { display: inline-block; font-family: var(--ff-sans); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; color: var(--c-orange, #f9973f); transition: color .25s; } .eb-cta-link.eb-cta-link:hover { color: var(--c-orange-dark, #e07a1a); } /* ---- Reveal system ---- */ .eb-rv { opacity: 0; transform: translateY(60px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); } .eb-rv.is-v { opacity: 1; transform: none; } .eb-rv[data-d="1"]{transition-delay:.1s}.eb-rv[data-d="2"]{transition-delay:.2s}.eb-rv[data-d="3"]{transition-delay:.3s} .eb-rv[data-d="4"]{transition-delay:.4s}.eb-rv[data-d="5"]{transition-delay:.5s}.eb-rv[data-d="6"]{transition-delay:.6s} @media (prefers-reduced-motion: reduce){ .eb-rv{opacity:1;transform:none;transition:none} } /* ========================================================================== PAGE HERO ========================================================================== */ .eb-pagehero { position: relative; background: var(--c-dark); color: #fff; min-height: var(--eb-ph-minh, 78vh); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .eb-pagehero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 78% 18%, rgba(0,112,212,0.16) 0%, transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(181,23,158,0.10) 0%, transparent 52%); } .eb-pagehero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 80%; z-index: 0; overflow: hidden; } .eb-pagehero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 30%, #000 70%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, transparent 30%, #000 70%, #000 100%); } .eb-pagehero__body { position: relative; z-index: 1; padding: clamp(130px,16vw,200px) var(--pad-x) clamp(56px,8vw,96px); } .eb-pagehero__text { display: flex; flex-direction: column; gap: 28px; max-width: 880px; } .eb-pagehero__title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(48px,8vw,110px); line-height: 0.95; letter-spacing: -0.04em; color: #fff; } .eb-pagehero__title .hero__line { display: block; } .eb-pagehero__subtitle { font-family: var(--ff-body); font-size: 18px; line-height: 1.7; color: var(--t-primary); max-width: 600px; } .eb-pagehero__actions { display: flex; gap: 16px; flex-wrap: wrap; } .eb-breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--ff-sans); font-size: 13px; color: var(--t-secondary); } .eb-breadcrumb a { color: var(--t-secondary); transition: color .25s; } .eb-breadcrumb a:hover { color: var(--c-orange); } .eb-breadcrumb__cur { color: #fff; } .eb-breadcrumb__sep { opacity: .4; } .eb-pagehero__meta-intro { font-family: var(--ff-body); font-size: 16px; line-height: 1.7; color: var(--t-primary); max-width: 600px; margin-top: 24px; } .eb-pagehero__meta { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 16px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); } .eb-pagehero__meta-item { display: flex; flex-direction: column; gap: 4px; } .eb-pagehero__meta-num { font-family: var(--ff-sans); font-weight: 700; font-size: 40px; letter-spacing: -0.03em; color: var(--c-orange); line-height: 1; } .eb-pagehero__meta-label { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-secondary); } /* ---- Scroll hint condiviso (stesso indicatore del widget mappa) ---- */ .eb-scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--c-white, #fff); pointer-events: none; } .eb-scroll-hint__label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .eb-scroll-hint__icon { width: 20px; height: 34px; } .eb-scroll-hint__icon svg { width: 100%; height: 100%; display: block; } .eb-scroll-hint__wheel { animation: eb-scroll-hint-wheel 1.6s ease-in-out infinite; } @keyframes eb-scroll-hint-wheel { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .eb-scroll-hint__wheel { animation: none; } } /* Posizionamento nelle ATF (hero home + page-hero) */ .eb-hero .eb-scroll-hint, .eb-pagehero .eb-scroll-hint { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 3; } .eb-pagehero.is-anim .eb-scroll-hint { opacity: 0; } @media (max-width: 768px) { .eb-hero .eb-scroll-hint, .eb-pagehero .eb-scroll-hint { display: none; } } /* word-split pre-anim state — padding-bottom per non tagliare le discendenti (g, y, p, j) con l'overflow:hidden; margin negativo annulla l'effetto layout; translateY(130%) tiene conto del padding così la parola resta nascosta. */ .eb-pagehero .word-wrap { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.2em; margin-bottom: -0.2em; } .eb-pagehero .word-wrap > span { display: inline-block; will-change: transform; } .eb-pagehero.is-anim .word-wrap > span { transform: translateY(130%); } .eb-pagehero.is-anim .eb-eyebrow, .eb-pagehero.is-anim .eb-pagehero__subtitle, .eb-pagehero.is-anim .eb-pagehero__actions, .eb-pagehero.is-anim .eb-pagehero__meta, .eb-pagehero.is-anim .eb-pagehero__meta-intro, .eb-pagehero.is-anim .eb-breadcrumb { opacity: 0; } @media (max-width:1100px){ .eb-pagehero__photo{ width:100%; opacity:.28 } } @media (max-width:600px){ .eb-pagehero__meta{ gap:28px } .eb-pagehero__meta-num{ font-size:32px } } /* ========================================================================== SPLIT INTRO ========================================================================== */ .eb-split { padding: var(--s-section) 0; background: var(--c-white); } .eb-split__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(48px,6vw,96px); align-items: start; } .eb-split__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; } .eb-split__body { display: flex; flex-direction: column; gap: 28px; } .eb-split__body p { font-family: var(--ff-body); color: var(--c-text-2); font-size: 17px; line-height: 1.7; } .eb-split__lead { font-family: var(--ff-serif) !important; font-size: clamp(24px,2.4vw,34px) !important; line-height: 1.3 !important; letter-spacing: -0.02em; color: var(--c-text) !important; } .eb-split__quote { margin: 8px 0; padding-left: 24px; border-left: 3px solid var(--c-blue); font-family: var(--ff-serif) !important; font-size: 22px !important; line-height: 1.35 !important; font-style: italic; color: var(--c-text) !important; } .eb-split__btn { align-self: flex-start; } .eb-split__media { margin: 0 0 8px; border-radius: 20px; overflow: hidden; } .eb-split__media img { width: 100%; height: auto; display: block; } @media (max-width:1100px){ .eb-split__inner{ grid-template-columns:1fr; gap:48px } .eb-split__aside{ position:static } } /* ========================================================================== STATS BAND ========================================================================== */ .eb-stats { padding: clamp(56px,8vw,100px) 0; background: var(--c-off-white); border-top: 1px solid var(--c-divider); border-bottom: 1px solid var(--c-divider); } .eb-stats__grid { display: grid; grid-template-columns: repeat(var(--eb-stats-cols,4), 1fr); gap: 24px; } .eb-stats__card { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; border-top: 2px solid var(--c-orange); } .eb-stats__num { font-family: var(--ff-sans); font-weight: 700; font-size: clamp(48px,5vw,76px); line-height: 1; letter-spacing: -0.04em; color: var(--c-text); } .eb-stats__label { font-family: var(--ff-body); font-size: 15px; color: var(--c-text-2); line-height: 1.4; } @media (max-width:1100px){ .eb-stats__grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px } } @media (max-width:600px){ .eb-stats__grid{ grid-template-columns:1fr; gap:32px } } /* ========================================================================== VALUES ========================================================================== */ .eb-values { padding: var(--s-section) 0; background: var(--c-dark); color: #fff; } .eb-values .eb-title { color: #fff; } .eb-values__grid { display: grid; grid-template-columns: repeat(var(--eb-values-cols,4),1fr); gap: 24px; } .eb-values__card { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 44px 32px; display: flex; flex-direction: column; gap: 28px; overflow: hidden; transition: all .5s var(--ease); } .eb-values__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .eb-values__card:hover::before { transform: scaleX(1); } .eb-values__card:hover { transform: translateY(-6px); border-color: rgba(249,151,63,0.3); background: rgba(249,151,63,0.06); box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .eb-values__num { font-family: var(--ff-sans); font-size: 72px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--c-orange); opacity: .2; transition: opacity .5s var(--ease), transform .5s var(--ease); } .eb-values__card:hover .eb-values__num { opacity: .35; transform: translateY(-4px); } .eb-values__card h3 { font-family: var(--ff-serif); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -1px; color: #fff; margin: 0 0 12px; } .eb-values__card p { font-family: var(--ff-body); font-size: 14px; line-height: 1.6; color: var(--t-primary); margin: 0; } /* Attenua le card sorelle solo quando una card è davvero in hover (:has), non quando il mouse è sui gap della griglia. */ .eb-values__grid:has(.eb-values__card:hover) .eb-values__card { opacity: .5; } .eb-values__grid:has(.eb-values__card:hover) .eb-values__card:hover { opacity: 1; } @media (max-width:1100px){ .eb-values__grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:600px){ .eb-values__grid{ grid-template-columns:1fr } } /* ========================================================================== CARDS (services / expertise grid) ========================================================================== */ .eb-cards { padding: var(--s-section) 0; background: var(--c-off-white); } .eb-cards.is-cream { background: var(--c-cream); } .eb-cards.is-dark { background: var(--c-dark); color: #fff; } .eb-cards.is-dark .eb-title { color: #fff; } .eb-cards.is-dark .eb-lead { color: var(--t-secondary); } .eb-cards__grid { display: grid; grid-template-columns: repeat(var(--eb-cards-cols,4),1fr); gap: 24px; } .eb-card { position: relative; background: var(--c-white); border: 1px solid var(--c-divider); border-radius: var(--radius-lg); padding: 44px 36px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; transition: all .5s var(--ease); text-decoration: none; } .eb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .eb-card:hover::before { transform: scaleX(1); } .eb-card:hover { transform: translateY(-10px); border-color: rgba(249,151,63,0.25); box-shadow: 0 24px 64px rgba(10,31,61,0.14); } .eb-card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(0,112,212,0.08); border: 1px solid rgba(0,112,212,0.15); border-radius: 14px; color: var(--c-blue); flex-shrink: 0; transition: all .4s var(--ease); } .eb-card:hover .eb-card__icon { background: var(--c-blue); color: #fff; transform: scale(1.05); } .eb-card__icon svg, .eb-card__icon i, .eb-card__icon img { width: 28px; height: 28px; } .eb-card__icon i { font-size: 26px; } /* Le icone SVG (font-icon Elementor) seguono il colore; all'hover diventano bianche. */ .eb-card__icon svg, .eb-card__icon .e-font-icon-svg { fill: currentColor; } .eb-card:hover .eb-card__icon, .eb-card:hover .eb-card__icon svg, .eb-card:hover .eb-card__icon .e-font-icon-svg, .eb-card:hover .eb-card__icon i { color: #fff; fill: #fff; } .eb-card h3 { font-family: var(--ff-serif); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.7px; color: var(--c-text); margin: 0; } .eb-card p { font-family: var(--ff-body); font-size: 14px; line-height: 1.6; color: var(--c-text-2); margin: 0; } /* Come per i values: attenua le sorelle solo con una card davvero in hover. */ .eb-cards__grid:has(.eb-card:hover) .eb-card { opacity: .5; } .eb-cards__grid:has(.eb-card:hover) .eb-card:hover { opacity: 1; } .eb-cards__foot { text-align: center; margin-top: 56px; } @media (max-width:1100px){ .eb-cards__grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:600px){ .eb-cards__grid{ grid-template-columns:1fr } } /* ========================================================================== PLANS (piani di servizio) ========================================================================== */ .eb-plans { padding: var(--s-section) 0; background: var(--c-cream); } .eb-plans__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; } .eb-plan { position: relative; background: var(--c-white); border: 1px solid var(--c-divider); border-radius: var(--radius-lg); padding: 40px 30px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), opacity .4s var(--ease); /* stato pre-reveal (animato da initPlans; fallback: .is-plan-visible) */ opacity: 0; transform: translateY(48px); } .eb-plan.is-plan-visible { opacity: 1; transform: none; } .eb-plan::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .eb-plan:hover::before, .eb-plan.is-featured.is-plan-visible::before { transform: scaleX(1); } .eb-plan:hover { transform: translateY(-10px); border-color: rgba(249,151,63,0.3); box-shadow: 0 24px 64px rgba(10,31,61,0.14); } .eb-plan.is-featured { border-color: rgba(249,151,63,0.45); box-shadow: 0 16px 48px rgba(249,151,63,0.12); } .eb-plans__grid:has(.eb-plan:hover) .eb-plan { opacity: .55; } .eb-plans__grid:has(.eb-plan:hover) .eb-plan:hover { opacity: 1; } .eb-plan__badge { position: absolute; top: 16px; right: 16px; padding: 5px 12px; border-radius: 999px; background: var(--c-orange); color: #fff; font-family: var(--ff-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Selettore .eb-plan h3: deve battere la typography h3 globale del kit Elementor (.elementor-kit-N h3), che altrimenti gonfia i nomi dei piani. */ .eb-plan h3.eb-plan__name { font-family: var(--ff-serif); font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; color: var(--c-text); margin: 0; } .eb-plan__kicker { font-family: var(--ff-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-orange-dark, #e07a1a); margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--c-divider); } .eb-plan__desc { font-family: var(--ff-body); font-size: 14.5px; line-height: 1.65; color: var(--c-text-2); margin: 0; } .eb-plan__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .eb-plan__features li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--ff-body); font-size: 14px; line-height: 1.5; color: var(--c-text-2); /* stato pre-reveal (scaglionato da initPlans) */ opacity: 0; transform: translateX(-12px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .eb-plan.is-plan-visible .eb-plan__features li { opacity: 1; transform: none; } .eb-plan__features li svg { flex-shrink: 0; margin-top: 3px; color: var(--c-orange); } .eb-plans__foot { text-align: center; margin-top: 56px; } @media (max-width:1200px){ .eb-plans__grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:600px){ .eb-plans__grid{ grid-template-columns:1fr } .eb-plan{ padding: 30px 24px; } } @media (prefers-reduced-motion: reduce) { .eb-plan, .eb-plan__features li { opacity: 1; transform: none; transition: none; } } /* ========================================================================== STEPS (process) ========================================================================== */ .eb-steps { padding: var(--s-section) 0; background: var(--c-dark); color: #fff; } .eb-steps.is-light { background: var(--c-cream); color: var(--c-text); } .eb-steps .eb-title { color: #fff; } .eb-steps.is-light .eb-title { color: var(--c-text); } .eb-steps .eb-lead { color: var(--t-secondary); } .eb-steps.is-light .eb-lead { color: var(--c-text-2); } .eb-steps__row { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s-header-gap); padding-top: var(--s-header-gap); border-top: 1px solid rgba(255,255,255,0.12); } .eb-steps.is-light .eb-steps__row { border-top-color: var(--c-divider); } .eb-steps__row.has-3 { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; } .eb-step { display: flex; flex-direction: column; gap: 20px; padding: 32px 28px; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); opacity: 0; transform: translateY(30px) scale(0.95); } .eb-steps.is-light .eb-step { background: var(--c-white); border-color: var(--c-divider); } .eb-step.is-step-visible { opacity: 1; transform: none; } .eb-step.is-step-active { background: rgba(255,255,255,0.1); border-color: var(--c-orange); box-shadow: 0 0 40px rgba(0,112,212,0.15); } .eb-steps.is-light .eb-step.is-step-active { background: #fff; } .eb-step__num { font-family: var(--ff-sans); font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: var(--c-orange); transition: transform .4s var(--ease); } .eb-step.is-step-active .eb-step__num { transform: scale(1.08); } .eb-step__label { font-family: var(--ff-serif); font-weight: 400; font-size: 22px; line-height: 1.15; letter-spacing: -0.8px; color: #fff; margin: 0; } .eb-steps.is-light .eb-step__label { color: var(--c-text); } .eb-step p { font-family: var(--ff-body); font-size: 15px; color: var(--t-primary); line-height: 1.6; margin: 0; } .eb-steps.is-light .eb-step p { color: var(--c-text-2); } .eb-step__conn { display: flex; align-items: center; justify-content: center; padding: 0 8px; } .eb-step__conn-line { width: 40px; height: 2px; background: var(--c-orange); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .eb-step__conn.is-line-visible .eb-step__conn-line { transform: scaleX(1); } .eb-steps__cta { margin-top: 48px; max-width: 640px; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .eb-steps__cta.is-step-visible { opacity: 1; transform: none; } .eb-steps__cta p { color: var(--t-secondary); font-family: var(--ff-body); } .eb-steps.is-light .eb-steps__cta p { color: var(--c-text-2); } .eb-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-family: var(--ff-sans); font-size: 16px; color: #fff; align-self: flex-start; transition: gap .3s, color .3s; text-decoration: none; } .eb-steps.is-light .eb-link-arrow { color: var(--c-text); } .eb-link-arrow:hover { gap: 14px; color: var(--c-orange); } .eb-link-arrow svg { width: 22px; height: 22px; } @media (max-width:1100px){ .eb-steps__row.has-3{ grid-template-columns:1fr; gap:16px } .eb-step__conn{ display:none } } /* ========================================================================== TIMELINE ========================================================================== */ .eb-timeline { padding: var(--s-section) 0; background: var(--c-dark); color: #fff; } .eb-timeline .eb-title { color: #fff; } .eb-timeline__list { display: flex; flex-direction: column; margin-top: var(--s-header-gap); } .eb-timeline__item { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding: 40px 0; border-top: 1px solid rgba(255,255,255,0.12); transition: padding-left .4s var(--ease); } .eb-timeline__item:hover { padding-left: 16px; } .eb-timeline__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); } .eb-timeline__year { font-family: var(--ff-sans); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--c-orange); } .eb-timeline__step { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); margin-top: 6px; } .eb-timeline__content h3 { font-family: var(--ff-serif); font-weight: 400; font-size: 28px; letter-spacing: -0.6px; color: #fff; margin: 0 0 12px; } .eb-timeline__content p { font-family: var(--ff-body); color: var(--t-secondary); max-width: 620px; margin: 0; line-height: 1.6; } @media (max-width:1100px){ .eb-timeline__item{ grid-template-columns:1fr; gap:12px } } /* ========================================================================== FEATURE ROWS ========================================================================== */ .eb-featrows { padding: var(--s-section) 0; background: var(--c-white); } .eb-featrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items: center; padding: clamp(56px,7vw,72px) 0; border-top: 1px solid var(--c-divider); } .eb-featrow:first-child { border-top: none; } .eb-featrow.is-flip .eb-featrow__media { order: -1; } .eb-featrow__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--c-dark); } .eb-featrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .eb-featrow:hover .eb-featrow__media img { transform: scale(1.05); } .eb-featrow__index { position: absolute; top: 20px; left: 24px; z-index: 2; font-family: var(--ff-sans); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.85); text-shadow: 0 2px 30px rgba(0,0,0,0.4); } .eb-featrow__body { display: flex; flex-direction: column; gap: 20px; } .eb-featrow__title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(30px,3.4vw,46px); line-height: 1.05; letter-spacing: -0.03em; color: var(--c-text); margin: 0; } .eb-featrow__body > p { font-family: var(--ff-body); color: var(--c-text-2); font-size: 17px; max-width: 540px; line-height: 1.6; margin: 0; } .eb-featrow__list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; } .eb-featrow__list li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ff-body); font-size: 15px; color: var(--c-text-2); line-height: 1.5; } .eb-featrow__list li::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; background-color: var(--c-orange); -webkit-mask: var(--eb-bullet) no-repeat center/contain; mask: var(--eb-bullet) no-repeat center/contain; } @media (max-width:1100px){ .eb-featrow{ grid-template-columns:1fr } .eb-featrow.is-flip .eb-featrow__media{ order:0 } } /* ========================================================================== TEAM ========================================================================== */ .eb-team { padding: var(--s-section) 0; background: var(--c-dark); color: #fff; } .eb-team .eb-title { color: #fff; } .eb-team .eb-lead { color: var(--t-secondary); } .eb-team__grid { display: grid; grid-template-columns: repeat(var(--eb-team-cols,2),1fr); gap: 20px; align-items: stretch; } .eb-team__card { display: flex; flex-direction: column; } .eb-team__cta { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; background: var(--c-blue); border-radius: var(--radius-lg); padding: 36px 40px; } .eb-team__cta-text { max-width: 680px; } .eb-team__cta .eb-btn { flex-shrink: 0; } .eb-team__cta-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-primary); margin: 0 0 10px; } .eb-team__cta h3 { font-family: var(--ff-serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -1.2px; color: #fff; margin: 0 0 8px; } .eb-team__cta p { font-family: var(--ff-body); font-size: 14px; line-height: 1.5; color: var(--t-primary); margin: 0; } .eb-team__person { cursor: pointer; transition: transform .25s ease; outline: none; } .eb-team__person:hover, .eb-team__person:focus-visible { transform: translateY(-4px); } .eb-team__photo { position: relative; width: 100%; height: 400px; border-radius: var(--radius-lg); overflow: hidden; background: #14375e; } .eb-team__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .eb-team__person:hover .eb-team__photo img { transform: scale(1.04); } .eb-team__info { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,112,212,0.12); color: var(--c-orange); border: 1px solid var(--c-orange); border-radius: 50%; transition: transform .25s, background-color .25s, color .25s; } .eb-team__person:hover .eb-team__info { transform: scale(1.08) rotate(90deg); background: var(--c-orange); color: #fff; } .eb-team__card h3 { font-family: var(--ff-serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -1px; color: var(--t-bright); padding: 16px 8px 4px; margin: 0; } .eb-team__card > p { font-family: var(--ff-body); color: var(--t-secondary); font-size: 14px; letter-spacing: -0.5px; padding: 0 8px; margin: 0; } .eb-team__social { display: flex; gap: 12px; margin-top: 8px; padding: 0 8px; } .eb-team__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--t-secondary); border: 1px solid rgba(255,255,255,0.15); transition: all .3s var(--ease); } .eb-team__social a:hover { background: var(--c-orange); color: #fff; border-color: var(--c-orange); } @media (max-width:1100px){ .eb-team__grid{ grid-template-columns:1fr 1fr } } @media (max-width:600px){ .eb-team__grid{ grid-template-columns:1fr } .eb-team__cta{ flex-direction:column; align-items:flex-start; padding:28px } } /* Team modal (appended to body) */ .eb-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; font-family: var(--ff-body); } .eb-modal.is-open { opacity: 1; visibility: visible; } .eb-modal__backdrop { position: absolute; inset: 0; background: rgba(10,31,61,0.55); backdrop-filter: blur(6px); } .eb-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 920px; max-height: calc(100vh - 48px); background: #fff; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 360px 1fr; box-shadow: 0 30px 80px rgba(0,0,0,0.35); transform: translateY(20px) scale(0.96); opacity: 0; transition: transform .35s var(--ease), opacity .25s; } .eb-modal.is-open .eb-modal__panel { transform: none; opacity: 1; } /* Specificità (0,2,0): deve battere sia il reset del tema sia gli stili globali bottone del kit Elementor (.elementor-kit-N button), perché la modale è appesa al body, fuori dai wrapper dei widget. */ .eb-modal .eb-modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #0a1f3d; border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; z-index: 2; cursor: pointer; transition: all .2s; } .eb-modal .eb-modal__close:hover, .eb-modal .eb-modal__close:focus { background: #f9973f; color: #fff; transform: rotate(90deg); } .eb-modal__photo { background: #14375e; } .eb-modal__photo img { width: 100%; height: 100%; object-fit: cover; } .eb-modal__body { padding: 48px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .eb-modal__name { font-family: var(--ff-serif); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -1.2px; color: #191615; margin: 0; } .eb-modal__role { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #b5179e; margin: 0; } .eb-modal__bio { margin: 8px 0 0; color: #474747; font-size: 15px; line-height: 1.6; } .eb-modal__social { display: flex; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.1); } .eb-modal__social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,112,212,0.08); color: #0070d4; transition: all .25s; } .eb-modal__social a:hover { background: #0070d4; color: #fff; transform: translateY(-2px); } .eb-modal__social svg { width: 18px; height: 18px; } body.eb-no-scroll { overflow: hidden; } @media (max-width:600px){ .eb-modal__panel{ grid-template-columns:1fr; max-height:calc(100vh - 32px) } .eb-modal__photo{ height:220px } .eb-modal__body{ padding:24px 20px } } /* ========================================================================== CTA BAND ========================================================================== */ .eb-cta { background: var(--c-dark); color: #fff; position: relative; overflow: hidden; } .eb-cta__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 80% 30%, rgba(249,151,63,0.14) 0%, transparent 55%), radial-gradient(ellipse at 15% 80%, rgba(0,112,212,0.14) 0%, transparent 55%); } .eb-cta__inner { position: relative; z-index: 1; padding: var(--s-section) 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; } .eb-cta__title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(40px,6vw,92px); line-height: 0.98; letter-spacing: -0.04em; color: #fff; max-width: 14ch; margin: 0; } .eb-cta__lead { font-family: var(--ff-body); color: var(--t-secondary); max-width: 560px; font-size: 17px; line-height: 1.6; margin: 0; } .eb-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } /* ========================================================================== CHIPS / INDUSTRIES ========================================================================== */ .eb-chips { padding: var(--s-section) 0; background: var(--c-off-white); } .eb-chips__cloud { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-header-gap); } .eb-chip { display: inline-flex; align-items: center; padding: 12px 24px; font-family: var(--ff-sans); font-size: 16px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; border: 1px solid var(--c-divider); color: var(--c-text-2); background: var(--c-white); transition: all .3s var(--ease); } .eb-chip:hover { border-color: var(--c-orange); color: var(--c-orange-dark); transform: translateY(-2px); } /* ========================================================================== FOOTER ========================================================================== */ .eb-footer { background: #060e1a; color: #fff; padding: 120px 0 80px; } .eb-footer__grid { display: grid; grid-template-columns: minmax(260px,1fr) auto auto auto; gap: 64px 96px; align-items: start; } .eb-footer__brand { display: flex; flex-direction: column; gap: 24px; max-width: 540px; } .eb-footer__logo { display: inline-flex; align-self: flex-start; flex-shrink: 0; } .eb-footer__logo img { height: 56px; width: auto; max-width: none; flex-shrink: 0; display: block; } .eb-footer__tagline { font-family: var(--ff-body); font-size: 16px; line-height: 1.5; color: var(--t-secondary); margin: 0; } .eb-footer__col h4 { font-family: var(--ff-sans); font-weight: 700; font-size: 16px; color: #fff; margin: 0 0 16px; } .eb-footer__col h4 a, .eb-footer-menu__col h4 a { color: inherit; text-decoration: none; transition: color .3s; } .eb-footer__col h4 a:hover, .eb-footer-menu__col h4 a:hover { color: var(--c-orange); } .eb-footer__col ul, .eb-footer-menu__col ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; } .eb-footer__col li, .eb-footer__col p, .eb-footer-menu__col li { font-family: var(--ff-body); font-size: 14px; line-height: 1.5; color: var(--t-secondary); margin: 0; } .eb-footer__col a, .eb-footer-menu__col a { transition: color .3s; text-decoration: none; color: inherit; } .eb-footer__col a:hover, .eb-footer-menu__col a:hover { color: var(--c-orange); } .eb-footer__divider { height: 1px; background: linear-gradient(90deg, transparent, var(--c-orange), transparent); margin: 64px 0 40px; } .eb-footer__bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .eb-footer__bottom p { font-family: var(--ff-body); font-size: 14px; color: rgba(255,255,255,0.5); margin: 0; } /* a11y: contrasto AA (>=4.5:1) su #060e1a */ .eb-footer__links { display: flex; gap: 24px; } .eb-footer__links a { font-family: var(--ff-body); font-size: 14px; text-decoration: underline; color: rgba(255,255,255,0.5); transition: color .3s; } .eb-footer__links a:hover { color: #fff; } /* a11y: contrasto AA su #060e1a */ @media (max-width:1024px){ .eb-footer__grid{ grid-template-columns:1fr 1fr; gap:48px } } @media (max-width:600px){ .eb-footer__grid{ grid-template-columns:1fr } .eb-footer__bottom{ flex-direction:column } } /* ---- Footer menu: colonne di link, senza brand/bottom bar ---- (stile di ul/li/a e h4-link condiviso con .eb-footer__col qui sopra) */ .eb-footer-menu { --eb-footer-menu-gap: 56px; --eb-footer-link-gap: 8px; background: #0f1f38; color: #fff; padding: 64px 0; } /* Desktop: una traccia per colonna, tutte su una riga (auto-flow column). */ .eb-footer-menu__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--eb-footer-menu-gap); } .eb-footer-menu__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .eb-footer-menu__col ul { gap: var(--eb-footer-link-gap); } /* Colonna con molte voci (controllo "Due colonne oltre N voci"): occupa due tracce e divide l'elenco in due con lo spazio della griglia, così la seconda metà si allinea alla traccia. */ .eb-footer-menu__col--wide { grid-column: span 2; } .eb-footer-menu__col--wide ul { display: block; columns: 2; column-gap: var(--eb-footer-menu-gap); } .eb-footer-menu__col--wide li { margin-bottom: var(--eb-footer-link-gap); break-inside: avoid; } .eb-footer-menu__col h4 { font-family: var(--ff-sans); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0; } /* Larghezza decisa dal Container Elementor che ospita il widget (boxed come gli altri blocchi del sito), non da un padding proprio. */ .eb-footer-menu .eb-comp__container { max-width: none; padding-inline: 0; } /* Titolo di categoria (colonna con voci figlie): oro e con una linea sotto, così le voci si leggono come contenuto di quella categoria. Le voci singole della colonna --links restano bianche, senza linea: link a sé. */ .eb-footer-menu__col:not(.eb-footer-menu__col--links) > h4 { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--e-global-color-secondary, #E3A855) 45%, transparent); color: var(--e-global-color-secondary, #E3A855); } /* Da tablet in giù 2 colonne: una "wide" occupa l'intera riga. */ @media (max-width:1024px){ .eb-footer-menu__row{ grid-auto-flow: row; grid-template-columns: 1fr 1fr; } } @media (max-width:600px){ .eb-footer-menu{ --eb-footer-menu-gap: 32px; } } /* ========================================================================== ABOUT (testo + immagine) & IMAGE BAND ========================================================================== */ .eb-about, .eb-imgband { box-sizing: border-box; } .eb-about *, .eb-about *::before, .eb-about *::after { box-sizing: border-box; } .eb-about { --c-text: #191615; --c-text-2: #474747; --c-blue: #0070d4; --c-orange: #f9973f; --c-white: #fff; --radius-lg: 20px; --ff-serif: 'Lora', Georgia, serif; --ff-body: 'DM Sans', system-ui, sans-serif; --ff-sans: 'Instrument Sans', system-ui, sans-serif; --ff-btn: 'Inter', system-ui, sans-serif; --ease: cubic-bezier(0.16,1,0.3,1); --pad-x: clamp(20px,8vw,156px); --s-section: clamp(72px,12vw,180px); padding: var(--s-section) 0; background: var(--c-white); } .eb-about__inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; } .eb-about.is-flip .eb-about__text { order: 2; } .eb-about__text { display: flex; flex-direction: column; gap: 24px; } .eb-about__text .eb-eyebrow { margin-bottom: 4px; } .eb-about__title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(32px,5vw,60px); line-height: 1; letter-spacing: -0.03em; color: var(--c-text); margin: 0; } .eb-about__text p { font-family: var(--ff-body); color: var(--c-text-2); line-height: 1.6; margin: 0; } .eb-about__quote { margin: 8px 0; padding-left: 24px; border-left: 3px solid var(--c-blue); font-family: var(--ff-serif); font-size: 24px; line-height: 1.35; font-style: italic; color: var(--c-text) !important; } .eb-about__btn { align-self: flex-start; } .eb-about__media { border-radius: var(--radius-lg); overflow: hidden; background: #ddd; } .eb-about__media img { width: 100%; height: auto; object-fit: cover; transition: transform 5s ease; display: block; } .eb-about__media:hover img { transform: scale(1.04); } @media (max-width:1100px){ .eb-about__inner{ grid-template-columns:1fr; gap:48px } .eb-about.is-flip .eb-about__text{ order:0 } } .eb-imgband { width: 100%; overflow: hidden; position: relative; height: var(--eb-band-h, clamp(340px,50vw,600px)); } .eb-imgband img { width: 100%; max-width: none; height: 140%; object-fit: cover; object-position: center 40%; position: absolute; top: -20%; left: 0; display: block; } .eb-imgband.is-parallax img { will-change: transform; } @media (max-width:820px){ .eb-imgband img { height: 130%; top: -15%; } } /* ========================================================================== STYLING WIDGET NATIVI ELEMENTOR (form & accordion) — look del mockup. Applicato solo dove il container ha la classe .eb-formwrap / .eb-faq. ========================================================================== */ .eb-formwrap, .eb-faq, .eb-contact-intro { --c-text: #191615; --c-text-2: #474747; --c-blue: #0070d4; --c-blue-dark: #005aac; --c-orange: #f9973f; --c-orange-dark: #e07a1a; --c-accent: #b5179e; --c-white: #fff; --ff-serif: 'Lora', Georgia, serif; --ff-body: 'DM Sans', system-ui, sans-serif; --ff-sans: 'Instrument Sans', system-ui, sans-serif; --ff-btn: 'Inter', system-ui, sans-serif; --ease: cubic-bezier(0.16,1,0.3,1); } /* ---- Intro (heading + testo) della sezione contatti ---- */ .eb-contact-intro .elementor-heading-title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(32px,5vw,60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--c-text); } .eb-contact-intro .elementor-widget-text-editor { font-family: var(--ff-body); color: var(--c-text-2); font-size: 16px; line-height: 1.7; } .eb-contact-intro .elementor-widget-text-editor a { color: #965000; } /* a11y: contrasto AA su sfondo chiaro #dee2e8 */ /* ---- Form ---- */ .eb-formwrap { background: var(--c-white); border-radius: 20px; padding: clamp(28px,4vw,56px); box-shadow: 0 30px 80px rgba(10,31,61,0.12); border: 1px solid rgba(0,0,0,0.06); } .eb-formwrap .elementor-form, .eb-formwrap .elementor-form .elementor-form-fields-wrapper { row-gap: 24px; } .eb-formwrap .elementor-field-group > .elementor-field-label { font-family: var(--ff-sans); font-size: 14px; font-weight: 500; color: var(--c-text); margin-bottom: 8px; } .eb-formwrap .elementor-field-textual { width: 100%; border: 0; border-bottom: 1px solid var(--c-blue); background: transparent; border-radius: 0; padding: 8px 0; font-family: var(--ff-body); font-size: 16px; color: var(--c-text); box-shadow: none; transition: border-color .3s, box-shadow .3s; min-height: 44px; } .eb-formwrap textarea.elementor-field-textual { min-height: 72px; } .eb-formwrap .elementor-field-textual:focus { border-color: var(--c-blue-dark); box-shadow: 0 2px 0 0 var(--c-blue); outline: none; } .eb-formwrap .elementor-field-textual::placeholder { color: #9aa0a6; } .eb-formwrap .elementor-field-type-acceptance .elementor-field-subgroup { font-family: var(--ff-body); font-size: 14px; color: var(--c-text-2); } .eb-formwrap input[type="checkbox"] { accent-color: var(--c-accent); } .eb-formwrap .elementor-field-type-upload .elementor-field { padding: 12px 0; } .eb-formwrap .elementor-button { background: var(--c-orange); color: #fff; border: 0; border-radius: 40px; width: 100%; font-family: var(--ff-btn); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; min-height: 50px; justify-content: center; transition: all .35s var(--ease); margin-top: 8px; } .eb-formwrap .elementor-button:hover { background: var(--c-orange-dark); box-shadow: 0 8px 30px rgba(249,151,63,0.35); } /* ---- Accordion (FAQ / expertise detail) ---- */ .eb-faq .elementor-accordion { display: flex; flex-direction: column; } .eb-faq .elementor-accordion-item { border: 0 !important; border-top: 1px solid rgba(0,0,0,0.1) !important; background: transparent; } .eb-faq .elementor-accordion-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.1) !important; } .eb-faq .elementor-tab-title { border: 0 !important; background: transparent !important; padding: 32px 0 !important; margin: 0; transition: color .3s; } .eb-faq .elementor-tab-title .elementor-accordion-title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(20px,2.2vw,30px); letter-spacing: -0.02em; line-height: 1.2; color: var(--c-text); transition: color .3s; } .eb-faq .elementor-tab-title:hover .elementor-accordion-title, .eb-faq .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--c-blue); } .eb-faq .elementor-accordion-icon { color: var(--c-orange); } .eb-faq .elementor-accordion-icon svg, .eb-faq .elementor-accordion-icon i { width: auto; } .eb-faq .elementor-tab-content { border: 0 !important; background: transparent !important; padding: 0 0 32px !important; font-family: var(--ff-body); font-size: 16px; line-height: 1.7; color: var(--c-text-2); } .eb-faq .elementor-tab-content p { margin: 0; } .eb-formwrap { max-width: 680px; margin-left: auto; margin-right: auto; } .eb-contact-intro { max-width: 720px; margin: 0 auto 8px; text-align: center; } .eb-faq { max-width: 900px; margin: 0 auto; } /* ========================================================================== CONTACT a DUE COLONNE (intro + form affiancati) ========================================================================== */ .eb-contactrow > .e-con-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px,5vw,72px); align-items: start; } .eb-contactrow .eb-contact-intro { max-width: none; margin: 0; text-align: left; padding-top: 8px; } .eb-contactrow .eb-contact-intro .elementor-heading-title { text-align: left; } .eb-contactrow .eb-formwrap { max-width: none; margin: 0; } @media (max-width: 1100px) { .eb-contactrow > .e-con-inner { grid-template-columns: 1fr; gap: 36px; } } /* ========================================================================== ACCORDION come da mockup (icona +/- custom a destra, titoli serif, divider) ========================================================================== */ .eb-faq .elementor-accordion-item { border: 0 !important; border-top: 1px solid rgba(0,0,0,0.1) !important; background: transparent; } .eb-faq .elementor-accordion-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.1) !important; } .eb-faq .elementor-tab-title { display: flex !important; align-items: center; justify-content: space-between; flex-direction: row-reverse; gap: 24px; padding: 32px 0 !important; border: 0 !important; background: transparent !important; margin: 0; } .eb-faq .elementor-tab-title .elementor-accordion-title { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(20px,2.2vw,30px); letter-spacing: -0.02em; line-height: 1.2; color: var(--c-text); transition: color .3s; } .eb-faq .elementor-tab-title:hover .elementor-accordion-title, .eb-faq .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--c-blue); } .eb-faq .elementor-accordion-icon { position: relative; width: 28px; height: 28px; flex: 0 0 28px; padding: 0 !important; margin: 0 !important; } .eb-faq .elementor-accordion-icon svg, .eb-faq .elementor-accordion-icon i { display: none !important; } .eb-faq .elementor-accordion-icon::before, .eb-faq .elementor-accordion-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--c-orange); transform: translate(-50%,-50%); transition: transform .35s var(--ease); } .eb-faq .elementor-accordion-icon::before { width: 18px; height: 2px; } .eb-faq .elementor-accordion-icon::after { width: 2px; height: 18px; } .eb-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after { transform: translate(-50%,-50%) scaleY(0); } .eb-faq .elementor-tab-content { border: 0 !important; background: transparent !important; padding: 0 0 32px !important; font-family: var(--ff-body); font-size: 16px; line-height: 1.7; color: var(--c-text-2); } .eb-faq .elementor-tab-content p { margin: 0; } /* ========================================================================== EB ACCORDION — replica 1:1 del componente .accordion del reference ========================================================================== */ .eb-accordion-sec { --c-text: #191615; --c-text-2: #474747; --c-blue: #0070d4; --c-orange: #f9973f; --c-orange-dark: #e07a1a; --c-white: #fff; --c-divider: rgba(0,0,0,0.1); --c-accent: #b5179e; --ff-serif: 'Lora', Georgia, serif; --ff-body: 'DM Sans', system-ui, sans-serif; --ff-sans: 'Instrument Sans', system-ui, sans-serif; --ease: cubic-bezier(0.16,1,0.3,1); --pad-x: clamp(20px,8vw,156px); --s-section: clamp(72px,12vw,180px); --s-header-gap: clamp(40px,6vw,80px); padding: var(--s-section) 0; background: var(--c-white); } .eb-accordion-sec.is-cream { background: #f7f5f1; } /* Statement "Risk is not a department" unito all'accordion: elimina lo stacco bianco. */ #eb-risk-depth { background: #fff; } #eb-risk-depth .eb-accordion-sec { padding-top: clamp(28px, 3.5vw, 52px); } .eb-accordion-sec.is-off { background: #f8f9fa; } .eb-accordion-sec *, .eb-accordion-sec *::before, .eb-accordion-sec *::after { box-sizing: border-box; } .eb-accordion-sec .eb-comp__container { max-width: 1100px; } /* Widget EB FAQ — stessa sezione/accordion condivisi con EB Accordion, ma senza il padding verticale grande da "sezione di pagina" (il widget deve incastrarsi nel layout esistente, non aggiungere il suo spazio), senza un tetto di larghezza fisso (il widget riempie la colonna/container in cui viene messo), e senza il cambio colore hover/open (il testo resta dello stesso colore). Scoping via .eb-faq-sec così EB Accordion, che usa solo .eb-accordion-sec, resta invariato. */ .eb-faq-sec { padding: 0; } .eb-faq-sec .eb-comp__container { max-width: none; padding-inline: 0; } /* Il colore hover/apertura della domanda (prima var(--c-blue), sbagliato, poi azzerato del tutto per errore) è ora un controllo del widget — vedi question_hover_color in FaqWidget.php — non hardcoded qui. */ .eb-accordion { display: flex; flex-direction: column; } .eb-accordion__item { border-top: 1px solid var(--c-divider); } .eb-accordion__item:last-child { border-bottom: 1px solid var(--c-divider); } /* !important su background/border/padding/box-shadow: senza, i default di bottone del tema/Elementor per