hjcdhjcdswhj | Dedalux

/* — No Orizzontal Scroll —*/

html, body {
overflow-x: hidden;
overflow-y: auto; /* Puoi aggiungere questo se desideri gestire lo scorrimento verticale */
}

/* — Grassetto 500 —*/

b, strong {
font-weight: 500; /* Imposta il peso del grassetto a 500 */
}

/* Classe personalizzata per rientri fluidi */

.section-fluid-padding {
/* Desktop ≥1024px */
padding-left: clamp(50px, 5%, 160px);
padding-right: clamp(50px, 5%, 160px);
}

/* Tablet 768–1023px */
@media (max-width: 1023px) {
.section-fluid-padding {
padding-left: clamp(30px, 5%, 100px);
padding-right: clamp(30px, 5%, 100px);
}
}

/* Mobile ≤767px */
@media (max-width: 767px) {
.section-fluid-padding {
padding-left: clamp(20px, 6%, 60px);
padding-right: clamp(20px, 6%, 60px);
}
}

/*Testo Sottolineato allo Scroll*/
/* di default usiamo il colore del widget (Elementor) */
:root{ –ux-hl-color: currentColor; }

/* valori consigliati: inizia presto e completa a metà schermo */
.ux-hl{
–hl-start: 96; /* % viewport: quando parte (vicino al fondo) */
–hl-end: 50; /* % viewport: quando finisce (≈ metà schermo) */
–hl-smooth: 0.3; /* 0.1 = più reattivo, 0.3 = più morbido */
}

/* preset opzionali da aggiungere al widget */
.ux-hl-soft{ –hl-smooth: 0.26; }
.ux-hl-fast{ –hl-smooth: 0.14; }
.ux-hl-early{ –hl-end: 50; } /* completa ancora prima */
.ux-hl-late{ –hl-end: 65; } /* completa un filo più tardi */

/* caratteri iniettati dallo script */
.ux-hl-char{
background-image:
linear-gradient(color-mix(in srgb, var(–ux-hl-color) 50%, transparent) 0 0),
linear-gradient(var(–ux-hl-color) 0 0);
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, var(–p, 0%) 100%; /* fill orizzontale L→R */
background-position: 0 0, 0 0;

-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;

-webkit-box-decoration-break: clone; box-decoration-break: clone;
display: inline;

/* niente transizioni CSS: la fluidità è gestita dal JS */
transition: none;
}

@media (prefers-reduced-motion: reduce){
.ux-hl-char{ transition: none !important; }
}

/* ===== Prose v2: tipografia minimale, accessibile, estensibile ===== */

.prose{
/* Custom properties per controllare tutto da un punto */
–measure: 70ch;
–lh: 1.65;
–space-1: .25rem;
–space-2: .5rem;
–space-3: .75rem;
–space-4: 1rem;
–space-6: 1.5rem;
–space-8: 2rem;

max-width: var(–measure);
line-height: var(–lh);

/* Gestione righe/lunghezze parole */
hyphens: auto;
overflow-wrap: break-word; /* meno aggressivo di `anywhere` */
word-break: normal;

/* Migliorie tipografiche moderne */
font-optical-sizing: auto;
}

/* Flow verticale di base: nessun “muro di testo” */
.prose > *{ margin-block: 0; }
.prose > * + *{ margin-block-start: var(–space-4); }

/* Paragrafi */
.prose p + p{ margin-block-start: .75em; }

/* Titoli */
.prose :is(h2,h3){ margin-block: 1.6em .6em; line-height: 1.25; }
.prose :is(h4,h5,h6){ margin-block: 1.2em .5em; line-height: 1.3; }

/* Liste: niente padding orizzontale extra, spaziatura coerente */
.prose :is(ul,ol){ margin-block: .9em; padding-inline-start: 0; }
.prose li + li{ margin-block-start: .35em; }

/* Link: sottolineatura leggibile + focus visibile */
.prose a{
text-decoration-thickness: .08em;
text-underline-offset: .18em;
text-decoration-skip-ink: auto;
}
.prose a:focus-visible{
outline: 2px solid currentColor;
outline-offset: .2em;
border-radius: .125rem;
}

/* Enfasi */
.prose strong{ font-weight: 600; }

/* Elementi tipografici utili */
.prose blockquote{
margin: 1.2em 0;
padding-inline-start: 1em; /* bordo sottile, niente padding orizz. globale */
border-inline-start: 3px solid currentColor;
opacity: .85;
}
.prose :is(code,kbd,samp){
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace;
font-size: .95em;
background: color-mix(in oklab, currentColor 8%, transparent);
padding: .1em .3em;
border-radius: .25rem;
}
.prose pre{
overflow: auto;
padding: 1rem;
border-radius: .5rem;
background: color-mix(in oklab, currentColor 6%, transparent);
}

