/* le variabili del raggio vanno tipizzate, altrimenti non sono animabili */ @property --lr{ syntax:""; inherits:true; initial-value:175px; } @property --ld{ syntax:""; inherits:true; initial-value:350px; } /* ============================================================ DOMUS MINATO — SERVICES DESKTOP (benchmark: takeboost) Single flow · scroll-driven background colour journey · fixed pixel island · offset service boxes · giant type. Loaded only at (min-width:53.3333vw), after the inline styles. ============================================================ */ @media (min-width:53.3333vw){ :root{ --dskBody:1.667vw; --dskLh:1.7; } /* ---- layers: bg journey (0) · island (1) · content (2) ---- */ .dskbg{ position:absolute; top:0; left:0; width:100%; z-index:0; pointer-events:none; } .dskbg--over{ position:fixed; inset:0; height:auto; opacity:0; } .dsk-sea{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .dsk-isl{ position:absolute; pointer-events:none; z-index:1; filter:drop-shadow(0 0.9375vw 1.1458vw rgba(29,53,87,0.22)); } .dsk-boat{ position:fixed; inset:0; z-index:39; pointer-events:none; } #dskIsle{ position:absolute; left:50%; top:38.45vw; z-index:5; pointer-events:none; will-change:transform; filter:drop-shadow(0 1.5625vw 1.7708vw rgba(29,53,87,0.30)); } html, body, .svc{ background:transparent !important; } /* ordine desktop: hero(+Q&A) -> servizi -> first the why -> narrativa -> quote -> who -> faq -> method */ .svc{ display:flex; flex-direction:column; } .svc-stage2{ display:contents; } #svcStage{ order:1; } .svc-do[data-chap="chap2"]{ order:2; } .svc-pop{ order:3; } .svc-narr{ order:4; } .svc-quote{ order:5; } .svc-do--who{ order:6; } .svc-method{ order:7; } .svc > *{ min-width:0; } /* il mobile sovrappone le sezioni con margini negativi (-35svh): su desktop ogni sezione ha il suo spazio */ .svc-do[data-chap="chap2"]{ margin-top:max(10.1250vw,13vw) !important; } .svc-pop{ margin-top:8vw !important; } .svc-narr{ margin-top:max(3.3750vw,4vw) !important; } .svc-quote{ margin:0 !important; } .svc-do--who{ margin-top:2vw !important; } /* spazio per la label che pende sopra, in scala con la label (vw) */ .svc-do__pane--faq{ margin-top:8vw !important; } .svc-method{ margin-top:max(6.7500vw,8vw) !important; } /* lo smooth CSS globale strozza la rotella su layout pesanti: scroll nativo + smoothing temporale JS (principio home) */ html{ scroll-behavior:auto !important; } /* ---- mobile scenography off ---- */ .svc-hero__px, .svc-cover, .svc-pose-top, .svc-pose-bot, .fit-h1--overlay, .fit-h1--cg, .svc-do__cover{ display:none !important; } /* layer scenografici mobile che coprono il viaggio: pseudo-elementi opachi */ .svc-stage::after{ display:none !important; content:none !important; } .svc-do__head::before{ display:none !important; content:none !important; } /* giant label di sezione: visibili, mai cliccabili, taglia desktop */ .svc-do__head{ pointer-events:none; } .svc-do__head .label, .svc-do__head.svc-do__head--who .label, .svc-do__head.svc-do__head--faq .label{ font-size:8.4vw !important; letter-spacing:.04em !important; color:var(--calce,#f5f2e5); -webkit-text-fill-color:var(--calce,#f5f2e5); background:none !important; } .svc-do__head .lp{ position:static !important; transform:none !important; color:inherit !important; -webkit-text-fill-color:inherit !important; } .dsk-sectitle{ padding:0 0 2.2500vw; font-family:"JetBrains Mono",monospace; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:8.4vw; line-height:1; color:var(--calce,#f5f2e5); pointer-events:none; } /* i canvas animati mobile restano spenti (init a w=0): li sostituiscono pitture statiche identiche fatte da desktop.js */ .svc-pxstrip canvas.svc-pxstrip-px, .svc-do__wave canvas, .svc-do__strip canvas, .svc-item__strip canvas, .svc-sq canvas, canvas.pxbox__px{ display:none !important; } .dskpx{ display:block; width:100%; height:100%; } .dsk-strip2{ position:absolute; left:0; width:100%; height:7.8125vw; background:var(--giada,#8cded0); z-index:2; pointer-events:none; -webkit-mask:url("data:image/svg+xml;utf8,") repeat-x left center; mask:url("data:image/svg+xml;utf8,") repeat-x left center; -webkit-mask-size:62.5000vw 100%; mask-size:62.5000vw 100%; } /* pannello hamburger: il canvas animato satura il main thread a 75.0000vw; lo sostituisce una pittura statica identica al primo open */ #hamPanelBg{ display:none !important; } /* ---- hero: pure typography over the journey ---- */ #svcStage{ height:auto !important; min-height:0 !important; } /* la band Q&A vive dentro .svc-hero (prima dell'H1 nel DOM): flusso desktop = H1 -> arrow -> band */ .svc-hero{ display:flex; flex-direction:column; height:auto !important; } .svc-hero__veil{ display:none !important; } .svc-hero__in{ order:1; position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; height:auto !important; } .svc-hero .svc-scroll{ order:2; position:absolute !important; top:calc(56.25vw - 5.0000vw); left:50%; transform:translateX(-50%); margin:0; } .svc-hero .svc-band{ order:3; } .svc-hero{ min-height:0; max-width:none; padding:0 6vw; } .svc-hero__in{ max-width:50vw; min-height:56.25vw; display:flex; flex-direction:column; justify-content:center; align-items:flex-start !important; padding:3.3750vw 0 5.6250vw; } .fit-h1 span, .fit-h1{ background:none !important; -webkit-text-fill-color:var(--calce,#f5f2e5) !important; color:var(--calce,#f5f2e5) !important; } .fit-h1, .fit-h1-wrap{ text-align:left !important; width:100%; } .fit-h1--base span{ display:inline-block; font-size:6.8vw; line-height:.92; letter-spacing:.005em; white-space:nowrap; vertical-align:baseline; } .fit-h1--base span:nth-child(2){ margin-left:.22em; } .fit-h1--base span:nth-child(3){ display:block; margin-top:.08em; font-size:6.8vw !important; } .svc-hero__in{ max-width:none !important; width:100%; } .fit-h1-wrap{ margin-left:-1vw; width:90vw; } .fit-h1--base{ white-space:nowrap; } #svcSub, .svc-overline{ color:var(--calce,#f5f2e5) !important; } /* Q&A band: becomes a flowing section on the calce stop */ .svc-band{ position:relative !important; top:auto !important; height:auto !important; background:transparent !important; overflow:visible !important; opacity:1 !important; z-index:2; } .svc-band{ min-height:56.25vw; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,auto); align-items:center; column-gap:3vw; padding:0 6vw; } .dsk-overview{ grid-column:1; grid-row:1; } .svc-band__in{ grid-column:2; grid-row:1; position:relative; overflow:visible; } .svc-band__in{ margin:0; max-width:none; width:44vw; text-align:left; padding:2.5vw 2.3vw 2.7vw; display:block; background:linear-gradient(150deg, var(--calce,#f5f2e5), var(--vesta,#d8a23a)); border-radius:2.3958vw 3.8542vw 2.7083vw 3.5417vw / 3.5417vw 2.5000vw 3.7500vw 2.6042vw; will-change:transform; } .dsk-overview{ position:static; margin:0; line-height:.96; font-family:"JetBrains Mono",monospace; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:8.4vw; line-height:1; color:var(--calce,#f5f2e5); pointer-events:none; } .svc-band__in .a{ grid-column:2; } .svc-band__in .q{ color:var(--poseidone,#1d3557) !important; } .svc-band__in .q{ font-size:2.9vw !important; line-height:1.06; color:var(--poseidone,#1d3557) !important; margin-bottom:1.5000vw; display:block; } .svc-band__in .a{ color:var(--notte,#0a1929) !important; font-size:var(--dskBody); line-height:var(--dskLh); column-count:2; column-gap:2.0000vw; } /* ---- wave strip accents ---- */ .svc-pxstrip{ background:var(--chia,#4cccb3); margin-top:calc(-1*7.8125vw); position:relative; z-index:3; } .svc-hero .svc-scroll{ top:calc(56.25vw - 7.8125vw - 3.7500vw) !important; } .svc-do__wave, .svc-do__wave-bg{ display:none !important; } .svc-pxstrip{ order:2; height:7.8125vw; width:calc(100% + 12vw) !important; margin-left:-6vw !important; margin-right:-6vw !important; background:transparent !important; -webkit-mask:url("data:image/svg+xml;utf8,") repeat-x left center !important; mask:url("data:image/svg+xml;utf8,") repeat-x left center !important; -webkit-mask-size:62.5000vw 100% !important; mask-size:62.5000vw 100% !important; } .svc-pxstrip2{ background:var(--chia,#4cccb3); position:relative; z-index:3; order:2; height:7.8125vw; width:calc(100% + 12vw); margin-left:-6vw; margin-right:-6vw; pointer-events:none; transform:scaleY(-1); -webkit-mask:url("data:image/svg+xml;utf8,") repeat-x left center; mask:url("data:image/svg+xml;utf8,") repeat-x left center; -webkit-mask-size:62.5000vw 100%; mask-size:62.5000vw 100%; } /* ---- you need strategy: titolo sx + patch dx / narrativa sx + tagline dx ---- */ .svc-pop{ text-align:left; padding:3vw 6vw 8vw; min-height:104vw; display:block !important; position:relative; } .svc-pop .dsk-sectitle{ position:absolute; left:auto; right:43.8vw; top:1.4vw; width:auto; max-width:none; text-align:right; letter-spacing:0 !important; line-height:1; padding:0; margin:0; } .dsk-popflow{ position:absolute; inset:0; pointer-events:none; z-index:1; } .dsk-cell{ position:absolute; pointer-events:auto; } .dsk-cell--p1{ left:17.5vw; top:34vw; width:26vw; } /* colonna destra: centrata fra il limite destro di "wow." e il bordo dello schermo, e abbassata leggermente rispetto alla sinistra */ .dsk-cell--p2{ left:62.79vw; top:48vw; width:24vw; } .dsk-cell p{ font-size:var(--dskBody); line-height:var(--dskLh); margin:0; color:var(--calce,#f5f2e5); } .dsk-cell .svc-tagx__row{ max-width:none; margin:0; justify-content:flex-start; } .dsk-cell .svc-tagx__l1{ max-width:none; } .dsk-patch{ pointer-events:none; } .dsk-patch canvas.dskpx{ position:absolute; inset:0; } .dsk-patch--pop{ position:absolute; left:auto; right:0; top:-11.2500vw; width:49.8vw; height:31.2vw; z-index:0; } .svc-pop .dsk-sectitle, .svc-pop .svc-narr, .svc-pop .svc-tagx{ position:relative; z-index:1; } .svc-pop .svc-narr{ margin:0 !important; } .svc-narr p{ font-size:var(--dskBody); line-height:var(--dskLh); margin:0 0 1.0000vw; break-inside:avoid; } .svc-pop .svc-tagx{ position:absolute; left:6vw; top:60vw; width:44vw; display:block; z-index:1; } .svc-pop .svc-tagx__l1{ max-width:none; } .svc-pop .svc-tagx__row{ max-width:none; margin-top:1.1250vw; margin-left:8vw; justify-content:flex-start; } /* ---- cornice pixel chia attorno a "You get this" ---- */ .dskframe{ position:absolute; inset:2vw 0; pointer-events:none; z-index:4; } .dskframe canvas{ position:absolute; display:block; } .dskframe__tl{ top:0; left:0; width:calc(50% - 10vw); height:1.6667vw; } .dskframe__tr{ top:0; right:0; width:calc(50% - 10vw); height:1.6667vw; } .dskframe__l{ top:0; left:0; width:1.6667vw; height:100%; } .dskframe__r{ top:0; right:0; width:1.6667vw; height:100%; } .dskframe__b{ bottom:0; left:0; width:calc(100% - 18vw); height:1.6667vw; } .dsk-isl--hero{ z-index:2; } /* ---- services: scena hover-driven (benchmark) ---- */ .svc-do[data-chap="chap2"]{ padding:0; } .svc-do[data-chap="chap2"] .svc-do__pane, .svc-do[data-chap="chap2"] .svc-do__head{ display:none !important; } .dsvc{ position:relative; min-height:68vw; display:block; } .dsvc__head{ padding:5.0625vw 0 0; text-align:center; font-family:"JetBrains Mono",monospace; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:8.4vw; line-height:1; color:var(--calce,#f5f2e5); white-space:nowrap; pointer-events:none; } .dsvc__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.0083vw 1.2833vw; margin:2.2500vw auto 0; max-width:88vw; justify-content:center; position:relative; z-index:41; } .dsvc__btn{ position:relative; height:2.8646vw; background:none; border:0; padding:0; cursor:pointer; transition:transform .35s cubic-bezier(0.2,0.8,0.2,1); } .dsvc__btn:hover{ transform:translateY(-0.1562vw); } .dsvc__btn img{ display:block; height:100%; width:auto; } .dsvc__btn span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--notte,#14223e); font-size:0.5500vw; line-height:1.2; text-align:center; padding:0 12%; padding-bottom:2%; pointer-events:none; } .dsvc__title{ position:absolute; left:0; width:100%; text-align:center; top:21vw; z-index:6; white-space:nowrap; bottom:auto; transform:translate(-2.5000vw,0); opacity:0; max-width:none; font-family:"Amandine",serif; font-weight:400; font-size:3.6vw; line-height:1.02; letter-spacing:-.01em; color:var(--calce,#f5f2e5); transition:transform .6s cubic-bezier(0.2,0.8,0.2,1), opacity .6s ease; } .dsvc__text--a{ left:6vw; right:auto; top:29vw; width:24vw !important; transform:translate(-2.5vw,0); } .dsvc__text--b{ right:6vw; left:auto; top:29vw; width:24vw !important; transform:translate(2.5vw,0); } .dsvc__text{ position:absolute; bottom:auto; opacity:0; width:26vw; column-count:1; font-size:var(--dskBody); line-height:1.62; color:var(--calce,#f5f2e5); transition:transform .6s cubic-bezier(0.2,0.8,0.2,1), opacity .6s ease; } .dsvc__title.is-in, .dsvc__text.is-in{ opacity:1; transform:translate(0,0); } .dsvc__text p{ font-size:inherit !important; line-height:inherit !important; margin:0 0 1vw !important; } /* ---- quote: left on giada ---- */ .svc-quote{ background:transparent !important; padding:0; min-height:56.25vw; display:flex; align-items:center; justify-content:center; position:relative; } .dsk-patch--quote{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72vw; height:34vw; z-index:0; } .svc-narr, .svc-quote{ transform:none !important; } .svc-quote .svc-tagx--quote{ position:relative; z-index:1; max-width:none; text-align:center; } .svc-quote .svc-tagx__q{ display:block; text-align:center; line-height:1.12; color:var(--calce,#f5f2e5); } /* ---- who: right column, journey bg ---- */ .svc-do--who{ margin-top:0; } .svc-do--who .svc-do__pane{ position:relative !important; top:auto !important; min-height:98vw !important; height:auto; background:transparent !important; padding:5.6250vw 0; display:flex; flex-direction:column; justify-content:center; } .svc-do--who .svc-card{ margin:0 6vw; max-width:none; padding:0; } .svc-do--who .svc-item{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:13vw; row-gap:18vw; align-items:start; } .svc-do--who .svc-li{ position:relative; background:var(--calce,#f5f2e5); border-radius:1.9792vw 3.1250vw 2.2917vw 2.9167vw / 2.9167vw 2.0833vw 3.1250vw 2.1875vw; padding:2.1667vw 2.0000vw; margin:0; } .svc-do--who .svc-li:nth-child(even){ transform:translateY(9vw); } .svc-do--who .svc-li:nth-child(3){ margin-left:4vw; } .svc-do--who .svc-li:nth-child(4){ margin-right:4vw; } .svc-do--who .svc-card{ padding-bottom:6.1875vw; } .svc-do--who .svc-sq{ display:none !important; } .svc-li p{ font-size:var(--dskBody); line-height:var(--dskLh); color:var(--poseidone,#1d3557); margin:0; } .svc-tagx__q{ font-size:6.45vw !important; } .svc-tagx__xl{ font-size:7.78vw !important; } /* ---- q&a: "Questions, answered" sotto la label, domande centrate tra fasce pixel verticali ---- */ .svc-do--who .svc-do__pane--faq{ min-height:44vw !important; display:flex; flex-direction:column; justify-content:center; position:relative; } .svc-do__pane--faq .svc-card{ margin:0 auto; width:min(52vw,44.7917vw); max-width:none; padding:0; position:relative; } .svc-do__pane--faq .svc-item{ display:block; } .svc-do__pane--faq .svc-item h3{ font-size:3.6vw !important; line-height:1.02; margin:0 0 2.8125vw; } .svc-do__pane--faq .svc-item h3 .tl{ font-size:inherit !important; line-height:inherit !important; } .svc-do__pane--faq .svc-item h3 .tl{ display:inline; } .svc-do__pane--faq .svc-item h3 .tl + .tl{ margin-left:.28em; } .svc-do__pane--faq .svc-item__strip{ display:none !important; } /* fasce laterali: ondine hero verbatim ruotate 90deg, fixed a piena altezza */ .dsk-vwave{ position:fixed; top:0; height:100vh; width:8vw; pointer-events:none; z-index:6; opacity:0; will-change:transform,opacity; } .dsk-vwave--left{ left:0; transform:translateX(-100%); } .dsk-vwave--right{ right:0; transform:translateX(100%); } .faq2__q span{ font-size:1.78vw; line-height:1.35; } .faq2__a p{ font-size:var(--dskBody); line-height:var(--dskLh); } /* ---- method: titolo mono, lead | GO+isola | lead, tagline sotto ---- */ .svc-method{ width:auto; max-width:none; padding:6.7500vw 6vw; min-height:72vw; display:flex; flex-direction:column; justify-content:center; } .dsk-mtitle{ font-family:"JetBrains Mono",monospace; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:8.4vw; line-height:1; color:var(--poseidone,#1d3557); } .dsk-mrow{ display:grid; grid-template-columns:36vw minmax(0,1fr); column-gap:4vw; align-items:center; margin:3.9375vw 0 2.8125vw; padding-left:9.01vw; } .dsk-mtext{ display:block; } .dsk-mcta{ display:flex; align-items:center; justify-content:center; } .dsk-mcta .svc-go{ position:relative; z-index:2; margin:0 !important; } .dsk-isl--methodclaim{ position:absolute; left:calc(100% + 3vw); top:50%; transform:translateY(-50%); z-index:1; } .svc-method .lead{ font-size:var(--dskBody) !important; line-height:var(--dskLh) !important; margin:0 0 1.4vw; } .svc-method .lead:last-child{ margin-bottom:0; } .svc-method .svc-tagx--method{ display:inline-block; text-align:center; margin:1.1250vw auto 0; width:auto; } /* ---- footer pixel wave, soft varied crests ---- */ .dsk-footwave{ position:relative; z-index:2; height:7.8125vw; overflow:hidden; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; mask:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%; } .dsk-footwave canvas{ display:none !important; } .dsk-footwave{ background:var(--chia,#4ccbb3); } .footer-wave-wrap{ display:none !important; } /* ---- congelamento residui rem/px degli stili mobile (misure 1920) ---- */ .svc-tagx__l1{ font-size:4.8333vw !important; line-height:.92 !important; } .svc-tagx__row{ gap:1.1458vw !important; font-size:.8333vw !important; line-height:.92 !important; } .faq2{ margin-bottom:2.1667vw !important; font-size:.8333vw !important; line-height:1.7 !important; } .faq2__q{ gap:1vw !important; font-size:.6944vw !important; } .faq2__a{ font-size:.8333vw !important; line-height:1.7 !important; } .svc-do__pane--faq .svc-card{ font-size:.8333vw !important; line-height:1.7 !important; } .svc-tagx__stack, .svc-tagx__stack span{ font-size:3.4167vw !important; } .svc-tagx__wow{ font-size:11vw !important; } .svc-pxstrip, .svc-pxstrip2{ background:var(--chia,#4cccb3) !important; } .dsvc__btn span{ font-size:.605vw !important; } .dsk-strategy{ display:inline-block; transform:translate(100%, 0.781vw); } /* 15px@1920: aria = gap box<->NEED */ .dsk-youneed{ display:inline-block; transform:translateY(6.146vw); } /* 118px@1920: fondo NEED a meta' altezza di strategy */ .svc-do__head--who .dsk-l{ display:block; line-height:1; } .svc-do__head--who.dsk-tif-inpop{ position:absolute !important; left:50vw !important; right:auto !important; top:92vw !important; text-align:left !important; padding:0 6vw 0 0 !important; z-index:2; } .svc-do__head--who .label{ position:static !important; transform:none !important; margin:0 !important; top:auto !important; } .svc-do--who{ position:relative; } .svc-do__pane .svc-quote .svc-tagx--quote .svc-tagx__q{ font-size:4.6vw !important; padding:0 3vw !important; box-sizing:border-box; } .svc-do__head--who .label{ display:inline-block; text-align:left; } .svc-do__head--who .dsk-is{ transform:translateY(-4.2vw); } .dsk-claimbox{ position:absolute; left:-2vw; top:-2vw; width:calc(100% + 4vw); height:calc(100% + 4vw); z-index:-1; pointer-events:none; } .svc-pop .svc-tagx > *:not(.dsk-claimbox){ position:relative; z-index:2; } .svc-pop .svc-tagx__l1, .svc-pop .svc-tagx__row, .svc-pop .svc-tagx__stack, .svc-pop .svc-tagx__wow{ position:relative; z-index:2; } /* claim "First the why": stato normale = gradiente verbatim del quote (calce/chia/poseidone) */ /* Il contenitore .svc-tagx e' escluso: dipingeva gli stessi glifi dei figli con un gradiente calcolato sul proprio riquadro, raddoppiando la scritta. Dipingono solo le righe. */ .svc-pop .svc-tagx__l1, .svc-pop .svc-tagx__row, .svc-pop .svc-tagx__stack, .svc-pop .svc-tagx__stack span, .svc-pop .svc-tagx__wow{ background:linear-gradient(125deg, var(--calce,#f5f2e5), var(--chia,#4a9b8e) 48%, var(--poseidone,#1d3557)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } .svc-pop .svc-tagx{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; } /* This / is / for: sfalsati per altezza attorno a "is" */ .svc-do__head--who{ width:50vw !important; } .svc-do__head--who .label{ display:block; } .svc-do__head--who .dsk-tifw{ display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; gap:1vw; } .svc-do__head--who .dsk-this, .svc-do__head--who .dsk-is, .svc-do__head--who .dsk-for{ display:block; line-height:1; white-space:nowrap; } .svc-do__head--who .dsk-is{ transform:translateY(4.2vw); } .svc-do__head--who .dsk-for{ transform:translateY(8.4vw); } .svc-do__head--who .dsk-tifw .dsk-this, .svc-do__head--who .dsk-tifw .dsk-is, .svc-do__head--who .dsk-tifw .dsk-for{ font-size:6vw !important; } .dsk-tifband{ position:absolute; pointer-events:none; z-index:0; } .svc-pop .svc-tagx__wow{ transform:translateY(0.5vw) !important; } /* ---- masked line reveal: H1 (load) + titoli mono (scroll) ---- */ .rvl{ display:block !important; overflow:hidden; } .rvl__in{ display:block !important; transform:translateY(120%); will-change:transform; } .is-rvl .rvl__in{ transform:translateY(0); transition:transform .9s cubic-bezier(0.22,1,0.36,1); } .fit-h1--base span.rvl{ margin-left:0 !important; } .fit-h1--base .rvl + .rvl{ margin-top:.08em; } @media (prefers-reduced-motion:reduce){ .rvl__in{ transform:none !important; transition:none !important; } } /* ---- claim hover: box pixel dietro tutto il testo + scala 120%, senza dim ---- */ .svc-pop .svc-tagx{ transition:transform .45s cubic-bezier(0.2,0.8,0.2,1); will-change:transform; } .svc-pop .svc-tagx .dsk-claimbox{ opacity:0; transition:opacity .35s ease; } .svc-pop .svc-tagx.is-claimhover{ transform:scale(1.2); z-index:5; } .svc-pop .svc-tagx.is-claimhover .dsk-claimbox{ opacity:1; } /* ---- method: inversione poseidone/notte quando "Tell us" e' in posizione ---- */ .dsk-methdark{ position:fixed; inset:0; z-index:4; pointer-events:none; opacity:0; background:linear-gradient(160deg, var(--poseidone,#1d3557), var(--notte,#0a1929)); transition:opacity .5s ease; } .dsk-methdark.is-on{ opacity:1; } /* la sezione sale sopra il velo scuro */ .svc-method{ position:relative; z-index:7; } .svc-method.is-inverted .dsk-mtitle, .svc-method.is-inverted .lead, .svc-method.is-inverted .svc-tagx__q, .svc-method.is-inverted .svc-tagx__xl{ color:var(--calce,#f5f2e5) !important; -webkit-text-fill-color:var(--calce,#f5f2e5) !important; background:none !important; transition:color .5s ease; } .svc-method.is-inverted .lead a{ color:var(--calce,#f5f2e5) !important; border-bottom-color:var(--calce,#f5f2e5) !important; } /* "stuck." in gradiente chia/giada */ .svc-method.is-inverted .dsk-stuck{ background:linear-gradient(125deg, var(--chia,#4a9b8e), var(--giada,#78b4a8)) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } .svc-band, .svc-pop, .svc-do, .svc-who, .svc-method, .svc-quote, .svc-narr{ position:relative; z-index:6; } /* ---- LENTE ---- Un iframe con clone.php (stesso sorgente della pagina, colori alternativi) sta sopra il documento, ritagliato a cerchio e allineato allo scroll: dentro il cerchio si vede la versione alternativa, fuori la pagina normale. */ .dsk-lens{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:0; transition:opacity .2s ease, --lr .18s ease, --ld .18s ease; } .dsk-lens.is-on{ opacity:1; } /* Il raggio e' una variabile animabile. La transizione va sulla VARIABILE, non su clip-path: transitando clip-path si interpolava anche la POSIZIONE del cerchio, quindi la maschera restava indietro rispetto al cursore mentre l'anello lo seguiva subito, e la lente appariva sdoppiata. */ .dsk-lens__clip{ position:absolute; inset:0; overflow:hidden; -webkit-clip-path:circle(var(--lr,175px) at var(--lx,-999px) var(--ly,-999px)); clip-path:circle(var(--lr,175px) at var(--lx,-999px) var(--ly,-999px)); } .dsk-lens__frame{ position:absolute; top:0; left:0; border:0; transform-origin:var(--ox,50%) var(--oy,50%); } .dsk-lens__ring{ position:absolute; width:var(--ld,350px); height:var(--ld,350px); border-radius:50%; left:var(--lx,-999px); top:var(--ly,-999px); transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(245,242,229,.4), 0 1vw 2vw rgba(5,31,56,.3); } /* ---- "wow." ---- Lo sdoppiamento nasceva dal ritaglio del gradiente sul testo applicato a piu' elementi della stessa catena: contenitore, riga e parola dipingevano gli stessi glifi, ognuno calcolando il gradiente sul proprio riquadro. Ora dipinge SOLO la parola; contenitore e riga restano senza pittura. Il corpo e' ingrandito perche' il bordo superiore delle lettere combaci con quello della "n" di "then". */ .svc-pop .svc-tagx, .svc-pop .svc-tagx__row{ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; } .svc-pop .svc-tagx__wow{ font-size: 12.66vw !important; background: linear-gradient(125deg, var(--calce,#f5f2e5), var(--chia,#4cccb3) 48%, var(--poseidone,#051f38)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; transform: translateY(-3.18vw) !important; } /* ---- Testi non selezionabili ---- La selezione col trascinamento evidenziava i testi e interrompeva l'effetto della lente. */ body, body *{ -webkit-user-select: none !important; user-select: none !important; } /* ---- Servizio con fondo chiaro ---- Il testo calce sparisce su giada/calce: si passa a poseidone. Il colore si applica ai soli contenitori e i figli lo ereditano: cosi' il passaggio puo' essere graduale come quello dello sfondo, e resta valido anche per il testo ricostruito a ogni cambio. */ .dsvc__title, .dsvc__text, .dsvc__head{ transition: color .65s ease, -webkit-text-fill-color .65s ease; } .dsvc__text p, .dsvc__text span, .dsvc__title span{ color: inherit !important; -webkit-text-fill-color: inherit !important; } .svc-do.is-chiaro .dsvc__title, .svc-do.is-chiaro .dsvc__text, .svc-do.is-chiaro .dsvc__head{ color: var(--poseidone, #051f38) !important; -webkit-text-fill-color: var(--poseidone, #051f38) !important; } /* ---- Tasto "Explore now" ---- Spostato a sinistra perche' lo spazio fra il testo e il bottone e quello fra il bottone e l'ondina laterale destra coincidano. */ .dsk-mcta .svc-go{ transform: translateX(-4.43vw); } }