/* ============================================================ NORMA — Siti web su misura per le PMI italiane Dark editorial / scroll-driven site ============================================================ */ /* ---------- Design tokens ---------- */ :root{ /* color */ --ink: #08080c; --ink-2: #0d0d14; --ink-3: #14141d; --paper: #ece9e1; /* warm off-white — human warmth */ --paper-70: rgba(236,233,225,.72); --paper-45: rgba(236,233,225,.46); --paper-25: rgba(236,233,225,.24); --line: rgba(236,233,225,.14); --line-strong:rgba(236,233,225,.28); --iris: #6e63ff; /* signature — synaptic / cognitive */ --iris-2: #8b82ff; --cyan: #57e1d9; /* glow accent from the streams video */ /* type */ --f-display: "Fraunces", Georgia, "Times New Roman", serif; --f-ui: "Space Grotesk", system-ui, -apple-system, sans-serif; --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace; /* spacing / layout */ --pad: clamp(1.25rem, 4vw, 4.5rem); --maxw: 1680px; --ease: cubic-bezier(.22,.61,.36,1); --ease-io: cubic-bezier(.65,.05,.36,1); /* z-index scale */ --z-progress: 300; --z-cta: 350; --z-topbar: 400; --z-overlay: 600; --z-grain: 800; --z-cursor: 9000; --z-loader: 9500; } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html.js{ scroll-behavior:auto; } /* lenis handles smoothing */ body{ background:var(--ink); color:var(--paper); font-family:var(--f-ui); font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* clip (not hidden) prevents horizontal scroll WITHOUT making a scroll container — otherwise ScrollTrigger picks the wrong scroller. */ overflow-x:clip; } html{ overflow-x:clip; } img,video{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } ::selection{ background:var(--iris); color:#fff; } h1,h2,h3{ font-weight:400; line-height:1; letter-spacing:-.02em; } :focus-visible{ outline:2px solid var(--iris-2); outline-offset:4px; border-radius:2px; } /* hide native cursor when custom cursor active (fine pointer only) */ @media (pointer:fine){ html.cursor-on, html.cursor-on *{ cursor:none !important; } } .bgvideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } /* ---------- Grain / texture ---------- */ .grain{ position:fixed; inset:-150%; z-index:var(--z-grain); pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; } @keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-3%,4%)} 80%{transform:translate(5%,2%)} 100%{transform:translate(0,0)} } /* ---------- Custom cursor ---------- */ .cursor{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .3s; } html.cursor-active .cursor{ opacity:1; } .cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%; } html:not(.started) .cursor__dot,html:not(.started) .cursor__ring{ transform:translate(-50%,-50%); } .cursor__dot{ width:6px; height:6px; background:#fff; } .cursor__ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.7); transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s; } html.cursor-hover .cursor__ring{ width:64px; height:64px; background:rgba(255,255,255,.12); } html.cursor-down .cursor__ring{ width:26px; height:26px; } @media (pointer:coarse),(hover:none){ .cursor{ display:none !important; } } /* ---------- Preloader ---------- */ .loader{ position:fixed; inset:0; z-index:var(--z-loader); background:var(--ink); display:flex; flex-direction:column; justify-content:flex-end; gap:1.2rem; padding:var(--pad); } .loader__row{ display:flex; align-items:flex-end; justify-content:space-between; } .loader__mark{ font-family:var(--f-display); font-size:clamp(2.4rem,7vw,5.5rem); letter-spacing:-.03em; } .loader__count{ font-family:var(--f-mono); font-size:clamp(2rem,6vw,4.5rem); color:var(--paper-45); } .loader__count b{ color:var(--paper-25); font-weight:400; } .loader__tag{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.32em; color:var(--paper-45); } .loader__bar{ display:block; height:1px; width:100%; background:var(--line); position:relative; overflow:hidden; } .loader__bar i{ position:absolute; inset:0 100% 0 0; background:var(--paper); transition:right .2s linear; } html.loaded .loader{ transform:translateY(-101%); transition:transform 1s var(--ease-io); } /* ---------- Skip link ---------- */ .skip{ position:fixed; top:-60px; left:var(--pad); z-index:9999; background:var(--paper); color:var(--ink); padding:.6rem 1rem; border-radius:6px; font-size:.85rem; transition:top .2s; } .skip:focus{ top:1rem; } /* ---------- Topbar ---------- */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:var(--z-topbar); display:flex; align-items:center; justify-content:space-between; padding:clamp(1rem,2.4vw,1.7rem) var(--pad); mix-blend-mode:difference; color:#fff; } .brand{ font-family:var(--f-display); font-size:1.35rem; letter-spacing:-.02em; line-height:1; } .brand__r{ font-family:var(--f-mono); font-size:.5em; vertical-align:super; opacity:.7; } .topbar__meta{ display:flex; gap:.7rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.8; } .clock{ font-variant-numeric:tabular-nums; } .menu-toggle{ display:flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; } .menu-toggle__ico{ display:grid; gap:5px; width:26px; } .menu-toggle__ico i{ height:1.5px; width:100%; background:#fff; transition:transform .35s var(--ease), opacity .25s; transform-origin:center; } html.nav-open .menu-toggle__ico i:nth-child(1){ transform:translateY(3.25px) rotate(45deg); } html.nav-open .menu-toggle__ico i:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); } .topbar.is-hidden{ transform:translateY(-110%); transition:transform .5s var(--ease); } .topbar{ transition:transform .5s var(--ease); } /* ---------- Overlay nav ---------- */ .overlay-nav{ position:fixed; inset:0; z-index:var(--z-overlay); background:var(--ink-2); display:flex; flex-direction:column; justify-content:center; gap:2rem; padding:var(--pad); clip-path:inset(0 0 100% 0); pointer-events:none; transition:clip-path .8s var(--ease-io); } html.nav-open .overlay-nav{ clip-path:inset(0 0 0 0); pointer-events:auto; } .overlay-nav__list{ list-style:none; } .overlay-nav__list li{ overflow:hidden; } .overlay-nav__list a{ display:flex; align-items:baseline; gap:1.5rem; padding:clamp(.4rem,1.4vw,1rem) 0; font-family:var(--f-display); font-size:clamp(2.6rem,9vw,7rem); line-height:1; letter-spacing:-.03em; transform:translateY(110%); transition:transform .7s var(--ease), color .3s; } html.nav-open .overlay-nav__list a{ transform:translateY(0); } html.nav-open .overlay-nav__list li:nth-child(1) a{ transition-delay:.10s; } html.nav-open .overlay-nav__list li:nth-child(2) a{ transition-delay:.16s; } html.nav-open .overlay-nav__list li:nth-child(3) a{ transition-delay:.22s; } html.nav-open .overlay-nav__list li:nth-child(4) a{ transition-delay:.28s; } html.nav-open .overlay-nav__list li:nth-child(5) a{ transition-delay:.34s; } html.nav-open .overlay-nav__list li:nth-child(6) a{ transition-delay:.40s; } .overlay-nav__list a:hover{ color:var(--iris-2); } .overlay-nav__n{ font-family:var(--f-mono); font-size:.9rem; color:var(--paper-45); letter-spacing:.1em; } .overlay-nav__foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--paper-45); border-top:1px solid var(--line); padding-top:1.4rem; } /* ---------- Floating CTA ---------- */ .cta-float{ position:fixed; right:var(--pad); bottom:clamp(1.2rem,3vw,2.2rem); z-index:var(--z-cta); display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.4rem; border-radius:100px; background:var(--paper); color:var(--ink); font-family:var(--f-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; will-change:transform; transition:background .3s, color .3s, transform .2s var(--ease); box-shadow:0 10px 40px -12px rgba(0,0,0,.8); } .cta-float:hover{ background:var(--iris); color:#fff; } .cta-float__arr{ transition:transform .3s var(--ease); } .cta-float:hover .cta-float__arr{ transform:translateX(4px); } .cta-float__wa{ display:block; transition:transform .3s var(--ease); } .cta-float:hover{ background:#25d366; color:#06140c; } .cta-float:hover .cta-float__wa{ transform:scale(1.1); } html.nav-open .cta-float{ opacity:0; pointer-events:none; transition:opacity .3s; } /* ---------- Scroll progress ---------- */ .progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:var(--z-progress); background:transparent; } .progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--iris),var(--cyan)); } /* ============================================================ SECTIONS ============================================================ */ section{ position:relative; } .panel__label,.process__label{ font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.24em; color:var(--paper-45); } /* ---------- HERO ---------- */ .hero{ height:100svh; min-height:600px; overflow:hidden; display:flex; } .hero__media{ position:absolute; inset:0; z-index:0; } .hero__media .bgvideo{ transform:scale(1.06); } .hero__veil{ position:absolute; inset:0; background: radial-gradient(120% 90% at 70% 25%, transparent 0%, rgba(8,8,12,.35) 55%, var(--ink) 100%), linear-gradient(to top, var(--ink) 2%, rgba(8,8,12,.25) 38%, transparent 70%); } .hero__inner{ position:relative; z-index:1; margin-top:auto; width:100%; padding:var(--pad); padding-bottom:clamp(4.5rem,9vh,8rem); max-width:var(--maxw); margin-left:auto; margin-right:auto; } .hero__eyebrow{ display:flex; gap:1.4rem; font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.22em; color:var(--paper-70); margin-bottom:clamp(1rem,2vh,1.6rem); } .hero__eyebrow span:first-child{ padding-right:1.4rem; border-right:1px solid var(--line-strong); } .hero__title{ font-family:var(--f-display); font-size:clamp(3.4rem,13vw,13rem); line-height:.92; letter-spacing:-.035em; font-weight:340; } .hero__title .line{ display:block; overflow:hidden; } .hero__title .w{ display:inline-block; } .hero__title .it{ font-style:italic; font-weight:300; } .hero__lede{ margin-top:clamp(1.4rem,3vh,2.4rem); max-width:34ch; font-size:clamp(1.05rem,1.5vw,1.35rem); color:var(--paper-70); line-height:1.45; } .hero__cue{ position:absolute; left:var(--pad); bottom:clamp(1.2rem,3vh,2rem); z-index:1; display:flex; flex-direction:column; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--paper-45); } .hero__cue-line{ width:1px; height:48px; background:linear-gradient(var(--paper-45),transparent); animation:cue 2.2s var(--ease) infinite; transform-origin:top; } @keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.3 } 50%{ transform:scaleY(1); opacity:1 } } /* hero title hidden until JS positions the words (avoids unit ambiguity + FOUC) */ html.anim .hero__title{ opacity:0; } /* ---------- MANIFESTO ---------- */ .manifesto{ background:var(--ink); } .manifesto__pin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; } .manifesto__kicker{ font-family:var(--f-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.2em; color:var(--paper-45); margin-bottom:clamp(2rem,5vh,3.5rem); } .manifesto__kicker span{ color:var(--iris-2); } .manifesto__lines{ font-family:var(--f-display); font-weight:330; font-size:clamp(1.9rem,5.4vw,5rem); line-height:1.08; letter-spacing:-.025em; max-width:18ch; } .mline{ } .mline em{ font-style:italic; color:var(--iris-2); font-weight:300; } .mline--gap{ margin-top:1.1em; } html.anim .mline{ opacity:.13; } /* ---------- PRINCIPLES (horizontal) ---------- */ .principles{ background:var(--ink-2); } .principles__viewport{ position:relative; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .principles__viewport::-webkit-scrollbar{ display:none; } .principles[data-pin="on"] .principles__viewport{ overflow:hidden; height:100svh; } .principles__bg{ position:absolute; inset:0; z-index:0; opacity:.32; pointer-events:none; } .principles__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink-2),transparent 18%,transparent 82%,var(--ink-2)); } .principles__track{ display:flex; align-items:stretch; gap:0; width:max-content; position:relative; z-index:1; } .panel{ flex:0 0 auto; width:min(86vw,640px); min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,8vh,7rem) clamp(1.5rem,4vw,4rem); border-right:1px solid var(--line); } .principles__intro{ width:min(92vw,760px); } .principles__h{ font-family:var(--f-display); font-size:clamp(2.2rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.02em; } .principles__h em{ font-style:italic; color:var(--iris-2); } .panel__hint{ margin-top:2rem; font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.22em; color:var(--paper-45); } .pcard__n{ font-family:var(--f-mono); font-size:.9rem; color:var(--iris-2); letter-spacing:.1em; } .pcard__t{ font-family:var(--f-display); font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.02; margin:1.2rem 0 1.4rem; letter-spacing:-.02em; } .pcard__d{ font-size:clamp(1rem,1.3vw,1.2rem); color:var(--paper-70); max-width:42ch; line-height:1.55; } .pcard{ transition:background .4s var(--ease); } @media (hover:hover){ .pcard:hover{ background:rgba(110,99,255,.06); } } /* ---------- CRAFT / OBJECT ---------- */ .craft{ min-height:100svh; display:grid; align-items:center; grid-template-columns:1fr 1fr; gap:2rem; padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; } .craft__object{ position:relative; aspect-ratio:1; border-radius:50%; overflow:hidden; } .craft__object .bgvideo{ transform:scale(1.15); } .craft__copy{ max-width:48ch; } .craft__h{ font-family:var(--f-display); font-size:clamp(2.4rem,5vw,4.6rem); line-height:1.02; margin:1.2rem 0 1.8rem; letter-spacing:-.02em; } .craft__h em{ font-style:italic; color:var(--iris-2); } .craft__p{ color:var(--paper-70); font-size:clamp(1.02rem,1.3vw,1.22rem); line-height:1.6; margin-bottom:1.2rem; max-width:46ch; } /* ---------- WORK / SERVICES index ---------- */ .work{ padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; } .work__head{ margin-bottom:clamp(2.5rem,6vh,4.5rem); } .work__h{ font-family:var(--f-display); font-size:clamp(2.2rem,5.4vw,5rem); line-height:1.02; margin-top:1.2rem; letter-spacing:-.025em; } .work__h em{ font-style:italic; color:var(--iris-2); } .work__list{ list-style:none; border-top:1px solid var(--line); } .wrow{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; grid-template-areas:"n t a" "n d a"; column-gap:1.5rem; row-gap:.6rem; padding:clamp(1.4rem,3.2vh,2.2rem) 0; border-bottom:1px solid var(--line); position:relative; transition:padding-left .45s var(--ease), color .3s; } .wrow__n{ grid-area:n; align-self:center; font-family:var(--f-mono); font-size:.85rem; color:var(--paper-45); } .wrow__t{ grid-area:t; font-family:var(--f-display); font-size:clamp(1.6rem,3.6vw,3rem); line-height:1; letter-spacing:-.02em; } .wrow__d{ grid-area:d; color:var(--paper-45); max-width:56ch; font-size:.96rem; line-height:1.5; } .wrow__arr{ grid-area:a; align-self:center; font-family:var(--f-ui); font-size:1.5rem; color:var(--paper-45); transition:transform .35s var(--ease), color .3s; } @media (hover:hover){ .wrow::before{ content:""; position:absolute; left:-2vw; top:0; bottom:0; width:3px; background:var(--iris); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); } .wrow:hover{ padding-left:1.5vw; } .wrow:hover::before{ transform:scaleY(1); } .wrow:hover .wrow__t{ color:var(--iris-2); } .wrow:hover .wrow__arr{ transform:translateX(8px); color:var(--paper); } } /* ---------- PROCESS ---------- */ .process{ padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); } .process__label{ margin-bottom:clamp(2rem,5vh,3.5rem); display:block; } .process__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.5rem); } .pstep{ border-top:1px solid var(--line-strong); padding-top:1.4rem; } .pstep__n{ font-family:var(--f-mono); font-size:.85rem; color:var(--iris-2); } .pstep h3{ font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2.4rem); margin:1.2rem 0 .8rem; letter-spacing:-.02em; } .pstep p{ color:var(--paper-70); font-size:.98rem; line-height:1.55; } /* ---------- LAVORI / PORTFOLIO ---------- */ .folio-sec{ padding:clamp(5rem,12vh,9rem) var(--pad); max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); } .folio-sec__head{ margin-bottom:clamp(2.5rem,6vh,4rem); } .folio-sec__h{ font-family:var(--f-display); font-size:clamp(2.2rem,5.4vw,5rem); line-height:1.02; margin-top:1.2rem; letter-spacing:-.025em; } .folio-sec__h em{ font-style:italic; color:var(--iris-2); } .folio-sec__hint{ margin-top:1.2rem; font-family:var(--f-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; color:var(--paper-45); } .folio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.8rem); } .folio{ position:relative; display:flex; flex-direction:column; overflow:hidden; cursor:pointer; background:var(--ink-3); border:1px solid var(--line); border-radius:16px; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; } @media (hover:hover){ .folio:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:0 24px 60px -28px rgba(0,0,0,.9); } .folio:hover .folio__media img{ transform:scale(1.05); } .folio:hover .folio__cta{ color:var(--paper); } .folio:hover .folio__cta span{ transform:translateX(5px); } } .folio__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-2); } .folio__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s var(--ease); } .folio__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,12,.55), transparent 45%); opacity:.7; } .folio__meta{ padding:clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2vw,1.7rem) .4rem; } .folio__type{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--iris-2); } .folio__t{ font-family:var(--f-display); font-size:clamp(1.4rem,2.6vw,2.1rem); margin-top:.5rem; letter-spacing:-.02em; } .folio__cta{ padding:0 clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2vw,1.7rem); margin-top:.9rem; font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--paper-45); transition:color .3s; } .folio__cta span{ display:inline-block; transition:transform .3s var(--ease); } /* ---------- DEMO MODAL ---------- */ .demo-modal{ position:fixed; inset:0; z-index:8800; display:flex; flex-direction:column; background:rgba(6,6,10,.94); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .35s var(--ease); } .demo-modal.is-open{ opacity:1; pointer-events:auto; } .demo-modal__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:clamp(.9rem,2vw,1.3rem) var(--pad); border-bottom:1px solid var(--line); } .demo-modal__title{ font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.6rem); } .demo-modal__actions{ display:flex; align-items:center; gap:.8rem; } .demo-modal__open,.demo-modal__close{ font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; padding:.6rem 1rem; border:1px solid var(--line-strong); border-radius:40px; transition:background .25s, color .25s, border-color .25s; } .demo-modal__open:hover{ background:var(--iris); color:#fff; border-color:var(--iris); } .demo-modal__close:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); } .demo-modal__frame{ position:relative; flex:1; background:#fff; } .demo-modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff; } /* ---------- CONTACT ---------- */ .contact{ min-height:100svh; display:flex; align-items:center; overflow:hidden; } .contact__media{ position:absolute; inset:0; z-index:0; } .contact__media .bgvideo{ transform:scale(1.1); opacity:.85; } .contact__veil{ position:absolute; inset:0; background:radial-gradient(90% 90% at 50% 50%, rgba(8,8,12,.2), var(--ink) 75%); } .contact__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(5rem,12vh,9rem) var(--pad); text-align:center; display:flex; flex-direction:column; align-items:center; } .contact__h{ font-family:var(--f-display); font-size:clamp(2.8rem,9vw,8rem); line-height:.98; margin:1.4rem 0 2.4rem; letter-spacing:-.03em; font-weight:330; } .contact__h em{ font-style:italic; color:var(--iris-2); } .contact__wa{ display:inline-flex; align-items:center; gap:.7rem; background:#25d366; color:#06140c; font-family:var(--f-ui); font-weight:600; font-size:clamp(1rem,1.5vw,1.2rem); padding:1rem 1.9rem; border-radius:100px; will-change:transform; transition:transform .2s var(--ease), box-shadow .3s; box-shadow:0 18px 50px -16px rgba(37,211,102,.5); } .contact__wa svg{ width:24px; height:24px; flex:none; } .contact__wa:hover{ transform:translateY(-2px); box-shadow:0 24px 64px -16px rgba(37,211,102,.66); } .contact__alt{ margin-top:1.5rem; display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; justify-content:center; font-family:var(--f-mono); font-size:.85rem; letter-spacing:.04em; color:var(--paper-70); } .contact__alt a{ transition:color .25s; } .contact__alt a:hover{ color:var(--iris-2); } .contact__sub{ margin-top:1.8rem; max-width:42ch; color:var(--paper-70); line-height:1.55; } /* ---------- FOOTER ---------- */ .foot{ padding:clamp(3rem,7vh,6rem) var(--pad) clamp(1.5rem,3vh,2.5rem); background:var(--ink-2); border-top:1px solid var(--line); overflow:hidden; } .foot__big{ font-family:var(--f-display); font-size:clamp(4rem,22vw,22rem); line-height:.8; letter-spacing:-.04em; color:var(--ink-3); user-select:none; margin-bottom:clamp(2rem,5vh,4rem); } .foot__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding-bottom:clamp(2.5rem,6vh,4.5rem); } .foot__col{ display:flex; flex-direction:column; gap:.6rem; } .foot__col a,.foot__col span:not(.foot__lbl),.foot__col p{ color:var(--paper-70); font-size:.98rem; } .foot__col a{ width:fit-content; transition:color .25s; } .foot__col a:hover{ color:var(--iris-2); } .foot__lbl{ font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; color:var(--paper-45); margin-bottom:.4rem; } .foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; border-top:1px solid var(--line); padding-top:1.4rem; font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--paper-45); } .to-top{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--paper-45); transition:color .25s; } .to-top:hover{ color:var(--paper); } /* reveal start-states (only when animation is active) */ html.anim [data-reveal]{ opacity:0; transform:translateY(28px); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .craft{ grid-template-columns:1fr; gap:3rem; } .craft__object{ width:min(70%,420px); margin:0 auto; } .process__grid{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; } .foot__cols{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; } } @media (max-width:760px){ .folio-grid{ grid-template-columns:1fr; } .demo-modal__open{ display:none; } /* su mobile resta solo Chiudi; demo a tutto schermo */ } @media (max-width:680px){ :root{ --pad:1.25rem; } .topbar__meta{ display:none; } .hero__title{ font-size:clamp(2.3rem,12.2vw,5rem); letter-spacing:-.03em; } .hero__lede{ font-size:1.02rem; } .process__grid{ grid-template-columns:1fr; } .foot__cols{ grid-template-columns:1fr; } .foot__base{ flex-direction:column; } .wrow{ grid-template-columns:auto 1fr auto; } .cta-float{ padding:.7rem 1.1rem; font-size:.7rem; } /* MOBILE: lo scroll orizzontale diventa una pila verticale (più affidabile al tocco) */ .principles__viewport{ overflow:visible; height:auto; } .principles__track{ flex-direction:column; width:100%; } .panel{ width:100%; min-height:auto; border-right:none; border-bottom:1px solid var(--line); padding:clamp(3rem,9vh,5rem) var(--pad); } .principles__intro{ width:100%; } .panel__hint{ display:none; } .principles__bg{ opacity:.16; } } /* ============================================================ REDUCED MOTION — accessibility ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } html.anim .hero__title .w{ transform:none; } html.anim .mline{ opacity:1; } html.anim [data-reveal]{ opacity:1; transform:none; } .grain,.hero__cue-line{ animation:none; } .principles[data-pin="on"] .principles__viewport{ overflow-x:auto; height:auto; } .panel{ min-height:auto; } }