/* Media & tabelle */
.prose :is(img,video,svg){ max-width: 100%; height: auto; }
.prose table{
width: 100%;
border-collapse: collapse;
display: block; /* per consentire overflow su x */
overflow-x: auto;
}
.prose th, .prose td{
padding: .6em .8em;
border-block-end: 1px solid var(–prose-table-border, rgba(0,0,0,.12));
}

/* Testi piccoli / didascalie */
.prose :is(figcaption, small){ font-size: .875em; opacity: .8; }

/* Migliora ancore con header sticky */
.prose :is(h1,h2,h3,h4,h5,h6){ scroll-margin-top: var(–scroll-offset, 7rem); }

/* Feature progressive */
@supports (text-wrap: balance){
.prose :is(h1,h2,h3){ text-wrap: balance; }
}
@supports (text-wrap: pretty){
.prose p{ text-wrap: pretty; }
}
@supports (hanging-punctuation: first){
.prose{ hanging-punctuation: first allow-end last; }
}

/* Modificatori (non toccano l’allineamento orizzontale) */
.prose–narrow{ –measure: 60ch; }
.prose–wide{ –measure: 80ch; }
.prose–tight{ –lh: 1.5; }
.prose–loose{ –lh: 1.75; }

/* Trim: niente margine in testa/coda al container */
.prose > :first-child{ margin-block-start: 0; }
.prose > :last-child{ margin-block-end: 0; }

/* Opzionale: se vuoi liste rientrate senza toccare il default */
.prose–indented-lists :is(ul,ol){ padding-inline-start: 1.25em; }

/* ===== FX Swap — per-letter, doppio layer, NO shift layout ===== */
:root{
–fx-dur: .9s;
–fx-ease: cubic-bezier(.22,.8,.2,1);
–fx-stagger: .01s; /* ritardo progressivo tra lettere */
}

/* Contenitore che sovrappone i due layer (stessa posizione, niente “allargamento”) */
.fx-stack{
display: inline-grid; /* i figli condividono la stessa cella */
vertical-align: middle;
line-height: inherit;
white-space: nowrap;
overflow: hidden; /* taglia entrate/uscite */
pointer-events: none; /* click sempre sull’anchor/bottone */
}
.fx-top, .fx-bottom{ grid-area: 1 / 1; } /* sovrapposti */

/* Ogni layer contiene lettere animate */
.fx-label{ /* wrapper interno del layer */
display: inline-block;
}

/* Ogni lettera */
.fx-letter{
position: relative;
display: inline-block;
transition: transform var(–fx-dur) var(–fx-ease);
transition-delay: calc(var(–i) * var(–fx-stagger));
will-change: transform;
backface-visibility: hidden;
}

/* Stato base: top visibile, bottom sotto */
.fx-top .fx-letter{ transform: translateY(0%); }
.fx-bottom .fx-letter{ transform: translateY(110%); }

/* Hover IN: top sale, bottom entra dal basso (solo sul target in hover) */
@media (hover:hover) and (pointer:fine){
.fx-target:hover .fx-top .fx-letter{ transform: translateY(-110%); }
.fx-target:hover .fx-bottom .fx-letter{ transform: translateY(0%); }
}
/* Tastiera */
.fx-target:focus-visible .fx-top .fx-letter{ transform: translateY(-110%); }
.fx-target:focus-visible .fx-bottom .fx-letter{ transform: translateY(0%); }

/* Hover OUT: grazie alle transizioni, tornano allo stato base:
bottom 0% -> 110% (scende), top -110% -> 0% (rientra dall’alto) */

/* Riduci motion */
@media (prefers-reduced-motion: reduce){
.fx-letter{ transition: none !important; }
}

/* ===== Underline reveal — OPT-IN (senza ::after) ===== */
:root{
–ux-anim: 1000ms cubic-bezier(.2,.8,.2,1);
–ux-line-thickness: 1px; /* spessore linea */
–ux-line-offset: 0px; /* distanza dal testo */
}

