:root {
--ellida-cream: #f5efeb;
--ellida-navy: #2f4157;
--ellida-pale: #c7d9e5;
--ellida-pale-2: #b9d3e2;
--ellida-deep: #577c8e;
--ellida-card: #294159;
--ellida-white: #fff;
--ellida-shadow: 0 18px 48px rgba(47, 65, 87, .10);
--ellida-ease: cubic-bezier(.22, 1, .36, 1);
--ellida-header-h: 154px;
}
html { scroll-behavior: smooth; }
body.ellida-landing-page { margin: 0; background: var(--ellida-cream); }
body.ellida-modal-open { overflow: hidden; }
.ellida-landing,
.ellida-landing * { box-sizing: border-box; }
.ellida-landing {
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
overflow: clip;
background: var(--ellida-cream);
color: var(--ellida-navy);
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
.ellida-landing img { display: block; max-width: 100%; }
.ellida-landing a { color: inherit; text-decoration: none; }
.ellida-landing button,
.ellida-landing input,
.ellida-landing textarea { font: inherit; }
.ellida-landing button { color: inherit; }
.ellida-landing h1,
.ellida-landing h2,
.ellida-landing h3,
.ellida-landing p { margin-top: 0; }
.ellida-shell { width: min(calc(100% - 96px), 1780px); margin-inline: auto; }
.ellida-section { position: relative; padding: clamp(86px, 8vw, 150px) 0; }
.ellida-kicker { margin: 0 0 14px; font-size: clamp(12px, .95vw, 17px); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.ellida-kicker--light { color: var(--ellida-cream); }
.ellida-script { height: auto; }
.ellida-skip-link { position: fixed; left: 12px; top: -100px; z-index: 999999; padding: 10px 16px; border-radius: 8px; background: #fff; color: #000; }
.ellida-skip-link:focus { top: 12px; }
.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.ellida-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 25px;
border: 0;
border-radius: 18px;
font-weight: 600;
line-height: 1;
transition: transform .38s var(--ellida-ease), background-color .38s ease, color .38s ease, box-shadow .38s ease;
}
.ellida-btn:hover,
.ellida-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(47, 65, 87, .16); outline: none; }
.ellida-btn--dark { background: var(--ellida-navy); color: #fff !important; }
.ellida-btn--dark:hover,
.ellida-btn--dark:focus-visible { background: #22354d; }
.ellida-btn--pale { background: var(--ellida-pale); color: var(--ellida-navy) !important; }
.ellida-btn--pale:hover,
.ellida-btn--pale:focus-visible { background: #b7d0df; }
/* Header */
.ellida-header {
position: sticky;
top: 0;
z-index: 1000;
height: var(--ellida-header-h);
background: rgba(244, 239, 235, .98);
transition: box-shadow .4s ease, backdrop-filter .4s ease, background-color .4s ease;
}
.ellida-header.is-scrolled { box-shadow: 0 9px 25px rgba(47, 65, 87, .08); background: rgba(244, 239, 235, .90); backdrop-filter: blur(14px); }
.ellida-header__inner { height: 100%; display: grid; grid-template-columns: 280px minmax(520px, 1fr) auto; align-items: center; gap: clamp(25px, 4vw, 58px); }
.ellida-logo { display: block; width: 230px; }
.ellida-logo img { width: 100%; height: auto; }
.ellida-nav { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 68px; padding: 0 18px; border-radius: 40px; background: var(--ellida-navy); color: #fff; }
.ellida-nav a { position: relative; display: grid; place-items: center; height: 100%; font-size: clamp(17px, 1.3vw, 24px); font-weight: 400; }
.ellida-nav a::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 15px; height: 1px; background: #fff; transform: scaleX(0); transition: transform .35s var(--ellida-ease); }
.ellida-nav a:hover::after,
.ellida-nav a:focus-visible::after { transform: scaleX(1); }
.ellida-booking { display: inline-flex; justify-content: center; align-items: center; min-height: 68px; padding: 0 clamp(22px, 2.5vw, 42px); border-radius: 40px; background: var(--ellida-pale); font-size: clamp(17px, 1.25vw, 23px); font-weight: 700; white-space: nowrap; transition: transform .38s var(--ellida-ease), background-color .38s ease; }
.ellida-booking:hover,
.ellida-booking:focus-visible { transform: translateY(-2px); background: #b9d1e0; outline: none; }
.ellida-menu-toggle { display: none; }
/* Hero / chi sono scroll story */
.ellida-story { position: relative; height: 170vh; min-height: 1120px; background: #f6f7f8; }
.ellida-story__sticky { position: sticky; top: var(--ellida-header-h); height: calc(100vh - var(--ellida-header-h)); min-height: 640px; overflow: hidden; isolation: isolate; }
.ellida-story__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 42%; z-index: -3; }
.ellida-story__wash { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(255,255,255,.05) 0 26%, rgba(248,249,250,.08) 40%, rgba(248,249,250,.42) 59%, rgba(248,249,250,.70) 100%); }
.ellida-story__content,
.ellida-story__about { position: absolute; left: 53.2%; width: min(39%, 660px); top: 50%; transform: translateY(-50%); }
.ellida-story__hero { opacity: 1; transition: opacity .9s var(--ellida-ease), transform .9s var(--ellida-ease); }
.ellida-story__hero h1 { margin-bottom: 28px; font-size: clamp(54px, 4.6vw, 86px); line-height: .96; letter-spacing: -.04em; font-weight: 800; }
.ellida-story__hero p { max-width: 620px; margin-bottom: 28px; font-size: clamp(17px, 1.18vw, 22px); line-height: 1.34; }
.ellida-story__about { padding: clamp(38px, 3.5vw, 70px) clamp(38px, 4.2vw, 82px); border-radius: clamp(38px, 5vw, 78px); background: var(--ellida-pale); opacity: 0; transform: translateY(calc(-50% + 30px)); pointer-events: none; transition: opacity .9s var(--ellida-ease) .08s, transform .9s var(--ellida-ease) .08s; }
.ellida-story__about-title { width: min(100%, 520px); margin-bottom: 28px; }
.ellida-story__about p { margin-bottom: 30px; font-size: clamp(18px, 1.45vw, 28px); line-height: 1.36; }
.ellida-story.is-about .ellida-story__hero { opacity: 0; transform: translateY(calc(-50% - 28px)); pointer-events: none; }
.ellida-story.is-about .ellida-story__about { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
/* Intro */
.ellida-intro { background: var(--ellida-cream); text-align: center; }
.ellida-intro__inner { max-width: 1040px; }
.ellida-intro__title { width: min(100%, 760px); margin: 0 auto 30px; }
.ellida-intro p:not(.ellida-kicker) { max-width: 920px; margin: 0 auto 30px; font-size: clamp(17px, 1.25vw, 23px); line-height: 1.45; }
.ellida-intro .ellida-btn { margin-top: 12px; }
/* Approach */
.ellida-approach { background: var(--ellida-cream); }
.ellida-approach__grid { display: grid; grid-template-columns: minmax(430px, .92fr) minmax(620px, 1.28fr); align-items: center; gap: clamp(45px, 6vw, 110px); }
.ellida-approach__copy h2 { margin-bottom: 28px; font-size: clamp(42px, 4vw, 78px); line-height: 1.02; letter-spacing: -.035em; }
.ellida-approach__copy p { max-width: 670px; margin-bottom: 25px; font-size: clamp(16px, 1.15vw, 22px); line-height: 1.43; }
.ellida-tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 25px; }
.ellida-tags span { padding: 8px 18px; border: 1px solid rgba(47, 65, 87, .43); border-radius: 20px; font-size: clamp(12px, .9vw, 16px); }
.ellida-approach__visual { position: relative; min-height: 650px; overflow: hidden; }
.ellida-approach__visual > img { position: absolute; inset: 5% -2% 0 0; width: 104%; height: 92%; object-fit: contain; opacity: .76; clip-path: inset(0 100% 0 0); }
.ellida-line-drawing.is-drawing > img { animation: ellida-line-reveal 2.6s var(--ellida-ease) forwards; }
@keyframes ellida-line-reveal { to { clip-path: inset(0 0 0 0); } }
.ellida-approach-card { position: absolute; width: min(36%, 335px); text-align: center; z-index: 2; cursor: default; }
.ellida-approach-card h3 { margin: 0 0 8px; padding: 8px 20px; border-radius: 999px; background: var(--ellida-pale); font-size: clamp(20px, 1.8vw, 34px); font-weight: 600; line-height: 1; transition: background-color .55s var(--ellida-ease), color .55s ease, transform .55s var(--ellida-ease); }
.ellida-approach-card p { display: inline-block; margin: 6px 0 0; padding: 8px 14px 10px; border-radius: 22px; background: rgba(244, 239, 235, .94); font-size: clamp(12px, .88vw, 16px); line-height: 1.35; transition: color .55s ease; }
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3 { background: var(--ellida-deep); color: #fff; transform: translateY(-3px); }
.ellida-approach-card:focus-visible { outline: none; }
.ellida-approach-card--one { top: 9%; right: 4%; }
.ellida-approach-card--two { top: 23%; left: 1%; }
.ellida-approach-card--three { bottom: 15%; left: 32%; }
/* Services */
.ellida-services { background: var(--ellida-pale); }
.ellida-services__heading { max-width: 1060px; margin-bottom: clamp(55px, 6vw, 98px); }
.ellida-services__heading h2 { margin-bottom: 40px; font-size: clamp(44px, 4.4vw, 84px); line-height: 1.02; letter-spacing: -.04em; }
.ellida-services__heading h2 em { color: var(--ellida-deep); font-style: normal; font-weight: inherit; }
.ellida-services__heading p { max-width: 560px; font-size: clamp(17px, 1.35vw, 25px); line-height: 1.35; }
.ellida-services__expanded-title { display: none; }
.ellida-services.is-expanded .ellida-services__compact-title { display: none; }
.ellida-services.is-expanded .ellida-services__expanded-title { display: block; }
.ellida-services-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.4vw, 44px); align-items: stretch; min-height: 530px; transition: min-height .65s var(--ellida-ease); }
.ellida-service-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 235px; padding: clamp(25px, 2.2vw, 42px); border: 0; border-radius: 35px; background: rgba(199, 217, 229, .68); box-shadow: inset 0 0 34px rgba(255,255,255,.58), var(--ellida-shadow); text-align: left; cursor: pointer; overflow: hidden; transition: background-color .45s ease, box-shadow .45s ease, opacity .45s ease; }
.ellida-service-card:hover,
.ellida-service-card:focus-visible,
.ellida-service-card.is-active { background: rgba(185, 211, 226, .97); box-shadow: inset 0 0 34px rgba(255,255,255,.64), 0 20px 45px rgba(47,65,87,.16); outline: none; }
.ellida-service-card__icon { display: block; width: 54px; height: 54px; margin: 0 auto 12px; color: var(--ellida-deep); align-self: center; }
.ellida-service-card__icon svg,
.ellida-service-detail__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ellida-service-card strong { margin: 0 0 15px; font-size: clamp(18px, 1.35vw, 25px); line-height: 1.08; text-transform: lowercase; }
.ellida-service-card > span:not(.ellida-service-card__icon) { font-size: clamp(12px, .9vw, 16px); line-height: 1.35; }
.ellida-service-card small { margin-top: auto; align-self: center; padding: 7px 13px; border-radius: 16px; background: var(--ellida-deep); color: #fff; font-size: 11px; font-weight: 600; }
.ellida-service-detail { display: none; position: relative; flex-direction: column; justify-content: center; min-height: 635px; padding: clamp(44px, 4vw, 78px); border-radius: 44px; background: rgba(185, 211, 226, .84); box-shadow: inset 0 0 42px rgba(255,255,255,.48), var(--ellida-shadow); opacity: 0; transform: translateY(16px); }
.ellida-service-detail__close { position: absolute; right: 24px; top: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 34px; line-height: 1; cursor: pointer; }
.ellida-service-detail__close:hover,
.ellida-service-detail__close:focus-visible { background: rgba(255,255,255,.55); outline: none; }
.ellida-service-detail__icon { width: 82px; height: 82px; margin: 0 auto 22px; color: var(--ellida-deep); }
.ellida-service-detail h3 { margin-bottom: 24px; font-size: clamp(31px, 2.7vw, 52px); line-height: 1; text-align: center; text-transform: lowercase; }
.ellida-service-detail p { margin-bottom: 22px; font-size: clamp(16px, 1.15vw, 22px); line-height: 1.35; }
.ellida-service-detail > strong { font-size: clamp(18px, 1.35vw, 25px); }
.ellida-service-detail ul { margin: 0 0 28px; padding-left: 0; list-style: none; font-size: clamp(15px, 1.08vw, 20px); }
.ellida-service-detail ul li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--ellida-deep); }
.ellida-service-detail .ellida-btn { align-self: flex-start; }
.ellida-services-grid[data-expanded="true"] { grid-template-columns: minmax(205px, .8fr) repeat(3, minmax(0, 1fr)) minmax(205px, .8fr); grid-template-rows: repeat(3, minmax(168px, auto)); gap: 28px 42px; min-height: 640px; }
.ellida-services-grid[data-expanded="true"] .ellida-service-detail { display: flex; grid-column: 2 / 5; grid-row: 1 / 4; opacity: 1; transform: none; animation: ellida-detail-in .68s var(--ellida-ease) both; }
@keyframes ellida-detail-in { from { opacity: 0; transform: translateY(18px); } }
.ellida-services-grid[data-expanded="true"] .ellida-service-card { min-height: 168px; padding: 22px; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--left-1 { grid-column: 1; grid-row: 1; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--left-2 { grid-column: 1; grid-row: 2; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--left-3 { grid-column: 1; grid-row: 3; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--right-1 { grid-column: 5; grid-row: 1; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--right-2 { grid-column: 5; grid-row: 2; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--right-3 { grid-column: 5; grid-row: 3; }
/* Help */
.ellida-help { background: var(--ellida-deep); color: var(--ellida-cream); }
.ellida-help__grid { display: grid; grid-template-columns: minmax(440px, .95fr) minmax(480px, .85fr); gap: clamp(70px, 10vw, 180px); align-items: center; }
.ellida-help__title { width: min(100%, 670px); margin-bottom: 48px; }
.ellida-help__copy p { max-width: 670px; margin-bottom: 30px; font-size: clamp(17px, 1.25vw, 23px); line-height: 1.42; }
.ellida-help__copy .ellida-btn { margin-top: 22px; }
.ellida-help__list { display: grid; gap: 0; }
.ellida-help__list button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 2px 18px; border: 0; border-bottom: 1px solid rgba(244,239,235,.68); background: transparent; color: var(--ellida-cream); text-align: left; cursor: pointer; font-size: clamp(17px, 1.25vw, 23px); transition: color .35s ease, padding-left .35s var(--ellida-ease); }
.ellida-help__list button:hover,
.ellida-help__list button:focus-visible { color: #fff; padding-left: 12px; outline: none; }
.ellida-help__list button span:last-child { font-size: 25px; transition: transform .35s var(--ellida-ease); }
.ellida-help__list button:hover span:last-child,
.ellida-help__list button:focus-visible span:last-child { transform: rotate(90deg); }
/* Process */
.ellida-process { background: var(--ellida-cream); padding-bottom: clamp(34px, 4vw, 62px); }
.ellida-process__heading h2 { margin-bottom: 46px; font-size: clamp(42px, 4vw, 78px); line-height: 1.04; letter-spacing: -.035em; }
.ellida-process-map { position: relative; min-height: 630px; }
.ellida-process-map__thread { position: absolute; inset: -2% -1% 0; overflow: visible; z-index: 0; }
.ellida-process-map__thread svg { width: 100%; height: 100%; overflow: visible; }
.ellida-process-map__thread path { fill: none !important; stroke: #66869a; stroke-width: 4.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .96; transition: stroke-dashoffset 3.3s cubic-bezier(.22,1,.36,1); }
.ellida-process-map.is-drawing .ellida-process-map__thread path { stroke-dashoffset: 0 !important; }
.ellida-process-step,
.ellida-process-center { position: absolute; z-index: 2; text-align: center; }
.ellida-process-step { width: 19%; }
.ellida-process-step h3 { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; margin: 0 0 13px; padding: 8px 15px; border-radius: 999px; background: var(--ellida-deep); color: #fff; font-size: clamp(16px, 1.25vw, 23px); line-height: 1; }
.ellida-process-step p { display: inline-block; margin: 0; padding: 8px 12px 0; border-radius: 18px; background: rgba(244, 239, 235, .94); font-size: clamp(12px, .88vw, 16px); line-height: 1.34; }
.ellida-process-step--one { left: 8.5%; top: 10%; }
.ellida-process-step--two { left: 31%; top: 12%; }
.ellida-process-step--three { left: 56%; top: 10%; }
.ellida-process-step--four { right: 4%; top: 10%; }
.ellida-process-center { left: 50%; top: 45%; width: min(27%, 390px); transform: translateX(-50%); padding: 24px 32px; border-radius: 34px; background: var(--ellida-deep); color: #fff; }
.ellida-process-center h3 { margin-bottom: 7px; font-size: clamp(20px, 1.7vw, 32px); }
.ellida-process-center p { margin: 0; font-size: clamp(13px, .95vw, 17px); }
.ellida-process-map.is-drawing .ellida-process-step,
.ellida-process-map.is-drawing .ellida-process-center { animation: ellida-map-card-in .8s var(--ellida-ease) both; }
.ellida-process-map.is-drawing .ellida-process-step--one { animation-delay: .58s; }
.ellida-process-map.is-drawing .ellida-process-step--two { animation-delay: 1.15s; }
.ellida-process-map.is-drawing .ellida-process-step--three { animation-delay: 1.72s; }
.ellida-process-map.is-drawing .ellida-process-step--four { animation-delay: 2.3s; }
.ellida-process-map.is-drawing .ellida-process-center { animation-delay: 2.72s; }
@keyframes ellida-map-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.ellida-process-map.is-drawing .ellida-process-center { animation-name: ellida-map-center-in; }
@keyframes ellida-map-center-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ellida-service-detail { max-width: none; }
.ellida-service-detail__icon svg,
.ellida-service-card__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ellida-process-map__thread svg { pointer-events: none; }
.ellida-process-step h3,
.ellida-process-center h3,
.ellida-story__hero h1 { text-wrap: balance; }
/* Contact */
.ellida-contact { background: var(--ellida-cream); padding-top: clamp(34px, 4vw, 58px); padding-bottom: 80px; }
.ellida-contact__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(46px, 7vw, 110px); align-items: center; }
.ellida-contact__title { width: min(100%, 540px); margin-bottom: 32px; }
.ellida-contact__copy p { max-width: 520px; font-size: clamp(16px, 1.15vw, 21px); line-height: 1.45; }
.ellida-contact-form { padding: clamp(30px, 3.5vw, 58px); border-radius: 28px; background: var(--ellida-pale); }
.ellida-contact-form h2 { margin-bottom: 28px; font-size: clamp(27px, 2.15vw, 42px); line-height: 1.1; }
.ellida-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ellida-contact-form label { display: block; margin-bottom: 22px; }
.ellida-contact-form label > span { display: block; margin-bottom: 8px; font-size: 12px; }
.ellida-contact-form input[type="text"],
.ellida-contact-form input[type="email"],
.ellida-contact-form textarea { width: 100%; border: 0; border-radius: 18px; background: var(--ellida-cream); color: var(--ellida-navy); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .3s ease; }
.ellida-contact-form input[type="text"],
.ellida-contact-form input[type="email"] { min-height: 48px; padding: 0 17px; }
.ellida-contact-form textarea { min-height: 190px; padding: 17px; resize: vertical; }
.ellida-contact-form input:focus,
.ellida-contact-form textarea:focus { outline-color: var(--ellida-deep); }
.ellida-contact-form__privacy { display: flex !important; align-items: flex-start; gap: 9px; font-size: 11px; }
.ellida-contact-form__privacy input { margin-top: 2px; }
.ellida-contact-form__privacy span { margin: 0 !important; }
.ellida-contact-form .ellida-btn { display: flex; margin: 0 auto; min-width: 116px; }
.ellida-honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }
.ellida-form-status { min-height: 24px; margin: 0 0 10px; text-align: center; font-size: 13px; }
.ellida-quote { padding-top: clamp(75px, 8vw, 140px); text-align: center; }
.ellida-quote img { width: min(100%, 940px); margin: 0 auto; }
/* Footer */
.ellida-footer { padding: 48px 0; background: var(--ellida-deep); color: #fff; border-radius: 10px 10px 0 0; }
.ellida-footer__grid { display: grid; grid-template-columns: 260px repeat(3, 1fr); gap: 50px; align-items: start; }
.ellida-footer__logo { width: 170px; filter: brightness(0) invert(1); opacity: .82; }
.ellida-footer__grid > div { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.ellida-footer__grid strong { font-size: 15px; }
/* Dialog */
.ellida-help-dialog { width: min(760px, calc(100% - 38px)); max-height: min(80vh, 760px); padding: 0; border: 0; border-radius: 35px; background: var(--ellida-card); color: #fff; box-shadow: 0 28px 90px rgba(0,0,0,.35); overflow: visible; opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .4s var(--ellida-ease), transform .4s var(--ellida-ease), overlay .4s allow-discrete, display .4s allow-discrete; }
.ellida-help-dialog[open] { opacity: 1; transform: none; }
@starting-style { .ellida-help-dialog[open] { opacity: 0; transform: translateY(22px) scale(.985); } }
.ellida-help-dialog::backdrop { background: rgba(26, 39, 55, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease, overlay .4s allow-discrete, display .4s allow-discrete; }
.ellida-help-dialog[open]::backdrop { opacity: 1; }
@starting-style { .ellida-help-dialog[open]::backdrop { opacity: 0; } }
.ellida-help-dialog__body { padding: clamp(38px, 6vw, 78px); }
.ellida-help-dialog h2 { margin-bottom: 28px; font-size: clamp(32px, 4vw, 56px); line-height: 1.06; }
.ellida-help-dialog p { margin-bottom: 25px; font-size: clamp(16px, 1.5vw, 21px); }
.ellida-help-dialog__close { position: absolute; z-index: 2; right: 18px; top: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; font-size: 30px; cursor: pointer; }
.ellida-help-dialog__close:hover,
.ellida-help-dialog__close:focus-visible { background: rgba(255,255,255,.20); outline: none; }
/* Editorial reveals */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ellida-ease), transform .85s var(--ellida-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Laptop */
@media (max-width: 1350px) {
:root { --ellida-header-h: 128px; }
.ellida-shell { width: min(calc(100% - 64px), 1240px); }
.ellida-header__inner { grid-template-columns: 200px minmax(470px, 1fr) auto; gap: 25px; }
.ellida-logo { width: 175px; }
.ellida-nav { min-height: 58px; }
.ellida-booking { min-height: 58px; padding-inline: 24px; }
.ellida-story__content,
.ellida-story__about { left: 52%; width: 43%; }
.ellida-approach__grid { grid-template-columns: .9fr 1.1fr; }
.ellida-services-grid[data-expanded="true"] { grid-template-columns: 185px repeat(3, minmax(0, 1fr)) 185px; gap: 25px; }
}
/* Tablet */
@media (max-width: 1024px) {
:root { --ellida-header-h: 94px; }
.ellida-shell { width: min(calc(100% - 44px), 920px); }
.ellida-header__inner { grid-template-columns: 150px 1fr auto; gap: 18px; }
.ellida-logo { width: 140px; }
.ellida-nav { min-height: 52px; padding: 0 8px; }
.ellida-nav a { font-size: 14px; }
.ellida-booking { min-height: 52px; padding: 0 17px; font-size: 14px; }
.ellida-story { height: 155vh; min-height: 1050px; }
.ellida-story__sticky { min-height: 560px; }
.ellida-story__content,
.ellida-story__about { left: 51%; width: 45%; }
.ellida-story__hero h1 { font-size: clamp(38px, 5vw, 56px); margin-bottom: 22px; }
.ellida-story__hero p { font-size: 15px; }
.ellida-story__about { padding: 34px; border-radius: 42px; }
.ellida-story__about p { font-size: 16px; margin-bottom: 18px; }
.ellida-approach__grid { grid-template-columns: 1fr; }
.ellida-approach__copy { max-width: 760px; }
.ellida-approach__visual { min-height: 560px; }
.ellida-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ellida-services-grid[data-expanded="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; min-height: 0; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card { grid-column: auto !important; grid-row: auto !important; min-height: 220px; }
.ellida-services-grid[data-expanded="true"] .ellida-service-detail { grid-column: 1 / -1; grid-row: auto; min-height: 560px; order: 20; }
.ellida-help__grid { grid-template-columns: 1fr; }
.ellida-help__copy { max-width: 760px; }
.ellida-process-map { min-height: 540px; }
.ellida-process-step { width: 22%; }
.ellida-process-step p { padding-inline: 10px; }
.ellida-process-center { width: 34%; top: 47%; }
.ellida-contact__grid { grid-template-columns: .85fr 1.15fr; gap: 45px; }
.ellida-footer__grid { grid-template-columns: 190px repeat(3, 1fr); gap: 25px; }
}
/* Mobile */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
:root { --ellida-header-h: 82px; }
.ellida-shell { width: min(calc(100% - 34px), 620px); }
.ellida-section { padding: 78px 0; }
.ellida-header { height: var(--ellida-header-h); }
.ellida-header__inner { grid-template-columns: 1fr auto; }
.ellida-logo { width: 128px; }
.ellida-booking { display: none; }
.ellida-menu-toggle { display: grid; place-content: center; gap: 4px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--ellida-navy); cursor: pointer; }
.ellida-menu-toggle span:not(.screen-reader-text) { width: 21px; height: 2px; background: #fff; transition: transform .35s var(--ellida-ease), opacity .35s ease; }
.ellida-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ellida-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ellida-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.ellida-nav { position: fixed; top: 74px; left: 17px; right: 17px; display: grid; grid-template-columns: 1fr; height: auto; min-height: 0; padding: 18px; border-radius: 28px; box-shadow: var(--ellida-shadow); opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .35s var(--ellida-ease), transform .35s var(--ellida-ease); }
.ellida-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
.ellida-nav a { height: 48px; font-size: 17px; }
.ellida-nav a::after { bottom: 5px; }
.ellida-story { height: auto; min-height: 0; }
.ellida-story__sticky { position: relative; top: 0; height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; background: #f6f7f8; }
.ellida-story__photo { position: relative; width: 100%; height: 455px; object-fit: cover; object-position: 28% 34%; z-index: 0; }
.ellida-story__wash { display: none; }
.ellida-story__content,
.ellida-story__about { position: relative; left: auto; top: auto; width: auto; transform: none !important; }
.ellida-story__hero { order: 2; padding: 45px 22px 60px; background: var(--ellida-cream); opacity: 1 !important; pointer-events: auto !important; }
.ellida-story__hero h1 { font-size: clamp(40px, 12vw, 58px); }
.ellida-story__hero p { font-size: 16px; }
.ellida-story__about { order: 3; margin: 0 17px 45px; padding: 34px 25px; border-radius: 38px; opacity: 1 !important; pointer-events: auto !important; }
.ellida-story__about-title { margin-bottom: 22px; }
.ellida-story__about p { font-size: 16px; }
.ellida-intro__title { width: 100%; }
.ellida-approach__copy h2 { font-size: 43px; }
.ellida-approach__visual { min-height: 0; display: grid; gap: 22px; padding-top: 30px; }
.ellida-approach__visual > img { position: absolute; inset: 0; opacity: .20; }
.ellida-approach-card { position: relative; inset: auto !important; width: 100%; padding: 14px; }
.ellida-approach-card h3 { max-width: 310px; margin-inline: auto; }
.ellida-services__heading h2 { font-size: 43px; }
.ellida-services-grid,
.ellida-services-grid[data-expanded="true"] { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
.ellida-service-card,
.ellida-services-grid[data-expanded="true"] .ellida-service-card { min-height: 220px; }
.ellida-services-grid[data-expanded="true"] .ellida-service-detail { grid-column: 1; min-height: 0; padding: 44px 26px; order: 20; }
.ellida-service-detail h3 { font-size: 36px; }
.ellida-service-detail p { font-size: 16px; }
.ellida-service-detail .ellida-btn { align-self: stretch; }
.ellida-help__title { width: 100%; }
.ellida-help__copy p { font-size: 16px; }
.ellida-process__heading h2 { font-size: 40px; }
.ellida-process-map { min-height: 0; display: grid; gap: 20px; padding-left: 18px; }
.ellida-process-map__thread { left: 0; right: auto; width: 4px; top: 0; bottom: 0; background: var(--ellida-pale); border-radius: 4px; }
.ellida-process-map__thread img { display: none; }
.ellida-process-step,
.ellida-process-center { position: relative; inset: auto !important; width: 100%; transform: none !important; text-align: left; padding: 10px 0 10px 18px; }
.ellida-process-step h3 { justify-content: flex-start; min-width: 0; }
.ellida-process-center { padding: 25px; text-align: center; }
.ellida-process-map.is-drawing .ellida-process-center { animation-name: ellida-map-card-in; }
.ellida-contact__grid { grid-template-columns: 1fr; }
.ellida-contact__copy { max-width: 500px; }
.ellida-contact-form { padding: 28px 20px; }
.ellida-contact-form__row { grid-template-columns: 1fr; gap: 0; }
.ellida-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.ellida-footer__logo { width: 130px; }
}
@media (max-width: 430px) {
.ellida-shell { width: calc(100% - 28px); }
.ellida-story__photo { height: 390px; object-position: 38% center; }
.ellida-story__hero { padding-inline: 18px; }
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-process__heading h2 { font-size: 36px; }
.ellida-footer__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.ellida-landing *,
.ellida-landing *::before,
.ellida-landing *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
[data-reveal] { opacity: 1; transform: none; }
.ellida-approach__visual > img,
.ellida-process-map__thread img { clip-path: inset(0 0 0 0); }
}
/* ==========================================================
Ellida 3.2.0 — layout definitivo su base grafica originale
========================================================== */
:root {
--ellida-header-h: 96px;
--ellida-header-gap: 14px;
--ellida-section-title: clamp(44px, 4.4vw, 56px);
}
.ellida-shell { width: min(calc(100% - 48px), 1080px) !important; }
#ellida-main { padding-top: calc(var(--ellida-header-h) + (var(--ellida-header-gap) * 2)) !important; }
.ellida-section { padding: 76px 0 !important; }
/* Header: mantiene la versione approvata e si compatta solo dopo lo scroll. */
.ellida-header {
position: fixed !important;
top: var(--ellida-header-gap) !important;
left: 50% !important;
right: auto !important;
width: min(1080px, calc(100% - 32px)) !important;
height: var(--ellida-header-h) !important;
transform: translateX(-50%) !important;
border-radius: 18px !important;
background: rgba(244,239,235,.985) !important;
box-shadow: 0 12px 34px rgba(47,65,87,.09) !important;
transition: height .34s var(--ellida-ease), box-shadow .34s ease, background-color .34s ease !important;
}
.ellida-header__inner {
grid-template-columns: 142px minmax(0,1fr) auto !important;
gap: 22px !important;
padding-inline: 18px !important;
transition: grid-template-columns .34s var(--ellida-ease), gap .34s var(--ellida-ease) !important;
}
.ellida-logo { width: 132px !important; transition: width .34s var(--ellida-ease) !important; }
.ellida-nav { min-height: 52px !important; transition: min-height .34s var(--ellida-ease) !important; }
.ellida-nav a { font-size: 15px !important; }
.ellida-booking {
min-height: 52px !important;
padding-inline: 22px !important;
font-size: 15px !important;
transition: min-height .34s var(--ellida-ease), padding .34s var(--ellida-ease), transform .34s var(--ellida-ease), background-color .34s ease !important;
}
.ellida-header.is-scrolled {
height: 78px !important;
background: rgba(244,239,235,.965) !important;
backdrop-filter: blur(12px);
box-shadow: 0 12px 30px rgba(47,65,87,.13) !important;
}
.ellida-header.is-scrolled .ellida-header__inner { grid-template-columns: 120px minmax(0,1fr) auto !important; gap: 16px !important; }
.ellida-header.is-scrolled .ellida-logo { width: 108px !important; }
.ellida-header.is-scrolled .ellida-nav { min-height: 44px !important; }
.ellida-header.is-scrolled .ellida-booking { min-height: 44px !important; padding-inline: 18px !important; }
body.admin-bar .ellida-header { top: calc(32px + var(--ellida-header-gap)) !important; }
body.admin-bar #ellida-main { padding-top: calc(var(--ellida-header-h) + 32px + (var(--ellida-header-gap) * 2)) !important; }
/* Hero: fotografia originale 2:1, titolo sempre Montserrat Bold. */
.ellida-story {
height: 154vh !important;
min-height: 1030px !important;
background: #f6f7f8 !important;
}
.ellida-story__sticky {
top: calc(var(--ellida-header-h) + (var(--ellida-header-gap) * 2)) !important;
width: 100% !important;
height: min(610px, calc(100svh - 126px)) !important;
min-height: 540px !important;
margin-inline: auto !important;
background: #f6f7f8 !important;
}
.ellida-story__photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 24% 42% !important;
background: #f6f7f8 !important;
}
.ellida-story__wash {
background: linear-gradient(90deg, rgba(246,247,248,.03) 0 37%, rgba(246,247,248,.20) 47%, rgba(246,247,248,.58) 64%, rgba(246,247,248,.86) 100%) !important;
}
.ellida-story__content,
.ellida-story__about {
left: 54.2% !important;
top: 50% !important;
width: min(39%, 455px) !important;
}
.ellida-landing .ellida-story__hero h1 {
margin-bottom: 22px !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: clamp(52px, 5.2vw, 64px) !important;
font-weight: 800 !important;
line-height: 1.02 !important;
letter-spacing: -.035em !important;
}
.ellida-story__hero p { margin-bottom: 24px !important; font-size: 16px !important; line-height: 1.42 !important; }
.ellida-story__about { padding: 30px 34px !important; border-radius: 38px !important; }
.ellida-story__about p { margin-bottom: 20px !important; font-size: 17px !important; line-height: 1.42 !important; }
.ellida-story__about-title { width: min(100%, 340px) !important; margin-bottom: 20px !important; }
/* Titoli principali coerenti con la grafica originale. */
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-process__heading h2 {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: var(--ellida-section-title) !important;
line-height: 1.05 !important;
letter-spacing: -.035em !important;
}
/* Il mio approccio: SVG 13 proporzionato e card collocate nei vuoti reali del disegno. */
.ellida-approach__grid {
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
gap: 42px !important;
align-items: center !important;
}
.ellida-approach__copy p { font-size: 15px !important; line-height: 1.46 !important; }
@media (min-width: 1200px) {
.ellida-approach .ellida-shell {
width: min(calc(100% - 80px), 1360px) !important;
}
.ellida-approach__grid {
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
gap: 40px !important;
}
}
.ellida-approach__visual {
position: relative !important;
min-height: 0 !important;
aspect-ratio: 721.25 / 512.86 !important;
overflow: hidden !important;
}
.ellida-approach__visual > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
opacity: 0 !important;
clip-path: none !important;
transform: scale(.992) !important;
}
.ellida-line-drawing.is-drawing > img {
animation: ellida-approach-svg-in 1.45s var(--ellida-ease) forwards !important;
}
@keyframes ellida-approach-svg-in {
from { opacity: 0; transform: scale(.992); }
to { opacity: .98; transform: scale(1); }
}
.ellida-approach-card {
position: absolute !important;
width: 34% !important;
max-width: 255px !important;
transform: translateX(-50%) !important;
text-align: center !important;
}
.ellida-approach-card h3 {
margin: 0 0 5px !important;
padding: 7px 14px !important;
border-radius: 999px !important;
font-size: clamp(17px, 1.7vw, 22px) !important;
font-weight: 800 !important;
}
.ellida-approach-card p { margin: 0 !important; padding: 9px 12px 10px !important; border-radius: 18px !important; background: rgba(244,239,235,.96) !important; font-size: 12px !important; line-height: 1.34 !important; }
.ellida-approach-card--one { left: 78% !important; top: 13% !important; right: auto !important; bottom: auto !important; }
.ellida-approach-card--two { left: 24.5% !important; top: 27% !important; right: auto !important; bottom: auto !important; }
.ellida-approach-card--three { left: 54.5% !important; top: 60% !important; right: auto !important; bottom: auto !important; }
/* Servizi: titolo invariato; nello stato aperto tre card a sinistra, pannello centrale, tre card a destra. */
.ellida-services { padding-block: 66px !important; }
.ellida-services__expanded-title { display: none !important; }
.ellida-services__compact-title,
.ellida-services.is-expanded .ellida-services__compact-title { display: block !important; }
.ellida-services__heading { max-width: 740px !important; margin-bottom: 42px !important; }
.ellida-services__heading h2 { margin-bottom: 22px !important; }
.ellida-services__heading p { max-width: 430px !important; font-size: 16px !important; line-height: 1.42 !important; }
.ellida-services-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
gap: 20px !important;
min-height: 0 !important;
}
.ellida-service-card {
min-height: 185px !important;
padding: 22px 20px 18px !important;
border-radius: 30px !important;
}
.ellida-service-card__icon { width: 46px !important; height: 46px !important; margin: 0 auto 10px !important; }
.ellida-service-card strong { margin-bottom: 10px !important; font-size: 17px !important; }
.ellida-service-card > span:not(.ellida-service-card__icon) { font-size: 12px !important; line-height: 1.34 !important; }
.ellida-service-card small { padding: 6px 12px !important; font-size: 10px !important; }
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 180px minmax(0,1fr) 180px !important;
grid-template-rows: repeat(3, minmax(146px, auto)) !important;
gap: 18px 22px !important;
min-height: 500px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
display: flex !important;
grid-column: 2 !important;
grid-row: 1 / 4 !important;
min-height: 478px !important;
padding: 26px 32px 30px !important;
border-radius: 38px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 146px !important;
padding: 16px 14px 14px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card--left-1 { grid-column: 1 !important; grid-row: 1 !important; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--left-2 { grid-column: 1 !important; grid-row: 2 !important; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--left-3 { grid-column: 1 !important; grid-row: 3 !important; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--right-1 { grid-column: 3 !important; grid-row: 1 !important; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--right-2 { grid-column: 3 !important; grid-row: 2 !important; }
.ellida-services-grid[data-expanded="true"] .ellida-service-card--right-3 { grid-column: 3 !important; grid-row: 3 !important; }
.ellida-service-detail__icon { width: 54px !important; height: 54px !important; margin: 0 auto 10px !important; }
.ellida-service-detail h3 {
margin-bottom: 22px !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: clamp(30px, 3.5vw, 42px) !important;
font-weight: 800 !important;
text-align: center !important;
}
.ellida-service-detail p { margin-bottom: 18px !important; font-size: 15px !important; line-height: 1.43 !important; }
.ellida-service-detail > strong { font-size: 17px !important; }
.ellida-service-detail ul { margin-bottom: 24px !important; font-size: 15px !important; line-height: 1.4 !important; }
.ellida-service-detail .ellida-btn { margin-top: auto !important; align-self: flex-start !important; }
/* Come posso aiutarti: popup contenuto. */
.ellida-help-dialog { width: min(650px, calc(100% - 44px)) !important; max-height: min(76vh, 620px) !important; }
.ellida-help-dialog__body { padding: clamp(34px, 5vw, 54px) !important; }
.ellida-help-dialog h2 { font-size: clamp(32px, 4vw, 48px) !important; }
/* Come funziona: SVG 12, la linea nasce dal groviglio e i testi restano sempre leggibili. */
.ellida-process { overflow: visible !important; padding-bottom: 12px !important; }
.ellida-process__heading { position: relative; z-index: 3; }
.ellida-process__heading h2 { margin-bottom: 30px !important; }
.ellida-process-map {
position: relative !important;
min-height: 0 !important;
aspect-ratio: 971.51 / 690.43 !important;
overflow: visible !important;
}
.ellida-process-map__thread {
position: absolute !important;
inset: 0 !important;
overflow: visible !important;
}
.ellida-process-map__thread svg {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
.ellida-process-map__thread path {
fill: none !important;
stroke: #66869a !important;
stroke-width: 4.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
vector-effect: non-scaling-stroke !important;
opacity: 1 !important;
}
.ellida-process-map.is-drawing .ellida-process-map__thread path { stroke-dashoffset: 0 !important; }
.ellida-process-step,
.ellida-process-center {
position: absolute !important;
z-index: 2 !important;
opacity: 0 !important;
text-align: center !important;
}
.ellida-process-step { width: 18% !important; }
.ellida-process-step h3 {
display: inline-flex !important;
min-width: 138px !important;
margin: 0 0 8px !important;
padding: 7px 13px !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 600 !important;
}
.ellida-process-step p {
display: inline-block !important;
margin: 0 !important;
padding: 8px 12px 10px !important;
border-radius: 18px !important;
background: rgba(244,239,235,.96) !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
.ellida-process-step--one { left: 16% !important; top: 22% !important; }
.ellida-process-step--two { left: 37% !important; top: 21% !important; }
.ellida-process-step--three { left: 60.5% !important; top: 21% !important; }
.ellida-process-step--four { left: 84% !important; top: 20.5% !important; right: auto !important; }
.ellida-process-center {
left: 50% !important;
top: 50% !important;
width: 28% !important;
max-width: 340px !important;
padding: 22px 26px !important;
border-radius: 30px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
}
.ellida-process-center h3 { margin-bottom: 6px !important; font-size: 22px !important; }
.ellida-process-center p { margin: 0 !important; font-size: 13px !important; line-height: 1.38 !important; }
.ellida-process-map.is-drawing .ellida-process-step,
.ellida-process-map.is-drawing .ellida-process-center { animation: ellida-map-card-in .8s var(--ellida-ease) both !important; }
.ellida-process-map.is-drawing .ellida-process-step--one { animation-delay: .56s !important; }
.ellida-process-map.is-drawing .ellida-process-step--two { animation-delay: 1.14s !important; }
.ellida-process-map.is-drawing .ellida-process-step--three { animation-delay: 1.72s !important; }
.ellida-process-map.is-drawing .ellida-process-step--four { animation-delay: 2.32s !important; }
.ellida-process-map.is-drawing .ellida-process-center { animation-name: ellida-map-center-in !important; animation-delay: 2.7s !important; }
/* Contatti: proporzioni originali, pannello azzurro grande e privacy sotto al pannello. */
.ellida-contact { margin-top: -42px !important; padding-top: 0 !important; padding-bottom: 64px !important; }
.ellida-contact__grid {
grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr) !important;
gap: 44px !important;
align-items: start !important;
}
.ellida-contact__copy { padding-top: 10px !important; }
.ellida-contact__title { width: min(100%, 360px) !important; margin: 0 0 18px !important; }
.ellida-contact__copy p { max-width: 390px !important; font-size: 16px !important; line-height: 1.42 !important; }
.ellida-contact-form {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
.ellida-contact-form__panel {
padding: 24px 28px 26px !important;
border-radius: 26px !important;
background: var(--ellida-pale) !important;
}
.ellida-contact-form__panel h2 {
margin-bottom: 18px !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: clamp(27px, 3vw, 34px) !important;
font-weight: 800 !important;
line-height: 1.08 !important;
text-align: center !important;
}
.ellida-contact-form__row { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
.ellida-contact-form label { margin-bottom: 17px !important; }
.ellida-contact-form label > span { margin-bottom: 7px !important; font-size: 11px !important; }
.ellida-contact-form input[type="text"] {
min-height: 44px !important;
padding: 0 14px !important;
border-radius: 22px !important;
}
.ellida-contact-form textarea {
min-height: 176px !important;
padding: 14px !important;
border-radius: 18px !important;
font-size: 13px !important;
}
.ellida-contact-form textarea::placeholder { color: rgba(47,65,87,.72) !important; font-weight: 600 !important; opacity: 1 !important; }
.ellida-contact-form__message { margin-bottom: 0 !important; }
.ellida-contact-form__privacy {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
margin: 9px 0 8px 4px !important;
font-size: 10px !important;
line-height: 1.25 !important;
}
.ellida-contact-form__privacy input { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; margin: 0 !important; }
.ellida-contact-form__privacy span { margin: 0 !important; font-size: inherit !important; }
.ellida-contact-form .ellida-btn { min-width: 116px !important; margin: 0 auto !important; }
.ellida-form-status { margin-bottom: 4px !important; }
/* Footer: logo originale, stessa immagine dell'header. */
.ellida-footer__logo { width: 132px !important; height: auto !important; filter: none !important; opacity: 1 !important; }
@media (max-width: 1024px) {
.ellida-shell { width: min(calc(100% - 38px), 920px) !important; }
.ellida-header__inner { grid-template-columns: 126px minmax(0,1fr) auto !important; gap: 14px !important; }
.ellida-logo { width: 116px !important; }
.ellida-nav { min-height: 46px !important; }
.ellida-nav a { font-size: 13px !important; }
.ellida-booking { min-height: 46px !important; padding-inline: 15px !important; font-size: 12px !important; }
.ellida-story { height: 145vh !important; min-height: 900px !important; }
.ellida-story__sticky { height: min(570px, calc(100svh - 118px)) !important; min-height: 500px !important; }
.ellida-story__content,
.ellida-story__about { left: 52% !important; width: 45% !important; }
.ellida-story__hero h1 { font-size: clamp(40px, 5.5vw, 50px) !important; }
.ellida-approach__grid { grid-template-columns: 1fr !important; }
.ellida-approach__copy { max-width: 650px !important; }
.ellida-approach__visual { width: min(100%, 650px) !important; margin: 0 auto !important; }
.ellida-services-grid[data-expanded="true"] { grid-template-columns: 150px minmax(0,1fr) 150px !important; gap: 17px !important; }
.ellida-services-grid[data-expanded="true"] .ellida-service-detail { min-height: 620px !important; padding: 30px !important; }
.ellida-process-step { width: 21% !important; }
.ellida-process-step h3 { min-width: 112px !important; font-size: 13px !important; }
.ellida-process-step p { font-size: 11px !important; }
.ellida-contact__grid { grid-template-columns: .78fr 1.22fr !important; gap: 30px !important; }
.ellida-contact-form__panel { padding: 22px 22px 24px !important; }
}
@media (max-width: 899px) {
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
grid-template-rows: auto !important;
min-height: 0 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
grid-column: auto !important;
grid-row: auto !important;
min-height: 170px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
grid-column: 1 / -1 !important;
grid-row: auto !important;
order: 20 !important;
min-height: 0 !important;
}
.ellida-contact__grid { grid-template-columns: 1fr !important; gap: 36px !important; }
.ellida-contact__copy { padding-top: 0 !important; }
.ellida-contact__title { width: min(100%, 390px) !important; }
}
@media (max-width: 782px) {
body.admin-bar .ellida-header { top: calc(46px + var(--ellida-header-gap)) !important; }
body.admin-bar #ellida-main { padding-top: calc(var(--ellida-header-h) + 46px + (var(--ellida-header-gap) * 2)) !important; }
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
:root { --ellida-header-h: 70px; --ellida-header-gap: 8px; }
.ellida-shell { width: min(calc(100% - 28px), 620px) !important; }
.ellida-section { padding: 58px 0 !important; }
.ellida-header { width: calc(100% - 18px) !important; border-radius: 15px !important; }
.ellida-header__inner { grid-template-columns: 1fr auto !important; }
.ellida-logo { width: 104px !important; }
.ellida-header.is-scrolled { height: 66px !important; }
.ellida-nav { top: calc(var(--ellida-header-h) + var(--ellida-header-gap) + 8px) !important; }
.ellida-story { height: auto !important; min-height: 0 !important; }
.ellida-story__sticky { position: relative !important; top: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow: visible !important; }
.ellida-story__photo { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 2 / 1 !important; object-fit: cover !important; object-position: 28% 40% !important; order: 1 !important; }
.ellida-story__wash { display: none !important; }
.ellida-story__content,
.ellida-story__about { position: relative !important; left: auto !important; top: auto !important; width: calc(100% - 28px) !important; margin-inline: auto !important; transform: none !important; }
.ellida-story__hero { order: 2 !important; padding: 30px 0 42px !important; background: var(--ellida-cream) !important; opacity: 1 !important; pointer-events: auto !important; }
.ellida-story__hero h1 { font-size: 38px !important; }
.ellida-story__about { order: 3 !important; opacity: 1 !important; pointer-events: auto !important; margin-bottom: 34px !important; }
.ellida-story.is-about .ellida-story__hero { opacity: 1 !important; transform: none !important; }
.ellida-approach__visual { width: 100% !important; }
.ellida-approach-card { max-width: 150px !important; }
.ellida-approach-card h3 { font-size: 16px !important; }
.ellida-approach-card p { font-size: 10px !important; }
.ellida-services-grid { grid-template-columns: 1fr !important; }
.ellida-service-card { min-height: 180px !important; }
.ellida-process-map { aspect-ratio: auto !important; display: grid !important; gap: 18px !important; }
.ellida-process-map__thread { display: none !important; }
.ellida-process-step,
.ellida-process-center {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
transform: none !important;
opacity: 1 !important;
text-align: left !important;
}
.ellida-process-step { padding-left: 14px !important; border-left: 3px solid var(--ellida-pale) !important; }
.ellida-process-step h3 { min-width: 0 !important; font-size: 16px !important; }
.ellida-process-step p { font-size: 14px !important; }
.ellida-process-center { padding: 22px !important; text-align: center !important; }
.ellida-contact { margin-top: 0 !important; padding-top: 44px !important; }
.ellida-contact-form__row { grid-template-columns: 1fr !important; gap: 0 !important; }
.ellida-contact-form__panel { padding: 24px 20px !important; }
.ellida-contact-form__privacy { align-items: flex-start !important; font-size: 10px !important; }
.ellida-footer__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 430px) {
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-process__heading h2 { font-size: 34px !important; }
.ellida-footer__grid { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
.ellida-approach__visual > img,
.ellida-process-map__thread svg path,
.ellida-process-step,
.ellida-process-center { opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important; }
}
/* Anchor offset per header fisso. */
.ellida-story,
.ellida-section { scroll-margin-top: 116px; }
.ellida-process-step--one { left: 16% !important; }
@media (max-width: 1024px) {
.ellida-story,
.ellida-section { scroll-margin-top: 100px; }
.ellida-process-step--one { left: 16% !important; }
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-story,
.ellida-section { scroll-margin-top: 82px; }
}
/* Transizioni SVG affidabili: niente conflitti tra opacity !important e keyframe. */
.ellida-approach__visual > img {
transition: opacity 1.45s var(--ellida-ease), transform 1.45s var(--ellida-ease) !important;
animation: none !important;
}
.ellida-line-drawing.is-drawing > img,
.ellida-approach__visual.is-visible > img {
opacity: .98 !important;
transform: scale(1) !important;
animation: none !important;
}
.ellida-process-map__thread svg path {
transition: stroke-dashoffset 3.25s cubic-bezier(.22,1,.36,1) !important;
}
.ellida-process-step,
.ellida-process-center {
transition: none !important;
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-approach__visual {
display: grid !important;
gap: 16px !important;
aspect-ratio: auto !important;
padding: 22px 0 !important;
}
.ellida-approach__visual > img {
position: absolute !important;
inset: 0 !important;
opacity: .16 !important;
}
.ellida-approach-card {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
transform: none !important;
padding: 10px 12px !important;
}
.ellida-approach-card h3 {
width: min(100%, 285px) !important;
margin-inline: auto !important;
font-size: 18px !important;
}
.ellida-approach-card p {
max-width: 310px !important;
font-size: 13px !important;
}
}
/* ==========================================================
Ellida 3.2.1 — allineamento definitivo dei due disegni
========================================================== */
/* Il mio approccio: posizioni identiche al riferimento inviato,
con il tracciato dietro ai testi e mai sopra le parole. */
.ellida-approach__visual {
overflow: hidden !important;
}
.ellida-approach__visual > img {
opacity: 0 !important;
transform: scale(1) !important;
}
.ellida-line-drawing.is-drawing > img,
.ellida-approach__visual.is-visible > img {
opacity: .96 !important;
}
.ellida-approach-card {
z-index: 4 !important;
width: 34% !important;
max-width: 245px !important;
}
.ellida-approach-card h3 {
margin: 0 0 4px !important;
padding: 7px 16px 8px !important;
border-radius: 999px !important;
background: var(--ellida-pale) !important;
color: var(--ellida-navy) !important;
font-size: clamp(19px, 1.85vw, 25px) !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: 0 0 0 5px var(--ellida-cream) !important;
}
.ellida-approach-card p {
display: inline-block !important;
max-width: 225px !important;
margin: 4px 0 0 !important;
padding: 5px 10px 7px !important;
border-radius: 14px !important;
background: var(--ellida-cream) !important;
box-shadow: 0 0 0 5px var(--ellida-cream) !important;
font-size: 12px !important;
line-height: 1.28 !important;
}
.ellida-approach-card--one {
left: 69% !important;
top: 18% !important;
right: auto !important;
bottom: auto !important;
}
.ellida-approach-card--two {
left: 43% !important;
top: 47% !important;
right: auto !important;
bottom: auto !important;
}
.ellida-approach-card--three {
left: 59% !important;
top: 76% !important;
right: auto !important;
bottom: auto !important;
}
/* Come funziona: i quattro testi sono fissi; una sola linea nasce
dal groviglio e viene disegnata lentamente. */
.ellida-process-map__thread {
z-index: 0 !important;
}
.ellida-process-map__thread svg {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
.ellida-process-tangle {
opacity: 1 !important;
}
.ellida-process-path {
fill: none !important;
stroke: #567c8d !important;
stroke-width: 4.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
vector-effect: non-scaling-stroke !important;
opacity: 0;
transition: stroke-dashoffset 6.2s cubic-bezier(.22,.72,.25,1) !important;
}
.ellida-process-map.is-drawing .ellida-process-path {
stroke-dashoffset: 0 !important;
}
.ellida-process-step {
opacity: 1 !important;
animation: none !important;
transition: none !important;
transform: translate(-50%, -50%) !important;
}
.ellida-process-map.is-drawing .ellida-process-step {
opacity: 1 !important;
animation: none !important;
transition: none !important;
transform: translate(-50%, -50%) !important;
}
.ellida-process-step h3,
.ellida-process-step p {
position: relative !important;
z-index: 3 !important;
}
.ellida-process-step p {
background: var(--ellida-cream) !important;
box-shadow: 0 0 0 5px var(--ellida-cream) !important;
}
.ellida-process-center {
opacity: 0 !important;
transform: translate(-50%, -50%) translateY(12px) !important;
animation: none !important;
transition: none !important;
}
.ellida-process-map.is-drawing .ellida-process-center {
animation: ellida-process-center-arrival .72s var(--ellida-ease) 4.65s forwards !important;
}
@keyframes ellida-process-center-arrival {
from { opacity: 0; transform: translate(-50%, -50%) translateY(12px); }
to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@media (max-width: 1024px) {
.ellida-approach-card--one { left: 69% !important; top: 18% !important; }
.ellida-approach-card--two { left: 43% !important; top: 47% !important; }
.ellida-approach-card--three { left: 59% !important; top: 76% !important; }
.ellida-process-path { transition-duration: 5.8s !important; }
.ellida-process-map.is-drawing .ellida-process-center { animation-delay: 4.3s !important; }
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-map__thread { display: none !important; }
.ellida-process-step,
.ellida-process-center {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.ellida-approach-card {
width: 100% !important;
max-width: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-path { stroke-dashoffset: 0 !important; transition: none !important; }
.ellida-process-center { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
}
/* Correzione sincronizzazione 3.2.1: testi fissi, centro solo all'arrivo della linea. */
.ellida-process-step--one { top: 25% !important; }
.ellida-process-step--two { top: 24.5% !important; }
.ellida-process-step--three { top: 24.5% !important; }
.ellida-process-step--four { top: 24% !important; }
.ellida-process-map.is-drawing .ellida-process-center {
opacity: 0 !important;
animation: none !important;
transform: translate(-50%, -50%) translateY(12px) !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: translate(-50%, -50%) translateY(0) !important;
transition: opacity .72s var(--ellida-ease), transform .72s var(--ellida-ease) !important;
}
/* ==========================================================
Ellida 3.2.2 — rifiniture mirate richieste
Solo: Il mio approccio, Come funziona, pannello servizi.
========================================================== */
/* IL MIO APPROCCIO — un unico tracciato continuo sotto le card. */
.ellida-approach__visual {
overflow: hidden !important;
}
.ellida-approach__visual > img {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
opacity: 0 !important;
}
.ellida-line-drawing.is-drawing > img,
.ellida-approach__visual.is-visible > img {
opacity: 1 !important;
}
.ellida-approach-card {
width: 34% !important;
max-width: 255px !important;
z-index: 4 !important;
}
.ellida-approach-card h3 {
transition: background-color .42s var(--ellida-ease), color .42s ease, transform .42s var(--ellida-ease), box-shadow .42s ease !important;
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3 {
background: var(--ellida-deep) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.015) !important;
box-shadow: 0 8px 22px rgba(47,65,87,.16), 0 0 0 5px var(--ellida-cream) !important;
}
.ellida-approach-card--one {
left: 72% !important;
top: 20% !important;
}
.ellida-approach-card--two {
left: 42% !important;
top: 48% !important;
}
.ellida-approach-card--three {
left: 65% !important;
top: 72% !important;
}
/* COME FUNZIONA — testi e card centrale sempre visibili; anima solo la singola linea. */
.ellida-process {
padding-bottom: 22px !important;
}
.ellida-process-map {
aspect-ratio: 1000 / 520 !important;
min-height: 0 !important;
}
.ellida-process-map__thread {
inset: 1% 3% 4% 3% !important;
z-index: 0 !important;
}
.ellida-process-map__thread svg {
width: 100% !important;
height: 100% !important;
}
.ellida-process-path {
transition: stroke-dashoffset 7.2s cubic-bezier(.22,.72,.25,1) !important;
}
.ellida-process-step,
.ellida-process-map.is-drawing .ellida-process-step {
opacity: 1 !important;
animation: none !important;
transition: none !important;
transform: translate(-50%, -50%) !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
animation: none !important;
transition: none !important;
transform: translate(-50%, -50%) !important;
}
.ellida-process-step--one { left: 16% !important; top: 30% !important; }
.ellida-process-step--two { left: 38% !important; top: 29.5% !important; }
.ellida-process-step--three { left: 61% !important; top: 29.5% !important; }
.ellida-process-step--four { left: 84% !important; top: 29% !important; }
.ellida-process-center {
left: 50% !important;
top: 69% !important;
width: 30% !important;
max-width: 350px !important;
padding: 21px 26px !important;
}
/* I MIEI SERVIZI — pannello centrale più orizzontale e interamente visibile. */
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 155px minmax(0,1fr) 155px !important;
grid-template-rows: repeat(3, minmax(138px, auto)) !important;
gap: 14px 18px !important;
min-height: 442px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 138px !important;
padding: 12px 13px 11px !important;
border-radius: 25px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card__icon {
width: 36px !important;
height: 36px !important;
margin-bottom: 5px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card strong {
margin-bottom: 6px !important;
font-size: 15px !important;
line-height: 1.05 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 10.5px !important;
line-height: 1.25 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card small {
padding: 5px 10px !important;
font-size: 9px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
min-height: 442px !important;
padding: 22px 30px 24px !important;
justify-content: flex-start !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail__icon {
width: 44px !important;
height: 44px !important;
margin-bottom: 6px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail h3 {
margin-bottom: 15px !important;
font-size: clamp(29px, 3vw, 38px) !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail p {
margin-bottom: 13px !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong {
font-size: 15px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
margin-bottom: 14px !important;
font-size: 13.5px !important;
line-height: 1.32 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
margin-top: auto !important;
}
}
@media (max-width: 1024px) and (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 140px minmax(0,1fr) 140px !important;
min-height: 430px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
min-height: 430px !important;
padding: 20px 25px 22px !important;
}
.ellida-process-center {
top: 68% !important;
width: 34% !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-approach-card--one,
.ellida-approach-card--two,
.ellida-approach-card--three {
left: auto !important;
top: auto !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-path {
stroke-dashoffset: 0 !important;
transition: none !important;
}
}
/* ==========================================================
Ellida 3.2.3 — correzioni puntuali approccio/processo/servizi
========================================================== */
/* IL MIO APPROCCIO
Un solo tracciato continuo. Il tracciato passa sotto le pillole,
così sembra congiungersi esattamente ai riquadri senza coprire testo. */
.ellida-approach__visual {
aspect-ratio: 721.25 / 512.86 !important;
overflow: hidden !important;
}
.ellida-approach__visual > img {
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
opacity: 0 !important;
}
.ellida-line-drawing.is-drawing > img,
.ellida-approach__visual.is-visible > img {
opacity: 1 !important;
}
.ellida-approach-card {
width: 36% !important;
max-width: 260px !important;
z-index: 4 !important;
}
.ellida-approach-card h3 {
position: relative !important;
z-index: 5 !important;
margin: 0 0 8px !important;
padding: 8px 17px !important;
background: var(--ellida-pale) !important;
box-shadow: 0 0 0 6px var(--ellida-cream) !important;
transition: background-color .42s var(--ellida-ease), color .42s ease, transform .42s var(--ellida-ease), box-shadow .42s ease !important;
}
.ellida-approach-card p {
position: relative !important;
z-index: 5 !important;
margin: 0 !important;
padding: 9px 14px 11px !important;
border-radius: 18px !important;
background: rgba(244,239,235,.98) !important;
box-shadow: 0 0 0 5px rgba(244,239,235,.98) !important;
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3 {
background: var(--ellida-deep) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.015) !important;
box-shadow: 0 8px 22px rgba(47,65,87,.16), 0 0 0 6px var(--ellida-cream) !important;
}
.ellida-approach-card--one {
left: 72% !important;
top: 15.2% !important;
}
.ellida-approach-card--two {
left: 42% !important;
top: 45% !important;
}
.ellida-approach-card--three {
left: 65% !important;
top: 79% !important;
}
/* COME FUNZIONA
Disegno grande quanto la reference, senza tagli. Testi e riquadro centrale
fissi; si anima solo un'unica linea, lentamente, dal groviglio. */
.ellida-process {
padding-bottom: 20px !important;
overflow: visible !important;
}
.ellida-process-map {
aspect-ratio: 1000 / 500 !important;
min-height: 0 !important;
overflow: visible !important;
}
.ellida-process-map__thread {
inset: 0 !important;
z-index: 0 !important;
overflow: visible !important;
}
.ellida-process-map__thread svg {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
transform: none !important;
}
.ellida-process-path {
opacity: 1 !important;
transition: stroke-dashoffset 8.4s cubic-bezier(.18,.68,.22,1) !important;
}
.ellida-process-map.is-drawing .ellida-process-path {
stroke-dashoffset: 0 !important;
}
.ellida-process-step,
.ellida-process-map.is-drawing .ellida-process-step,
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
animation: none !important;
transition: none !important;
transform: translate(-50%, -50%) !important;
}
.ellida-process-step {
width: 19% !important;
}
.ellida-process-step h3 {
min-width: 136px !important;
font-size: 15px !important;
}
.ellida-process-step p {
padding: 8px 12px 10px !important;
background: rgba(244,239,235,.98) !important;
box-shadow: 0 0 0 5px rgba(244,239,235,.98) !important;
font-size: 12px !important;
}
.ellida-process-step--one {
left: 15.5% !important;
top: 31% !important;
}
.ellida-process-step--two {
left: 38% !important;
top: 30.5% !important;
}
.ellida-process-step--three {
left: 61% !important;
top: 30.5% !important;
}
.ellida-process-step--four {
left: 84% !important;
top: 30% !important;
right: auto !important;
}
.ellida-process-center {
left: 50% !important;
top: 68% !important;
width: 30% !important;
max-width: 350px !important;
padding: 21px 26px !important;
}
/* I MIEI SERVIZI
Il dettaglio si sviluppa orizzontalmente. I benefici e la CTA occupano
la colonna destra; il pannello termina subito dopo la CTA. */
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 155px minmax(0,1fr) 155px !important;
grid-template-rows: repeat(3, minmax(132px, auto)) !important;
gap: 14px 18px !important;
min-height: 0 !important;
align-items: start !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 132px !important;
padding: 12px 13px 11px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
display: grid !important;
grid-template-columns: minmax(0,1.24fr) minmax(230px,.76fr) !important;
grid-template-rows: auto auto auto auto auto !important;
column-gap: 28px !important;
row-gap: 0 !important;
align-self: start !important;
align-items: start !important;
min-height: 0 !important;
height: auto !important;
padding: 22px 30px 25px !important;
justify-content: initial !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail__icon {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 42px !important;
height: 42px !important;
margin: 0 auto 5px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail h3 {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
margin: 0 0 15px !important;
font-size: clamp(28px, 2.8vw, 37px) !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail p {
grid-column: 1 !important;
grid-row: 3 / 6 !important;
margin: 0 !important;
padding-right: 8px !important;
font-size: 14px !important;
line-height: 1.38 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong {
grid-column: 2 !important;
grid-row: 3 !important;
margin: 0 0 5px !important;
font-size: 15px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
grid-column: 2 !important;
grid-row: 4 !important;
margin: 0 0 10px !important;
font-size: 13.5px !important;
line-height: 1.34 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
grid-column: 2 !important;
grid-row: 5 !important;
align-self: start !important;
justify-self: start !important;
margin: 4px 0 0 !important;
}
}
@media (max-width: 1024px) and (min-width: 900px) {
.ellida-approach-card--one { left: 72% !important; top: 15.5% !important; }
.ellida-approach-card--two { left: 42% !important; top: 45% !important; }
.ellida-approach-card--three { left: 65% !important; top: 79% !important; }
.ellida-process-path { transition-duration: 8s !important; }
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 140px minmax(0,1fr) 140px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
grid-template-columns: minmax(0,1.14fr) minmax(205px,.86fr) !important;
column-gap: 20px !important;
padding: 20px 24px 23px !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-approach-card--one,
.ellida-approach-card--two,
.ellida-approach-card--three {
left: auto !important;
top: auto !important;
}
.ellida-process-map__thread {
display: none !important;
}
.ellida-process-step,
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-step,
.ellida-process-map.is-drawing .ellida-process-center {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-path {
stroke-dashoffset: 0 !important;
transition: none !important;
}
}
/* Ellida 3.2.3 QA micro-fix: contatto linee/pillole e tangle leggibile. */
.ellida-approach-card h3 {
box-shadow: none !important;
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3 {
box-shadow: 0 8px 22px rgba(47,65,87,.16) !important;
}
.ellida-approach-card--three {
top: 82.5% !important;
}
.ellida-process-step--one {
left: 18% !important;
top: 39% !important;
}
.ellida-process-step--two {
left: 39% !important;
top: 38.5% !important;
}
.ellida-process-step--three {
left: 61.5% !important;
top: 38.5% !important;
}
.ellida-process-step--four {
left: 84% !important;
top: 38% !important;
}
.ellida-process-center {
top: 72% !important;
}
@media (max-width: 1024px) and (min-width: 900px) {
.ellida-approach-card--three { top: 82.5% !important; }
.ellida-process-step--one { left: 18% !important; top: 39% !important; }
.ellida-process-step--two { left: 39% !important; top: 38.5% !important; }
.ellida-process-step--three { left: 61.5% !important; top: 38.5% !important; }
.ellida-process-step--four { left: 84% !important; top: 38% !important; }
.ellida-process-center { top: 72% !important; }
}
/* ==========================================================
Ellida 3.2.4 — solo sezione I MIEI SERVIZI
Più larghezza alle card laterali, maggiore aria interna,
CTA delle card allineata a sinistra e benefici su una riga.
========================================================== */
@media (min-width: 1100px) {
.ellida-services .ellida-shell {
width: min(calc(100% - 48px), 1320px) !important;
}
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 220px minmax(0, 1fr) 220px !important;
grid-template-rows: repeat(3, minmax(154px, auto)) !important;
gap: 18px 24px !important;
min-height: 0 !important;
align-items: start !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 154px !important;
padding: 18px 18px 16px !important;
border-radius: 28px !important;
overflow: visible !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card__icon {
width: 42px !important;
height: 42px !important;
margin: 0 auto 8px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card strong {
margin: 0 0 8px !important;
font-size: 17px !important;
line-height: 1.08 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 12.5px !important;
line-height: 1.34 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card small {
align-self: flex-start !important;
margin-top: 14px !important;
padding: 6px 12px !important;
font-size: 10.5px !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(390px, 430px) !important;
grid-template-rows: auto auto auto auto auto !important;
column-gap: 30px !important;
row-gap: 0 !important;
align-self: start !important;
align-items: start !important;
min-height: 498px !important;
height: auto !important;
padding: 24px 32px 28px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail__icon {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 46px !important;
height: 46px !important;
margin: 0 auto 5px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail h3 {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
margin: 0 0 18px !important;
font-size: clamp(30px, 2.8vw, 40px) !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail p {
grid-column: 1 !important;
grid-row: 3 / 6 !important;
margin: 0 !important;
padding-right: 6px !important;
font-size: 15px !important;
line-height: 1.42 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong {
grid-column: 2 !important;
grid-row: 3 !important;
margin: 0 0 7px !important;
font-size: 16px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
grid-column: 2 !important;
grid-row: 4 !important;
margin: 0 0 14px !important;
padding: 0 !important;
font-size: 14.5px !important;
line-height: 1.45 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul li {
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
margin: 0 0 4px !important;
white-space: nowrap !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul li::before {
flex: 0 0 7px !important;
margin: 0 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
grid-column: 2 !important;
grid-row: 5 !important;
align-self: start !important;
justify-self: start !important;
margin: 2px 0 0 !important;
}
}
@media (min-width: 900px) and (max-width: 1099px) {
.ellida-services .ellida-shell {
width: min(calc(100% - 36px), 1060px) !important;
}
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 178px minmax(0, 1fr) 178px !important;
grid-template-rows: repeat(3, minmax(150px, auto)) !important;
gap: 16px 18px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 150px !important;
padding: 16px 15px 14px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card strong {
font-size: 16px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 11.5px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card small {
align-self: flex-start !important;
margin-top: 12px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
column-gap: 22px !important;
min-height: 482px !important;
padding: 22px 26px 25px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
font-size: 13.5px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul li {
white-space: nowrap !important;
}
}
/* ==========================================================
Ellida 3.2.5 — ultimi affinamenti richiesti
Sezioni interessate: Il mio approccio, Come funziona, I miei servizi.
========================================================== */
/* IL MIO APPROCCIO */
.ellida-approach__visual {
min-height: 700px !important;
overflow: visible !important;
}
.ellida-approach__visual > img {
inset: 2% 1% 1% 1% !important;
width: 98% !important;
height: 96% !important;
object-fit: contain !important;
opacity: 0 !important;
}
.ellida-approach__visual.is-visible > img,
.ellida-line-drawing.is-drawing > img {
opacity: 1 !important;
}
.ellida-approach-card {
width: 40% !important;
max-width: 300px !important;
transform: translate(-50%, -50%) !important;
z-index: 4 !important;
}
.ellida-approach-card h3 {
margin: 0 0 10px !important;
padding: 9px 24px !important;
border-radius: 999px !important;
background: #c8d9e6 !important;
color: var(--ellida-deep) !important;
font-size: clamp(24px, 2.4vw, 34px) !important;
font-weight: 700 !important;
box-shadow: none !important;
}
.ellida-approach-card p {
display: inline-block !important;
max-width: 290px !important;
margin: 0 !important;
padding: 8px 10px 0 !important;
border-radius: 18px !important;
background: rgba(244,239,235,.98) !important;
font-size: clamp(14px, 1vw, 17px) !important;
line-height: 1.36 !important;
}
.ellida-approach-card--one {
left: 64.7% !important;
top: 15.8% !important;
}
.ellida-approach-card--two {
left: 59.5% !important;
top: 52.6% !important;
}
.ellida-approach-card--three {
left: 67.6% !important;
top: 86.8% !important;
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3,
.ellida-approach-card.is-active h3 {
background: var(--ellida-deep) !important;
color: #fff !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 24px rgba(47,65,87,.18) !important;
}
/* COME FUNZIONA */
.ellida-process {
padding-bottom: 18px !important;
}
.ellida-process__heading h2 {
max-width: 1220px !important;
}
.ellida-process-map {
aspect-ratio: 1045 / 560 !important;
min-height: 0 !important;
}
.ellida-process-map__thread {
inset: 7% 2% 0 3% !important;
z-index: 0 !important;
}
.ellida-process-map__thread svg {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
.ellida-process-path {
stroke: #678599 !important;
stroke-width: 4.8 !important;
transition: stroke-dashoffset 9.4s cubic-bezier(.22,.84,.28,1) !important;
}
.ellida-process-step,
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-step,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
animation: none !important;
transition: none !important;
transform: translate(-50%, -50%) !important;
}
.ellida-process-step {
width: 20.6% !important;
}
.ellida-process-step h3 {
min-width: 176px !important;
padding: 10px 18px !important;
font-size: clamp(18px, 1.6vw, 28px) !important;
font-weight: 700 !important;
}
.ellida-process-step p {
padding-top: 10px !important;
font-size: clamp(14px, 1.1vw, 18px) !important;
line-height: 1.35 !important;
}
.ellida-process-step--one { left: 15% !important; top: 31% !important; }
.ellida-process-step--two { left: 37.5% !important; top: 31% !important; }
.ellida-process-step--three { left: 60% !important; top: 31% !important; }
.ellida-process-step--four { left: 83% !important; top: 31% !important; right: auto !important; }
.ellida-process-center {
left: 50% !important;
top: 72% !important;
width: min(33%, 420px) !important;
max-width: 420px !important;
padding: 25px 30px !important;
border-radius: 38px !important;
}
.ellida-process-center h3 {
font-size: clamp(24px, 2vw, 32px) !important;
font-weight: 500 !important;
}
.ellida-process-center p {
font-size: clamp(14px, 1.03vw, 18px) !important;
line-height: 1.4 !important;
}
/* I MIEI SERVIZI */
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 205px minmax(0,1fr) 205px !important;
grid-template-rows: repeat(3, minmax(160px, auto)) !important;
gap: 18px 22px !important;
min-height: 470px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 160px !important;
padding: 16px 18px 14px !important;
border-radius: 28px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card strong {
font-size: 17px !important;
line-height: 1.07 !important;
margin-bottom: 7px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 12px !important;
line-height: 1.28 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card small {
align-self: flex-start !important;
margin-top: 12px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
min-height: 470px !important;
padding: 24px 34px 24px !important;
display: grid !important;
grid-template-columns: minmax(0, 1.25fr) minmax(0, .78fr) !important;
grid-template-areas:
"icon icon"
"title title"
"desc label"
"desc benefits"
"button benefits" !important;
column-gap: 38px !important;
row-gap: 6px !important;
align-content: start !important;
justify-content: stretch !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail__icon {
grid-area: icon !important;
margin: 0 auto 2px !important;
width: 50px !important;
height: 50px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail h3 {
grid-area: title !important;
margin: 0 0 12px !important;
text-align: center !important;
font-size: clamp(31px, 3vw, 44px) !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail p {
grid-area: desc !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1.36 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong {
grid-area: label !important;
display: block !important;
align-self: end !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1.15 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
grid-area: benefits !important;
margin: 0 !important;
padding-left: 0 !important;
font-size: 13.5px !important;
line-height: 1.28 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul li {
margin: 0 0 4px !important;
white-space: nowrap !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
grid-area: button !important;
align-self: end !important;
justify-self: start !important;
margin-top: 10px !important;
}
}
@media (max-width: 1024px) and (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 188px minmax(0,1fr) 188px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul li {
white-space: normal !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-approach__visual { min-height: 0 !important; }
.ellida-approach-card { transform: none !important; width: 100% !important; max-width: none !important; }
.ellida-process-path { transition-duration: 0s !important; }
}
/* Prenota un colloquio: mostra integralmente l'inizio del modulo sotto l'header. */
.ellida-contact__grid { scroll-margin-top: calc(var(--ellida-header-h) + 24px) !important; }
.ellida-quote { padding-top: clamp(34px, 4vw, 58px) !important; }
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-contact__grid { scroll-margin-top: calc(var(--ellida-header-h) + 16px) !important; }
.ellida-quote { padding-top: 30px !important; }
}
/* Precisione finale dei tre riquadri sull'SVG fornito. */
.ellida-approach-card {
width: 40.4% !important;
max-width: none !important;
}
.ellida-approach-card h3 {
width: 100% !important;
box-sizing: border-box !important;
}
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
row-gap: 3px !important;
}
}
/* ==========================================================
Ellida 3.3.0 — hero definitivo e footer bloccato
========================================================== */
@media (min-width: 768px) {
/* La foto riempie sempre l'hero; nessuna fascia bianca prima dell'intro. */
.ellida-story {
height: calc(min(610px, calc(100svh - 126px)) + 150px) !important;
min-height: 690px !important;
background: var(--ellida-cream) !important;
}
.ellida-story__sticky {
height: min(610px, calc(100svh - 126px)) !important;
min-height: 540px !important;
background: #f6f7f8 !important;
z-index: 1 !important;
}
.ellida-story__photo {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 24% 42% !important;
}
/* L'intro parte visivamente subito dopo la foto, sovrapponendosi solo allo spazio tecnico dello sticky. */
.ellida-intro {
position: relative !important;
z-index: 3 !important;
margin-top: -150px !important;
background: var(--ellida-cream) !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-intro {
margin-top: 0 !important;
background: var(--ellida-cream) !important;
}
}
/* Il footer resta invariato; il logo usa il PNG originale senza filtri né ricampionamenti aggressivi. */
.ellida-footer__logo {
width: 132px !important;
height: auto !important;
max-width: 100% !important;
object-fit: contain !important;
image-rendering: auto !important;
filter: none !important;
opacity: 1 !important;
}
/* ==========================================================
Ellida 3.4.0 — master definitivo approvato 27/07/2026
Riferimenti assoluti: hero, approccio, servizi, processo, contatti.
========================================================== */
/* HERO — comportamento sticky ripristinato dalle versioni precedenti.
Il testo iniziale cambia nel box “Chi sono” mentre l’immagine resta ferma.
Ogni sfondo tecnico usa il beige unico della landing: #f5efeb. */
@media (min-width: 768px) {
.ellida-story {
height: 170vh !important;
min-height: 1120px !important;
background: #f5efeb !important;
}
.ellida-story__sticky {
position: sticky !important;
top: var(--ellida-header-h) !important;
height: calc(100vh - var(--ellida-header-h)) !important;
min-height: 640px !important;
overflow: hidden !important;
isolation: isolate !important;
background: #f5efeb !important;
}
.ellida-story__photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 22% 42% !important;
}
.ellida-story__wash {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(90deg,
rgba(245,239,235,.03) 0 26%,
rgba(245,239,235,.08) 40%,
rgba(245,239,235,.42) 59%,
rgba(245,239,235,.70) 100%) !important;
}
.ellida-story__content,
.ellida-story__about {
left: 53.2% !important;
width: min(39%, 660px) !important;
top: 50% !important;
}
.ellida-story__hero h1 {
font-size: clamp(54px, 4.6vw, 86px) !important;
line-height: .96 !important;
font-weight: 800 !important;
}
.ellida-intro {
position: relative !important;
z-index: 2 !important;
margin-top: 0 !important;
background: #f5efeb !important;
}
}
/* IL MIO APPROCCIO — replica del JPG master con SVG originale. */
@media (min-width: 1025px) {
.ellida-approach {
padding-top: 74px !important;
padding-bottom: 82px !important;
}
.ellida-approach__grid {
grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr) !important;
gap: 38px !important;
align-items: center !important;
}
.ellida-approach__copy h2 {
font-size: clamp(45px, 4vw, 58px) !important;
line-height: 1.06 !important;
margin-bottom: 22px !important;
}
.ellida-approach__copy p {
max-width: 530px !important;
font-size: 17px !important;
line-height: 1.48 !important;
margin-bottom: 20px !important;
}
.ellida-approach__visual {
position: relative !important;
width: 100% !important;
min-height: 0 !important;
aspect-ratio: 721.25 / 512.86 !important;
overflow: visible !important;
}
.ellida-approach__visual > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
opacity: 0 !important;
clip-path: inset(0 100% 0 0) !important;
}
.ellida-approach__visual.is-visible > img,
.ellida-approach__visual.is-drawing > img {
opacity: 1 !important;
animation: ellida-approach-master-draw 2.2s var(--ellida-ease) forwards !important;
}
@keyframes ellida-approach-master-draw {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
.ellida-approach-card {
position: absolute !important;
width: 39% !important;
max-width: 285px !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
z-index: 4 !important;
}
.ellida-approach-card h3 {
margin: 0 0 7px !important;
padding: 6px 10px !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--ellida-navy) !important;
box-shadow: none !important;
font-size: clamp(25px, 2.2vw, 34px) !important;
line-height: 1 !important;
font-weight: 700 !important;
}
.ellida-approach-card p {
display: inline-block !important;
max-width: 270px !important;
margin: 0 !important;
padding: 2px 8px 4px !important;
border-radius: 14px !important;
background: rgba(244,239,235,.96) !important;
font-size: 14px !important;
line-height: 1.32 !important;
}
.ellida-approach-card--one { left: 65.2% !important; top: 21.3% !important; }
.ellida-approach-card--two { left: 57.8% !important; top: 52.4% !important; }
.ellida-approach-card--three { left: 66.9% !important; top: 82.5% !important; }
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3,
.ellida-approach-card.is-active h3 {
background: rgba(87,124,142,.96) !important;
color: #fff !important;
transform: translateY(-2px) !important;
}
}
/* I MIEI SERVIZI — stato base e stato aperto uguali ai due JPG master. */
.ellida-services {
background: #c7d9e5 !important;
}
.ellida-services__heading {
max-width: 720px !important;
margin-bottom: 54px !important;
}
.ellida-services__heading h2 {
font-size: clamp(43px, 4vw, 58px) !important;
line-height: 1.03 !important;
margin-bottom: 0 !important;
}
.ellida-services__heading > p:last-child {
display: none !important;
}
.ellida-services-grid[data-expanded="false"] {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 48px 78px !important;
min-height: 0 !important;
}
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
min-height: 250px !important;
padding: 18px 22px 16px !important;
border-radius: 34px !important;
}
.ellida-services-grid[data-expanded="false"] .ellida-service-card__icon {
width: 54px !important;
height: 54px !important;
margin-bottom: 12px !important;
}
.ellida-services-grid[data-expanded="false"] .ellida-service-card strong {
margin-bottom: 18px !important;
font-size: clamp(21px, 1.8vw, 27px) !important;
line-height: 1.04 !important;
}
.ellida-services-grid[data-expanded="false"] .ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 13px !important;
line-height: 1.35 !important;
}
.ellida-services-grid[data-expanded="false"] .ellida-service-card small {
align-self: center !important;
margin-top: auto !important;
}
@media (min-width: 1025px) {
.ellida-services .ellida-shell {
width: min(calc(100% - 64px), 1280px) !important;
}
.ellida-services-grid[data-expanded="true"] {
grid-template-columns: 210px minmax(0, 1fr) 210px !important;
grid-template-rows: repeat(3, 170px) !important;
gap: 18px 38px !important;
min-height: 546px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
min-height: 170px !important;
padding: 14px 18px 12px !important;
border-radius: 30px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card__icon {
width: 44px !important;
height: 44px !important;
margin-bottom: 7px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card strong {
margin-bottom: 7px !important;
font-size: 16px !important;
line-height: 1.06 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 10.5px !important;
line-height: 1.25 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card small {
align-self: center !important;
margin-top: auto !important;
padding: 5px 10px !important;
font-size: 9px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
display: grid !important;
grid-column: 2 !important;
grid-row: 1 / 4 !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"icon"
"title"
"description"
"label"
"benefits"
"button" !important;
align-content: start !important;
min-height: 546px !important;
padding: 28px 36px 30px !important;
border-radius: 42px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail__icon {
grid-area: icon !important;
width: 54px !important;
height: 54px !important;
margin: 0 auto 4px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail h3 {
grid-area: title !important;
margin: 0 0 20px !important;
font-size: clamp(34px, 3vw, 45px) !important;
text-align: center !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail p {
grid-area: description !important;
margin: 0 0 18px !important;
font-size: 16px !important;
line-height: 1.37 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong {
grid-area: label !important;
margin: 0 !important;
font-size: 17px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
grid-area: benefits !important;
margin: 0 0 20px !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.34 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul li {
white-space: nowrap !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
grid-area: button !important;
justify-self: start !important;
align-self: start !important;
margin: 0 !important;
}
}
/* COME FUNZIONA — testi fissi, un solo tratto lento dal groviglio, card centrale sincronizzata. */
.ellida-process {
background: var(--ellida-cream) !important;
padding-top: 68px !important;
padding-bottom: 48px !important;
}
.ellida-process__heading h2 {
max-width: 940px !important;
margin-bottom: 24px !important;
font-size: clamp(44px, 4.2vw, 61px) !important;
line-height: 1.02 !important;
}
.ellida-process-map {
position: relative !important;
min-height: 0 !important;
aspect-ratio: 1045 / 560 !important;
overflow: visible !important;
}
.ellida-process-map__thread {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
overflow: visible !important;
}
.ellida-process-map__thread svg {
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
.ellida-process-path {
fill: none !important;
stroke: #668599 !important;
stroke-width: 4.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
vector-effect: non-scaling-stroke !important;
transition: stroke-dashoffset 8.8s cubic-bezier(.22,.82,.28,1) !important;
}
.ellida-process-step {
position: absolute !important;
width: 21% !important;
z-index: 2 !important;
opacity: 1 !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
animation: none !important;
transition: none !important;
}
.ellida-process-step h3 {
display: inline-flex !important;
min-width: 0 !important;
margin: 0 0 10px !important;
padding: 8px 16px !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
font-size: clamp(20px, 1.8vw, 28px) !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.ellida-process-step p {
display: inline-block !important;
margin: 0 !important;
padding: 4px 10px !important;
border-radius: 16px !important;
background: rgba(244,239,235,.96) !important;
font-size: clamp(15px, 1.12vw, 18px) !important;
line-height: 1.34 !important;
}
.ellida-process-step--one { left: 14.5% !important; top: 34% !important; }
.ellida-process-step--two { left: 37% !important; top: 34% !important; }
.ellida-process-step--three { left: 60% !important; top: 34% !important; }
.ellida-process-step--four { left: 83% !important; top: 34% !important; right: auto !important; }
.ellida-process-center {
position: absolute !important;
left: 50% !important;
top: 72% !important;
width: min(34%, 420px) !important;
max-width: 420px !important;
padding: 26px 30px !important;
border-radius: 40px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
text-align: center !important;
z-index: 3 !important;
opacity: 0 !important;
transform: translate(-50%, -46%) scale(.97) !important;
transition: opacity .75s var(--ellida-ease), transform .75s var(--ellida-ease) !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: translate(-50%, -50%) scale(1) !important;
}
.ellida-process-center h3 {
margin-bottom: 8px !important;
font-size: clamp(25px, 2.2vw, 33px) !important;
}
.ellida-process-center p {
margin: 0 !important;
font-size: clamp(15px, 1.15vw, 18px) !important;
line-height: 1.42 !important;
}
/* CONTATTI — proporzioni master e anchor che mostra tutto il blocco principale. */
.ellida-contact {
padding-top: 72px !important;
padding-bottom: 56px !important;
}
.ellida-contact__grid {
grid-template-columns: .78fr 1.22fr !important;
gap: 52px !important;
align-items: start !important;
}
.ellida-contact__copy {
padding-top: 28px !important;
}
.ellida-contact__title {
width: min(100%, 450px) !important;
margin-bottom: 18px !important;
}
.ellida-contact__copy p {
max-width: 440px !important;
font-size: 17px !important;
line-height: 1.48 !important;
}
.ellida-contact-form__panel {
padding: 28px 30px 34px !important;
border-radius: 28px !important;
}
.ellida-contact-form__panel h2 {
margin-bottom: 20px !important;
font-size: clamp(31px, 3vw, 42px) !important;
}
.ellida-contact-form__row {
gap: 34px !important;
}
.ellida-contact-form input[type="text"] {
min-height: 48px !important;
}
.ellida-contact-form textarea {
min-height: 178px !important;
}
.ellida-contact-form__privacy {
margin-top: 10px !important;
}
.ellida-contact-form > .ellida-btn {
margin-top: 10px !important;
}
.ellida-quote {
margin-top: 58px !important;
}
.ellida-quote img {
width: min(100%, 790px) !important;
}
/* Footer bloccato; solo nitidezza del logo. */
.ellida-footer__logo {
width: 145px !important;
height: auto !important;
filter: none !important;
opacity: 1 !important;
image-rendering: auto !important;
}
@media (max-width: 1024px) {
.ellida-approach__visual,
.ellida-process-map { max-width: 720px !important; margin-inline: auto !important; }
.ellida-services-grid[data-expanded="false"] { gap: 28px !important; }
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-story { height: auto !important; min-height: 0 !important; }
.ellida-intro { margin-top: 0 !important; }
.ellida-approach__visual > img { opacity: .22 !important; clip-path: none !important; }
.ellida-process-map { aspect-ratio: auto !important; }
.ellida-process-map__thread { opacity: .18 !important; }
.ellida-process-center { opacity: 1 !important; position: relative !important; left: auto !important; top: auto !important; width: 100% !important; transform: none !important; margin-top: 20px !important; }
.ellida-process-step { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; transform: none !important; margin-bottom: 22px !important; }
.ellida-contact__copy { padding-top: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-path { stroke-dashoffset: 0 !important; transition: none !important; }
.ellida-process-center { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none !important; }
}
/* v3.4.1 — fallback anti-fascia bianca durante lo scroll dell'hero. */
body.ellida-landing-page,
.ellida-landing,
.ellida-story,
.ellida-story__sticky,
.ellida-intro {
background-color: #f5efeb;
}
/* ==========================================================
Ellida 3.4.2 — IL MIO APPROCCIO
Composizione statica basata sul master fornito il 27/07.
L'unica animazione è il cambio colore delle tre pillole.
========================================================== */
.ellida-approach__visual {
position: relative !important;
width: min(100%, 692px) !important;
max-width: 692px !important;
min-height: 0 !important;
aspect-ratio: 692 / 614 !important;
margin-inline: auto !important;
overflow: visible !important;
}
.ellida-approach__visual > img {
position: absolute !important;
z-index: 1 !important;
inset: auto !important;
left: 18.3526% !important;
top: 8.7948% !important;
width: 74.2775% !important;
height: 74.1042% !important;
display: block !important;
object-fit: fill !important;
opacity: 1 !important;
visibility: visible !important;
clip-path: none !important;
animation: none !important;
transition: none !important;
transform: none !important;
pointer-events: none !important;
}
.ellida-approach__visual.is-visible > img,
.ellida-approach__visual.is-drawing > img,
.ellida-line-drawing.is-drawing > img {
opacity: 1 !important;
clip-path: none !important;
animation: none !important;
transition: none !important;
}
.ellida-approach-card {
position: absolute !important;
z-index: 3 !important;
width: 38.1503% !important;
max-width: none !important;
padding: 0 !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
cursor: default !important;
}
.ellida-approach-card h3 {
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 5px !important;
padding: 5px 12px 6px !important;
border-radius: 999px !important;
background: #c8d9e6 !important;
color: #2f4156 !important;
box-shadow: none !important;
font-size: clamp(25px, 2.25vw, 34px) !important;
font-weight: 500 !important;
line-height: 1 !important;
transform: none !important;
transition: background-color .35s ease, color .35s ease !important;
}
.ellida-approach-card p {
display: inline-block !important;
width: auto !important;
max-width: 87% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 5px 3px !important;
border-radius: 0 !important;
background: #f5efeb !important;
color: #2f4156 !important;
font-size: clamp(14px, 1.08vw, 17px) !important;
font-weight: 400 !important;
line-height: 1.13 !important;
transition: none !important;
}
.ellida-approach-card--one {
left: 68.1358% !important;
top: 16.6124% !important;
right: auto !important;
bottom: auto !important;
}
.ellida-approach-card--two {
left: 49.9277% !important;
top: 46.5798% !important;
right: auto !important;
bottom: auto !important;
}
.ellida-approach-card--three {
left: 58.0925% !important;
top: 72.4756% !important;
right: auto !important;
bottom: auto !important;
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3 {
background: #2f4156 !important;
color: #fff !important;
box-shadow: none !important;
transform: none !important;
}
.ellida-approach-card:focus-visible {
outline: 2px solid #2f4156 !important;
outline-offset: 5px !important;
border-radius: 999px !important;
}
@media (max-width: 1024px) {
.ellida-approach__visual {
width: min(100%, 692px) !important;
max-width: 692px !important;
aspect-ratio: 692 / 614 !important;
}
.ellida-approach-card {
width: 38.1503% !important;
max-width: none !important;
padding: 0 !important;
transform: translateX(-50%) !important;
}
.ellida-approach-card h3 {
font-size: clamp(22px, 4vw, 34px) !important;
}
.ellida-approach-card p {
font-size: clamp(12px, 2.05vw, 17px) !important;
}
}
@media (max-width: 560px) {
.ellida-approach__visual {
width: calc(100% + 18px) !important;
margin-left: -9px !important;
}
.ellida-approach-card h3 {
margin-bottom: 3px !important;
padding: 4px 7px 5px !important;
font-size: clamp(17px, 5.2vw, 25px) !important;
}
.ellida-approach-card p {
max-width: 100% !important;
padding-inline: 2px !important;
font-size: clamp(9px, 2.85vw, 13px) !important;
line-height: 1.12 !important;
}
}
/* Posizionamento verticale ancorato al bordo superiore delle pillole del master. */
.ellida-approach-card {
transform: translateX(-50%) !important;
}
.ellida-approach-card {
animation: none !important;
transition: none !important;
}
/* ==========================================================
Ellida 3.4.3 — IL MIO APPROCCIO
Titoli Montserrat ridotti del 5%, testi coerenti con la
colonna laterale e innesti continui sulla pillola "capire".
Unica animazione: cambio colore al passaggio del mouse.
========================================================== */
.ellida-approach-card h3 {
position: relative !important;
overflow: visible !important;
isolation: isolate !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: clamp(23.75px, 2.1375vw, 32.3px) !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: normal !important;
transition: background-color .35s ease, color .35s ease !important;
}
.ellida-approach-card p {
max-width: 92% !important;
padding: 0 5px 3px !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.46 !important;
letter-spacing: normal !important;
}
/* I due segmenti chiudono i micro-spazi del tracciato sorgente.
Sono dietro la pillola, così l'innesto resta pulito anche in hover. */
.ellida-approach-card--one h3::before,
.ellida-approach-card--one h3::after {
content: "";
position: absolute;
z-index: -1;
display: block;
height: 4px;
border-radius: 999px;
background: #c8d9e6;
pointer-events: none;
}
.ellida-approach-card--one h3::before {
left: 0;
top: calc(100% - 2px);
width: 15px;
transform-origin: left center;
transform: rotate(90deg);
}
.ellida-approach-card--one h3::after {
right: -1px;
top: calc(100% - 3px);
width: 17px;
transform-origin: left center;
transform: rotate(130deg);
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3 {
background: #2f4156 !important;
color: #ffffff !important;
box-shadow: none !important;
transform: none !important;
}
/* Disattiva qualunque stato colore automatico ereditato dalle versioni precedenti. */
.ellida-approach-card.is-active:not(:hover):not(:focus-visible) h3 {
background: #c8d9e6 !important;
color: #2f4156 !important;
box-shadow: none !important;
transform: none !important;
}
@media (max-width: 1024px) {
.ellida-approach-card h3 {
font-size: clamp(20.9px, 3.8vw, 32.3px) !important;
}
.ellida-approach-card p {
font-size: clamp(12px, 2.05vw, 15px) !important;
}
}
@media (max-width: 560px) {
.ellida-approach-card h3 {
font-size: clamp(16.15px, 4.94vw, 23.75px) !important;
}
.ellida-approach-card p {
font-size: clamp(9px, 2.85vw, 13px) !important;
}
.ellida-approach-card--one h3::before {
width: 11px;
height: 3px;
}
.ellida-approach-card--one h3::after {
width: 13px;
height: 3px;
}
}
/* ==========================================================
Ellida 3.4.4 — FIX IL MIO APPROCCIO
Riduzione ulteriore testi box + connessione piena del box "capire"
========================================================== */
.ellida-approach__visual > img {
object-fit: contain !important;
}
.ellida-approach-card h3 {
position: relative !important;
overflow: visible !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: clamp(20px, 1.72vw, 28px) !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
padding: 10px 22px !important;
}
.ellida-approach-card p {
max-width: 92% !important;
margin: 6px auto 0 !important;
padding: 0 !important;
background: transparent !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 400 !important;
line-height: 1.44 !important;
letter-spacing: 0 !important;
}
.ellida-approach-card--one h3::before,
.ellida-approach-card--one h3::after {
content: "";
position: absolute;
display: block;
width: 34px;
height: 4px;
border-radius: 999px;
background: #c8d9e6;
z-index: -1;
pointer-events: none;
}
.ellida-approach-card--one h3::before {
left: -20px;
top: 68%;
transform: rotate(-20deg);
transform-origin: right center;
}
.ellida-approach-card--one h3::after {
right: -21px;
top: 69%;
transform: rotate(22deg);
transform-origin: left center;
}
.ellida-approach-card:hover h3,
.ellida-approach-card:focus-visible h3,
.ellida-approach-card.is-active h3 {
background: #2f4156 !important;
color: #fff !important;
box-shadow: none !important;
transform: none !important;
}
.ellida-approach-card.is-active:not(:hover):not(:focus-visible) h3 {
background: #c8d9e6 !important;
color: #2f4156 !important;
}
@media (max-width: 1024px) {
.ellida-approach-card h3 { font-size: clamp(18px, 3vw, 26px) !important; }
.ellida-approach-card p { font-size: clamp(11px, 1.8vw, 13.5px) !important; }
}
@media (max-width: 560px) {
.ellida-approach-card h3 { font-size: clamp(16px, 4.2vw, 22px) !important; }
.ellida-approach-card p { font-size: clamp(10px, 2.8vw, 12px) !important; }
.ellida-approach-card--one h3::before,
.ellida-approach-card--one h3::after { width: 22px; height: 3px; }
.ellida-approach-card--one h3::before { left: -14px; }
.ellida-approach-card--one h3::after { right: -15px; }
}
/* ==========================================================
Ellida 3.4.5 — IL MIO APPROCCIO: SVG FINALE INTEGRALE
Il file fornito viene mostrato senza sovrapposizioni HTML
e senza alterazioni grafiche. La sola modifica è dimensionale.
========================================================== */
.ellida-approach__visual--final-svg {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.ellida-approach__visual--final-svg .ellida-approach__final-image {
position: static !important;
inset: auto !important;
display: block !important;
width: min(100%, 720px) !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
opacity: 1 !important;
visibility: visible !important;
clip-path: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
filter: none !important;
}
@media (min-width: 1025px) {
.ellida-approach__grid {
align-items: center !important;
grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
gap: clamp(24px, 3.2vw, 58px) !important;
}
.ellida-approach__visual--final-svg .ellida-approach__final-image {
width: min(100%, 700px) !important;
}
}
@media (max-width: 1024px) {
.ellida-approach__visual--final-svg {
margin-top: clamp(24px, 5vw, 48px) !important;
}
.ellida-approach__visual--final-svg .ellida-approach__final-image {
width: min(100%, 680px) !important;
}
}
@media (max-width: 560px) {
.ellida-approach__visual--final-svg .ellida-approach__final-image {
width: 100% !important;
}
}
/* ==========================================================
Ellida 3.4.6 — IL MIO APPROCCIO: IMAGE BOX RASTERIZZATA
La grafica finale è un'immagine unica, senza testo/SVG
reinterpretato dal browser. Nessuna animazione o hover.
========================================================== */
.ellida-approach__visual--image-box {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
.ellida-approach__image-box {
display: block !important;
width: min(100%, 720px) !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
background: #f5efeb !important;
box-shadow: none !important;
overflow: hidden !important;
}
.ellida-approach__visual--image-box .ellida-approach__final-image {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center !important;
opacity: 1 !important;
visibility: visible !important;
clip-path: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
filter: none !important;
}
@media (min-width: 1025px) {
.ellida-approach__grid {
align-items: center !important;
grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
gap: clamp(24px, 3.2vw, 58px) !important;
}
.ellida-approach__image-box {
width: min(100%, 700px) !important;
}
}
@media (max-width: 1024px) {
.ellida-approach__visual--image-box {
margin-top: clamp(24px, 5vw, 48px) !important;
}
.ellida-approach__image-box {
width: min(100%, 680px) !important;
}
}
@media (max-width: 560px) {
.ellida-approach__image-box {
width: 100% !important;
}
}
/* ==========================================================
Ellida 3.4.9 — IL MIO APPROCCIO: IMMAGINE PIÙ AMPIA
La grafica resta identica; aumenta solo l'ingombro visivo.
========================================================== */
@media (min-width: 1025px) {
.ellida-approach__grid {
grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
gap: clamp(18px, 2.3vw, 42px) !important;
}
.ellida-approach__visual--image-box {
overflow: visible !important;
}
.ellida-approach__image-box {
width: min(108%, 780px) !important;
max-width: none !important;
}
}
@media (min-width: 701px) and (max-width: 1024px) {
.ellida-approach__image-box {
width: min(104%, 730px) !important;
max-width: none !important;
}
}
/* ==========================================================
Ellida 3.4.10 — Il mio approccio: +5% immagine
Aumenta ancora leggermente l'immagine nella colonna destra.
========================================================== */
@media (min-width: 1025px) {
.ellida-approach__image-box {
width: min(113%, 820px) !important;
max-width: none !important;
}
}
@media (min-width: 701px) and (max-width: 1024px) {
.ellida-approach__image-box {
width: min(109%, 760px) !important;
max-width: none !important;
}
}
/* ==========================================================
Ellida 3.4.11 — Il mio approccio: ulteriore +5% immagine
La grafica e le proporzioni restano invariate.
========================================================== */
@media (min-width: 1025px) {
.ellida-approach__image-box {
width: min(118.65%, 861px) !important;
max-width: none !important;
}
}
@media (min-width: 701px) and (max-width: 1024px) {
.ellida-approach__image-box {
width: min(114.45%, 798px) !important;
max-width: none !important;
}
}
/* ==========================================================
Ellida 3.4.12 — Il mio approccio: grafica alta quanto il testo
Rimossi soltanto i margini beige interni del PNG; la grafica
resta identica e ora occupa realmente la colonna destra.
========================================================== */
@media (min-width: 1025px) {
.ellida-approach__grid {
grid-template-columns: minmax(0, 47%) minmax(0, 53%) !important;
gap: clamp(20px, 2.4vw, 44px) !important;
}
.ellida-approach__visual--image-box {
overflow: visible !important;
}
.ellida-approach__image-box {
width: min(105%, 900px) !important;
max-width: none !important;
}
}
@media (min-width: 701px) and (max-width: 1024px) {
.ellida-approach__image-box {
width: min(100%, 780px) !important;
max-width: none !important;
}
}
/* ==========================================================
Ellida 3.4.13 — I MIEI SERVIZI
Pulsante dettaglio fisso in basso a sinistra e titoli
compatti per le due miniature più lunghe.
========================================================== */
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
position: relative !important;
padding-bottom: 88px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
position: absolute !important;
left: 34px !important;
bottom: 24px !important;
margin: 0 !important;
align-self: auto !important;
justify-self: auto !important;
z-index: 3 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card small {
margin-top: auto !important;
align-self: flex-start !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="adolescenti"] strong,
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="mindfulness"] strong {
font-size: 15px !important;
line-height: 1.02 !important;
margin-bottom: 6px !important;
}
}
/* ==========================================================
Ellida 3.4.14 — I MIEI SERVIZI
CTA sempre in basso a sinistra senza sovrapposizioni;
titoli lunghi delle miniature su una sola riga.
========================================================== */
@media (min-width: 900px) {
/* Il dettaglio grande torna a un flusso verticale reale:
il margine automatico spinge la CTA sul fondo senza coprire i testi. */
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
position: relative !important;
padding: 28px 36px 30px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail__icon {
flex: 0 0 auto !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail h3,
.ellida-services-grid[data-expanded="true"] .ellida-service-detail p,
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong,
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
flex: 0 0 auto !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail .ellida-btn {
position: static !important;
inset: auto !important;
display: inline-flex !important;
align-self: flex-start !important;
justify-self: auto !important;
margin: auto 0 0 !important;
z-index: auto !important;
}
/* Le due etichette più lunghe restano interamente su una riga.
Il testo descrittivo delle miniature non cambia. */
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="adolescenti"] strong,
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="mindfulness"] strong {
display: block !important;
width: 100% !important;
margin-bottom: 7px !important;
font-size: 10.5px !important;
line-height: 1 !important;
letter-spacing: -0.025em !important;
white-space: nowrap !important;
text-align: left !important;
}
}
/* ==========================================================
Ellida 3.4.16 — I MIEI SERVIZI
Benefici allineato a sinistra sopra l'elenco puntato;
titoli mini-card di mindfulness e supporto adolescenti
riportati alla stessa scala visiva degli altri titoli.
========================================================== */
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] .ellida-service-detail > strong {
grid-area: label !important;
display: block !important;
align-self: start !important;
justify-self: start !important;
text-align: left !important;
margin: 0 0 2px !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.15 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail ul {
grid-area: benefits !important;
justify-self: start !important;
align-self: start !important;
text-align: left !important;
margin: 0 !important;
padding-left: 0 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="adolescenti"] strong,
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="mindfulness"] strong {
display: block !important;
width: 100% !important;
font-size: 17px !important;
line-height: 1.07 !important;
letter-spacing: -0.018em !important;
margin-bottom: 7px !important;
white-space: nowrap !important;
text-align: left !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="adolescenti"] strong {
font-size: 16px !important;
letter-spacing: -0.028em !important;
}
}
/* ==========================================================
Ellida 3.4.17 — COME POSSO AIUTARTI
Titolo con “può fare la differenza” su una sola riga.
Dettaglio inline a sinistra, elenco sempre visibile a destra.
========================================================== */
.ellida-help__title {
width: min(100%, 760px) !important;
height: auto !important;
margin-bottom: 32px !important;
}
.ellida-help__intro[hidden],
.ellida-help-panel[hidden] {
display: none !important;
}
.ellida-help-panel {
position: relative !important;
width: 100% !important;
max-width: 680px !important;
padding: clamp(24px, 2.8vw, 38px) !important;
border: 1px solid rgba(244, 239, 235, .14) !important;
border-radius: 30px !important;
background: #253b52 !important;
color: var(--ellida-cream) !important;
box-shadow: 0 22px 55px rgba(14, 27, 42, .22) !important;
animation: ellida-help-panel-in .42s var(--ellida-ease) both !important;
}
@keyframes ellida-help-panel-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.ellida-help-panel .ellida-kicker {
margin: 0 0 12px !important;
font-size: 12px !important;
}
.ellida-help-panel h2 {
margin: 0 44px 18px 0 !important;
color: #fff !important;
font-size: clamp(25px, 2.2vw, 34px) !important;
line-height: 1.12 !important;
letter-spacing: -.02em !important;
}
.ellida-help-panel p,
.ellida-help-panel strong {
max-width: none !important;
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.45 !important;
}
.ellida-help-panel p {
margin: 0 0 18px !important;
}
.ellida-help-panel strong {
display: block !important;
margin: 4px 0 8px !important;
color: #fff !important;
font-weight: 700 !important;
}
.ellida-help-panel [data-help-panel-items] {
margin-bottom: 0 !important;
}
.ellida-help-panel__close {
position: absolute !important;
top: 18px !important;
right: 18px !important;
width: 38px !important;
height: 38px !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .1) !important;
color: #fff !important;
font-size: 27px !important;
line-height: 1 !important;
cursor: pointer !important;
}
.ellida-help-panel__close:hover,
.ellida-help-panel__close:focus-visible {
background: rgba(255, 255, 255, .2) !important;
outline: 2px solid rgba(255, 255, 255, .75) !important;
outline-offset: 2px !important;
}
.ellida-help__list button.is-active {
color: #fff !important;
padding-left: 12px !important;
font-weight: 700 !important;
}
.ellida-help__list button.is-active span:last-child {
transform: rotate(45deg) !important;
}
@media (min-width: 1025px) {
.ellida-help__grid {
grid-template-columns: minmax(500px, 1.05fr) minmax(430px, .78fr) !important;
gap: clamp(48px, 6vw, 105px) !important;
align-items: start !important;
}
.ellida-help__copy {
min-width: 0 !important;
}
.ellida-help__list {
position: sticky !important;
top: calc(var(--ellida-header-h) + 32px) !important;
align-self: start !important;
}
}
@media (max-width: 1024px) {
.ellida-help__grid {
grid-template-columns: 1fr !important;
gap: 42px !important;
}
.ellida-help-panel {
max-width: 760px !important;
}
.ellida-help__list {
width: 100% !important;
}
}
@media (max-width: 560px) {
.ellida-help__title {
width: 100% !important;
margin-bottom: 24px !important;
}
.ellida-help-panel {
padding: 24px 20px !important;
border-radius: 24px !important;
}
.ellida-help-panel h2 {
margin-right: 34px !important;
font-size: 25px !important;
}
.ellida-help-panel p,
.ellida-help-panel strong {
font-size: 15px !important;
}
}
/* ==========================================================
Ellida 3.4.18 — COME POSSO AIUTARTI: ACCORDION INLINE
Ogni dettaglio si apre sotto il proprio titolo, senza popup.
Aprendo una nuova voce, la precedente si richiude automaticamente.
========================================================== */
.ellida-help__grid {
align-items: start !important;
}
.ellida-help__intro[hidden] {
display: block !important;
}
.ellida-help-panel,
.ellida-help-dialog {
display: none !important;
}
.ellida-help-accordion {
display: block !important;
width: 100% !important;
}
.ellida-help-accordion__item {
width: 100% !important;
}
.ellida-help-accordion__item > button {
position: relative !important;
z-index: 1 !important;
}
.ellida-help-accordion__item > button.is-active {
color: #fff !important;
padding-left: 12px !important;
font-weight: 700 !important;
}
.ellida-help-accordion__item > button.is-active span:last-child {
transform: rotate(45deg) !important;
}
.ellida-help-accordion__panel {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 10px !important;
padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px) !important;
border: 1px solid rgba(244,239,235,.12) !important;
border-radius: 0 0 24px 24px !important;
background: #253b52 !important;
color: var(--ellida-cream) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
animation: ellida-help-accordion-in .34s var(--ellida-ease) both !important;
}
.ellida-help-accordion__panel[hidden] {
display: none !important;
}
@keyframes ellida-help-accordion-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
.ellida-help-accordion__panel p,
.ellida-help-accordion__panel strong {
max-width: none !important;
font-size: clamp(15px, 1.05vw, 17px) !important;
line-height: 1.45 !important;
}
.ellida-help-accordion__panel p {
margin: 0 0 14px !important;
}
.ellida-help-accordion__panel p:last-child {
margin-bottom: 0 !important;
}
.ellida-help-accordion__panel strong {
display: block !important;
margin: 2px 0 7px !important;
color: #fff !important;
font-weight: 700 !important;
}
@media (min-width: 1025px) {
.ellida-help__grid {
grid-template-columns: minmax(440px, .95fr) minmax(480px, .85fr) !important;
gap: clamp(70px, 10vw, 180px) !important;
}
.ellida-help__list {
position: static !important;
top: auto !important;
}
}
@media (max-width: 560px) {
.ellida-help-accordion__panel {
padding: 18px 17px !important;
border-radius: 0 0 20px 20px !important;
}
.ellida-help-accordion__panel p,
.ellida-help-accordion__panel strong {
font-size: 15px !important;
}
}
/* ==========================================================
Ellida 3.4.19 — COME POSSO AIUTARTI
Titolo disposto su tre righe con interlinea regolare;
dettagli accordion senza riquadro blu di sfondo.
========================================================== */
.ellida-help__title {
width: min(100%, 820px) !important;
height: auto !important;
margin-bottom: 34px !important;
}
.ellida-help-accordion__panel {
margin: 0 0 10px !important;
padding: clamp(16px, 1.8vw, 24px) 2px clamp(18px, 2vw, 26px) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--ellida-cream) !important;
}
.ellida-help-accordion__panel p,
.ellida-help-accordion__panel strong {
color: var(--ellida-cream) !important;
}
@media (max-width: 560px) {
.ellida-help__title {
width: 100% !important;
margin-bottom: 26px !important;
}
.ellida-help-accordion__panel {
padding: 14px 2px 20px !important;
border-radius: 0 !important;
}
}
/* ==========================================================
Ellida 3.4.20 — COME POSSO AIUTARTI
Interlinea del titolo più compatta e colonna destra allineata
verticalmente all'inizio del testo della colonna sinistra.
========================================================== */
.ellida-help__heading {
max-width: 760px !important;
}
.ellida-help__title {
display: block !important;
width: min(100%, 769px) !important;
height: auto !important;
margin: 0 0 28px !important;
}
.ellida-help__intro {
max-width: 670px !important;
}
.ellida-help__intro p {
max-width: 670px !important;
margin: 0 0 30px !important;
font-size: clamp(17px, 1.25vw, 23px) !important;
line-height: 1.42 !important;
}
.ellida-help__intro .ellida-btn {
margin-top: 22px !important;
}
@media (min-width: 1025px) {
.ellida-help__grid {
display: grid !important;
grid-template-columns: minmax(440px, .95fr) minmax(480px, .85fr) !important;
grid-template-rows: auto auto !important;
column-gap: clamp(70px, 10vw, 180px) !important;
row-gap: 0 !important;
align-items: start !important;
}
.ellida-help__heading {
grid-column: 1 !important;
grid-row: 1 !important;
}
.ellida-help__intro {
grid-column: 1 !important;
grid-row: 2 !important;
align-self: start !important;
}
.ellida-help__list {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
margin-top: 0 !important;
}
}
@media (max-width: 1024px) {
.ellida-help__grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto !important;
gap: 0 !important;
}
.ellida-help__heading,
.ellida-help__intro,
.ellida-help__list {
grid-column: 1 !important;
}
.ellida-help__heading { grid-row: 1 !important; }
.ellida-help__intro { grid-row: 2 !important; }
.ellida-help__list {
grid-row: 3 !important;
margin-top: 34px !important;
}
}
@media (max-width: 560px) {
.ellida-help__title {
width: 100% !important;
margin-bottom: 22px !important;
}
.ellida-help__intro p {
font-size: 16px !important;
margin-bottom: 24px !important;
}
}
/* ==========================================================
Ellida 3.4.21 — CONTATTI
Più respiro sotto l'header all'atterraggio e citazione più vicina.
Nessuna modifica alle sezioni precedenti.
========================================================== */
.ellida-contact__grid {
scroll-margin-top: calc(var(--ellida-header-h) + 58px) !important;
}
.ellida-quote {
margin-top: 28px !important;
padding-top: 18px !important;
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-contact__grid {
scroll-margin-top: calc(var(--ellida-header-h) + 30px) !important;
}
.ellida-quote {
margin-top: 22px !important;
padding-top: 14px !important;
}
}
/* ==========================================================
Ellida 3.4.22 — checkbox privacy
Allineamento preciso con il testo e fondo coerente con la landing.
========================================================== */
.ellida-contact-form__privacy {
align-items: flex-start !important;
gap: 9px !important;
}
.ellida-contact-form__privacy input[type="checkbox"] {
-webkit-appearance: none !important;
appearance: none !important;
display: grid !important;
place-content: center !important;
flex: 0 0 18px !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
border: 1.4px solid rgba(47, 65, 87, .72) !important;
border-radius: 4px !important;
background: #f5efeb !important;
box-shadow: none !important;
cursor: pointer !important;
}
.ellida-contact-form__privacy input[type="checkbox"]::before {
content: "";
width: 8px;
height: 4px;
border-left: 2px solid #2f4157;
border-bottom: 2px solid #2f4157;
transform: rotate(-45deg) scale(0);
transform-origin: center;
transition: transform .16s ease;
}
.ellida-contact-form__privacy input[type="checkbox"]:checked::before {
transform: rotate(-45deg) scale(1);
}
.ellida-contact-form__privacy input[type="checkbox"]:focus-visible {
outline: 2px solid rgba(47, 65, 87, .35) !important;
outline-offset: 2px !important;
}
.ellida-contact-form__privacy span {
display: block !important;
margin: 0 !important;
line-height: 18px !important;
}
/* ==========================================================
Ellida 3.4.23 — COME POSSO AIUTARTI
Allineamento della prima voce dell'accordion alla prima riga
del testo introduttivo nella colonna sinistra.
========================================================== */
@media (min-width: 1025px) {
.ellida-help__list {
align-self: start !important;
}
.ellida-help-accordion__item:first-child > button {
padding-top: 0 !important;
}
}
/* ==========================================================
Ellida 3.4.24 — COME FUNZIONA: prima fase layout
Rimosso il disegno della linea. Testi ridimensionati e
allineati; titoli su una riga; box finale più in basso.
========================================================== */
.ellida-process-map__thread {
display: none !important;
}
.ellida-process-map {
aspect-ratio: 1045 / 570 !important;
min-height: 0 !important;
}
.ellida-process-step {
width: 21.5% !important;
text-align: center !important;
}
.ellida-process-step h3 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 0 12px !important;
padding: 8px 12px !important;
white-space: nowrap !important;
font-size: clamp(16px, 1.35vw, 21px) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.018em !important;
}
.ellida-process-step p {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 8px !important;
background: transparent !important;
border-radius: 0 !important;
font-size: clamp(13px, .98vw, 15px) !important;
font-weight: 400 !important;
line-height: 1.42 !important;
text-align: center !important;
}
.ellida-process-step--one { left: 14% !important; top: 29% !important; }
.ellida-process-step--two { left: 37.5% !important; top: 29% !important; }
.ellida-process-step--three { left: 61% !important; top: 29% !important; }
.ellida-process-step--four { left: 84.5% !important; top: 29% !important; right: auto !important; }
.ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center {
left: 50% !important;
top: 80% !important;
width: min(32%, 390px) !important;
max-width: 390px !important;
padding: 22px 28px !important;
opacity: 1 !important;
transform: translate(-50%, -50%) scale(1) !important;
transition: none !important;
animation: none !important;
}
.ellida-process-center h3 {
margin: 0 0 7px !important;
white-space: nowrap !important;
font-size: clamp(21px, 1.8vw, 27px) !important;
line-height: 1.08 !important;
}
.ellida-process-center p {
margin: 0 !important;
font-size: clamp(13px, .98vw, 15px) !important;
line-height: 1.4 !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-map {
max-width: 760px !important;
aspect-ratio: 1045 / 620 !important;
}
.ellida-process-step {
width: 23% !important;
}
.ellida-process-step h3 {
padding-inline: 8px !important;
font-size: clamp(13px, 1.75vw, 17px) !important;
}
.ellida-process-step p {
padding-inline: 5px !important;
font-size: clamp(11px, 1.45vw, 13px) !important;
}
.ellida-process-step--one { left: 13% !important; }
.ellida-process-step--two { left: 37.5% !important; }
.ellida-process-step--three { left: 62% !important; }
.ellida-process-step--four { left: 86.5% !important; }
.ellida-process-center {
top: 82% !important;
width: min(42%, 360px) !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-map__thread {
display: none !important;
}
.ellida-process-step h3 {
width: min(100%, 330px) !important;
margin-inline: auto !important;
white-space: nowrap !important;
font-size: clamp(15px, 4.6vw, 19px) !important;
}
.ellida-process-step p {
width: min(100%, 330px) !important;
margin-inline: auto !important;
font-size: 14px !important;
}
.ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center {
position: relative !important;
left: auto !important;
top: auto !important;
width: min(100%, 360px) !important;
max-width: 360px !important;
margin: 34px auto 0 !important;
transform: none !important;
}
.ellida-process-center h3 {
white-space: normal !important;
}
}
/* ==========================================================
Ellida 3.4.25 — COME FUNZIONA + ALLINEAMENTO SEZIONI
Quattro riquadri perfettamente allineati, testi uniformi,
box finale più in basso. I blocchi testuali delle sezioni
condividono il margine sinistro di "I miei servizi".
========================================================== */
/* Tutti i principali blocchi di sezione usano lo stesso asse
orizzontale della sezione "I miei servizi" su desktop. */
@media (min-width: 1025px) {
.ellida-intro .ellida-shell,
.ellida-approach .ellida-shell,
.ellida-help .ellida-shell,
.ellida-process .ellida-shell,
.ellida-contact .ellida-shell {
width: min(calc(100% - 64px), 1280px) !important;
}
.ellida-intro__inner {
max-width: 1280px !important;
}
.ellida-intro__inner,
.ellida-approach__copy,
.ellida-services__heading,
.ellida-help__copy,
.ellida-process__heading,
.ellida-contact__copy {
margin-left: 0 !important;
text-align: left !important;
}
}
/* Layout provvisorio senza linea: griglia stabile e pronta
per accogliere il futuro tracciato animato in sovrapposizione. */
@media (min-width: 768px) {
.ellida-process-map {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-template-rows: auto auto !important;
column-gap: clamp(24px, 3vw, 48px) !important;
row-gap: clamp(66px, 7vw, 96px) !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: clamp(62px, 6vw, 92px) 0 clamp(20px, 3vw, 42px) !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
align-self: start !important;
}
.ellida-process-step h3 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
margin: 0 0 13px !important;
padding: 9px 12px !important;
box-sizing: border-box !important;
white-space: nowrap !important;
font-size: clamp(16px, 1.25vw, 20px) !important;
line-height: 1 !important;
text-align: center !important;
}
.ellida-process-step p {
display: block !important;
width: 100% !important;
min-height: 84px !important;
margin: 0 !important;
padding: 0 8px !important;
box-sizing: border-box !important;
background: transparent !important;
font-size: clamp(13px, .95vw, 15px) !important;
line-height: 1.4 !important;
text-align: center !important;
}
.ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center {
position: relative !important;
grid-column: 2 / 4 !important;
grid-row: 2 !important;
justify-self: center !important;
align-self: start !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: min(100%, 410px) !important;
max-width: 410px !important;
margin: 14px 0 0 !important;
padding: 22px 28px !important;
box-sizing: border-box !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-map {
column-gap: 16px !important;
row-gap: 64px !important;
padding-top: 58px !important;
}
.ellida-process-step h3 {
min-height: 38px !important;
padding-inline: 7px !important;
font-size: clamp(13px, 1.65vw, 17px) !important;
}
.ellida-process-step p {
min-height: 90px !important;
padding-inline: 4px !important;
font-size: clamp(11px, 1.38vw, 13px) !important;
}
.ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center {
width: min(100%, 360px) !important;
}
}
/* ==========================================================
Ellida 3.4.26 — RIPRISTINO INTRO + ALLINEAMENTO COME FUNZIONA
La sezione "Non so da dove iniziare" torna alla composizione
centrata precedente. I quattro riquadri di "Come funziona"
seguono visivamente il margine sinistro del titolo.
========================================================== */
@media (min-width: 1025px) {
.ellida-intro .ellida-shell {
width: min(calc(100% - 96px), 1780px) !important;
}
.ellida-intro__inner {
max-width: 1040px !important;
margin-inline: auto !important;
text-align: center !important;
}
.ellida-process-map {
padding-left: 8px !important;
padding-right: 0 !important;
}
}
/* ==========================================================
Ellida 3.4.27 — COME FUNZIONA: riquadri centrati
I quattro passaggi formano un unico blocco centrato sotto
il titolo, senza alterare testi o sezioni precedenti.
========================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-map {
width: min(84%, 800px) !important;
max-width: 800px !important;
margin-inline: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 1025px) {
.ellida-process-map {
width: 100% !important;
max-width: 1280px !important;
margin-inline: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ==========================================================
Ellida 3.4.28 — COME FUNZIONA + COME POSSO AIUTARTI
I quattro passaggi condividono lo stesso asse del titolo e
formano un blocco centrato; resta lo spazio per il futuro filo.
La sezione di aiuto ha più sviluppo verticale già da chiusa.
========================================================== */
@media (min-width: 1025px) {
.ellida-process__heading,
.ellida-process-map {
width: min(100%, 1120px) !important;
max-width: 1120px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ellida-process__heading {
text-align: left !important;
}
.ellida-process-map {
padding-top: 96px !important;
}
.ellida-help {
min-height: clamp(920px, 96vh, 1040px) !important;
padding-bottom: clamp(150px, 12vw, 205px) !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process__heading,
.ellida-process-map {
width: min(92%, 800px) !important;
max-width: 800px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ellida-process-map {
padding-top: 78px !important;
}
.ellida-help {
min-height: 860px !important;
padding-bottom: 130px !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-help {
min-height: 0 !important;
padding-bottom: 110px !important;
}
}
/* ==========================================================
Ellida 3.4.29 — COME POSSO AIUTARTI
Altezza desktop compatta e stabile: l'apertura di una voce
accordion usa lo spazio già riservato e non allunga la sezione.
========================================================== */
@media (min-width: 1025px) {
.ellida-help {
min-height: 0 !important;
height: auto !important;
padding-top: 76px !important;
padding-bottom: 76px !important;
}
.ellida-help__grid {
grid-template-rows: auto 540px !important;
row-gap: 0 !important;
align-content: start !important;
}
.ellida-help__list {
height: 540px !important;
min-height: 540px !important;
align-self: start !important;
align-content: start !important;
overflow: visible !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-help {
min-height: 0 !important;
height: auto !important;
padding-bottom: 76px !important;
}
}
/* ==========================================================
Ellida 3.4.33 — COME FUNZIONA: primo tracciato statico
Il titolo mantiene l'asse attuale della landing. I quattro
passaggi usano la stessa griglia e il filo statico anticipa
l'animazione futura, senza modificare le altre sezioni.
========================================================== */
@media (min-width: 1025px) {
.ellida-process__heading {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
text-align: left !important;
}
.ellida-process__heading h2 {
margin-bottom: 0 !important;
}
.ellida-process-map {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-template-rows: auto auto !important;
column-gap: clamp(30px, 3vw, 48px) !important;
row-gap: clamp(92px, 7vw, 112px) !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
min-height: 560px !important;
margin: 22px 0 0 !important;
padding: 174px 0 24px !important;
aspect-ratio: auto !important;
overflow: visible !important;
}
.ellida-process-map__thread--static {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
overflow: visible !important;
pointer-events: none !important;
}
.ellida-process-map__thread--static svg {
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: visible !important;
}
.ellida-process-static-path {
fill: none !important;
stroke: var(--ellida-deep) !important;
stroke-width: 3.3 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
vector-effect: non-scaling-stroke !important;
opacity: .95 !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
position: relative !important;
inset: auto !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 2 !important;
text-align: center !important;
}
.ellida-process-step--one { grid-column: 1 !important; }
.ellida-process-step--two { grid-column: 2 !important; }
.ellida-process-step--three { grid-column: 3 !important; }
.ellida-process-step--four { grid-column: 4 !important; }
.ellida-process-step h3 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
margin: 0 0 13px !important;
padding: 9px 12px !important;
box-sizing: border-box !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
white-space: nowrap !important;
font-size: clamp(16px, 1.2vw, 20px) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.018em !important;
}
.ellida-process-step p {
display: block !important;
width: 100% !important;
min-height: 84px !important;
margin: 0 !important;
padding: 0 10px !important;
box-sizing: border-box !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ellida-navy) !important;
font-size: clamp(13px, .95vw, 15px) !important;
font-weight: 400 !important;
line-height: 1.4 !important;
text-align: center !important;
}
.ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center {
position: relative !important;
inset: auto !important;
grid-column: 2 / 4 !important;
grid-row: 2 !important;
justify-self: center !important;
align-self: start !important;
width: min(100%, 410px) !important;
max-width: 410px !important;
margin: 0 !important;
padding: 22px 28px !important;
box-sizing: border-box !important;
border-radius: 34px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
z-index: 2 !important;
}
.ellida-process-center h3 {
margin: 0 0 7px !important;
white-space: nowrap !important;
font-size: clamp(21px, 1.75vw, 27px) !important;
line-height: 1.08 !important;
}
.ellida-process-center p {
margin: 0 !important;
font-size: clamp(13px, .98vw, 15px) !important;
line-height: 1.4 !important;
}
}
@media (max-width: 1024px) {
.ellida-process-map__thread--static {
display: none !important;
}
}
/* ==========================================================
Ellida 3.4.34 — COME FUNZIONA: groviglio + linea animata
Mantiene bloccati titolo e quattro passaggi. Il groviglio
è allineato all'asse del titolo; il filo si disegna quando
la sezione entra in viewport e il box finale compare dopo.
========================================================== */
@media (min-width: 1025px) {
.ellida-process-map {
min-height: 570px !important;
padding-top: 174px !important;
}
.ellida-process-map__thread--animated {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
overflow: visible !important;
pointer-events: none !important;
}
.ellida-process-tangle-art {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: clamp(108px, 10.3vw, 142px) !important;
height: auto !important;
max-width: none !important;
z-index: 2 !important;
opacity: 1 !important;
transform: none !important;
}
.ellida-process-line-art {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 1593 / 578 !important;
overflow: visible !important;
z-index: 1 !important;
}
.ellida-process-line-art .ellida-process-path {
fill: none !important;
stroke: #fff !important;
stroke-width: 28 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
opacity: 1 !important;
vector-effect: non-scaling-stroke !important;
transition: stroke-dashoffset 5.9s cubic-bezier(.22,.72,.26,1) !important;
}
.ellida-process-map.is-drawing .ellida-process-line-art .ellida-process-path {
stroke-dashoffset: 0 !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center {
opacity: 0 !important;
transform: translateY(12px) scale(.985) !important;
transition: opacity .72s cubic-bezier(.22,.72,.26,1), transform .72s cubic-bezier(.22,.72,.26,1) !important;
pointer-events: none !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
}
@media (max-width: 1024px) {
.ellida-process-map__thread--animated {
display: none !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-line-art .ellida-process-path {
stroke-dashoffset: 0 !important;
transition: none !important;
}
.ellida-process-center {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================
Ellida 3.4.35 — COME FUNZIONA: groviglio che si srotola
Rallenta il filo e anima esclusivamente il groviglio e il
tracciato. Titolo, quattro passaggi e box finale mantengono
esattamente la posizione definita nella versione precedente.
========================================================== */
@media (min-width: 1025px) {
.ellida-process-tangle-art {
transform-origin: 74% 38% !important;
will-change: transform, opacity, clip-path !important;
backface-visibility: hidden !important;
}
.ellida-process-map:not(.is-drawing) .ellida-process-tangle-art {
opacity: 1 !important;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1) !important;
clip-path: circle(110% at 74% 38%) !important;
animation: none !important;
}
.ellida-process-map.is-drawing .ellida-process-tangle-art {
animation: ellida-process-tangle-unwind 4.15s cubic-bezier(.22,.66,.28,1) .12s both !important;
}
.ellida-process-line-art .ellida-process-path {
transition-duration: 8.95s !important;
transition-delay: .55s !important;
transition-timing-function: cubic-bezier(.20,.64,.24,1) !important;
}
}
@keyframes ellida-process-tangle-unwind {
0% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
clip-path: circle(110% at 74% 38%);
}
18% {
opacity: 1;
transform: translate3d(2px, -1px, 0) rotate(-3deg) scale(.99);
clip-path: circle(103% at 74% 38%);
}
42% {
opacity: .98;
transform: translate3d(7px, 0, 0) rotate(3.5deg) scale(.88);
clip-path: circle(82% at 74% 38%);
}
67% {
opacity: .82;
transform: translate3d(15px, 1px, 0) rotate(-2deg) scale(.61);
clip-path: circle(58% at 74% 38%);
}
86% {
opacity: .38;
transform: translate3d(25px, 0, 0) rotate(1deg) scale(.30);
clip-path: circle(30% at 74% 38%);
}
100% {
opacity: 0;
transform: translate3d(34px, 0, 0) rotate(0deg) scale(.07);
clip-path: circle(2% at 74% 38%);
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-map .ellida-process-tangle-art {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
animation: none !important;
}
.ellida-process-line-art .ellida-process-path {
transition-delay: 0s !important;
}
}
/* ==========================================================
Ellida 3.4.36 — COME FUNZIONA: video definitivo
Il video fornito sostituisce il tracciato illustrato. I quattro
passaggi e il riquadro finale sono sovrapposti seguendo il
riferimento, usando la stessa griglia e gli stessi margini della
landing. Nessuna sezione precedente viene modificata.
========================================================== */
.ellida-process-video {
pointer-events: none !important;
}
.ellida-process-video__media {
display: block !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: transparent !important;
object-fit: fill !important;
object-position: center !important;
mix-blend-mode: multiply !important;
}
@media (min-width: 1025px) {
.ellida-process {
padding-bottom: 72px !important;
}
.ellida-process__heading {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
text-align: left !important;
}
.ellida-process__heading h2 {
margin-bottom: 0 !important;
}
.ellida-process-map {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 1280px !important;
min-height: 0 !important;
aspect-ratio: 972 / 690 !important;
margin: 20px auto 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.ellida-process-map__thread,
.ellida-process-map__thread--animated,
.ellida-process-map__thread--static {
display: none !important;
}
.ellida-process-video {
display: block !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
overflow: hidden !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
position: absolute !important;
inset: auto !important;
display: block !important;
width: 22% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 12px !important;
transform: none !important;
text-align: center !important;
z-index: 2 !important;
}
.ellida-process-step--one {
left: 2.5% !important;
top: 24.5% !important;
}
.ellida-process-step--two {
left: 26.2% !important;
top: 24.5% !important;
width: 19% !important;
}
.ellida-process-step--three {
left: 46.7% !important;
top: 24.5% !important;
width: 24% !important;
}
.ellida-process-step--four {
left: 72.7% !important;
right: auto !important;
top: 24.5% !important;
width: 23% !important;
}
.ellida-process-step h3 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
min-height: 42px !important;
margin: 0 auto 14px !important;
padding: 9px 15px !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
white-space: nowrap !important;
font-size: clamp(17px, 1.45vw, 23px) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.018em !important;
}
.ellida-process-step p {
display: block !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ellida-navy) !important;
font-size: clamp(14px, 1.05vw, 17px) !important;
font-weight: 400 !important;
line-height: 1.36 !important;
text-align: center !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: 62.5% !important;
bottom: auto !important;
display: block !important;
width: min(34%, 430px) !important;
max-width: 430px !important;
margin: 0 !important;
padding: 23px 30px !important;
border-radius: 36px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
text-align: center !important;
transform: translate(-50%, 12px) scale(.985) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 3 !important;
transition: opacity .72s cubic-bezier(.22,.72,.26,1), transform .72s cubic-bezier(.22,.72,.26,1) !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: translate(-50%, 0) scale(1) !important;
pointer-events: auto !important;
}
.ellida-process-center h3 {
margin: 0 0 7px !important;
white-space: nowrap !important;
font-size: clamp(22px, 1.9vw, 30px) !important;
line-height: 1.08 !important;
}
.ellida-process-center p {
margin: 0 !important;
padding: 0 10px !important;
font-size: clamp(14px, 1.05vw, 17px) !important;
line-height: 1.36 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-map {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto auto auto auto !important;
gap: 28px 24px !important;
width: 100% !important;
max-width: none !important;
margin: 30px auto 0 !important;
padding: 0 !important;
aspect-ratio: auto !important;
}
.ellida-process-video {
position: relative !important;
inset: auto !important;
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100% !important;
aspect-ratio: 972 / 690 !important;
overflow: hidden !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
position: relative !important;
inset: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
transform: none !important;
}
.ellida-process-step--one,
.ellida-process-step--two { grid-row: 2 !important; }
.ellida-process-step--three,
.ellida-process-step--four { grid-row: 3 !important; }
.ellida-process-step h3 {
width: auto !important;
min-height: 40px !important;
padding: 9px 14px !important;
font-size: 18px !important;
}
.ellida-process-step p {
min-height: 0 !important;
padding: 0 10px !important;
font-size: 14px !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
position: relative !important;
inset: auto !important;
grid-column: 1 / -1 !important;
grid-row: 4 !important;
justify-self: center !important;
width: min(100%, 410px) !important;
margin: 18px auto 0 !important;
padding: 22px 28px !important;
transform: translateY(10px) scale(.985) !important;
opacity: 0 !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
transform: none !important;
opacity: 1 !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-map {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
width: 100% !important;
margin: 28px auto 0 !important;
padding: 0 !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
.ellida-process-video {
display: block !important;
position: relative !important;
inset: auto !important;
order: 0 !important;
width: 100% !important;
aspect-ratio: 972 / 690 !important;
overflow: hidden !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
position: relative !important;
inset: auto !important;
order: 1 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
transform: none !important;
}
.ellida-process-step h3 {
width: auto !important;
min-height: 40px !important;
margin-bottom: 12px !important;
padding: 9px 15px !important;
font-size: 18px !important;
}
.ellida-process-step p {
width: min(100%, 340px) !important;
min-height: 0 !important;
margin-inline: auto !important;
padding: 0 10px !important;
font-size: 14px !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
position: relative !important;
inset: auto !important;
order: 2 !important;
width: min(100%, 380px) !important;
margin: 12px auto 0 !important;
padding: 22px 26px !important;
transform: translateY(10px) scale(.985) !important;
opacity: 0 !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
transform: none !important;
opacity: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================
Ellida 3.4.37 — COME FUNZIONA: video rifinito
Sfondo incorporato nello stesso beige della landing, velocità
rallentata e tracciato concluso sul riquadro finale.
========================================================== */
.ellida-process-video,
.ellida-process-video__media {
background: #f5efeb !important;
}
.ellida-process-video__media {
mix-blend-mode: normal !important;
}
/* ==========================================================
Ellida 3.4.38 — COME FUNZIONA: rifinitura layout + video
- card allineate con i margini editoriali della landing
- filo più sottile visivamente e partenza oltre il margine
- più aria tra titolo, groviglio e riquadri
========================================================== */
@media (min-width: 1025px) {
.ellida-process {
padding-bottom: 78px !important;
}
.ellida-process__heading,
.ellida-process__heading h2,
.ellida-process .ellida-kicker {
max-width: 980px !important;
}
.ellida-process-map {
max-width: 1280px !important;
aspect-ratio: 972 / 712 !important;
margin: 28px auto 0 !important;
overflow: visible !important;
}
.ellida-process-video {
inset: 0 !important;
overflow: hidden !important;
}
.ellida-process-video__media {
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
object-position: center !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
width: 21.5% !important;
padding: 0 clamp(10px, 1.15vw, 16px) !important;
}
.ellida-process-step--one {
left: 4.2% !important;
top: 25.2% !important;
}
.ellida-process-step--two {
left: 26.9% !important;
top: 25.2% !important;
width: 18.4% !important;
}
.ellida-process-step--three {
left: 47.7% !important;
top: 25.2% !important;
width: 23.5% !important;
}
.ellida-process-step--four {
left: 73.7% !important;
top: 25.2% !important;
width: 21.8% !important;
}
.ellida-process-step h3 {
margin-bottom: 14px !important;
padding: 10px 16px !important;
}
.ellida-process-step p {
padding: 0 12px !important;
font-size: clamp(14px, 1.02vw, 17px) !important;
line-height: 1.35 !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
top: 64.4% !important;
width: min(35%, 436px) !important;
max-width: 436px !important;
padding: 24px 32px !important;
}
.ellida-process-center p {
padding: 0 14px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-map {
margin-top: 32px !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
padding: 0 14px !important;
}
.ellida-process-step p,
.ellida-process-center p {
padding-inline: 12px !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-map {
margin-top: 30px !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four,
.ellida-process-center {
padding-inline: 10px !important;
}
}
/* ==========================================================
Ellida 3.4.39 — HEADER + HERO
Header ridotto a Home / Servizi / Come funziona.
La foto hero resta statica e il box “Chi sono” compare
al primo scroll significativo, senza muovere l'immagine.
========================================================== */
@media (min-width: 1025px) {
.ellida-nav {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.ellida-nav a {
white-space: nowrap !important;
}
}
@media (min-width: 768px) {
.ellida-story__photo {
transform: none !important;
transition: none !important;
}
}
/* ==========================================================
Ellida 3.4.41 — COME FUNZIONA: video a tutta pagina
Il titolo resta sulla griglia editoriale; video e quattro
passaggi occupano la larghezza del viewport. Nessun riquadro
aggiuntivo attorno ai testi descrittivi.
========================================================== */
.ellida-process,
.ellida-process-video,
.ellida-process-video__media {
background-color: #f5efeb !important;
}
.ellida-process-step,
.ellida-process-step p {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.ellida-process-step::before,
.ellida-process-step::after,
.ellida-process-step p::before,
.ellida-process-step p::after {
display: none !important;
content: none !important;
}
@media (min-width: 1025px) {
.ellida-process {
overflow-x: clip !important;
}
.ellida-process .ellida-shell {
overflow: visible !important;
}
.ellida-process-map {
width: 100vw !important;
max-width: none !important;
height: clamp(720px, 61vw, 900px) !important;
min-height: 720px !important;
aspect-ratio: auto !important;
margin-top: 30px !important;
margin-right: 0 !important;
margin-left: calc(50% - 50vw) !important;
padding: 0 !important;
}
.ellida-process-video {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.ellida-process-video__media {
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
object-position: center top !important;
border: 0 !important;
box-shadow: none !important;
}
.ellida-process-step,
.ellida-process-step--one,
.ellida-process-step--two,
.ellida-process-step--three,
.ellida-process-step--four {
width: 20.5% !important;
padding: 0 clamp(14px, 1.25vw, 22px) !important;
}
.ellida-process-step--one {
left: 4.3% !important;
top: 25.5% !important;
}
.ellida-process-step--two {
left: 27.3% !important;
top: 25.5% !important;
width: 18.5% !important;
}
.ellida-process-step--three {
left: 48.7% !important;
top: 25.5% !important;
width: 23% !important;
}
.ellida-process-step--four {
left: 74.3% !important;
top: 25.5% !important;
width: 21.3% !important;
}
.ellida-process-step p {
margin: 0 auto !important;
padding: 0 14px !important;
max-width: 320px !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
top: 65.2% !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-video,
.ellida-process-video__media {
background: #f5efeb !important;
}
.ellida-process-step p {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-video,
.ellida-process-video__media {
background: #f5efeb !important;
}
.ellida-process-step p {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
}
/* ==========================================================
Ellida 3.4.42 — COME FUNZIONA: allineamento definitivo
I quattro passaggi seguono lo stesso asse editoriale del titolo,
mentre il video rimane esteso a tutta pagina. Il box finale viene
avvicinato al punto di arrivo del filo e la sezione viene accorciata.
========================================================== */
@media (min-width: 1025px) {
.ellida-process {
padding-bottom: 24px !important;
}
.ellida-process-map {
height: clamp(590px, 47vw, 740px) !important;
min-height: 590px !important;
margin-top: 26px !important;
margin-bottom: 0 !important;
}
.ellida-process-steps {
position: absolute !important;
left: 50% !important;
top: 25.5% !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: clamp(22px, 2.5vw, 44px) !important;
align-items: start !important;
width: min(calc(100vw - 64px), 1280px) !important;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%) !important;
}
.ellida-process-steps .ellida-process-step,
.ellida-process-steps .ellida-process-step--one,
.ellida-process-steps .ellida-process-step--two,
.ellida-process-steps .ellida-process-step--three,
.ellida-process-steps .ellida-process-step--four {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 clamp(8px, .9vw, 14px) !important;
transform: none !important;
}
.ellida-process-steps .ellida-process-step h3 {
margin: 0 auto 14px !important;
}
.ellida-process-steps .ellida-process-step p {
width: 100% !important;
max-width: 288px !important;
margin: 0 auto !important;
padding: 0 10px !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
top: 59.2% !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-steps {
display: contents !important;
}
.ellida-process {
padding-bottom: 30px !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-steps {
display: contents !important;
}
.ellida-process {
padding-bottom: 24px !important;
}
}
/* ==========================================================
Ellida 3.4.43 — COME FUNZIONA: fascia testi sulla griglia titolo
I quattro passaggi occupano la stessa fascia orizzontale del
titolo, come indicato dal riferimento, mentre il video resta
esteso a tutta pagina. Nessuna guida grafica viene inserita.
========================================================== */
@media (min-width: 1025px) {
.ellida-process-steps {
left: var(--ellida-process-steps-left, max(32px, calc((100vw - 1280px) / 2))) !important;
width: var(--ellida-process-steps-width, min(980px, calc(100vw - 64px))) !important;
top: 25.5% !important;
transform: none !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: clamp(18px, 1.8vw, 34px) !important;
}
.ellida-process-steps .ellida-process-step,
.ellida-process-steps .ellida-process-step--one,
.ellida-process-steps .ellida-process-step--two,
.ellida-process-steps .ellida-process-step--three,
.ellida-process-steps .ellida-process-step--four {
width: 100% !important;
padding: 0 clamp(6px, .65vw, 10px) !important;
}
.ellida-process-steps .ellida-process-step p {
width: 100% !important;
max-width: 238px !important;
padding: 0 6px !important;
}
}
/* ==========================================================
Ellida 3.4.44 — COME FUNZIONA: asse testi misurato sul titolo
La fascia dei quattro passaggi viene posizionata via JS partendo
dall'asse reale del titolo e mantiene lo stesso margine a destra.
========================================================== */
@media (min-width: 1025px) {
.ellida-process-steps {
top: 25.5% !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
column-gap: clamp(22px, 2vw, 38px) !important;
align-items: start !important;
justify-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
.ellida-process-steps .ellida-process-step {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding-inline: clamp(6px, .65vw, 10px) !important;
}
.ellida-process-steps .ellida-process-step p {
box-sizing: border-box !important;
width: 100% !important;
max-width: 238px !important;
margin-inline: auto !important;
padding-inline: 6px !important;
}
}
/* ==========================================================
Ellida 3.4.45 — COME FUNZIONA: bordo del primo riquadro
Il riferimento viene misurato sul testo reale del titolo h2,
non sul contenitore. Il bordo sinistro di “sentiti accolto”
coincide quindi con il bordo sinistro del titolo.
========================================================== */
@media (min-width: 1025px) {
.ellida-process-steps .ellida-process-step--one {
justify-self: start !important;
padding-left: 0 !important;
text-align: left !important;
}
.ellida-process-steps .ellida-process-step--one h3 {
margin-left: 0 !important;
margin-right: auto !important;
}
.ellida-process-steps .ellida-process-step--one p {
margin-left: 0 !important;
margin-right: auto !important;
text-align: center !important;
}
}
/* ==========================================================
Ellida 3.4.46 — COME FUNZIONA: passaggi come immagine
Il PNG fornito sostituisce i quattro blocchi HTML. Il primo
riquadro blu parte sullo stesso asse sinistro del titolo.
========================================================== */
.ellida-process-steps__image {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: #f5efeb !important;
}
@media (min-width: 1025px) {
.ellida-process-steps {
position: absolute !important;
top: 25.5% !important;
display: block !important;
grid-template-columns: none !important;
column-gap: 0 !important;
align-items: initial !important;
justify-items: initial !important;
margin: 0 !important;
padding: 0 !important;
z-index: 2 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-steps {
position: relative !important;
inset: auto !important;
display: block !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
z-index: 2 !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
grid-row: 3 !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-steps {
position: relative !important;
inset: auto !important;
order: 1 !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
z-index: 2 !important;
}
.ellida-process-steps__image {
width: 760px !important;
max-width: none !important;
}
}
/* ==========================================================
Ellida 3.4.47 — COME FUNZIONA: video con trasparenza reale
WebM VP9 con canale alpha; MP4 beige mantenuto solo come fallback.
========================================================== */
.ellida-process-video,
.ellida-process-video__media {
background: transparent !important;
}
.ellida-process-video__media {
mix-blend-mode: normal !important;
}
/* ==========================================================
Ellida 3.4.48 — COME FUNZIONA: nuova immagine passaggi
Sostituito il PNG dei quattro passaggi con la nuova risorsa
fornita e alzato leggermente il blocco rispetto alla versione
precedente. Il resto della sezione resta invariato.
========================================================== */
@media (min-width: 1025px) {
.ellida-process-steps {
top: 23.2% !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-steps {
transform: translateY(-10px) !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-steps {
transform: translateY(-8px) !important;
}
}
/* ==========================================================
Ellida 3.4.49 — COME FUNZIONA: animazione completa e pulita
Il video usa l'intera animazione originale, compreso lo
scioglimento completo del groviglio. Il PNG dei quattro passaggi
è inserito nella fascia libera tra il filo superiore e la curva
inferiore; il suo fondo beige maschera il filo senza creare stacchi.
La parte finale viene nascosta sotto il box così il filo sembra
concludersi esattamente su “Costruiamo il percorso”.
========================================================== */
.ellida-process-tail-mask {
display: none;
}
@media (min-width: 1025px) {
.ellida-process {
padding-bottom: 12px !important;
}
.ellida-process-map {
height: clamp(600px, 48vw, 720px) !important;
min-height: 600px !important;
margin-top: 24px !important;
margin-bottom: 0 !important;
overflow: hidden !important;
}
.ellida-process-video,
.ellida-process-video__media {
background: transparent !important;
}
.ellida-process-video {
z-index: 0 !important;
}
.ellida-process-video__media {
object-fit: fill !important;
object-position: center top !important;
}
.ellida-process-steps {
top: 24.4% !important;
z-index: 3 !important;
background: #f5efeb !important;
box-shadow: 0 0 0 12px #f5efeb !important;
}
.ellida-process-steps__image {
position: relative !important;
z-index: 1 !important;
background: #f5efeb !important;
}
.ellida-process-tail-mask {
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 67.2% !important;
bottom: 0 !important;
z-index: 1 !important;
background: #f5efeb !important;
pointer-events: none !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
top: 62.8% !important;
z-index: 4 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-steps {
background: #f5efeb !important;
box-shadow: 0 0 0 8px #f5efeb !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-steps {
background: #f5efeb !important;
box-shadow: 0 0 0 6px #f5efeb !important;
}
}
/* ==========================================================
Ellida 3.4.51 — COME FUNZIONA: nuova immagine + video beige
Nuovo PNG dei quattro passaggi, leggermente più in alto.
Video e contenitori usano il beige esatto della landing.
========================================================== */
.ellida-process-map,
.ellida-process-video,
.ellida-process-video__media,
.ellida-process-steps,
.ellida-process-steps__image {
background-color: #f5efeb !important;
}
@media (min-width: 1025px) {
.ellida-process-steps {
top: 20.8% !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-process-steps {
transform: translateY(-22px) !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process-steps {
transform: translateY(-18px) !important;
}
}
/* ==========================================================
Ellida 3.4.51 — fallback MP4 beige + steps asset swap
========================================================== */
.ellida-process-video,
.ellida-process-video__media,
.ellida-process-map,
.ellida-process-steps,
.ellida-process-steps__image {
background: #f5efeb !important;
background-color: #f5efeb !important;
}
/* ==========================================================
Ellida 3.4.52 — COME FUNZIONA: fondo MP4 corretto e finale filo
Il browser usa l'MP4 con canvas beige #f5efeb. La maschera
interrompe il filo nel punto esatto in cui inizia il riquadro
“Costruiamo il percorso”.
========================================================== */
.ellida-process,
.ellida-process-map,
.ellida-process-video,
.ellida-process-video__media,
.ellida-process-steps,
.ellida-process-steps__image,
.ellida-process-tail-mask {
background-color: #f5efeb !important;
}
@media (min-width: 1025px) {
.ellida-process-tail-mask {
top: 62.1% !important;
bottom: 0 !important;
background: #f5efeb !important;
}
.ellida-process-center,
.ellida-process-map.is-drawing .ellida-process-center,
.ellida-process-map.is-center-visible .ellida-process-center {
top: 62.1% !important;
transform: translate(-50%, 12px) scale(.97) !important;
}
.ellida-process-map.is-center-visible .ellida-process-center {
transform: translate(-50%, 0) scale(1) !important;
}
}
/* ==========================================================
Ellida 3.4.54 — rifinitura desktop da verifica visiva
- gli ancoraggi non finiscono sotto l'header fisso
- campo telefono coerente con gli altri input
- leggibilità migliorata in servizi, aiuto e contatti
- gerarchia e spaziatura del modulo più compatte
========================================================== */
/* Mantiene i titoli visibili quando si usano i link del menu. */
.ellida-landing section[id] {
scroll-margin-top: calc(var(--ellida-header-h) + (var(--ellida-header-gap) * 2) + 18px) !important;
}
body.admin-bar .ellida-landing section[id] {
scroll-margin-top: calc(var(--ellida-header-h) + (var(--ellida-header-gap) * 2) + 50px) !important;
}
/* Il campo è type="tel": deve ricevere gli stessi stili degli altri input. */
.ellida-contact-form input[type="tel"] {
width: 100% !important;
min-height: 44px !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 22px !important;
background: var(--ellida-cream) !important;
color: var(--ellida-navy) !important;
outline: 2px solid transparent !important;
outline-offset: 2px !important;
transition: outline-color .3s ease !important;
}
.ellida-contact-form input[type="tel"]:focus {
outline-color: var(--ellida-deep) !important;
}
@media (min-width: 1025px) {
/* Le card devono distinguersi chiaramente dal fondo della sezione. */
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
border: 1px solid rgba(47, 65, 87, .08) !important;
background: rgba(255, 255, 255, .34) !important;
box-shadow: inset 0 0 32px rgba(255,255,255,.52), 0 14px 34px rgba(47,65,87,.08) !important;
}
.ellida-services-grid[data-expanded="false"] .ellida-service-card:hover,
.ellida-services-grid[data-expanded="false"] .ellida-service-card:focus-visible {
background: rgba(255, 255, 255, .52) !important;
box-shadow: inset 0 0 32px rgba(255,255,255,.64), 0 18px 38px rgba(47,65,87,.13) !important;
}
.ellida-service-card strong {
color: var(--ellida-navy) !important;
font-weight: 600 !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
color: rgba(47, 65, 87, .86) !important;
font-size: 13px !important;
line-height: 1.38 !important;
}
.ellida-service-card small {
font-size: 11px !important;
}
/* Testi più leggibili sul fondo petrolio. */
.ellida-help__intro p,
.ellida-help__list button,
.ellida-help-accordion__panel {
color: rgba(255, 255, 255, .88) !important;
}
.ellida-help__list button {
border-bottom-color: rgba(255,255,255,.42) !important;
}
/* Modulo più coerente: etichette e privacy non devono sembrare note legali illeggibili. */
.ellida-contact-form__panel {
padding: 28px 32px 30px !important;
}
.ellida-contact-form label > span {
font-size: 12px !important;
color: rgba(47,65,87,.82) !important;
}
.ellida-contact-form__privacy {
margin-top: 12px !important;
margin-bottom: 12px !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
}
.ellida-contact-form .ellida-btn {
min-width: 130px !important;
margin-top: 6px !important;
}
.ellida-quote {
padding-top: 72px !important;
}
}
/* ==========================================================
Ellida 3.4.55 — COME FUNZIONA ricostruito
Testi reali, percorso leggibile e responsive, senza video o
immagini contenenti testo. Correzione titolo servizio lutto.
========================================================== */
/* Nelle miniature laterali il titolo più lungo resta su una riga. */
@media (min-width: 900px) {
.ellida-services-grid[data-expanded="true"] .ellida-service-card[data-service-key="lutto"] strong {
display: block !important;
width: 100% !important;
margin-bottom: 7px !important;
font-size: 13.5px !important;
line-height: 1 !important;
letter-spacing: -0.045em !important;
white-space: nowrap !important;
text-align: left !important;
}
}
/* Il nuovo percorso usa classi autonome per non ereditare le vecchie
sovrapposizioni della precedente versione video/PNG. */
.ellida-process {
padding-top: clamp(92px, 8vw, 142px) !important;
padding-bottom: clamp(92px, 8vw, 142px) !important;
background: var(--ellida-cream) !important;
overflow: hidden !important;
}
.ellida-process__heading {
max-width: 1120px !important;
margin-bottom: clamp(52px, 5vw, 82px) !important;
}
.ellida-process__heading h2 {
margin-bottom: 0 !important;
}
.ellida-process-journey {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(18px, 2vw, 34px) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
isolation: isolate !important;
}
.ellida-process-journey::before {
content: "" !important;
position: absolute !important;
left: 6.5% !important;
right: 6.5% !important;
top: 26px !important;
height: 3px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, var(--ellida-pale-2), var(--ellida-deep), var(--ellida-pale-2)) !important;
opacity: .72 !important;
z-index: -1 !important;
}
.ellida-process-stage {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
min-width: 0 !important;
text-align: center !important;
}
.ellida-process-stage__number {
display: grid !important;
place-items: center !important;
width: 54px !important;
height: 54px !important;
margin: 0 0 22px !important;
border: 5px solid var(--ellida-cream) !important;
border-radius: 50% !important;
background: var(--ellida-deep) !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(47, 65, 87, .18) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
line-height: 1 !important;
}
.ellida-process-stage__card {
width: 100% !important;
min-height: 244px !important;
padding: clamp(24px, 2.2vw, 34px) clamp(18px, 1.8vw, 28px) !important;
border: 1px solid rgba(87, 124, 142, .16) !important;
border-radius: 30px !important;
background: rgba(255, 255, 255, .48) !important;
box-shadow: inset 0 0 28px rgba(255,255,255,.52), 0 18px 40px rgba(47,65,87,.07) !important;
transition: transform .38s var(--ellida-ease), box-shadow .38s ease, background-color .38s ease !important;
}
.ellida-process-stage:hover .ellida-process-stage__card {
transform: translateY(-5px) !important;
background: rgba(255, 255, 255, .66) !important;
box-shadow: inset 0 0 30px rgba(255,255,255,.68), 0 22px 44px rgba(47,65,87,.11) !important;
}
.ellida-process-stage__card h3 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
margin: 0 0 20px !important;
padding: 9px 18px !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
font-size: clamp(16px, 1.2vw, 21px) !important;
font-weight: 600 !important;
line-height: 1.05 !important;
}
.ellida-process-stage__card p {
max-width: 300px !important;
margin: 0 auto !important;
color: rgba(47,65,87,.84) !important;
font-size: clamp(13px, .95vw, 16px) !important;
line-height: 1.48 !important;
}
.ellida-process-outcome {
position: relative !important;
width: min(100%, 620px) !important;
margin: clamp(64px, 6vw, 94px) auto 0 !important;
padding: clamp(28px, 3vw, 42px) clamp(28px, 4vw, 58px) !important;
border-radius: 36px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
text-align: center !important;
box-shadow: 0 22px 48px rgba(47,65,87,.17) !important;
}
.ellida-process-outcome::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: 100% !important;
width: 3px !important;
height: clamp(64px, 6vw, 94px) !important;
border-radius: 999px !important;
background: linear-gradient(180deg, var(--ellida-pale-2), var(--ellida-deep)) !important;
transform: translateX(-50%) !important;
opacity: .74 !important;
}
.ellida-process-outcome__eyebrow {
display: block !important;
margin-bottom: 8px !important;
color: rgba(255,255,255,.72) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.ellida-process-outcome h3 {
margin: 0 0 9px !important;
color: #fff !important;
font-size: clamp(25px, 2.2vw, 36px) !important;
line-height: 1.08 !important;
}
.ellida-process-outcome p {
max-width: 480px !important;
margin: 0 auto !important;
color: rgba(255,255,255,.84) !important;
font-size: clamp(14px, 1vw, 17px) !important;
line-height: 1.45 !important;
}
@media (max-width: 1100px) {
.ellida-process-journey {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 34px 26px !important;
}
.ellida-process-journey::before {
display: none !important;
}
.ellida-process-stage__card {
min-height: 214px !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process {
padding-top: 72px !important;
padding-bottom: 82px !important;
}
.ellida-process__heading {
margin-bottom: 42px !important;
}
.ellida-process__heading h2 br {
display: none !important;
}
.ellida-process-journey {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
padding-left: 18px !important;
}
.ellida-process-journey::before {
display: block !important;
left: 43px !important;
right: auto !important;
top: 26px !important;
bottom: 26px !important;
width: 3px !important;
height: auto !important;
background: linear-gradient(180deg, var(--ellida-pale-2), var(--ellida-deep), var(--ellida-pale-2)) !important;
}
.ellida-process-stage {
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr) !important;
gap: 16px !important;
align-items: start !important;
text-align: left !important;
}
.ellida-process-stage__number {
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
}
.ellida-process-stage__card {
min-height: 0 !important;
padding: 22px 20px !important;
border-radius: 24px !important;
text-align: left !important;
}
.ellida-process-stage__card h3 {
min-height: 0 !important;
margin-bottom: 13px !important;
padding: 8px 14px !important;
font-size: 16px !important;
}
.ellida-process-stage__card p {
max-width: none !important;
margin: 0 !important;
font-size: 14px !important;
}
.ellida-process-outcome {
width: calc(100% - 18px) !important;
margin-top: 58px !important;
margin-left: 18px !important;
padding: 28px 22px !important;
border-radius: 28px !important;
}
.ellida-process-outcome::before {
height: 58px !important;
}
}
/* ==========================================================
Ellida 3.4.56 — PERCORSO ANIMATO “DALL'AGGROVIGLIO ALLA FORMA”
Recupera il significato della versione originaria mantenendo
contenuti HTML, responsive e accessibilità.
========================================================== */
.ellida-process__lead {
width: min(100%, 720px) !important;
margin: 26px 0 0 !important;
color: rgba(47, 65, 87, .72) !important;
font-size: clamp(15px, 1.12vw, 18px) !important;
line-height: 1.55 !important;
}
.ellida-process-unravel {
position: relative !important;
min-height: 620px !important;
margin-top: clamp(22px, 3vw, 46px) !important;
isolation: isolate !important;
}
.ellida-process-unravel__art {
position: absolute !important;
inset: 0 0 auto !important;
height: 430px !important;
pointer-events: none !important;
z-index: 0 !important;
}
.ellida-process-unravel__svg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 430px !important;
overflow: visible !important;
}
.ellida-process-unravel .ellida-process-path {
fill: none !important;
stroke: var(--ellida-deep) !important;
stroke-width: 5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
vector-effect: non-scaling-stroke !important;
opacity: .88 !important;
transition: stroke-dashoffset 4.1s cubic-bezier(.42, 0, .18, 1) !important;
}
.ellida-process-unravel.is-drawing .ellida-process-path {
stroke-dashoffset: 0 !important;
}
.ellida-process-unravel__tangle {
position: absolute !important;
top: 30px !important;
left: -34px !important;
width: 128px !important;
height: auto !important;
transform: rotate(-5deg) scale(1) !important;
transform-origin: center !important;
opacity: .98 !important;
filter: drop-shadow(0 9px 15px rgba(47, 65, 87, .08)) !important;
z-index: 2 !important;
}
.ellida-process-unravel__start {
position: absolute !important;
top: 150px !important;
left: 0 !important;
color: rgba(47, 65, 87, .58) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
opacity: 0 !important;
transform: translateY(5px) !important;
transition: opacity .5s ease .15s, transform .5s ease .15s !important;
}
.ellida-process-unravel.is-drawing .ellida-process-unravel__tangle {
animation: ellida-unravel-tangle 4.1s cubic-bezier(.42, 0, .18, 1) both !important;
}
.ellida-process-unravel.is-drawing .ellida-process-unravel__start {
opacity: 1 !important;
transform: none !important;
}
@keyframes ellida-unravel-tangle {
0% { transform: rotate(-6deg) scale(1); opacity: .98; }
22% { transform: rotate(3deg) scale(1.035); opacity: 1; }
58% { transform: rotate(-1deg) scale(.93); opacity: .82; }
100% { transform: rotate(0) scale(.82); opacity: .50; }
}
.ellida-process-unravel__steps {
position: relative !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(22px, 3vw, 46px) !important;
margin: 0 !important;
padding: 205px 90px 0 92px !important;
list-style: none !important;
}
.ellida-process-unravel__step {
position: relative !important;
min-width: 0 !important;
padding: 0 4px !important;
text-align: center !important;
opacity: 0 !important;
transform: translateY(26px) !important;
transition: opacity .68s ease, transform .78s var(--ellida-ease) !important;
}
.ellida-process-unravel__step::before {
content: "" !important;
position: absolute !important;
inset: 18px -12px -10px !important;
z-index: -1 !important;
background: radial-gradient(ellipse at center, var(--ellida-cream) 68%, rgba(245,239,235,.88) 82%, transparent 100%) !important;
pointer-events: none !important;
}
.ellida-process-unravel.is-drawing .ellida-process-unravel__step {
opacity: 1 !important;
transform: none !important;
}
.ellida-process-unravel.is-drawing .ellida-process-unravel__step:nth-child(1) { transition-delay: .72s !important; }
.ellida-process-unravel.is-drawing .ellida-process-unravel__step:nth-child(2) { transition-delay: 1.38s !important; }
.ellida-process-unravel.is-drawing .ellida-process-unravel__step:nth-child(3) { transition-delay: 2.05s !important; }
.ellida-process-unravel.is-drawing .ellida-process-unravel__step:nth-child(4) { transition-delay: 2.72s !important; }
.ellida-process-unravel__number {
display: grid !important;
place-items: center !important;
width: 34px !important;
height: 34px !important;
margin: 0 auto 10px !important;
border: 2px solid rgba(87, 124, 142, .35) !important;
border-radius: 50% !important;
background: var(--ellida-cream) !important;
color: var(--ellida-deep) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
box-shadow: 0 6px 16px rgba(47, 65, 87, .09) !important;
}
.ellida-process-unravel__step h3 {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
margin: 0 0 15px !important;
padding: 8px 18px !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
font-size: clamp(15px, 1.22vw, 20px) !important;
font-weight: 600 !important;
line-height: 1.08 !important;
box-shadow: 0 10px 20px rgba(47, 65, 87, .12) !important;
}
.ellida-process-unravel__step p {
max-width: 270px !important;
margin: 0 auto !important;
color: rgba(47, 65, 87, .76) !important;
font-size: clamp(13px, .96vw, 16px) !important;
line-height: 1.43 !important;
}
.ellida-process-unravel__outcome {
position: absolute !important;
left: 50% !important;
bottom: 0 !important;
z-index: 3 !important;
width: min(100% - 36px, 500px) !important;
padding: 25px 36px 27px !important;
border-radius: 32px !important;
background: var(--ellida-deep) !important;
color: #fff !important;
text-align: center !important;
box-shadow: 0 20px 44px rgba(47,65,87,.16) !important;
opacity: 0 !important;
transform: translate(-50%, 24px) scale(.97) !important;
transition: opacity .72s ease, transform .82s var(--ellida-ease) !important;
}
.ellida-process-unravel.is-center-visible .ellida-process-unravel__outcome {
opacity: 1 !important;
transform: translate(-50%, 0) scale(1) !important;
}
.ellida-process-unravel__outcome::before {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: 100% !important;
width: 4px !important;
height: 58px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, rgba(87,124,142,.25), var(--ellida-deep)) !important;
transform: translateX(-50%) scaleY(0) !important;
transform-origin: bottom !important;
transition: transform .62s ease 3.72s !important;
}
.ellida-process-unravel.is-center-visible .ellida-process-unravel__outcome::before {
transform: translateX(-50%) scaleY(1) !important;
}
.ellida-process-unravel__outcome > span {
display: block !important;
margin-bottom: 7px !important;
color: rgba(255,255,255,.68) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
.ellida-process-unravel__outcome h3 {
margin: 0 0 7px !important;
color: #fff !important;
font-size: clamp(24px, 2vw, 32px) !important;
line-height: 1.08 !important;
}
.ellida-process-unravel__outcome p {
max-width: 390px !important;
margin: 0 auto !important;
color: rgba(255,255,255,.82) !important;
font-size: 14px !important;
line-height: 1.42 !important;
}
@media (max-width: 1100px) {
.ellida-process-unravel {
min-height: 730px !important;
}
.ellida-process-unravel__art {
height: 370px !important;
}
.ellida-process-unravel__svg {
display: none !important;
}
.ellida-process-unravel__steps {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 42px 34px !important;
padding: 190px 48px 0 88px !important;
}
.ellida-process-unravel__step p {
max-width: 330px !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-process__lead {
margin-top: 20px !important;
font-size: 15px !important;
}
.ellida-process-unravel {
min-height: 0 !important;
margin-top: 38px !important;
padding: 112px 0 0 !important;
}
.ellida-process-unravel__art {
height: 100% !important;
}
.ellida-process-unravel__svg {
display: none !important;
}
.ellida-process-unravel__tangle {
top: 0 !important;
left: 2px !important;
width: 88px !important;
}
.ellida-process-unravel__start {
top: 74px !important;
left: 4px !important;
font-size: 9px !important;
}
.ellida-process-unravel__steps {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
padding: 0 0 0 28px !important;
}
.ellida-process-unravel__steps::before {
content: "" !important;
position: absolute !important;
left: 44px !important;
top: -20px !important;
bottom: -46px !important;
width: 3px !important;
border-radius: 999px !important;
background: linear-gradient(180deg, rgba(87,124,142,.34), var(--ellida-deep), rgba(87,124,142,.28)) !important;
transform: scaleY(0) !important;
transform-origin: top !important;
transition: transform 3.2s cubic-bezier(.42, 0, .18, 1) !important;
}
.ellida-process-unravel.is-drawing .ellida-process-unravel__steps::before {
transform: scaleY(1) !important;
}
.ellida-process-unravel__step {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
column-gap: 16px !important;
padding: 0 !important;
text-align: left !important;
}
.ellida-process-unravel__number {
position: relative !important;
z-index: 2 !important;
grid-row: 1 / span 2 !important;
width: 34px !important;
height: 34px !important;
margin: 3px 0 0 !important;
}
.ellida-process-unravel__step h3 {
justify-self: start !important;
min-height: 0 !important;
margin: 0 0 10px !important;
padding: 8px 14px !important;
font-size: 16px !important;
}
.ellida-process-unravel__step p {
max-width: none !important;
margin: 0 !important;
padding-right: 4px !important;
font-size: 14px !important;
}
.ellida-process-unravel__outcome::before {
display: none !important;
}
.ellida-process-unravel__outcome {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: calc(100% - 28px) !important;
margin: 52px 0 0 28px !important;
padding: 25px 22px !important;
border-radius: 26px !important;
transform: translateY(22px) scale(.98) !important;
}
.ellida-process-unravel.is-center-visible .ellida-process-unravel__outcome {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-unravel .ellida-process-path {
stroke-dashoffset: 0 !important;
transition: none !important;
}
.ellida-process-unravel__tangle {
animation: none !important;
transform: rotate(0) scale(.88) !important;
opacity: .62 !important;
}
.ellida-process-unravel__start,
.ellida-process-unravel__step,
.ellida-process-unravel__outcome {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.ellida-process-unravel__outcome {
transform: translateX(-50%) !important;
}
.ellida-process-unravel__steps::before {
transform: scaleY(1) !important;
transition: none !important;
}
}
/* ==========================================================
Ellida 3.4.60 — COME FUNZIONA STATICO
Layout fedele al riferimento: filo/groviglio full-width,
quattro passaggi allineati e riquadro finale centrale.
Nessuna animazione.
========================================================== */
.ellida-process {
padding-top: clamp(54px, 5vw, 76px) !important;
padding-bottom: clamp(48px, 4vw, 68px) !important;
overflow: hidden !important;
}
.ellida-process__heading {
max-width: 1040px !important;
margin: 0 !important;
}
.ellida-process__heading h2 {
margin: 0 !important;
font-size: clamp(46px, 4.15vw, 68px) !important;
line-height: 1.03 !important;
}
.ellida-process__lead {
width: min(100%, 760px) !important;
margin: 16px 0 0 !important;
font-size: clamp(15px, 1vw, 17px) !important;
line-height: 1.45 !important;
}
.ellida-process-static {
position: relative !important;
left: 50% !important;
width: 100vw !important;
height: clamp(520px, 40vw, 620px) !important;
margin: 4px 0 0 -50vw !important;
isolation: isolate !important;
overflow: hidden !important;
}
.ellida-process-static__thread {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: fill !important;
object-position: center top !important;
pointer-events: none !important;
user-select: none !important;
}
.ellida-process-static__steps {
position: absolute !important;
z-index: 2 !important;
top: 30.2% !important;
left: 50% !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: clamp(28px, 4vw, 72px) !important;
width: min(calc(100% - 80px), 1120px) !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
transform: translateX(-50%) !important;
}
.ellida-process-static__step {
min-width: 0 !important;
text-align: center !important;
}
.ellida-process-static__number {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
margin: 0 0 12px !important;
border: 1px solid rgba(87,124,142,.38) !important;
border-radius: 999px !important;
background: rgba(245,239,235,.96) !important;
color: var(--ellida-deep) !important;
box-shadow: 0 8px 18px rgba(47,65,87,.07) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .08em !important;
}
.ellida-process-static__step h3 {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: max-content !important;
max-width: 100% !important;
min-height: 39px !important;
margin: 0 auto 14px !important;
padding: 9px 20px 10px !important;
border-radius: 999px !important;
background: var(--ellida-deep) !important;
color: var(--ellida-white) !important;
font-family: 'Montserrat', sans-serif !important;
font-size: clamp(16px, 1.25vw, 20px) !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
.ellida-process-static__step p {
width: min(100%, 225px) !important;
margin: 0 auto !important;
color: rgba(47,65,87,.70) !important;
font-size: clamp(13px, .96vw, 16px) !important;
line-height: 1.38 !important;
}
.ellida-process-static__outcome {
position: absolute !important;
z-index: 3 !important;
left: 50% !important;
bottom: 3.7% !important;
width: min(calc(100% - 40px), 480px) !important;
min-height: 126px !important;
margin: 0 !important;
padding: 20px 28px 22px !important;
border-radius: 26px !important;
background: var(--ellida-deep) !important;
color: var(--ellida-white) !important;
text-align: center !important;
box-shadow: 0 20px 44px rgba(47,65,87,.12) !important;
transform: translateX(-50%) !important;
}
.ellida-process-static__outcome > span {
display: block !important;
margin: 0 0 7px !important;
color: rgba(255,255,255,.82) !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
}
.ellida-process-static__outcome h3 {
margin: 0 0 6px !important;
color: var(--ellida-white) !important;
font-family: 'Montserrat', sans-serif !important;
font-size: clamp(27px, 2.2vw, 36px) !important;
font-weight: 400 !important;
line-height: 1.08 !important;
letter-spacing: -.025em !important;
}
.ellida-process-static__outcome p {
width: min(100%, 340px) !important;
margin: 0 auto !important;
color: rgba(255,255,255,.87) !important;
font-size: clamp(13px, .95vw, 15px) !important;
line-height: 1.35 !important;
}
@media (min-width: 1500px) {
.ellida-process-static {
height: 620px !important;
}
}
@media (max-width: 1180px) {
.ellida-process-static {
height: 520px !important;
}
.ellida-process-static__steps {
width: min(calc(100% - 48px), 980px) !important;
gap: 20px !important;
}
.ellida-process-static__step h3 {
padding-inline: 15px !important;
font-size: 15px !important;
}
.ellida-process-static__step p {
font-size: 13px !important;
}
}
@media (max-width: 900px) {
.ellida-process {
padding-top: 58px !important;
padding-bottom: 62px !important;
}
.ellida-process__heading h2 br {
display: none !important;
}
.ellida-process-static {
left: auto !important;
width: 100% !important;
height: auto !important;
margin: 28px 0 0 !important;
overflow: visible !important;
}
.ellida-process-static__thread {
display: none !important;
}
.ellida-process-static__steps {
position: relative !important;
top: auto !important;
left: auto !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
gap: 18px !important;
transform: none !important;
}
.ellida-process-static__step {
padding: 22px 16px !important;
border-radius: 22px !important;
background: rgba(255,255,255,.34) !important;
box-shadow: 0 12px 28px rgba(47,65,87,.05) !important;
}
.ellida-process-static__step p {
width: min(100%, 280px) !important;
}
.ellida-process-static__outcome {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: min(100%, 480px) !important;
margin: 22px auto 0 !important;
transform: none !important;
}
}
@media (max-width: 620px) {
.ellida-process__heading h2 {
font-size: 36px !important;
}
.ellida-process-static__steps {
grid-template-columns: 1fr !important;
}
.ellida-process-static__step h3 {
font-size: 16px !important;
}
}
/* ==========================================================
Ellida 3.4.61 — rifinitura percorso statico
- entrata morbida e sfalsata dei quattro passaggi
- filo più distante dal bordo destro
- testi descrittivi e sottotitolo più leggibili
========================================================== */
.ellida-process__lead {
width: min(100%, 820px) !important;
font-size: clamp(17px, 1.16vw, 21px) !important;
line-height: 1.48 !important;
}
.ellida-process-static__thread {
inset: 0 auto 0 0 !important;
width: 94.5% !important;
object-position: left top !important;
}
.ellida-process-static__step[data-reveal] {
opacity: 0 !important;
transform: translateY(20px) scale(.985) !important;
transition:
opacity .72s ease,
transform .72s var(--ellida-ease) !important;
will-change: opacity, transform !important;
}
.ellida-process-static__step[data-reveal].is-visible {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
}
.ellida-process-static__step[data-reveal]:nth-child(1) { transition-delay: .04s !important; }
.ellida-process-static__step[data-reveal]:nth-child(2) { transition-delay: .14s !important; }
.ellida-process-static__step[data-reveal]:nth-child(3) { transition-delay: .24s !important; }
.ellida-process-static__step[data-reveal]:nth-child(4) { transition-delay: .34s !important; }
.ellida-process-static__number,
.ellida-process-static__step h3 {
transition:
transform .35s var(--ellida-ease),
box-shadow .35s ease,
background-color .35s ease !important;
}
.ellida-process-static__step p {
width: min(100%, 250px) !important;
color: rgba(47,65,87,.76) !important;
font-size: clamp(16px, 1.08vw, 19px) !important;
line-height: 1.46 !important;
}
.ellida-process-static__outcome p {
font-size: clamp(15px, 1vw, 17px) !important;
line-height: 1.42 !important;
}
@media (hover: hover) and (pointer: fine) {
.ellida-process-static__step:hover h3 {
transform: translateY(-3px) !important;
box-shadow: 0 11px 24px rgba(47,65,87,.14) !important;
}
.ellida-process-static__step:hover .ellida-process-static__number {
transform: translateY(-2px) scale(1.04) !important;
box-shadow: 0 10px 22px rgba(47,65,87,.10) !important;
}
}
@media (max-width: 1180px) {
.ellida-process__lead {
font-size: clamp(16px, 1.45vw, 19px) !important;
}
.ellida-process-static__step p {
width: min(100%, 230px) !important;
font-size: 15px !important;
line-height: 1.44 !important;
}
}
@media (max-width: 900px) {
.ellida-process-static__step p {
width: min(100%, 300px) !important;
font-size: 16px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-static__step[data-reveal],
.ellida-process-static__number,
.ellida-process-static__step h3 {
transition: none !important;
transform: none !important;
}
}
/* ==========================================================
Ellida 3.4.63 — correzione sottotitolo e rialzo percorso
Il titolo principale resta invariato rispetto alla 3.4.61.
========================================================== */
@media (min-width: 1200px) {
.ellida-process__lead {
width: max-content !important;
max-width: calc(100vw - 96px) !important;
white-space: nowrap !important;
}
.ellida-process-static {
margin-top: -28px !important;
}
}
/* ==========================================================
Ellida 3.4.64 — micro-allineamento disegno percorso
Sposta leggermente in basso solo filo e groviglio desktop.
========================================================== */
@media (min-width: 1200px) {
.ellida-process-static__thread {
transform: translateY(12px) !important;
}
}
/* ==========================================================
Ellida 3.4.65 — Header desktop più leggero
Voci di navigazione senza capsula blu e con spaziatura ridotta.
Il menu mobile mantiene il pannello originale.
========================================================== */
@media (min-width: 768px) {
.ellida-nav {
display: flex !important;
grid-template-columns: none !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(22px, 2.4vw, 34px) !important;
min-height: 52px !important;
padding: 0 8px !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--ellida-navy) !important;
box-shadow: none !important;
}
.ellida-nav a {
display: inline-flex !important;
place-items: unset !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: 44px !important;
padding: 0 5px !important;
color: var(--ellida-navy) !important;
font-weight: 500 !important;
white-space: nowrap !important;
transition: color .28s ease, transform .28s var(--ellida-ease) !important;
}
.ellida-nav a::after {
left: 5px !important;
right: 5px !important;
bottom: 5px !important;
height: 1px !important;
background: var(--ellida-deep) !important;
}
.ellida-nav a:hover,
.ellida-nav a:focus-visible {
color: var(--ellida-deep) !important;
transform: translateY(-1px) !important;
}
.ellida-header.is-scrolled .ellida-nav {
min-height: 44px !important;
}
.ellida-header.is-scrolled .ellida-nav a {
height: 40px !important;
}
}
@media (min-width: 1025px) {
.ellida-header__inner {
grid-template-columns: 142px minmax(300px, 1fr) auto !important;
gap: 18px !important;
}
.ellida-header.is-scrolled .ellida-header__inner {
grid-template-columns: 120px minmax(280px, 1fr) auto !important;
gap: 14px !important;
}
}
/* ==========================================================
Ellida 3.4.66 — navigazione desktop spostata verso destra
Mantiene invariati logo, CTA e comportamento mobile.
========================================================== */
@media (min-width: 1025px) {
.ellida-nav {
justify-content: flex-end !important;
padding-left: 24px !important;
padding-right: 10px !important;
}
}
/* ==========================================================
Ellida 3.4.68 — titolo modulo più leggero e coerente
========================================================== */
.ellida-contact-form__panel h2 {
font-weight: 500 !important;
letter-spacing: -0.015em !important;
}
/* ==========================================================
Ellida 3.4.69 — footer contatti e social accessibili
========================================================== */
.ellida-footer__identity,
.ellida-footer__contacts,
.ellida-footer__social {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
.ellida-footer__contact-list {
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
margin: 2px 0 0 !important;
font-style: normal !important;
}
.ellida-footer__contact-row {
display: grid !important;
grid-template-columns: 68px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: baseline !important;
color: rgba(255,255,255,.92) !important;
text-decoration: none !important;
line-height: 1.45 !important;
}
.ellida-footer__contact-row[href] {
transition: color .25s ease !important;
}
.ellida-footer__contact-row[href]:hover,
.ellida-footer__contact-row[href]:focus-visible {
color: #fff !important;
}
.ellida-footer__contact-label {
color: rgba(255,255,255,.64) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
}
.ellida-footer__contact-row--empty {
opacity: .62 !important;
}
.ellida-footer__social-links {
display: flex !important;
align-items: center !important;
gap: 11px !important;
margin-top: 5px !important;
}
.ellida-footer__social-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
border: 1px solid rgba(255,255,255,.48) !important;
border-radius: 50% !important;
background: rgba(255,255,255,.05) !important;
color: #fff !important;
text-decoration: none !important;
transition: transform .25s var(--ellida-ease), background-color .25s ease, border-color .25s ease !important;
}
.ellida-footer__social-link svg {
width: 20px !important;
height: 20px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.75 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.ellida-footer__social-link .ellida-footer__social-dot {
fill: currentColor !important;
stroke: none !important;
}
.ellida-footer__social-link[href]:hover,
.ellida-footer__social-link[href]:focus-visible {
transform: translateY(-2px) !important;
background: rgba(255,255,255,.16) !important;
border-color: rgba(255,255,255,.9) !important;
}
.ellida-footer__social-link[href]:focus-visible,
.ellida-footer__contact-row[href]:focus-visible {
outline: 2px solid #fff !important;
outline-offset: 4px !important;
}
.ellida-footer__social-link.is-disabled {
opacity: .44 !important;
cursor: default !important;
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-footer__contact-row {
grid-template-columns: 74px minmax(0, 1fr) !important;
}
.ellida-footer__social-link {
width: 44px !important;
height: 44px !important;
}
}
/* ==========================================================
Ellida 3.4.70 — maggiore respiro tra contatti e social
========================================================== */
@media (min-width: 1025px) {
.ellida-footer__social {
margin-left: clamp(24px, 2.4vw, 44px) !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-footer__social {
margin-left: 12px !important;
}
}
/* === 3.4.71 - Disponibilità online e in presenza === */
.ellida-contact__copy .ellida-contact__availability {
max-width: 440px !important;
margin: 0 0 14px !important;
color: var(--ellida-navy) !important;
font-size: clamp(18px, 1.25vw, 21px) !important;
font-weight: 500 !important;
line-height: 1.42 !important;
}
.ellida-contact__availability + p {
margin-top: 0 !important;
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-contact__copy .ellida-contact__availability {
font-size: 18px !important;
}
}
/* ==========================================================
Ellida 3.4.72 — colonna contatti footer più ampia
========================================================== */
@media (min-width: 1180px) {
.ellida-footer__grid {
grid-template-columns: 190px 170px minmax(330px, 1.35fr) minmax(210px, .8fr) !important;
column-gap: clamp(30px, 3vw, 48px) !important;
}
.ellida-footer__contacts {
min-width: 330px !important;
}
.ellida-footer__contact-row:first-child > span:last-child {
white-space: nowrap !important;
}
}
@media (min-width: 1025px) and (max-width: 1179px) {
.ellida-footer__grid {
grid-template-columns: 165px 145px minmax(285px, 1.25fr) minmax(180px, .75fr) !important;
column-gap: 22px !important;
}
.ellida-footer__social {
margin-left: 16px !important;
}
.ellida-footer__contact-row:first-child > span:last-child {
white-space: nowrap !important;
}
}
/* ==========================================================
Ellida 3.4.73 — titolo social footer su una sola riga
========================================================== */
@media (min-width: 1025px) {
.ellida-footer__social > strong {
white-space: nowrap !important;
}
}
/* ==========================================================
Ellida 3.4.74 — hero informativa e footer riequilibrato
========================================================== */
.ellida-story__about-title {
margin-bottom: 10px !important;
}
.ellida-story__about .ellida-story__about-subtitle {
margin: 0 0 24px !important;
color: rgba(47,65,87,.82) !important;
font-family: 'Montserrat', sans-serif !important;
font-size: clamp(13px, .92vw, 16px) !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: .065em !important;
text-transform: uppercase !important;
}
.ellida-footer {
padding: 56px 0 50px !important;
}
.ellida-footer__grid {
align-items: start !important;
}
.ellida-footer__logo {
width: 154px !important;
opacity: .9 !important;
}
.ellida-footer__grid > div {
gap: 9px !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.ellida-footer__identity {
padding-top: 1px !important;
}
.ellida-footer__identity > strong {
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
}
.ellida-footer__identity > span {
color: rgba(255,255,255,.72) !important;
font-size: 14px !important;
}
.ellida-footer__contacts > strong,
.ellida-footer__social > strong {
margin-bottom: 4px !important;
color: rgba(255,255,255,.78) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: .09em !important;
text-transform: uppercase !important;
}
.ellida-footer__contact-list {
gap: 10px !important;
margin-top: 3px !important;
}
.ellida-footer__contact-row {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 12px !important;
font-size: 14px !important;
line-height: 1.42 !important;
}
.ellida-footer__contact-label {
font-size: 10px !important;
letter-spacing: .085em !important;
}
.ellida-footer__social {
margin-left: 0 !important;
}
.ellida-footer__social-links {
gap: 10px !important;
margin-top: 7px !important;
}
.ellida-footer__social-link {
width: 40px !important;
height: 40px !important;
background: rgba(255,255,255,.035) !important;
}
@media (min-width: 1180px) {
.ellida-footer__grid {
grid-template-columns: 170px 170px minmax(360px, 1.35fr) minmax(220px, .72fr) !important;
column-gap: clamp(32px, 3.3vw, 56px) !important;
}
.ellida-footer__contacts {
min-width: 360px !important;
}
}
@media (min-width: 1025px) and (max-width: 1179px) {
.ellida-footer__grid {
grid-template-columns: 150px 145px minmax(310px, 1.25fr) minmax(190px, .75fr) !important;
column-gap: 24px !important;
}
.ellida-footer__contacts {
min-width: 310px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.ellida-footer__grid {
grid-template-columns: minmax(150px, .7fr) minmax(180px, .9fr) !important;
gap: 34px 48px !important;
}
.ellida-footer__contacts,
.ellida-footer__social {
margin-left: 0 !important;
padding-top: 24px !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
}
.ellida-footer__contacts {
min-width: 0 !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-story__about-title {
margin-bottom: 9px !important;
}
.ellida-story__about .ellida-story__about-subtitle {
margin-bottom: 20px !important;
font-size: 12px !important;
letter-spacing: .055em !important;
}
.ellida-footer {
padding: 44px 0 40px !important;
}
.ellida-footer__grid {
grid-template-columns: minmax(110px, .7fr) minmax(150px, 1fr) !important;
gap: 28px 24px !important;
}
.ellida-footer__logo {
width: 132px !important;
}
.ellida-footer__contacts,
.ellida-footer__social {
grid-column: 1 / -1 !important;
margin-left: 0 !important;
padding-top: 22px !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
}
.ellida-footer__contact-row {
grid-template-columns: 76px minmax(0, 1fr) !important;
}
}
@media (max-width: 520px) {
.ellida-footer__grid {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.ellida-footer__identity,
.ellida-footer__contacts,
.ellida-footer__social {
grid-column: auto !important;
}
.ellida-footer__identity {
margin-top: -8px !important;
}
.ellida-footer__contacts,
.ellida-footer__social {
padding-top: 20px !important;
}
}
/* ==========================================================
Ellida 3.4.75 — revisione mobile iPhone / smartphone
Mantiene invariato il desktop e corregge gerarchia, griglie,
servizi espansi, contatti e ingombro dell'header su mobile.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
:root {
--ellida-header-h: 64px;
--ellida-header-gap: 6px;
}
html {
scroll-padding-top: 82px !important;
}
#ellida-main {
padding-top: 76px !important;
}
.ellida-shell {
width: min(calc(100% - 32px), 620px) !important;
}
.ellida-section {
padding: 54px 0 !important;
}
/* Header mobile più compatto: resta riconoscibile senza coprire troppo contenuto. */
.ellida-header,
.ellida-header.is-scrolled {
top: 6px !important;
width: calc(100% - 20px) !important;
height: 64px !important;
border-radius: 18px !important;
}
.ellida-header__inner,
.ellida-header.is-scrolled .ellida-header__inner {
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 12px !important;
padding: 0 18px !important;
}
.ellida-logo,
.ellida-header.is-scrolled .ellida-logo {
width: 112px !important;
}
.ellida-menu-toggle {
width: 48px !important;
height: 48px !important;
}
.ellida-nav,
.ellida-header.is-scrolled .ellida-nav {
top: 76px !important;
left: 10px !important;
right: 10px !important;
padding: 15px !important;
border-radius: 22px !important;
}
.ellida-nav a {
height: 46px !important;
font-size: 16px !important;
}
/* Hero */
.ellida-story__photo {
aspect-ratio: 1.86 / 1 !important;
object-position: 31% 42% !important;
}
.ellida-story__content,
.ellida-story__about {
width: calc(100% - 32px) !important;
}
.ellida-story__hero {
padding: 30px 0 40px !important;
}
.ellida-story__hero h1 {
margin-bottom: 22px !important;
font-size: clamp(42px, 11.3vw, 48px) !important;
line-height: .98 !important;
letter-spacing: -.035em !important;
}
.ellida-story__hero p {
margin-bottom: 24px !important;
font-size: 18px !important;
line-height: 1.46 !important;
}
.ellida-story__hero .ellida-btn {
width: auto !important;
max-width: 100% !important;
min-height: 54px !important;
padding-inline: 24px !important;
font-size: 18px !important;
}
.ellida-story__about {
margin: 0 16px 34px !important;
padding: 30px 24px 32px !important;
border-radius: 32px !important;
}
.ellida-story__about-title {
width: min(100%, 330px) !important;
}
.ellida-story__about .ellida-story__about-subtitle {
margin-bottom: 20px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
.ellida-story__about p {
font-size: 18px !important;
line-height: 1.48 !important;
}
/* Intro e approccio */
.ellida-kicker {
font-size: 14px !important;
line-height: 1.35 !important;
letter-spacing: .065em !important;
}
.ellida-intro__inner {
max-width: none !important;
}
.ellida-intro__title {
width: min(100%, 390px) !important;
margin-inline: auto !important;
}
.ellida-intro__inner > p:not(.ellida-kicker) {
font-size: 19px !important;
line-height: 1.52 !important;
}
.ellida-approach__grid {
grid-template-columns: 1fr !important;
gap: 34px !important;
}
.ellida-approach__copy h2 {
margin-bottom: 28px !important;
font-size: clamp(40px, 10.5vw, 45px) !important;
line-height: 1.03 !important;
}
.ellida-approach__copy > p {
font-size: 18px !important;
line-height: 1.5 !important;
}
.ellida-tags {
gap: 10px !important;
}
.ellida-tags span {
padding: 10px 16px !important;
font-size: 15px !important;
}
.ellida-approach__visual {
padding-top: 2px !important;
}
.ellida-approach__image-box,
.ellida-approach__final-image {
width: 100% !important;
max-width: 100% !important;
}
/* Servizi: una sola colonna stabile anche quando si apre un dettaglio. */
.ellida-services__heading h2,
.ellida-services__compact-title {
margin-bottom: 24px !important;
font-size: clamp(40px, 10.8vw, 46px) !important;
line-height: 1.02 !important;
letter-spacing: -.035em !important;
}
.ellida-services__heading > p:last-child {
font-size: 18px !important;
line-height: 1.48 !important;
}
.ellida-services-grid,
.ellida-services-grid[data-expanded="false"],
.ellida-services-grid[data-expanded="true"] {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto !important;
gap: 20px !important;
width: 100% !important;
min-height: 0 !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 230px !important;
padding: 28px 24px !important;
border-radius: 30px !important;
}
.ellida-service-card strong {
font-size: 21px !important;
line-height: 1.18 !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
max-width: 320px !important;
font-size: 16px !important;
line-height: 1.42 !important;
}
.ellida-service-card small {
font-size: 14px !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-card {
display: none !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail {
display: flex !important;
grid-column: 1 !important;
grid-row: 1 !important;
order: 0 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 38px 24px 32px !important;
border: 0 !important;
border-radius: 30px !important;
box-shadow: 0 18px 42px rgba(47,65,87,.10) !important;
scroll-margin-top: 86px !important;
}
.ellida-service-detail__close {
top: 14px !important;
right: 16px !important;
width: 42px !important;
height: 42px !important;
font-size: 28px !important;
}
.ellida-service-detail__icon {
margin-top: 4px !important;
}
.ellida-service-detail h3 {
margin-bottom: 22px !important;
font-size: 36px !important;
line-height: 1.02 !important;
text-align: center !important;
}
.ellida-service-detail p,
.ellida-service-detail li {
font-size: 17px !important;
line-height: 1.48 !important;
}
.ellida-service-detail .ellida-btn {
width: 100% !important;
min-height: 54px !important;
margin-top: 18px !important;
}
/* Come posso aiutarti */
.ellida-help__grid {
grid-template-columns: 1fr !important;
gap: 34px !important;
}
.ellida-help__title {
width: min(100%, 390px) !important;
}
.ellida-help__intro p,
.ellida-help-accordion__panel p {
font-size: 18px !important;
line-height: 1.5 !important;
}
.ellida-help__list button {
padding: 21px 4px 17px !important;
font-size: 18px !important;
line-height: 1.35 !important;
}
/* Come funziona: versione verticale semplice e leggibile. */
.ellida-process {
padding: 56px 0 62px !important;
}
.ellida-process__heading {
margin-bottom: 30px !important;
}
.ellida-process__heading h2 {
font-size: 40px !important;
line-height: 1.04 !important;
}
.ellida-process__lead {
width: 100% !important;
margin-top: 18px !important;
font-size: 18px !important;
line-height: 1.48 !important;
white-space: normal !important;
}
.ellida-process-static {
margin-top: 28px !important;
}
.ellida-process-static__steps {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.ellida-process-static__step {
padding: 24px 20px !important;
border-radius: 24px !important;
}
.ellida-process-static__step h3 {
white-space: normal !important;
font-size: 18px !important;
}
.ellida-process-static__step p {
width: 100% !important;
max-width: 330px !important;
font-size: 16px !important;
line-height: 1.48 !important;
}
.ellida-process-static__outcome {
width: 100% !important;
margin-top: 20px !important;
padding: 24px 20px 26px !important;
}
/* Contatti: da due colonne strette a una composizione verticale. */
.ellida-contact {
margin-top: 0 !important;
padding: 54px 0 58px !important;
}
.ellida-contact__grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 30px !important;
width: min(calc(100% - 32px), 620px) !important;
align-items: start !important;
}
.ellida-contact__copy {
width: 100% !important;
max-width: none !important;
padding-top: 0 !important;
}
.ellida-contact__title {
width: min(100%, 360px) !important;
margin-bottom: 20px !important;
}
.ellida-contact__copy .ellida-contact__availability {
max-width: none !important;
margin-bottom: 14px !important;
font-size: 20px !important;
line-height: 1.42 !important;
}
.ellida-contact__copy > p:not(.ellida-contact__availability) {
max-width: none !important;
font-size: 18px !important;
line-height: 1.5 !important;
}
.ellida-contact-form {
width: 100% !important;
min-width: 0 !important;
}
.ellida-contact-form__panel {
width: 100% !important;
padding: 28px 22px 26px !important;
border-radius: 28px !important;
}
.ellida-contact-form__panel h2 {
margin-bottom: 24px !important;
font-size: 39px !important;
line-height: 1.03 !important;
}
.ellida-contact-form__row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
.ellida-contact-form label {
width: 100% !important;
margin-bottom: 18px !important;
}
.ellida-contact-form label > span {
margin-bottom: 8px !important;
font-size: 14px !important;
line-height: 1.3 !important;
}
.ellida-contact-form input[type="text"],
.ellida-contact-form input[type="tel"] {
min-height: 54px !important;
padding: 0 17px !important;
border-radius: 27px !important;
font-size: 17px !important;
}
.ellida-contact-form textarea {
min-height: 180px !important;
padding: 17px !important;
border-radius: 22px !important;
font-size: 16px !important;
line-height: 1.4 !important;
}
.ellida-contact-form textarea::placeholder {
font-size: 16px !important;
line-height: 1.35 !important;
}
.ellida-contact-form__privacy {
align-items: flex-start !important;
gap: 10px !important;
margin: 14px 0 16px !important;
padding-inline: 2px !important;
font-size: 13px !important;
line-height: 1.42 !important;
}
.ellida-contact-form__privacy input[type="checkbox"] {
width: 22px !important;
height: 22px !important;
}
.ellida-contact-form > .ellida-btn,
.ellida-contact-form .ellida-btn {
width: min(100%, 230px) !important;
min-height: 56px !important;
margin: 8px auto 0 !important;
font-size: 18px !important;
}
.ellida-quote {
padding-top: 48px !important;
}
.ellida-quote img {
width: 100% !important;
}
/* Footer mobile ordinato in blocchi verticali. */
.ellida-footer {
padding: 42px 0 38px !important;
}
.ellida-footer__grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.ellida-footer__logo {
width: 126px !important;
}
.ellida-footer__identity {
margin-top: -4px !important;
}
.ellida-footer__contacts,
.ellida-footer__social {
grid-column: auto !important;
padding-top: 20px !important;
}
.ellida-footer__contact-row {
grid-template-columns: 78px minmax(0, 1fr) !important;
gap: 10px !important;
font-size: 14px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 40px !important;
}
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-services__compact-title,
.ellida-process__heading h2 {
font-size: 37px !important;
}
.ellida-contact-form__panel h2 {
font-size: 36px !important;
}
}
/* ==========================================================
Ellida 3.4.76 — mobile più compatto
Riduce la scala tipografica e l'altezza della hero; il box
biografico azzurro diventa full-bleed, senza cornice bianca.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
:root {
--ellida-header-h: 58px;
}
html {
scroll-padding-top: 74px !important;
}
#ellida-main {
padding-top: 68px !important;
}
.ellida-section {
padding-top: 44px !important;
padding-bottom: 44px !important;
}
.ellida-header,
.ellida-header.is-scrolled {
height: 58px !important;
border-radius: 17px !important;
}
.ellida-header__inner,
.ellida-header.is-scrolled .ellida-header__inner {
padding-inline: 16px !important;
}
.ellida-logo,
.ellida-header.is-scrolled .ellida-logo {
width: 100px !important;
}
.ellida-menu-toggle {
width: 43px !important;
height: 43px !important;
}
.ellida-nav,
.ellida-header.is-scrolled .ellida-nav {
top: 68px !important;
}
/* Hero più corta e meno dominante. */
.ellida-story,
.ellida-story__sticky {
background: var(--ellida-cream) !important;
}
.ellida-story__photo {
aspect-ratio: 2.08 / 1 !important;
object-position: 31% 43% !important;
}
.ellida-story__content {
width: calc(100% - 36px) !important;
}
.ellida-story__hero {
padding: 24px 0 30px !important;
}
.ellida-story__hero h1 {
margin-bottom: 16px !important;
font-size: clamp(34px, 9.6vw, 39px) !important;
line-height: 1.01 !important;
letter-spacing: -.03em !important;
}
.ellida-story__hero p {
margin-bottom: 18px !important;
font-size: 16px !important;
line-height: 1.42 !important;
}
.ellida-story__hero .ellida-btn {
min-height: 48px !important;
padding: 11px 20px !important;
font-size: 16px !important;
}
/* Nessun bordo/fondo bianco intorno al riquadro azzurro. */
.ellida-story__about {
width: 100% !important;
margin: 0 !important;
padding: 26px 24px 30px !important;
border-radius: 28px 28px 0 0 !important;
box-shadow: none !important;
}
.ellida-story__about-title {
width: min(100%, 285px) !important;
margin-bottom: 10px !important;
}
.ellida-story__about .ellida-story__about-subtitle {
margin-bottom: 16px !important;
font-size: 11px !important;
letter-spacing: .105em !important;
}
.ellida-story__about p {
margin-bottom: 16px !important;
font-size: 16px !important;
line-height: 1.45 !important;
}
.ellida-story__about p:last-child {
margin-bottom: 0 !important;
}
/* Scala generale mobile più sobria. */
.ellida-kicker {
font-size: 12px !important;
}
.ellida-intro__inner > p:not(.ellida-kicker),
.ellida-approach__copy > p,
.ellida-services__heading > p,
.ellida-help__intro p,
.ellida-help-accordion__panel p {
font-size: 16px !important;
line-height: 1.48 !important;
}
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-services__compact-title,
.ellida-process__heading h2 {
font-size: clamp(34px, 9vw, 38px) !important;
line-height: 1.06 !important;
}
.ellida-approach__copy h2 {
margin-bottom: 22px !important;
}
.ellida-tags span {
min-height: 42px !important;
padding: 8px 15px !important;
font-size: 14px !important;
}
.ellida-btn {
font-size: 16px !important;
}
.ellida-service-card strong {
font-size: 18px !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 15px !important;
line-height: 1.42 !important;
}
.ellida-service-detail h3 {
font-size: 32px !important;
}
.ellida-service-detail p,
.ellida-service-detail li {
font-size: 16px !important;
}
.ellida-help__list button {
font-size: 16px !important;
}
.ellida-process__heading h2 {
font-size: 35px !important;
}
.ellida-process__lead {
font-size: 16px !important;
}
.ellida-process-static__step p {
font-size: 15px !important;
}
.ellida-contact__copy .ellida-contact__availability {
font-size: 17px !important;
}
.ellida-contact__copy > p:not(.ellida-contact__availability) {
font-size: 16px !important;
}
.ellida-contact-form__panel h2 {
font-size: 32px !important;
line-height: 1.08 !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 33px !important;
}
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-services__compact-title,
.ellida-process__heading h2 {
font-size: 33px !important;
}
.ellida-contact-form__panel h2 {
font-size: 30px !important;
}
}
/* ==========================================================
Ellida 3.4.77 — scala mobile e sezione aiuto alleggerita
========================================================== */
.ellida-help__intro-copy--mobile,
.ellida-help__cta--mobile {
display: none !important;
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-section {
padding-top: 38px !important;
padding-bottom: 38px !important;
}
/* Hero: due righe leggibili, senza dominare la schermata. */
.ellida-story__photo {
aspect-ratio: 2.32 / 1 !important;
}
.ellida-story__content {
width: calc(100% - 44px) !important;
}
.ellida-story__hero {
padding: 18px 0 24px !important;
}
.ellida-story__hero h1 {
margin-bottom: 13px !important;
font-size: 29px !important;
line-height: 1.04 !important;
letter-spacing: -.025em !important;
}
.ellida-story__hero p {
margin-bottom: 15px !important;
font-size: 15px !important;
line-height: 1.42 !important;
}
.ellida-story__hero .ellida-btn {
min-height: 45px !important;
padding: 10px 17px !important;
font-size: 15px !important;
}
.ellida-story__about {
padding: 23px 22px 26px !important;
}
.ellida-story__about-title {
width: min(100%, 250px) !important;
}
.ellida-story__about p {
font-size: 15px !important;
line-height: 1.44 !important;
}
/* Tipografia mobile complessivamente più sobria. */
.ellida-kicker {
font-size: 11px !important;
letter-spacing: .075em !important;
}
.ellida-intro__inner > p:not(.ellida-kicker),
.ellida-approach__copy > p,
.ellida-services__heading > p,
.ellida-help__intro p,
.ellida-help-accordion__panel p,
.ellida-contact__copy > p:not(.ellida-contact__availability) {
font-size: 15px !important;
line-height: 1.46 !important;
}
.ellida-intro__title {
width: min(100%, 340px) !important;
}
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-services__compact-title,
.ellida-process__heading h2 {
font-size: 30px !important;
line-height: 1.08 !important;
}
.ellida-tags {
gap: 9px !important;
}
.ellida-tags span {
min-height: 38px !important;
padding: 7px 13px !important;
font-size: 13px !important;
}
.ellida-btn {
font-size: 15px !important;
}
/* Servizi: testo meno grande e card più compatte. */
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
min-height: 205px !important;
padding: 24px 21px !important;
}
.ellida-service-card strong {
font-size: 17px !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 14px !important;
line-height: 1.4 !important;
}
.ellida-service-card small {
font-size: 13px !important;
}
.ellida-service-detail {
padding: 32px 22px 28px !important;
}
.ellida-service-detail h3 {
font-size: 28px !important;
line-height: 1.05 !important;
}
.ellida-service-detail p,
.ellida-service-detail li {
font-size: 15px !important;
line-height: 1.45 !important;
}
/* Come posso aiutarti: testo sintetico, categorie prima della CTA. */
.ellida-help__grid {
gap: 24px !important;
}
.ellida-help__title {
width: min(100%, 335px) !important;
margin-bottom: 0 !important;
}
.ellida-help__intro-copy--desktop,
.ellida-help__cta--desktop {
display: none !important;
}
.ellida-help__intro-copy--mobile {
display: block !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1.48 !important;
}
.ellida-help__list button {
padding: 17px 2px 14px !important;
font-size: 15px !important;
line-height: 1.32 !important;
}
.ellida-help-accordion__panel {
padding: 17px 0 8px !important;
}
.ellida-help__cta--mobile {
display: inline-flex !important;
justify-self: start !important;
width: auto !important;
min-height: 45px !important;
margin-top: 2px !important;
padding: 10px 20px !important;
}
/* Come funziona e contatti: stessa scala del resto della pagina. */
.ellida-process__heading h2 {
font-size: 30px !important;
}
.ellida-process__lead,
.ellida-process-static__step p {
font-size: 14.5px !important;
line-height: 1.45 !important;
}
.ellida-process-static__step h3 {
font-size: 17px !important;
}
.ellida-contact__copy .ellida-contact__availability {
font-size: 16px !important;
line-height: 1.4 !important;
}
.ellida-contact-form__panel {
padding: 25px 20px 23px !important;
}
.ellida-contact-form__panel h2 {
font-size: 29px !important;
line-height: 1.08 !important;
}
.ellida-contact-form label > span {
font-size: 13px !important;
}
.ellida-contact-form input[type="text"],
.ellida-contact-form input[type="tel"],
.ellida-contact-form textarea,
.ellida-contact-form textarea::placeholder {
font-size: 15px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 27px !important;
}
.ellida-approach__copy h2,
.ellida-services__heading h2,
.ellida-services__compact-title,
.ellida-process__heading h2 {
font-size: 28px !important;
}
.ellida-contact-form__panel h2 {
font-size: 27px !important;
}
}
/* ==========================================================
Ellida 3.4.78 — hero mobile riequilibrata e testo aiuto ripristinato
Solo smartphone: desktop e tablet larghi restano invariati.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
/* Hero: composizione più compatta e meno dominante. */
.ellida-story__photo {
display: block !important;
width: 100% !important;
height: 176px !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: 29% 44% !important;
}
.ellida-story__wash {
display: none !important;
}
.ellida-story__content {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.ellida-story__hero {
padding: 19px 20px 24px !important;
background: var(--ellida-cream) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.ellida-story__hero h1 {
max-width: 330px !important;
margin: 0 0 11px !important;
font-size: 25px !important;
line-height: 1.08 !important;
letter-spacing: -.018em !important;
}
.ellida-story__hero h1 br {
display: none !important;
}
.ellida-story__hero p {
max-width: 345px !important;
margin: 0 0 15px !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.ellida-story__hero p strong {
font-weight: 500 !important;
}
.ellida-story__hero .ellida-btn {
width: auto !important;
min-height: 43px !important;
padding: 9px 17px !important;
font-size: 14px !important;
}
/* Come posso aiutarti: più contenuto originale, senza vuoto inutile. */
.ellida-help__grid {
gap: 0 !important;
row-gap: 0 !important;
}
.ellida-help__heading {
margin-bottom: 12px !important;
}
.ellida-help__title {
margin-bottom: 0 !important;
}
.ellida-help__intro {
margin: 0 !important;
}
.ellida-help__intro-copy--mobile {
display: block !important;
margin: 0 !important;
}
.ellida-help__intro-copy--mobile p {
margin: 0 0 12px !important;
font-size: 15px !important;
line-height: 1.48 !important;
}
.ellida-help__intro-copy--mobile p:last-child {
margin-bottom: 0 !important;
}
.ellida-help__list {
margin-top: 12px !important;
}
.ellida-help__cta--mobile {
margin-top: 18px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__photo {
height: 164px !important;
}
.ellida-story__hero {
padding-inline: 18px !important;
}
.ellida-story__hero h1 {
font-size: 24px !important;
}
}
/* ==========================================================
Ellida 3.4.79 — header e hero mobile ulteriormente compatti
Solo smartphone: desktop invariato.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
:root {
--ellida-header-h: 54px;
--ellida-header-gap: 5px;
}
html {
scroll-padding-top: 68px !important;
}
#ellida-main {
padding-top: 64px !important;
}
/* Header più discreto all'apertura e ancora più compatto durante lo scroll. */
.ellida-header {
top: 5px !important;
width: calc(100% - 16px) !important;
height: 54px !important;
border-radius: 15px !important;
transition: height .28s var(--ellida-ease), box-shadow .28s ease, background .28s ease !important;
}
.ellida-header.is-scrolled {
top: 5px !important;
width: calc(100% - 16px) !important;
height: 48px !important;
border-radius: 14px !important;
}
.ellida-header__inner {
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 9px !important;
padding: 0 14px !important;
}
.ellida-header.is-scrolled .ellida-header__inner {
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
padding: 0 13px !important;
}
.ellida-logo {
width: 91px !important;
transition: width .28s var(--ellida-ease) !important;
}
.ellida-header.is-scrolled .ellida-logo {
width: 81px !important;
}
.ellida-menu-toggle {
width: 39px !important;
height: 39px !important;
transition: width .28s var(--ellida-ease), height .28s var(--ellida-ease) !important;
}
.ellida-header.is-scrolled .ellida-menu-toggle {
width: 35px !important;
height: 35px !important;
}
.ellida-nav,
.ellida-header.is-scrolled .ellida-nav {
top: 64px !important;
}
/* Hero: titolo meno dominante e spaziatura più misurata. */
.ellida-story__hero {
padding: 16px 20px 21px !important;
}
.ellida-story__hero h1 {
max-width: 305px !important;
margin-bottom: 10px !important;
font-size: 22px !important;
line-height: 1.1 !important;
letter-spacing: -.014em !important;
}
.ellida-story__hero h1 br {
display: none !important;
}
.ellida-story__hero p {
margin-bottom: 13px !important;
}
/* Titolo calligrafico della sezione contatti meno dominante. */
.ellida-contact__title {
width: min(100%, 292px) !important;
margin-bottom: 16px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero {
padding-inline: 18px !important;
}
.ellida-story__hero h1 {
max-width: 280px !important;
font-size: 21px !important;
}
.ellida-contact__title {
width: min(100%, 270px) !important;
}
}
/* ==========================================================
Ellida 3.4.80 — hero e riquadro biografico mobile più delicati
Solo smartphone: desktop invariato.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
/* Hero: tono tipografico meno incisivo e più aria orizzontale. */
.ellida-story__hero {
padding: 15px 22px 20px !important;
}
.ellida-story__hero h1 {
max-width: 285px !important;
margin-bottom: 9px !important;
font-size: 20px !important;
line-height: 1.12 !important;
letter-spacing: -.01em !important;
font-weight: 500 !important;
}
.ellida-story__hero p {
max-width: 330px !important;
margin-bottom: 13px !important;
font-size: 13.5px !important;
line-height: 1.46 !important;
}
.ellida-story__hero .ellida-btn {
min-height: 41px !important;
padding: 8px 15px !important;
font-size: 13.5px !important;
}
/* Riquadro “Sono Ellida Massone”: centrato, con margini e scala più morbida. */
.ellida-story__about {
width: calc(100% - 36px) !important;
max-width: 420px !important;
margin: 8px auto 30px !important;
padding: 20px 19px 22px !important;
border-radius: 24px !important;
box-shadow: 0 12px 30px rgba(47,65,87,.07) !important;
}
.ellida-story__about-title {
width: min(100%, 218px) !important;
margin-bottom: 8px !important;
}
.ellida-story__about .ellida-story__about-subtitle {
margin-bottom: 13px !important;
font-size: 9.5px !important;
line-height: 1.35 !important;
letter-spacing: .09em !important;
}
.ellida-story__about p {
margin-bottom: 12px !important;
font-size: 13.5px !important;
line-height: 1.48 !important;
font-weight: 400 !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero {
padding-inline: 20px !important;
}
.ellida-story__hero h1 {
max-width: 270px !important;
font-size: 19px !important;
}
.ellida-story__about {
width: calc(100% - 30px) !important;
padding: 19px 17px 21px !important;
}
.ellida-story__about-title {
width: min(100%, 205px) !important;
}
}
/* === 3.4.81 - Correzione salto scroll servizi su mobile === */
html.ellida-scroll-instant {
scroll-behavior: auto !important;
}
@media (max-width: 1024px) {
.ellida-services,
.ellida-services .ellida-shell,
.ellida-services-grid,
.ellida-service-detail {
overflow-anchor: none !important;
}
}
/* ==========================================================
Ellida 3.4.82 — proporzioni hero e card servizi mobile
Solo smartphone: desktop invariato.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
/* Titolo principale: due righe precise, più delicato e meno dominante. */
.ellida-story__hero h1 {
max-width: 250px !important;
margin-bottom: 9px !important;
font-size: 18px !important;
line-height: 1.13 !important;
letter-spacing: -.006em !important;
font-weight: 500 !important;
}
.ellida-story__hero h1 br {
display: initial !important;
}
/* Card servizi più leggere e meno imponenti. */
.ellida-services-grid,
.ellida-services-grid[data-expanded="false"] {
gap: 14px !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
min-height: 174px !important;
padding: 18px 18px 17px !important;
border-radius: 24px !important;
box-shadow: inset 0 0 24px rgba(255,255,255,.48), 0 10px 25px rgba(47,65,87,.07) !important;
}
.ellida-service-card__icon {
width: 39px !important;
height: 39px !important;
margin: 0 auto 8px !important;
}
.ellida-service-card strong {
margin-bottom: 8px !important;
font-size: 15.5px !important;
line-height: 1.16 !important;
font-weight: 600 !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
max-width: 290px !important;
font-size: 12.8px !important;
line-height: 1.38 !important;
}
.ellida-service-card small {
margin-top: 13px !important;
padding: 5px 10px !important;
border-radius: 14px !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
max-width: 230px !important;
font-size: 17.5px !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
min-height: 168px !important;
padding: 17px 16px 16px !important;
}
}
/* ==========================================================
Ellida 3.4.83 — micro-rifinitura hero e spazi card mobile
Solo smartphone: desktop invariato.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
/* Titolo hero più piccolo, sempre su due righe tramite il
del template. */
.ellida-story__hero h1 {
max-width: 228px !important;
margin-bottom: 8px !important;
font-size: 16.5px !important;
line-height: 1.18 !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
}
.ellida-story__hero h1 br {
display: initial !important;
}
/* Più continuità tra titolo e descrizione, più respiro prima della CTA. */
.ellida-service-card strong {
margin-bottom: 4px !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
margin-top: 0 !important;
}
.ellida-service-card small {
margin-top: 20px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
max-width: 218px !important;
font-size: 16px !important;
}
}
/* ==========================================================
Ellida 3.4.84 — titolo hero mobile compatto e chiusura percorso animata
Solo smartphone per la hero; animazione accessibile del box finale.
========================================================== */
.ellida-process-static__outcome[data-reveal] {
opacity: 0 !important;
transform: translateX(-50%) translateY(18px) scale(.985) !important;
transition:
opacity .72s ease,
transform .72s var(--ellida-ease),
box-shadow .72s ease !important;
transition-delay: .18s !important;
will-change: opacity, transform !important;
}
.ellida-process-static__outcome[data-reveal].is-visible {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) scale(1) !important;
}
@media (max-width: 900px) {
.ellida-process-static__outcome[data-reveal] {
transform: translateY(18px) scale(.985) !important;
}
.ellida-process-static__outcome[data-reveal].is-visible {
transform: translateY(0) scale(1) !important;
}
}
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
/* Due righe esatte: il
del template resta l'unico punto di interruzione. */
.ellida-story__hero h1 {
width: 100% !important;
max-width: none !important;
margin: 0 0 7px !important;
font-size: 15px !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
.ellida-story__hero h1 br {
display: initial !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 14.5px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.ellida-process-static__outcome[data-reveal] {
opacity: 1 !important;
transform: translateX(-50%) !important;
transition: none !important;
}
@media (max-width: 900px) {
.ellida-process-static__outcome[data-reveal] {
transform: none !important;
}
}
}
/* ==========================================================
Ellida 3.4.85 — titolo hero mobile leggermente più piccolo
Mantiene le due righe approvate senza alterare il desktop.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 14px !important;
line-height: 1.06 !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 13.5px !important;
}
}
/* ==========================================================
Ellida 3.4.86 — menu hamburger mobile più compatto
Riduce pulsante, pannello e voci senza modificare desktop.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-menu-toggle {
width: 34px !important;
height: 34px !important;
gap: 3px !important;
}
.ellida-header.is-scrolled .ellida-menu-toggle {
width: 31px !important;
height: 31px !important;
}
.ellida-menu-toggle span:not(.screen-reader-text) {
width: 17px !important;
height: 1.5px !important;
}
.ellida-menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(4.5px) rotate(45deg) !important;
}
.ellida-menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-4.5px) rotate(-45deg) !important;
}
.ellida-nav {
top: 62px !important;
left: auto !important;
right: 10px !important;
width: min(210px, calc(100% - 32px)) !important;
padding: 8px 10px !important;
border-radius: 18px !important;
row-gap: 0 !important;
box-shadow: 0 14px 34px rgba(47,65,87,.14) !important;
transform: translateY(-8px) scale(.985) !important;
transform-origin: top right !important;
}
.ellida-header.is-scrolled .ellida-nav {
top: 56px !important;
}
.ellida-nav.is-open {
transform: translateY(0) scale(1) !important;
}
.ellida-nav a {
height: 38px !important;
padding: 0 8px !important;
font-size: 14px !important;
line-height: 1 !important;
}
.ellida-nav a::after {
left: 30% !important;
right: 30% !important;
bottom: 4px !important;
}
}
@media (max-width: 767px) and (min-width: 391px) and (hover: none) and (pointer: coarse) {
.ellida-nav {
width: min(220px, calc(100% - 36px)) !important;
}
}
@media (max-width: 782px) {
body.admin-bar .ellida-nav {
top: 108px !important;
}
body.admin-bar .ellida-header.is-scrolled .ellida-nav {
top: 102px !important;
}
}
/* ==========================================================
Ellida 3.4.87 — titolo hero mobile ridotto del 5%
Mantiene le due righe e non modifica desktop o altri elementi.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 13.3px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-story__hero h1 {
font-size: 12.8px !important;
}
}
/* ==========================================================
Ellida 3.4.88 — correzione reale dimensione titolo hero mobile
Usa la stessa specificità della vecchia regola che impediva
alle riduzioni precedenti di applicarsi.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-landing .ellida-story__hero h1 {
width: auto !important;
max-width: 330px !important;
margin: 0 0 12px !important;
font-size: 30px !important;
line-height: 1.04 !important;
letter-spacing: -.015em !important;
font-weight: 700 !important;
white-space: normal !important;
text-wrap: initial !important;
}
.ellida-landing .ellida-story__hero h1 br {
display: block !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-landing .ellida-story__hero h1 {
max-width: 310px !important;
font-size: 28.5px !important;
}
}
/* ==========================================================
Ellida 3.4.90 — tipografia unificata Montserrat + desktop-safe
Le vecchie grafiche Sweethand/Kalam sono sostituite da testo HTML
Montserrat. Le regole smartphone sono limitate ai dispositivi touch.
========================================================== */
.ellida-unified-title {
margin-top: 0 !important;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
font-style: normal !important;
font-weight: 400 !important;
letter-spacing: -.035em !important;
text-rendering: optimizeLegibility !important;
}
.ellida-story__about-title.ellida-unified-title {
width: auto !important;
max-width: 100% !important;
margin: 0 0 10px !important;
color: var(--ellida-navy) !important;
font-size: clamp(34px, 3.25vw, 50px) !important;
line-height: 1.06 !important;
}
.ellida-intro__title.ellida-unified-title {
width: auto !important;
max-width: 920px !important;
margin: 0 auto 30px !important;
color: #6f91a1 !important;
font-size: clamp(42px, 5vw, 68px) !important;
line-height: 1.06 !important;
text-align: center !important;
}
.ellida-help__title.ellida-unified-title {
width: auto !important;
max-width: 760px !important;
margin: 0 0 32px !important;
color: var(--ellida-cream) !important;
font-size: clamp(42px, 4.5vw, 64px) !important;
line-height: 1.08 !important;
}
.ellida-help__title.ellida-unified-title span {
color: var(--ellida-navy) !important;
font-weight: 500 !important;
}
.ellida-contact__title.ellida-unified-title {
width: auto !important;
max-width: 520px !important;
margin: 0 0 18px !important;
color: var(--ellida-navy) !important;
font-size: clamp(34px, 3.6vw, 52px) !important;
line-height: 1.08 !important;
}
.ellida-quote__text.ellida-unified-title {
max-width: 940px !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
color: var(--ellida-navy) !important;
font-size: clamp(28px, 3vw, 43px) !important;
line-height: 1.2 !important;
text-align: center !important;
}
/* Smartphone: stessa gerarchia, più compatta e coerente con il lavoro mobile già approvato. */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-story__about-title.ellida-unified-title {
font-size: 26px !important;
line-height: 1.08 !important;
}
.ellida-intro__title.ellida-unified-title {
max-width: 100% !important;
margin-bottom: 20px !important;
font-size: 29px !important;
line-height: 1.1 !important;
}
.ellida-help__title.ellida-unified-title {
max-width: 100% !important;
margin-bottom: 22px !important;
font-size: 31px !important;
line-height: 1.1 !important;
}
.ellida-contact__title.ellida-unified-title {
max-width: 100% !important;
margin-bottom: 16px !important;
font-size: 27px !important;
line-height: 1.12 !important;
}
.ellida-quote__text.ellida-unified-title {
font-size: 22px !important;
line-height: 1.25 !important;
}
}
/* ==========================================================
Ellida 3.4.91 — servizi mobile più compatti e ariosi
Solo smartphone touch: desktop invariato.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-services {
padding-top: 44px !important;
padding-bottom: 46px !important;
}
.ellida-services .ellida-shell {
width: min(calc(100% - 48px), 620px) !important;
}
.ellida-services__heading {
margin-bottom: 28px !important;
}
.ellida-services__heading .ellida-kicker {
margin-bottom: 12px !important;
font-size: 10.5px !important;
}
.ellida-services__heading h2,
.ellida-services__compact-title {
margin-bottom: 16px !important;
font-size: 27px !important;
line-height: 1.08 !important;
letter-spacing: -.025em !important;
}
.ellida-services__heading > p,
.ellida-services__heading > p:last-child {
max-width: 330px !important;
font-size: 14px !important;
line-height: 1.42 !important;
}
.ellida-services-grid,
.ellida-services-grid[data-expanded="false"] {
gap: 12px !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
min-height: 154px !important;
padding: 15px 16px 14px !important;
border-radius: 22px !important;
box-shadow: inset 0 0 20px rgba(255,255,255,.44), 0 8px 20px rgba(47,65,87,.06) !important;
}
.ellida-service-card__icon {
width: 34px !important;
height: 34px !important;
margin: 0 auto 6px !important;
}
.ellida-service-card strong {
margin-bottom: 3px !important;
font-size: 14.5px !important;
line-height: 1.14 !important;
font-weight: 600 !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
max-width: 280px !important;
font-size: 12.2px !important;
line-height: 1.34 !important;
}
.ellida-service-card small {
margin-top: 11px !important;
padding: 5px 10px !important;
border-radius: 14px !important;
font-size: 10.5px !important;
line-height: 1.15 !important;
}
.ellida-services-grid[data-expanded="true"] .ellida-service-detail,
.ellida-service-detail {
padding: 27px 19px 24px !important;
border-radius: 24px !important;
}
.ellida-service-detail__close {
top: 10px !important;
right: 11px !important;
width: 34px !important;
height: 34px !important;
font-size: 23px !important;
}
.ellida-service-detail__icon {
width: 44px !important;
height: 44px !important;
margin-bottom: 12px !important;
}
.ellida-service-detail h3 {
margin-bottom: 15px !important;
font-size: 23px !important;
line-height: 1.08 !important;
}
.ellida-service-detail p {
margin-bottom: 15px !important;
font-size: 13.5px !important;
line-height: 1.42 !important;
}
.ellida-service-detail > strong {
font-size: 14.5px !important;
line-height: 1.3 !important;
}
.ellida-service-detail ul {
margin-bottom: 20px !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
.ellida-service-detail .ellida-btn {
min-height: 42px !important;
padding: 9px 16px !important;
font-size: 13px !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-services .ellida-shell {
width: calc(100% - 44px) !important;
}
.ellida-services__heading h2,
.ellida-services__compact-title {
font-size: 25.5px !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
min-height: 150px !important;
padding: 14px 15px 13px !important;
}
}
/* ==========================================================
Ellida 3.4.92 — scala tipografica mobile finale
Riduce in modo coerente i titoli su smartphone touch.
Desktop invariato.
========================================================== */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
/* Hero: forte ma non dominante, due righe compatte. */
.ellida-landing .ellida-story__hero h1 {
width: auto !important;
max-width: 300px !important;
margin: 0 0 12px !important;
font-size: 26px !important;
line-height: 1.06 !important;
letter-spacing: -.02em !important;
font-weight: 600 !important;
}
/* Titolo biografia. */
.ellida-story__about-title.ellida-unified-title {
font-size: 22px !important;
line-height: 1.12 !important;
font-weight: 500 !important;
letter-spacing: -.02em !important;
}
/* Sezione introduttiva. */
.ellida-intro__title.ellida-unified-title {
margin-bottom: 18px !important;
font-size: 24px !important;
line-height: 1.12 !important;
font-weight: 500 !important;
letter-spacing: -.02em !important;
}
/* Il mio approccio. */
.ellida-approach__copy h2 {
font-size: 28px !important;
line-height: 1.1 !important;
letter-spacing: -.025em !important;
font-weight: 400 !important;
}
/* Servizi. */
.ellida-services__heading h2,
.ellida-services__compact-title {
font-size: 24px !important;
line-height: 1.1 !important;
letter-spacing: -.02em !important;
font-weight: 400 !important;
}
.ellida-service-detail h3 {
font-size: 20px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
}
/* Come posso aiutarti. */
.ellida-help__title.ellida-unified-title {
margin-bottom: 20px !important;
font-size: 26px !important;
line-height: 1.12 !important;
font-weight: 400 !important;
letter-spacing: -.02em !important;
}
.ellida-help__title.ellida-unified-title span {
font-weight: 500 !important;
}
/* Come funziona. */
.ellida-process__heading h2 {
font-size: 27px !important;
line-height: 1.1 !important;
letter-spacing: -.025em !important;
font-weight: 400 !important;
}
/* Contatti. */
.ellida-contact__title.ellida-unified-title {
margin-bottom: 14px !important;
font-size: 23px !important;
line-height: 1.13 !important;
font-weight: 500 !important;
letter-spacing: -.02em !important;
}
.ellida-contact-form__panel h2 {
font-size: 25px !important;
line-height: 1.08 !important;
letter-spacing: -.02em !important;
font-weight: 500 !important;
}
/* Citazione conclusiva: volutamente molto più discreta. */
.ellida-quote__text.ellida-unified-title {
width: min(100%, 330px) !important;
margin: 0 auto !important;
font-size: 16px !important;
line-height: 1.42 !important;
font-weight: 400 !important;
letter-spacing: -.01em !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-landing .ellida-story__hero h1 {
max-width: 286px !important;
font-size: 24.5px !important;
}
.ellida-approach__copy h2,
.ellida-process__heading h2 {
font-size: 26px !important;
}
.ellida-help__title.ellida-unified-title {
font-size: 25px !important;
}
.ellida-quote__text.ellida-unified-title {
width: min(100%, 310px) !important;
font-size: 15.5px !important;
}
}
/* ==========================================================
Ellida 3.4.93 — titoli desktop riequilibrati + servizi mobile compatti
========================================================== */
@media (min-width: 1024px) {
/* Il titolo introduttivo resta importante, ma non sovrasta le altre sezioni. */
.ellida-landing .ellida-intro__title.ellida-unified-title {
max-width: 820px !important;
margin-bottom: 24px !important;
font-size: clamp(38px, 3.5vw, 52px) !important;
line-height: 1.08 !important;
letter-spacing: -.028em !important;
font-weight: 400 !important;
}
/* Due righe pulite, scala simile agli altri titoli editoriali del sito. */
.ellida-landing .ellida-help__title.ellida-unified-title {
width: 100% !important;
max-width: 1080px !important;
margin-bottom: 28px !important;
font-size: clamp(38px, 3.25vw, 52px) !important;
line-height: 1.08 !important;
letter-spacing: -.028em !important;
font-weight: 400 !important;
}
.ellida-landing .ellida-help__title.ellida-unified-title span {
font-weight: 500 !important;
}
}
/* Smartphone touch: card servizi volutamente più basse e leggere. */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
.ellida-services .ellida-shell {
width: min(calc(100% - 64px), 560px) !important;
}
.ellida-services__heading {
margin-bottom: 22px !important;
}
.ellida-services-grid,
.ellida-services-grid[data-expanded="false"] {
gap: 10px !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
height: 172px !important;
min-height: 0 !important;
padding: 12px 14px 11px !important;
border-radius: 20px !important;
}
.ellida-service-card__icon {
width: 29px !important;
height: 29px !important;
margin: 0 auto 5px !important;
}
.ellida-service-card strong {
margin: 0 0 4px !important;
font-size: 13.5px !important;
line-height: 1.12 !important;
font-weight: 600 !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
max-width: 260px !important;
font-size: 11.2px !important;
line-height: 1.28 !important;
}
.ellida-service-card small {
margin-top: auto !important;
padding: 4px 9px !important;
border-radius: 13px !important;
font-size: 9.5px !important;
line-height: 1.1 !important;
}
}
@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
.ellida-services .ellida-shell {
width: calc(100% - 56px) !important;
}
.ellida-service-card,
.ellida-services-grid[data-expanded="false"] .ellida-service-card {
height: 166px !important;
padding: 11px 13px 10px !important;
}
.ellida-service-card strong {
font-size: 13px !important;
}
.ellida-service-card > span:not(.ellida-service-card__icon) {
font-size: 10.8px !important;
}
}