/* 1) Blocchi testuali: applica la classe `ux-links` al widget/contenitore
Effetto su TUTTI i link testuali interni (esclude bottoni/menu/btn-*) */
.ux-links a:not(.elementor-button):not([role=”button”]):not([class*=”btn”]):not(.elementor-item):not(.no-ux){
text-decoration: none;
color: inherit;
display: inline-block; /* necessario per far funzionare l’offset */
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% var(–ux-line-thickness);
background-position: 0 100%;
background-position-y: calc(100% – var(–ux-line-offset)); /* offset affidabile */
transition: background-size var(–ux-anim);
}
@media (hover:hover) and (pointer:fine){
.ux-links a:not(.elementor-button):not([role=”button”]):not([class*=”btn”]):not(.elementor-item):not(.no-ux):hover{
background-size: 100% var(–ux-line-thickness);
}
}
.ux-links a:focus-visible{
background-size: 100% var(–ux-line-thickness);
}

/* 2) Menu di navigazione: metti `menu-underline` sul widget Nav Menu
Effetto SOLO in hover (nessuna underline persistente) */
.menu-underline .elementor-nav-menu a.elementor-item{
text-decoration: none;
display: inline-block; /* necessario per l’offset */
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% var(–ux-line-thickness);
background-position: 0 100%;
background-position-y: calc(100% – var(–ux-line-offset));
transition: background-size var(–ux-anim);
}
@media (hover:hover) and (pointer:fine){
.menu-underline .elementor-nav-menu a.elementor-item:hover{
background-size: 100% var(–ux-line-thickness);
}
}
/* Disabilita underline “attiva”/persistente */
.menu-underline .elementor-nav-menu a.elementor-item.elementor-item-active{
background-size: 0% var(–ux-line-thickness) !important;
}

/* 3) Riduci motion: rispetta le preferenze utente */
@media (prefers-reduced-motion: reduce){
.ux-links a,
.menu-underline .elementor-nav-menu a.elementor-item{
transition: none !important;
}
}

/* 4) Opt-out rapido per singoli link (da usare se vuoi escluderne uno) */
.no-ux{
background-image: none !important;
background-size: 0 !important;
transition: none !important;
}

/* —– Liquid Glass —-*/

/* ===== Liquid glass con UNA classe: .glass ===== */

/* A) ELEMENTI GENERICI (NO widget, NO button/icon) — SOLO ASPETTO, NIENTE LAYOUT */
.glass:not(.elementor-widget):not(.elementor-button):not(.elementor-icon){
–blur: 4px; –bright: 1.12; –contr: 0.92;
–ring: 1px; –angle: 45deg; –hl: .26; –caustic: .10;

position: relative;
transform: translateZ(0);
will-change: backdrop-filter;
background-image: none !important;

/* Effetto visivo */
backdrop-filter: blur(var(–blur)) brightness(var(–bright)) contrast(var(–contr));
-webkit-backdrop-filter: blur(var(–blur)) brightness(var(–bright)) contrast(var(–contr));
box-shadow: inset 0 14px 24px rgba(255,255,255,.05), inset 0 -12px 20px rgba(0,0,0,.05);

/* Non toccare il layout del container */
/* (nessun display/align/justify qui) */
isolation: isolate; /* assicura layering pulito per i pseudo-elementi */
}

/* Contenitori Flex di Elementor: lascia a Elementor il display nativo */
.e-con.glass { display: inherit; }

/* Pseudo-elementi per elementi generici */
.glass:not(.elementor-widget):not(.elementor-button):not(.elementor-icon)::before,
.glass:not(.elementor-widget):not(.elementor-button):not(.elementor-icon)::after{
content:””; position:absolute; inset:0; border-radius: inherit;
clip-path: inset(0 round inherit); pointer-events:none; z-index:1;
}
.glass:not(.elementor-widget):not(.elementor-button):not(.elementor-icon)::before{
padding: var(–ring);
background: linear-gradient(var(–angle),
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.45) 38%,
rgba(255,255,255,.12) 72%,
rgba(255,255,255,.50) 100%);
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) content-box;
-webkit-mask-composite: xor; mask-composite: exclude; z-index:2;
}
.glass:not(.elementor-widget):not(.elementor-button):not(.elementor-icon)::after{
background:
linear-gradient(var(–angle), rgba(255,255,255,var(–hl)) 0%, rgba(255,255,255,0) 60%),
radial-gradient(55% 60% at 78% 82%, rgba(255,255,255,var(–caustic)) 0%, rgba(255,255,255,0) 60%);
}

/* B) BUTTON — niente effetto sul WRAPPER del widget */
.glass.elementor-widget-button{
background:none !important; backdrop-filter:none !important;
-webkit-backdrop-filter:none !important; box-shadow:none !important;
}

/* Applica l’effetto al bottone quando:
1) la classe è sul widget -> .glass.elementor-widget-button .elementor-button
2) la classe è sul bottone -> .elementor-button.glass */
.glass.elementor-widget-button .elementor-button,
.elementor-button.glass{
–blur: 4px; –bright: 1.12; –contr: 0.92;
–ring: 1px; –angle: 45deg; –hl: .26; –caustic: .10;
position: relative; background-image:none !important;
backdrop-filter: blur(var(–blur)) brightness(var(–bright)) contrast(var(–contr));
-webkit-backdrop-filter: blur(var(–blur)) brightness(var(–bright)) contrast(var(–contr));
box-shadow: inset 0 14px 24px rgba(255,255,255,.05), inset 0 -12px 20px rgba(0,0,0,.05);

/* Qui sì: layout interno del bottone */
display: inline-flex; align-items: center; justify-content: center;
}

/* Pseudo-elementi sul bottone (entrambe le modalità) */
.glass.elementor-widget-button .elementor-button::before,
.glass.elementor-widget-button .elementor-button::after,
.elementor-button.glass::before,
.elementor-button.glass::after{
content:””; position:absolute; inset:0; border-radius: inherit;
clip-path: inset(0 round inherit); pointer-events:none; z-index:1;
}
.glass.elementor-widget-button .elementor-button::before,
.elementor-button.glass::before{
padding: var(–ring);
background: linear-gradient(var(–angle),
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.45) 38%,
rgba(255,255,255,.12) 72%,
rgba(255,255,255,.50) 100%);
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) content-box;
-webkit-mask-composite: xor; mask-composite: exclude; z-index:2;
}
.glass.elementor-widget-button .elementor-button::after,
.elementor-button.glass::after{
background:
linear-gradient(var(–angle), rgba(255,255,255,var(–hl)) 0%, rgba(255,255,255,0) 60%),
radial-gradient(55% 60% at 78% 82%, rgba(255,255,255,var(–caustic)) 0%, rgba(255,255,255,0) 60%);
}

/* C) ICON — reset wrapper e due modalità (classe su widget o sull’icona) */
.glass.elementor-widget-icon{
background:none !important; backdrop-filter:none !important;
-webkit-backdrop-filter:none !important; box-shadow:none !important;
}

/* 1) classe sul widget -> stile al nodo .elementor-icon */
/* 2) classe messa direttamente sull’icona */
.glass.elementor-widget-icon .elementor-icon,
.elementor-icon.glass{
–blur: 4px; –bright: 1.12; –contr: 0.92;
–ring: 1px; –angle: 45deg; –hl: .26; –caustic: .10;
position: relative; background-image:none !important;
border-radius: var(–radius, inherit); padding: var(–pad, inherit);
backdrop-filter: blur(var(–blur)) brightness(var(–bright)) contrast(var(–contr));
-webkit-backdrop-filter: blur(var(–blur)) brightness(var(–bright)) contrast(var(–contr));
box-shadow: inset 0 14px 24px rgba(255,255,255,.05), inset 0 -12px 20px rgba(0,0,0,.05);

/* Layout interno dell’icona */
display:inline-flex; align-items:center; justify-content:center;
}

/* Pseudo-elementi dell’icona (entrambe le modalità) */
.glass.elementor-widget-icon .elementor-icon::before,
.glass.elementor-widget-icon .elementor-icon::after,
.elementor-icon.glass::before,
.elementor-icon.glass::after{
content:””; position:absolute; inset:0; border-radius: inherit;
clip-path: inset(0 round inherit); pointer-events:none; z-index:1;
}
.glass.elementor-widget-icon .elementor-icon::before,
.elementor-icon.glass::before{
padding: var(–ring);
background: linear-gradient(var(–angle),
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.45) 38%,
rgba(255,255,255,.12) 72%,
rgba(255,255,255,.50) 100%);
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) content-box;
-webkit-mask-composite: xor; mask-composite: exclude; z-index:2;
}
.glass.elementor-widget-icon .elementor-icon::after,
.elementor-icon.glass::after{
background:
linear-gradient(var(–angle), rgba(255,255,255,var(–hl)) 0%, rgba(255,255,255,0) 60%),
radial-gradient(55% 60% at 78% 82%, rgba(255,255,255,var(–caustic)) 0%, rgba(255,255,255,0) 60%);
}

/* D) Fallback bordo se manca -webkit-mask-composite */
@supports not (-webkit-mask-composite: xor) {
.glass:not(.elementor-widget):not(.elementor-button):not(.elementor-icon)::before,
.glass.elementor-widget-button .elementor-button::before,
.elementor-button.glass::before,
.glass.elementor-widget-icon .elementor-icon::before,
.elementor-icon.glass::before{
-webkit-mask:none; mask:none; background:none;
box-shadow: inset 0 0 0 var(–ring) rgba(255,255,255,.55);
}
}

/* ===== Dedalux — Global Font via CSS Variables (hash) ===== */
/* Applica ai kit di Elementor ovunque */
:root, body[class*=”elementor-kit-“] {

/* H1 (2bf5a74) */
–e-global-typography-2bf5a74-font-size: clamp(28px, 3.4vw, 60px) !important;
–e-global-typography-2bf5a74-font-weight: 500 !important;
–e-global-typography-2bf5a74-letter-spacing: normal !important;
–e-global-typography-2bf5a74-line-height: 1.15 !important;

/* H2 (d7ff3cd) */
–e-global-typography-d7ff3cd-font-size: clamp(24px, 2.8vw, 50px) !important;
–e-global-typography-d7ff3cd-font-weight: 500 !important;
–e-global-typography-d7ff3cd-letter-spacing: normal !important;
–e-global-typography-d7ff3cd-line-height: 1.20 !important;

/* H3 (773a133) */
–e-global-typography-773a133-font-size: clamp(20px, 1.6vw, 42px) !important;
–e-global-typography-773a133-font-weight: 500 !important;
–e-global-typography-773a133-letter-spacing: normal !important;
–e-global-typography-773a133-line-height: 1.25 !important;

/* H4 (c6e2257) */
–e-global-typography-c6e2257-font-size: clamp(18px, 1.4vw, 34px) !important;
–e-global-typography-c6e2257-font-weight: 500 !important;
–e-global-typography-c6e2257-letter-spacing: normal !important;
–e-global-typography-c6e2257-line-height: 1.30 !important;

/* H5 (9e3a490) */
–e-global-typography-9e3a490-font-size: clamp(16px, 1.2vw, 28px) !important;
–e-global-typography-9e3a490-font-weight: 500 !important;
–e-global-typography-9e3a490-letter-spacing: normal !important;
–e-global-typography-9e3a490-line-height: 1.35 !important;

/* H6 (5163329) */
–e-global-typography-5163329-font-size: clamp(14px, 1vw, 24px) !important;
–e-global-typography-5163329-font-weight: 500 !important;
–e-global-typography-5163329-letter-spacing: normal !important;
–e-global-typography-5163329-line-height: 1.40 !important;

/* Body / TEXT */
–e-global-typography-text-font-size: clamp(15px, 1.2vw, 17px) !important;
–e-global-typography-text-font-weight: 400 !important;
–e-global-typography-text-letter-spacing: normal !important;
–e-global-typography-text-line-height: 1.4 !important;

/* Body Medium / ACCENT (Lead) */
–e-global-typography-accent-font-size: clamp(15px, 1.2vw, 17px) !important;
–e-global-typography-accent-font-weight: 500 !important;
–e-global-typography-accent-letter-spacing: normal !important;
–e-global-typography-accent-line-height: 1.4 !important;

/* Payoff / SECONDARY */
–e-global-typography-secondary-font-size: clamp(24px, 2.4vw, 36px) !important;
–e-global-typography-secondary-font-weight: 500 !important;
–e-global-typography-secondary-letter-spacing: normal !important;
–e-global-typography-secondary-line-height: 1.20 !important;

/* Span (6f8484a) */
–e-global-typography-6f8484a-font-size: clamp(12px, 1vw, 14px) !important;
–e-global-typography-6f8484a-font-weight: 500 !important;
–e-global-typography-6f8484a-letter-spacing: normal !important;
–e-global-typography-6f8484a-line-height: 1 !important;

/* Button Text (d388e3a) */
–e-global-typography-d388e3a-font-size: clamp(14px, 1vw, 16px) !important;
–e-global-typography-d388e3a-font-weight: 500 !important;
–e-global-typography-d388e3a-letter-spacing: normal !important;
–e-global-typography-d388e3a-line-height: 1 !important; /* monoriga */
}

html, body {
overflow-y: visible !important;
overflow-x: hidden !important;
height: auto !important;
position: relative !important;
}

/* Rimuove eventuali blocchi da contenitori Elementor */
.elementor-section-wrap, .elementor-location-header, #page {
overflow: visible !important;
}/* — No Orizzontal Scroll —*/