/* ============================================================ ID COMMUNICATION — styles.css Editorial-brutalist with electric blue accent ============================================================ */ /* ---- Reset (modern, minimal) ----------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;hanging-punctuation:first last} body{min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} img,svg,video{display:block;max-width:100%;height:auto} button,input,select,textarea{font:inherit;color:inherit;background:none;border:none} button{cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} em,i{font-style:normal} ::selection{background:var(--blue);color:var(--paper)} /* ---- TOKENS ---------------------------------------------- */ :root{ /* Brand (constant across themes) */ --paper:#F4F1EB; --paper-soft:#EAE5DA; --paper-warm:#EDE7D9; --ink:#0A0A0A; --ink-soft:#1A1A1A; --blue:#2945FF; --blue-deep:#1B2BC9; --blue-soft:#E6E9FF; /* Semantic — DARK (default) */ --bg:#0A0A0A; --bg-warm:#101010; --bg-soft:#161616; --surface:#141414; --text:#F4F1EB; --text-muted:rgba(244,241,235,.65); --line:rgba(244,241,235,.14); --line-soft:rgba(244,241,235,.06); --line-inv:rgba(244,241,235,.14); --nav-blur:rgba(10,10,10,.85); /* Fonts */ --font-display:'Bricolage Grotesque','Archivo','Helvetica Neue',sans-serif; --font-body:'Familjen Grotesk',system-ui,-apple-system,sans-serif; --font-italic:'Instrument Serif',Georgia,serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; /* Sizing */ --pad-x:clamp(20px,5vw,80px); --max:1480px; /* Type scale (fluid) — tightened from v1 */ --t-mono:11px; --t-eyebrow:clamp(12px,1.1vw,14px); --t-body:clamp(15px,1.05vw,18px); --t-lead:clamp(18px,1.6vw,24px); --t-h3:clamp(22px,2.2vw,32px); --t-h2:clamp(34px,5vw,82px); --t-h1:clamp(46px,8.2vw,128px); --t-mega:clamp(56px,13vw,180px); /* Motion */ --ease:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur:.6s; /* Radius */ --r-pill:999px; --r-card:18px; } /* ---- LIGHT THEME (opt-in override) ----------------------- */ [data-theme="light"]{ --bg:#F4F1EB; --bg-warm:#EDE7D9; --bg-soft:#EAE5DA; --surface:#F4F1EB; --text:#0A0A0A; --text-muted:rgba(10,10,10,.7); --line:rgba(10,10,10,.12); --line-soft:rgba(10,10,10,.06); --line-inv:rgba(244,241,235,.14); --nav-blur:rgba(244,241,235,.92); } /* ---- BASE ------------------------------------------------ */ html{background:var(--bg);scroll-behavior:smooth;color-scheme:dark} html[data-theme="light"]{color-scheme:light} body{ font-family:var(--font-body); font-size:var(--t-body); line-height:1.5; color:var(--text); background:var(--bg); overflow-x:clip; /* clip (not hidden): contains horizontal overflow WITHOUT turning into a scroll container, which would break position:sticky used by the horizontal "work" section */ cursor:none; transition:background-color .6s var(--ease),color .6s var(--ease); } @media (hover:none),(pointer:coarse){ body{cursor:auto} } img,svg,video{user-select:none;-webkit-user-drag:none} /* Display font (Bricolage Grotesque) needs an explicit heavy weight */ .section-title,.hero__title,.manifesto__title,.ailab__title,.cta__title, .foot__mega,.marquee__track,.loader__count,.bento__card h3,.method__step h3, .ailab__card h4,.stat__value,.cta__big,.srv-hero__title,.srv-what__sticky h2, .srv-what__list h3,.srv-outcomes h2,.srv-outcomes__grid .num,.srv-tools h2, .srv-related h2,.srv-related__cards h3,.nav__overlay nav a,.nav__overlay-foot a, .logo__id,.work__title,.work-card__title,.cs-hero__title,.cs-block h2, .cs-results .num,.work__head h2{font-weight:700;letter-spacing:-.035em} .foot__mega,.hero__title{font-weight:800} /* Lenis */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:clip} /* ---- UTILITIES ------------------------------------------- */ .container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)} .eyebrow{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--font-mono); font-size:var(--t-eyebrow); letter-spacing:.04em; text-transform:uppercase; color:var(--text); opacity:.7; } .eyebrow--inv{color:var(--paper);opacity:.7} .kbd{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--font-mono); font-size:var(--t-mono); text-transform:uppercase; letter-spacing:.08em; padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--text); } .kbd em{font-family:var(--font-italic);font-style:italic;letter-spacing:0;font-size:1.1em;line-height:0} .kbd .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:pulse 1.6s var(--ease-in-out) infinite} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}} .section-title{ font-family:var(--font-display); font-size:var(--t-h2); line-height:.92; letter-spacing:-.03em; text-wrap:balance; max-width:15ch; } .section-title em{font-family:var(--font-italic);font-style:italic;font-weight:400;letter-spacing:-.01em} .section-title .star{color:var(--blue);font-family:var(--font-body);font-weight:500;display:inline-block;transform:translateY(-.18em);font-size:.6em;margin-left:.05em;animation:spin 18s linear infinite} @keyframes spin{to{transform:translateY(-.18em) rotate(360deg)}} /* Buttons */ .btn{ position:relative; display:inline-flex;align-items:center;gap:.6em; padding:14px 22px; border-radius:var(--r-pill); font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.01em; line-height:1; white-space:nowrap; transition:transform .4s var(--ease),background .3s var(--ease),color .3s var(--ease); } .btn svg{width:16px;height:16px;transition:transform .4s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn--pill{background:var(--ink);color:var(--paper)} .btn--pill:hover{background:var(--blue)} .btn--ghost{background:transparent;color:var(--paper);border:1px solid rgba(244,241,235,.4);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%)} .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .btn--solid{background:var(--blue);color:var(--paper);padding:18px 28px;font-size:15px} .btn--solid:hover{background:var(--ink)} /* Skip link */ .skip-link{position:fixed;top:8px;left:8px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px;font-family:var(--font-mono);font-size:12px;transform:translateY(-200%);transition:transform .25s;z-index:9999} .skip-link:focus{transform:translateY(0)} /* Focus */ :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px} /* Reveals */ [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].is-in{opacity:1;transform:translateY(0)} /* ---- LOADER ---------------------------------------------- */ .loader{ position:fixed;inset:0;z-index:9000; background:var(--ink);color:var(--paper); display:grid;place-items:center; font-family:var(--font-mono); transition:opacity .6s var(--ease),visibility .6s; } .loader::before,.loader::after{ content:"";position:absolute;left:0;right:0;height:50.5vh;background:var(--ink); transition:transform 1.1s cubic-bezier(.86,0,.07,1); } .loader::before{top:0} .loader::after{bottom:0} .loader.is-done::before{transform:translateY(-100%)} .loader.is-done::after{transform:translateY(100%)} .loader.is-done{opacity:0;visibility:hidden;transition-delay:.6s} .loader__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,4.5vw,52px);position:relative;z-index:2} .loader__logo{color:var(--paper)} .loader__logo .logo__word{display:grid} /* show full wordmark in loader even on mobile */ .loader__logo .logo__word em{color:var(--blue)} @media (max-width:640px){.loader__logo{transform:scale(.8)}} .loader__count{display:flex;align-items:baseline;gap:2px;font-size:clamp(32px,6vw,80px);font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.04em;position:relative;z-index:2;opacity:.85} .loader__count span:last-child{font-size:.35em;opacity:.6;font-family:var(--font-mono);align-self:flex-start;margin-top:.6em} .loader__bar{position:absolute;bottom:40px;left:40px;right:40px;height:1px;background:rgba(244,241,235,.18);overflow:hidden;z-index:2} .loader__fill{height:100%;width:0;background:var(--blue);transition:width .15s linear} /* ---- CURSOR ---------------------------------------------- */ /* difference blend on the whole cursor → it always contrasts with the block beneath it (visible on white sections and on dark ones alike) */ .cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9500;mix-blend-mode:difference} .cursor__dot,.cursor__ring{position:fixed;top:0;left:0;border-radius:50%;transform:translate(-50%,-50%);will-change:transform} .cursor__dot{width:8px;height:8px;background:#fff;transition:transform .12s var(--ease),width .25s var(--ease),height .25s var(--ease)} .cursor__ring{width:38px;height:38px;border:1px solid var(--paper);transition:transform .35s var(--ease),width .25s var(--ease),height .25s var(--ease),border-color .25s} .cursor.is-hover .cursor__dot{width:50px;height:50px;background:var(--blue)} .cursor.is-hover .cursor__ring{opacity:0} @media (hover:none),(pointer:coarse){.cursor{display:none}} /* ---- SCROLL PROGRESS ------------------------------------- */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:8000;pointer-events:none} .scroll-progress__bar{height:100%;width:0;background:var(--blue);transform-origin:0 50%} /* ============================================================ NAV ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:18px var(--pad-x); transition:background .35s var(--ease),color .35s; color:var(--paper); /* white on hero */ } .nav.is-light{ background:var(--nav-blur); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--text); border-bottom:1px solid var(--line-soft); } .nav.is-light .btn--pill{background:var(--text);color:var(--bg)} /* When the full-screen menu is open, the top bar must blend into the dark overlay (no light frosted bar over the dark menu). */ body.menu-open .nav{ background:transparent!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; border-bottom-color:transparent!important; color:var(--paper)!important; } /* Logo */ .logo{display:inline-flex;align-items:center;gap:12px;color:inherit;font-family:var(--font-display);line-height:.9;letter-spacing:-.02em} .logo__mark{position:relative;color:var(--blue);width:36px;height:39px;flex-shrink:0} .logo__mark svg{width:100%;height:100%} .logo__id{ position:absolute;inset:0 0 auto 0;height:75%; display:grid;place-items:center; color:#fff;font-family:var(--font-display); font-size:21px;letter-spacing:-.04em;line-height:1; padding-top:2px; } .logo__word{display:grid;font-size:12px;letter-spacing:-.01em;text-transform:uppercase;font-weight:700} .logo__word span{display:block} .logo__word em{color:var(--blue);font-style:normal;display:inline-block;animation:spin 12s linear infinite;transform-origin:center} .logo--lg{gap:20px} .logo--lg .logo__mark{width:88px;height:96px} .logo--lg .logo__id{font-size:54px} .logo--lg .logo__word{font-size:26px} /* Menu */ .nav__menu{display:flex;align-items:center;gap:8px} .nav__menu a{ position:relative;padding:10px 14px;font-size:14px;font-weight:500; border-radius:var(--r-pill); transition:background .25s,color .25s; } .nav__menu a::before{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)} .nav__menu a:hover::before{transform:scaleX(1);transform-origin:left} /* Mobile toggle */ .nav__toggle{display:none;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;position:relative} .nav__toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)} .nav__toggle span:nth-child(1){top:17px} .nav__toggle span:nth-child(2){top:24px} .nav__toggle.is-open span:nth-child(1){top:21px;transform:rotate(45deg)} .nav__toggle.is-open span:nth-child(2){top:21px;transform:rotate(-45deg)} /* Mobile overlay — full-width, staggered reveal */ .nav__overlay{ position:fixed;inset:0;z-index:190;background:var(--ink);color:var(--paper); display:grid;grid-template-rows:auto 1fr auto; padding:88px var(--pad-x) 32px;gap:32px; clip-path:inset(0 0 100% 0); transition:clip-path .9s cubic-bezier(.86,0,.07,1); visibility:hidden; overflow-y:auto;-webkit-overflow-scrolling:touch; } .nav__overlay.is-open{clip-path:inset(0 0 0 0);visibility:visible} .nav__overlay-head{ display:flex;justify-content:space-between;align-items:center; opacity:0;transform:translateY(-12px); transition:opacity .5s var(--ease) .15s,transform .5s var(--ease) .15s; } .nav__overlay-head .kbd{color:var(--paper);border-color:rgba(244,241,235,.3)} .nav__overlay.is-open .nav__overlay-head{opacity:1;transform:translateY(0)} .nav__overlay nav{display:grid;align-content:center;gap:8px} .nav__overlay nav a{ position:relative; display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:18px; padding:14px 0; border-bottom:1px solid rgba(244,241,235,.12); font-family:var(--font-display); font-size:clamp(34px,11vw,72px); line-height:1;letter-spacing:-.03em; text-decoration:none;color:var(--paper); transition:color .25s; } .nav__overlay nav a:hover{color:var(--blue)} .nav__overlay nav a .num{ font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;opacity:.5;align-self:flex-start; padding-top:8px; } .nav__overlay nav a .word{display:block;line-height:.85} .nav__overlay nav a .arrow{ font-family:var(--font-body);font-size:18px;opacity:.4; transition:transform .35s var(--ease),opacity .35s; } .nav__overlay nav a:hover .arrow{opacity:1;transform:translateX(8px) rotate(-45deg);color:var(--blue)} /* Item entrance is driven by GSAP (see main.js initMobileMenu). Items are visible by default so they still appear without JS / reduced motion. */ .nav__overlay nav a .word{display:block;overflow:hidden;line-height:1.04;padding-bottom:.06em} .nav__overlay nav a .word > span{display:block} .nav__overlay-foot{ display:flex;flex-direction:column;gap:14px; font-family:var(--font-body);font-size:14px;opacity:0;transform:translateY(20px); transition:opacity .6s var(--ease) .7s,transform .6s var(--ease) .7s; } .nav__overlay.is-open .nav__overlay-foot{opacity:1;transform:translateY(0)} .nav__overlay-foot a{color:var(--paper);font-family:var(--font-display);font-size:clamp(20px,5vw,28px);letter-spacing:-.02em;line-height:1;border-bottom:1px solid transparent;align-self:flex-start;transition:border-color .3s,color .3s} .nav__overlay-foot a:hover{color:var(--blue);border-color:var(--blue)} .nav__overlay-foot .nav__social{display:flex;gap:14px;margin-top:8px} .nav__overlay-foot .nav__social a{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;padding:6px 10px;border:1px solid rgba(244,241,235,.2);border-radius:var(--r-pill);align-self:flex-start;border-bottom:1px solid rgba(244,241,235,.2)} .nav__overlay-foot .nav__social a:hover{opacity:1;color:var(--blue);border-color:var(--blue)} /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding:96px var(--pad-x) 40px; color:var(--paper); overflow:hidden; isolation:isolate; } .hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)} .hero__video{ position:absolute;inset:0;width:100%;height:110%;object-fit:cover; filter:saturate(.85) contrast(1.05); } .hero__veil{ position:absolute;inset:0; background: radial-gradient(60% 80% at 30% 30%,transparent 0%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.8) 100%), linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.2) 30%,rgba(10,10,10,.7) 100%); } .hero__noise{ position:absolute;inset:0;opacity:.12;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); } /* Interactive particle field (hero + reusable section variant) */ .hero__particles{ position:absolute;inset:0;z-index:0; width:100%;height:100%; pointer-events:none; opacity:.9; } .fx-particles{ position:absolute;inset:0;z-index:0; width:100%;height:100%; pointer-events:none; opacity:.6; } /* keep section copy above the particle canvas */ .cta .container,.ailab .container{position:relative;z-index:1} .cs-hero__inner{position:relative;z-index:1} /* promote large static decorative overlays so they don't repaint on scroll */ .cta::before,.ailab__grid,.srv-outcomes::before,.cs-results::before,.srv-hero::before{contain:paint} .hero__top{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--paper);max-width:var(--max);width:100%;margin-inline:auto;position:relative;z-index:2} .hero__top .kbd{color:var(--paper);border-color:rgba(244,241,235,.3)} .hero__content{align-self:end;max-width:var(--max);width:100%;margin-inline:auto;display:grid;gap:40px;position:relative;z-index:2} .hero__title{ font-family:var(--font-display); font-size:clamp(52px,9vw,140px); line-height:.88; letter-spacing:-.04em; text-wrap:balance; max-width:14ch; } .hero__title .line{display:block;overflow:hidden} .hero__title .line>span{display:inline-block;transform:translateY(110%);will-change:transform} .hero__title em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue);letter-spacing:-.02em} .hero__title .star{color:var(--blue);font-family:var(--font-body);font-weight:500;display:inline-block;font-size:.5em;transform:translateY(-.4em);animation:spin 14s linear infinite;font-style:normal} .hero__sub{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;max-width:var(--max);margin-top:8px} .hero__sub p{max-width:48ch;font-size:var(--t-lead);line-height:1.35;color:var(--paper);font-weight:400} .hero__sub p em{font-family:var(--font-italic);font-style:italic;color:var(--paper);opacity:.85} .hero__scroll{ position:absolute;left:50%;bottom:24px;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:10px; color:var(--paper);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.8; } .hero__scroll svg{width:18px;height:30px} /* ============================================================ FLOATING ASTERISKS — recurring decorative motif ============================================================ */ .floater{ position:absolute;z-index:1; color:var(--blue); font-family:var(--font-body);font-weight:500;line-height:1; pointer-events:none; display:inline-block; will-change:transform; } .floater[data-spin]{animation:spin var(--spin-dur,18s) linear infinite} .floater[data-spin="reverse"]{animation-direction:reverse} /* Sizes */ .floater--xs{font-size:clamp(28px,3.5vw,52px)} .floater--sm{font-size:clamp(40px,5vw,80px)} .floater--md{font-size:clamp(60px,8vw,128px)} .floater--lg{font-size:clamp(80px,12vw,180px)} /* Color variants */ .floater--ink{color:var(--text)} .floater--paper{color:var(--paper)} .floater--dim{opacity:.18} .floater--mid{opacity:.55} /* Specific positions (hero) */ .floater--a{top:18%;right:8%} .floater--b{bottom:32%;left:6%} /* Generic placement helpers */ .floater--tl{top:6%;left:4%} .floater--tr{top:8%;right:6%} .floater--bl{bottom:8%;left:6%} .floater--br{bottom:10%;right:8%} .floater--cr{top:50%;right:4%;transform:translateY(-50%)} .floater--cl{top:50%;left:4%;transform:translateY(-50%)} /* ============================================================ MARQUEE ============================================================ */ .marquee{ background:var(--ink);color:var(--paper); border-top:1px solid var(--line-inv); border-bottom:1px solid var(--line-inv); overflow:hidden; padding:18px 0; position:relative; } .marquee__track{ display:flex;gap:2em; white-space:nowrap; font-family:var(--font-display); font-size:clamp(30px,5vw,72px); letter-spacing:-.02em; line-height:1; animation:marquee 38s linear infinite; will-change:transform; } .marquee__track i{color:var(--blue);font-style:normal;display:inline-block;animation:spin 6s linear infinite;font-family:var(--font-body);transform:translateY(-.05em)} @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ============================================================ MANIFESTO ============================================================ */ .manifesto{padding:clamp(80px,12vw,180px) 0 clamp(60px,9vw,140px);background:var(--bg);position:relative;overflow:hidden} .manifesto__title{ margin-top:24px; font-family:var(--font-display); font-size:var(--t-h2); line-height:.92;letter-spacing:-.03em; max-width:18ch;text-wrap:balance; } .manifesto__title em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .manifesto__cols{ margin-top:clamp(48px,7vw,96px); display:grid;grid-template-columns:1fr 1fr;gap:48px; margin-left:auto;max-width:900px; } .manifesto__cols p{font-size:var(--t-lead);line-height:1.4;color:var(--text);max-width:38ch} .manifesto__cols p em{font-family:var(--font-italic);font-style:italic} /* ---- Brand payoff + agency claim (added) ---- */ .hero__payoff{font-family:var(--font-italic);font-style:italic;font-size:clamp(19px,2.1vw,28px);line-height:1.18;color:var(--paper);opacity:.95;max-width:44ch} .hero__payoff em{font-family:var(--font-italic);font-style:italic;color:var(--blue)} .manifesto__claim{margin-top:clamp(40px,6vw,72px);margin-left:auto;max-width:900px;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.6vw,34px);line-height:1.2;letter-spacing:-.02em;color:var(--text);text-wrap:balance} .manifesto__claim em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} @media (max-width:1024px){.manifesto__claim{margin-left:0;max-width:none}} .method__sticky p em{font-family:var(--font-italic);font-style:italic;color:var(--blue)} .loader__payoff{margin-top:calc(-1 * clamp(26px,4.5vw,52px) + 14px);font-family:var(--font-italic);font-style:italic;font-size:clamp(15px,2.6vw,20px);color:var(--paper);opacity:.66;text-align:center;letter-spacing:.01em} .foot__payoff{margin-top:-4px;font-family:var(--font-italic);font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.25;color:var(--text);max-width:22ch} .foot__amz{display:inline-flex;align-items:center;gap:11px;padding:10px 15px;border-radius:13px;background:#232F3E;border:1px solid rgba(255,255,255,.14);width:fit-content;margin-top:8px} .foot__amz-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:.7;white-space:nowrap} .foot__amz img{height:20px;width:auto;display:block} /* ---- Gestionali: showcase (su /servizi/gestionali/) ---- */ .srv-gest{padding:clamp(60px,9vw,130px) 0;background:var(--bg);position:relative;overflow:hidden} .srv-gest h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:.95;letter-spacing:-.03em;margin-top:14px} .srv-gest h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .srv-gest__lead{margin-top:18px;max-width:62ch;font-size:clamp(17px,1.6vw,21px);line-height:1.5;opacity:.82} .gest-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:clamp(34px,4vw,56px)} .gest-item{position:relative;display:flex;flex-direction:column;gap:13px;padding:32px 28px;border:1px solid var(--line);border-radius:22px;background:rgba(127,127,127,.05);color:inherit;text-decoration:none;transition:border-color .25s ease,transform .25s ease,background .25s ease} .gest-item:hover{border-color:var(--blue);transform:translateY(-4px);background:color-mix(in srgb,var(--blue) 6%,transparent)} .gest-item__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6} .gest-item h3{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1} .gest-item p{font-size:15px;line-height:1.5;opacity:.8;max-width:44ch} .gest-item__feats{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0} .gest-item__feats li{font-size:12px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;opacity:.85} .gest-item__arrow{position:absolute;top:26px;right:28px;font-size:20px;opacity:.5;transition:transform .25s ease,opacity .25s ease} .gest-item:hover .gest-item__arrow{opacity:1;transform:translate(3px,-3px)} @media(max-width:760px){.gest-list{grid-template-columns:1fr}} /* ---- Gestionali: feature/module cards (pagine interne prodotto) ---- */ .gx{padding:clamp(60px,9vw,120px) 0;position:relative;overflow:hidden} .gx--soft{background:var(--bg-soft,var(--bg))} .gx__head{max-width:var(--max);margin-inline:auto} .gx__head h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:.96;letter-spacing:-.03em;margin-top:12px} .gx__head h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .gx__head p{margin-top:16px;max-width:62ch;font-size:clamp(16px,1.5vw,20px);line-height:1.5;opacity:.82} .gx-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(30px,4vw,52px);max-width:var(--max);margin-inline:auto} .gx-card{display:flex;flex-direction:column;gap:11px;padding:26px 24px;border:1px solid var(--line);border-radius:20px;background:rgba(127,127,127,.05)} .gx-card__n{font-family:var(--font-mono);font-size:12px;opacity:.5} .gx-card h3{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;line-height:1.06} .gx-card>p{font-size:14px;line-height:1.45;opacity:.8} .gx-card ul{list-style:none;display:grid;gap:7px;margin:4px 0 0;padding:0} .gx-card li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.4;opacity:.88} .gx-card li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--blue)} .gx--accent .gx-card{border-color:color-mix(in srgb,var(--blue) 38%,var(--line));background:color-mix(in srgb,var(--blue) 8%,transparent)} .gx__badge{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 40%,var(--line));border-radius:999px;padding:6px 12px;margin-bottom:6px} @media(max-width:900px){.gx-features{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.gx-features{grid-template-columns:1fr}} /* ============================================================ SERVICES — bento ============================================================ */ .services{padding:clamp(60px,9vw,140px) 0;background:var(--bg-warm);position:relative;overflow:hidden} .services__head{display:grid;gap:24px;margin-bottom:clamp(40px,5vw,72px);position:relative} .bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(220px,auto); gap:14px; } .bento__card{ position:relative; display:flex;flex-direction:column;justify-content:space-between;gap:24px; padding:28px; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; text-decoration:none; transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease); } .bento__card::after{ content:"";position:absolute;inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(41,69,255,.08),transparent 60%); opacity:0;transition:opacity .35s var(--ease); pointer-events:none; } .bento__card:hover{transform:translateY(-4px)} .bento__card:hover::after{opacity:1} .bento__card--lg{grid-column:span 2;grid-row:span 2;padding:36px} .bento__card--wide{grid-column:span 2} .bento__card--accent{background:var(--blue);color:var(--paper);border-color:var(--blue)} .bento__card--accent .bento__num{color:var(--paper);opacity:.7} .bento__card--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)} .bento__card--dark .bento__num{color:var(--paper);opacity:.6} .bento__num{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text);opacity:.5;align-self:flex-start} .bento__card h3{font-family:var(--font-display);font-size:var(--t-h3);line-height:1;letter-spacing:-.02em} .bento__card--lg h3{font-size:clamp(32px,4vw,60px);max-width:14ch} .bento__card p{font-size:var(--t-body);line-height:1.45;max-width:34ch;opacity:.85} .bento__card--accent p,.bento__card--dark p{opacity:.9} .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .tags li{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-pill)} .tags--inv li{border-color:rgba(244,241,235,.3)} .bento__arrow{ position:absolute;top:24px;right:24px; display:grid;place-items:center;width:42px;height:42px;border-radius:50%; background:transparent;border:1px solid currentColor;opacity:.4; font-size:18px;line-height:1; transition:transform .4s var(--ease),background .3s,color .3s,opacity .3s; } .bento__card:hover .bento__arrow{opacity:1;transform:rotate(45deg);background:var(--text);color:var(--bg);border-color:var(--text)} .bento__card--accent:hover .bento__arrow{background:var(--paper);color:var(--blue);border-color:var(--paper)} .bento__card--dark:hover .bento__arrow{background:var(--blue);color:var(--paper);border-color:var(--blue)} /* ============================================================ METHOD — sticky scroll ============================================================ */ .method{padding:clamp(80px,11vw,180px) 0;background:var(--bg);position:relative;overflow-x:clip} .method__inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:flex-start;position:relative} .method__sticky{position:sticky;top:120px;display:grid;gap:24px;align-self:flex-start} .method__sticky .section-title{font-size:clamp(32px,4.5vw,64px)} .method__sticky p{max-width:34ch;color:var(--text);opacity:.75} .method__list{display:grid;gap:24px} .method__step{ padding:36px;border-radius:var(--r-card); background:var(--bg-soft); border:1px solid var(--line); display:grid;gap:14px;color:var(--text); transition:background .4s,transform .4s,color .4s; } .method__step:hover{background:var(--blue);color:var(--paper);transform:translateX(-6px)} [data-theme="light"] .method__step:hover{background:var(--ink);color:var(--paper)} .method__num{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;opacity:.6} .method__step h3{font-family:var(--font-display);font-size:clamp(24px,2.6vw,38px);line-height:1;letter-spacing:-.02em} .method__step p{font-size:var(--t-body);line-height:1.45;max-width:42ch;opacity:.85} /* ============================================================ AI LAB — dark ============================================================ */ .ailab{ position:relative; padding:clamp(80px,11vw,180px) 0; background:var(--ink);color:var(--paper); overflow:hidden; } .ailab__grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(244,241,235,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(244,241,235,.05) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%); pointer-events:none; } .ailab__title{ position:relative; margin-top:24px; font-family:var(--font-display); font-size:var(--t-h2); line-height:.92;letter-spacing:-.03em;max-width:17ch;text-wrap:balance; } .ailab__title em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .ailab__title .star{color:var(--blue);font-family:var(--font-body);font-weight:500;display:inline-block;font-size:.5em;transform:translateY(-.4em);animation:spin 14s linear infinite} .ailab__lead{position:relative;margin-top:32px;max-width:60ch;font-size:var(--t-lead);line-height:1.4;opacity:.8} .ailab__cards{position:relative;margin-top:clamp(64px,9vw,120px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .ailab__card{ position:relative;padding:28px;border-radius:var(--r-card); border:1px solid var(--line-inv); background:rgba(244,241,235,.02); display:grid;gap:14px;align-content:start; transition:background .4s,border-color .4s,transform .4s; min-height:220px; } .ailab__card:hover{background:rgba(41,69,255,.1);border-color:var(--blue);transform:translateY(-4px)} .ailab__card span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;opacity:.6} .ailab__card h4{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-.02em} .ailab__card p{font-size:14px;line-height:1.5;opacity:.75} /* ============================================================ STATS ============================================================ */ .stats{padding:clamp(80px,11vw,180px) 0;background:var(--bg);position:relative;overflow:hidden} .stats__grid{ margin-top:clamp(40px,6vw,96px); display:grid;grid-template-columns:repeat(4,1fr);gap:24px; border-top:1px solid var(--line); position:relative; } .stat{ padding:40px 0 0; border-right:1px solid var(--line); padding-right:24px; display:grid;gap:18px; min-width:0; } .stat:last-child{border-right:none} .stat__value{font-family:var(--font-display);font-size:clamp(44px,5.4vw,88px);line-height:.95;letter-spacing:-.04em;color:var(--text);display:block;white-space:nowrap} .stat__label{font-size:14px;line-height:1.4;color:var(--text);opacity:.7;max-width:24ch} /* ============================================================ CTA / CONTATTI ============================================================ */ .cta{padding:clamp(80px,11vw,180px) 0 clamp(60px,9vw,140px);background:var(--ink);color:var(--paper);position:relative;overflow:hidden} .cta::before{ content:"";position:absolute;top:0;right:-5%;width:600px;height:600px;border-radius:50%; background:radial-gradient(circle,rgba(41,69,255,.35),transparent 60%); pointer-events:none; } .cta__title{ position:relative; margin-top:24px; font-family:var(--font-display);font-size:clamp(42px,7vw,108px);line-height:.92;letter-spacing:-.04em;text-wrap:balance; max-width:14ch; } .cta__title span{display:block;overflow:hidden} .cta__title span>*{display:inline-block} .cta__title em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .cta__title .star{color:var(--blue);font-family:var(--font-body);font-weight:500;display:inline-block;font-size:.5em;transform:translateY(-.4em);animation:spin 14s linear infinite;font-style:normal} .cta__title .big{font-size:.65em} .cta__row{position:relative;margin-top:clamp(64px,9vw,120px);display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:flex-start} .cta__form{display:grid;gap:18px} .cta__form label{display:grid;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85} .cta__form input,.cta__form textarea{ padding:14px 0;border-bottom:1px solid var(--line-inv); font-family:var(--font-body);font-size:18px;letter-spacing:-.01em; color:var(--paper);font-weight:500; transition:border-color .3s; resize:vertical; } .cta__form input:focus,.cta__form textarea:focus{outline:none;border-color:var(--blue)} .cta__form .checkbox{display:flex;flex-direction:row;align-items:center;gap:10px;text-transform:none;letter-spacing:0;opacity:.7;font-family:var(--font-body);font-size:13px;margin-top:8px} .cta__form .checkbox input{appearance:none;width:18px;height:18px;border:1px solid var(--line-inv);border-radius:4px;display:grid;place-items:center;cursor:pointer;padding:0} .cta__form .checkbox input:checked{background:var(--blue);border-color:var(--blue)} .cta__form .checkbox input:checked::after{content:"✓";color:var(--paper);font-size:12px;line-height:1} .cta__form button{justify-self:start;margin-top:16px} .cta__side{display:grid;gap:32px;align-content:start;padding-top:8px} .cta__block{display:grid;gap:10px} .cta__big{display:inline-block;font-family:var(--font-display);font-size:clamp(20px,2.1vw,30px);line-height:1.1;letter-spacing:-.02em;transition:color .3s} .cta__big:hover{color:var(--blue)} .cta__block p{font-size:14px;line-height:1.5;opacity:.7} /* ============================================================ FOOTER ============================================================ */ .foot{background:var(--bg);color:var(--text);padding:clamp(60px,8vw,120px) 0 24px;position:relative;overflow:hidden} .foot__top{display:grid;grid-template-columns:1.4fr 2fr;gap:64px;padding-bottom:clamp(64px,9vw,120px);border-bottom:1px solid var(--line)} .foot__brand{display:grid;gap:20px;align-content:start} .foot__brand p{max-width:24ch;font-size:18px;line-height:1.4;opacity:.7} .foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .foot__cols div{display:grid;gap:10px;align-content:start} .foot__cols a{font-size:14px;line-height:1.6;color:var(--text);transition:color .25s,padding-left .25s} .foot__cols a:hover{color:var(--blue);padding-left:6px} .foot__bottom{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; padding:32px 0 24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.6; } .foot__bottom i{color:var(--blue);font-style:normal;font-weight:700;display:inline-block;animation:spin 5s linear infinite;padding-inline:.2em} .foot__mega{ display:flex;align-items:flex-end;flex-wrap:nowrap;gap:.18em;line-height:.85;letter-spacing:-.06em; font-family:var(--font-display);font-size:var(--t-mega);color:var(--text); overflow:hidden; } .foot__mega .dot{color:var(--blue);font-family:var(--font-body);font-weight:600;font-size:.5em;align-self:flex-start;display:inline-block;animation:spin 10s linear infinite;line-height:1} /* ============================================================ SERVICE PAGES (/servizi/SLUG/) ============================================================ */ .srv-hero{ position:relative; min-height:88svh; padding:140px var(--pad-x) clamp(60px,9vw,140px); display:grid;align-content:end;gap:32px; background:var(--ink);color:var(--paper); overflow:hidden; isolation:isolate; } .srv-hero::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(60% 70% at 30% 30%,rgba(41,69,255,.22),transparent 70%), radial-gradient(50% 60% at 80% 80%,rgba(41,69,255,.15),transparent 70%); } .srv-hero[data-accent="blue"]{background:var(--blue);color:var(--paper)} .srv-hero[data-accent="blue"]::before{background:radial-gradient(60% 70% at 80% 30%,rgba(244,241,235,.18),transparent 60%)} .srv-hero[data-accent="paper"]{background:var(--paper);color:var(--ink)} .srv-hero[data-accent="paper"]::before{background:radial-gradient(60% 70% at 30% 30%,rgba(41,69,255,.14),transparent 70%)} .srv-hero__inner{position:relative;z-index:2;max-width:var(--max);width:100%;margin-inline:auto;display:grid;gap:32px} .srv-back{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7; padding:6px 0;border-bottom:1px solid currentColor;align-self:flex-start; transition:opacity .25s,transform .25s,gap .25s; } .srv-back:hover{opacity:1;gap:14px;transform:translateX(-4px)} .srv-hero__meta{display:flex;flex-wrap:wrap;gap:8px} .srv-hero__meta .kbd{color:currentColor;border-color:rgba(244,241,235,.3)} .srv-hero[data-accent="paper"] .srv-hero__meta .kbd{border-color:var(--line)} .srv-hero__title{ font-family:var(--font-display); font-size:clamp(56px,10vw,168px); line-height:.88;letter-spacing:-.04em;text-wrap:balance; max-width:14ch; } .srv-hero__title em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .srv-hero[data-accent="blue"] .srv-hero__title em{color:var(--paper);opacity:.85} .srv-hero__title .star{color:var(--blue);font-family:var(--font-body);font-weight:500;display:inline-block;font-size:.5em;transform:translateY(-.45em);animation:spin 14s linear infinite;font-style:normal} .srv-hero[data-accent="blue"] .srv-hero__title .star{color:var(--paper)} .srv-hero__lead{max-width:60ch;font-size:clamp(18px,1.8vw,24px);line-height:1.45;opacity:.85} .srv-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px} /* Cosa facciamo */ .srv-what{padding:clamp(80px,11vw,160px) 0;background:var(--bg);color:var(--text);position:relative;overflow-x:clip} .srv-what__inner{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:flex-start} .srv-what__sticky{position:sticky;top:120px;display:grid;gap:24px} .srv-what__sticky h2{font-family:var(--font-display);font-size:clamp(32px,4.5vw,64px);line-height:.94;letter-spacing:-.03em;max-width:14ch} .srv-what__sticky h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .srv-what__sticky p{max-width:40ch;opacity:.75} .srv-what__list{display:grid;gap:14px} .srv-what__list li{ display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:flex-start; padding:28px 28px 28px 24px;border:1px solid var(--line);border-radius:var(--r-card); background:var(--surface); transition:background .35s,transform .35s,border-color .35s; } .srv-what__list li:hover{background:var(--bg-soft);transform:translateX(-4px);border-color:var(--text)} .srv-what__list .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;opacity:.5;padding-top:6px} .srv-what__list h3{font-family:var(--font-display);font-size:clamp(20px,2vw,28px);line-height:1.05;letter-spacing:-.02em;margin-bottom:8px} .srv-what__list p{font-size:15px;line-height:1.5;opacity:.8;max-width:60ch} /* Outcomes */ .srv-outcomes{padding:clamp(80px,11vw,160px) 0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden} .srv-outcomes::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,241,235,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,235,.04) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%)} .srv-outcomes .container{position:relative} .srv-outcomes h2{font-family:var(--font-display);font-size:clamp(34px,5vw,80px);line-height:.94;letter-spacing:-.03em;max-width:18ch;margin-top:24px} .srv-outcomes h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .srv-outcomes__grid{margin-top:clamp(48px,7vw,96px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .srv-outcomes__grid div{display:grid;gap:16px;padding:32px;border:1px solid var(--line-inv);border-radius:var(--r-card);background:rgba(244,241,235,.02);transition:background .35s,border-color .35s,transform .35s} .srv-outcomes__grid div:hover{background:rgba(41,69,255,.08);border-color:var(--blue);transform:translateY(-4px)} .srv-outcomes__grid .num{font-family:var(--font-display);font-size:clamp(36px,4.5vw,64px);line-height:1;letter-spacing:-.04em;color:var(--blue)} .srv-outcomes__grid p{font-size:14px;line-height:1.45;opacity:.8} /* Tools */ .srv-tools{padding:clamp(80px,11vw,160px) 0;background:var(--bg);color:var(--text);position:relative;overflow:hidden} .srv-tools h2{font-family:var(--font-display);font-size:clamp(34px,5vw,80px);line-height:.94;letter-spacing:-.03em;max-width:14ch;margin-top:24px} .srv-tools h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .srv-tools__grid{margin-top:clamp(48px,7vw,96px);display:flex;flex-wrap:wrap;gap:10px} .srv-tools__grid li{padding:14px 20px;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:background .25s,border-color .25s,color .25s,transform .25s} .srv-tools__grid li:hover{background:var(--blue);color:var(--paper);border-color:var(--blue);transform:translateY(-2px)} /* Cross sell */ .srv-related{padding:clamp(80px,11vw,160px) 0;background:var(--bg-warm);position:relative;overflow:hidden} .srv-related h2{font-family:var(--font-display);font-size:clamp(32px,4.5vw,64px);line-height:.94;letter-spacing:-.03em;max-width:18ch;margin-top:24px} .srv-related h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .srv-related__cards{margin-top:clamp(48px,7vw,96px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .srv-related__cards a{ display:flex;flex-direction:column;justify-content:space-between;gap:24px; padding:28px;min-height:200px;text-decoration:none;color:var(--text); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); transition:background .35s,color .35s,transform .35s; } .srv-related__cards a:hover{background:var(--ink);color:var(--paper);transform:translateY(-4px)} .srv-related__cards .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;opacity:.5} .srv-related__cards h3{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);line-height:1.05;letter-spacing:-.02em} .srv-related__cards span.arrow{font-size:24px;align-self:flex-end;transition:transform .35s} .srv-related__cards a:hover span.arrow{transform:translate(6px,-6px) rotate(0)} /* Lighter ghost button (for dark hero) */ .btn--ghost-light{background:transparent;color:currentColor;border:1px solid rgba(244,241,235,.4)} .btn--ghost-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .srv-hero[data-accent="paper"] .btn--ghost-light{border-color:var(--line);color:var(--ink)} .srv-hero[data-accent="paper"] .btn--ghost-light:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ============================================================ WORK / PORTFOLIO — horizontal scroll showcase ============================================================ */ .work{ background:var(--bg);color:var(--text); position:relative;overflow-x:clip; /* must NOT be a scroll container (sticky) */ padding:clamp(80px,11vw,180px) 0 clamp(40px,6vw,90px); } .work__head{ display:flex;justify-content:space-between;align-items:flex-end;gap:32px; flex-wrap:wrap;margin-bottom:clamp(40px,6vw,80px); } .work__head h2{ font-family:var(--font-display);font-size:var(--t-h2); line-height:.92;letter-spacing:-.03em;max-width:16ch;text-wrap:balance;margin-top:16px; } .work__head h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .work__hint{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; opacity:.6; } .work__hint .arr{display:inline-block;animation:nudge 1.6s var(--ease-in-out) infinite} @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}} /* Pinned horizontal scroll: while the section is pinned, vertical scroll is translated into horizontal card movement (GSAP, see main.js). Robust now that Lenis is driven by a single ticker. Track is vertically centred in the pin. */ /* sticky (NOT fixed) → cannot float/desync on tab switch. JS sets the viewport height = horizontal distance + 100vh; scrolling through it translates the track. */ .work__viewport{position:relative} .work__pin{ position:sticky;top:0; height:100svh; display:flex;align-items:center; overflow:hidden; } .work__track{ display:flex;gap:clamp(16px,2vw,28px); padding-inline:var(--pad-x); width:max-content; cursor:grab; will-change:transform; } .work__track.is-dragging{cursor:grabbing} /* Fallback (reduced motion / no GSAP): plain native horizontal swipe */ .work__viewport.is-native{height:auto!important} .work__viewport.is-native .work__pin{position:static;height:auto;display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;padding-bottom:6px} .work__viewport.is-native .work__pin::-webkit-scrollbar{display:none} .work__viewport.is-native .work-card{scroll-snap-align:start} /* "Salta il portfolio" — appears only while the page is locked auto-scrolling */ .work-skip{ position:fixed;left:50%;bottom:clamp(20px,5vh,46px); z-index:360; display:inline-flex;align-items:center;gap:.55em; padding:14px 24px;border-radius:var(--r-pill); background:var(--blue);color:var(--paper); font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:.01em;line-height:1; border:0;cursor:pointer;white-space:nowrap; box-shadow:0 10px 30px rgba(41,69,255,.45); opacity:0;visibility:hidden;pointer-events:none; transform:translateX(-50%) translateY(18px); transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .25s; } .work-skip svg{width:15px;height:15px} .work-skip:hover{background:var(--ink)} body.work-locked .work-skip{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); animation:skipPulse 1.3s var(--ease-in-out) infinite; } body.work-locked .work-skip svg{animation:skipNudge 1.1s var(--ease-in-out) infinite} @keyframes skipPulse{ 0%,100%{box-shadow:0 10px 28px rgba(41,69,255,.4);transform:translateX(-50%) translateY(0) scale(1)} 50%{box-shadow:0 14px 46px rgba(41,69,255,.85);transform:translateX(-50%) translateY(-3px) scale(1.04)} } @keyframes skipNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @media (hover:none),(pointer:coarse){.work-skip{cursor:pointer}} @media (prefers-reduced-motion:reduce){body.work-locked .work-skip,body.work-locked .work-skip svg{animation:none}} .work__track.is-dragging .work-card{pointer-events:none} .work-card{ position:relative;flex:0 0 auto; width:clamp(280px,42vw,560px); scroll-snap-align:start; border-radius:var(--r-card);overflow:hidden; background:var(--surface);border:1px solid var(--line); text-decoration:none;color:var(--text); user-select:none;-webkit-user-select:none; transition:transform .5s var(--ease),border-color .4s; } .work-card:hover{will-change:transform;border-color:var(--text)} .work-card__media{ position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-soft); } .work-card__media img,.work-card__media svg{ width:100%;height:100%;object-fit:cover; pointer-events:none;-webkit-user-drag:none; transition:transform .8s var(--ease),filter .5s; filter:saturate(.92); } .work-card:hover .work-card__media img,.work-card:hover .work-card__media svg{transform:scale(1.05);filter:saturate(1.05)} /* name + category always readable, over a gradient scrim (also on photos) */ .work-card__overlay{ position:absolute;inset:0;z-index:2;pointer-events:none; display:flex;flex-direction:column;justify-content:flex-end; padding:22px 24px; background:linear-gradient(to top,rgba(8,8,11,.92) 0%,rgba(8,8,11,.55) 34%,rgba(8,8,11,.05) 66%,transparent 100%); } .work-card__overlay .work-card__cat{ font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.75);margin-bottom:8px; } .work-card__overlay .work-card__title{ font-family:var(--font-display);font-weight:700; font-size:clamp(21px,2vw,32px);line-height:1.04;letter-spacing:-.02em; color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35); } .work-card__arrow{ position:absolute;top:16px;right:16px;z-index:3; display:grid;place-items:center;width:42px;height:42px;border-radius:50%; border:1px solid rgba(255,255,255,.45);color:#fff;font-size:18px;line-height:1; background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s; } .work-card:hover .work-card__arrow{transform:rotate(45deg);background:var(--blue);color:#fff;border-color:var(--blue)} /* ============================================================ CASE STUDY PAGES (/progetti/SLUG/) ============================================================ */ .cs-hero{ position:relative;min-height:92svh; padding:140px var(--pad-x) clamp(40px,6vw,90px); display:grid;align-content:end;gap:28px; color:var(--paper);overflow:hidden;isolation:isolate; background:var(--ink); } .cs-hero__bg{position:absolute;inset:0;z-index:-2} .cs-hero__bg img,.cs-hero__bg svg{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.7)} .cs-hero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,.35) 40%,rgba(10,10,10,.92) 100%)} .cs-hero__inner{max-width:var(--max);width:100%;margin-inline:auto;display:grid;gap:24px} .cs-hero__meta{display:flex;flex-wrap:wrap;gap:8px} .cs-hero__meta .kbd{color:var(--paper);border-color:rgba(244,241,235,.3)} .cs-hero__title{font-family:var(--font-display);font-size:clamp(44px,8vw,128px);line-height:.9;letter-spacing:-.04em;text-wrap:balance;max-width:16ch} .cs-hero__title em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .cs-hero__lead{max-width:60ch;font-size:clamp(18px,1.8vw,24px);line-height:1.45;opacity:.85} /* Quick facts bar */ .cs-facts{background:var(--blue);color:var(--paper)} .cs-facts .container{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:clamp(32px,4vw,56px)} .cs-facts dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:10px} .cs-facts dd{font-family:var(--font-display);font-size:clamp(18px,1.8vw,26px);line-height:1.1;letter-spacing:-.02em;font-weight:700} /* Narrative blocks */ .cs-body{padding:clamp(80px,11vw,160px) 0;background:var(--bg);color:var(--text);position:relative;overflow:hidden} .cs-block{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:flex-start;margin-bottom:clamp(64px,9vw,120px)} .cs-block:last-child{margin-bottom:0} .cs-block .eyebrow{color:var(--text)} .cs-block h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,48px);line-height:1;letter-spacing:-.03em;margin-top:14px} .cs-block h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .cs-block__text{display:grid;gap:20px} .cs-block__text p{font-size:var(--t-lead);line-height:1.5;opacity:.85;max-width:60ch} .cs-block__text p em{font-family:var(--font-italic);font-style:italic;color:var(--blue)} .cs-block__text ul{display:grid;gap:10px;margin-top:8px} .cs-block__text li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:var(--t-body);opacity:.85} .cs-block__text li::before{content:"*";color:var(--blue);font-weight:700} /* Results */ .cs-results{padding:clamp(80px,11vw,160px) 0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden} .cs-results::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,241,235,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,235,.04) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 100%)} .cs-results .container{position:relative} .cs-results h2{font-family:var(--font-display);font-size:clamp(34px,5vw,80px);line-height:.94;letter-spacing:-.03em;max-width:16ch;margin-top:16px} .cs-results h2 em{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--blue)} .cs-results__grid{margin-top:clamp(48px,7vw,96px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cs-results__grid div{padding:36px 32px;border:1px solid var(--line-inv);border-radius:var(--r-card);background:rgba(244,241,235,.02);transition:background .35s,border-color .35s,transform .35s} .cs-results__grid div:hover{background:rgba(41,69,255,.08);border-color:var(--blue);transform:translateY(-4px)} .cs-results .num{display:block;font-family:var(--font-display);font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.04em;color:var(--blue)} .cs-results .num small{font-size:.45em;letter-spacing:-.02em} .cs-results__grid p{margin-top:16px;font-size:14px;line-height:1.45;opacity:.8} /* Gallery */ .cs-gallery{padding:clamp(60px,8vw,120px) 0;background:var(--bg);overflow:hidden} .cs-gallery__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .cs-gallery figure{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)} .cs-gallery figure img,.cs-gallery figure svg,.cs-gallery figure video{width:100%;height:100%;object-fit:cover;display:block} .cs-gallery .g-wide{grid-column:span 4} .cs-gallery .g-tall{grid-column:span 2} .cs-gallery .g-half{grid-column:span 3} .cs-gallery figure img{cursor:zoom-in} /* ---- Lightbox (project galleries) ---- */ .lightbox{position:fixed;inset:0;z-index:9400;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px);background:rgba(8,8,11,.93);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease} .lightbox.is-open{opacity:1;visibility:visible} .lightbox__stage{margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center} .lightbox__img{max-width:min(1200px,92vw);max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.55);opacity:0;transform:scale(.985);transition:opacity .3s ease,transform .3s ease} .lightbox__img.is-ready{opacity:1;transform:none} .lightbox__close,.lightbox__nav{position:absolute;border-radius:50%;border:1px solid rgba(244,241,235,.24);background:rgba(244,241,235,.07);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .2s ease;z-index:2} .lightbox__close:hover,.lightbox__nav:hover{background:rgba(244,241,235,.18)} .lightbox__close{top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);width:46px;height:46px} .lightbox__close:hover{transform:rotate(90deg)} .lightbox__close svg{width:22px;height:22px} .lightbox__nav{top:50%;transform:translateY(-50%);width:54px;height:54px} .lightbox__nav svg{width:26px;height:26px} .lightbox__nav--prev{left:clamp(10px,2.5vw,40px)} .lightbox__nav--next{right:clamp(10px,2.5vw,40px)} .lightbox__nav--prev:hover{transform:translateY(-50%) translateX(-3px)} .lightbox__nav--next:hover{transform:translateY(-50%) translateX(3px)} .lightbox__counter{position:absolute;bottom:clamp(16px,3vw,34px);left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--paper);opacity:.8;z-index:2} @media (max-width:640px){ .lightbox__nav{width:44px;height:44px} .lightbox__nav--prev{left:8px} .lightbox__nav--next{right:8px} .lightbox__img{max-height:80vh} } /* Next project */ .cs-next{position:relative;background:var(--ink);color:var(--paper);overflow:hidden} .cs-next a{display:grid;gap:18px;padding:clamp(64px,9vw,140px) var(--pad-x);max-width:var(--max);margin-inline:auto;text-align:center;justify-items:center;color:var(--paper)} .cs-next .kbd{color:var(--paper);border-color:rgba(244,241,235,.3)} .cs-next h2{font-family:var(--font-display);font-size:clamp(40px,7vw,120px);line-height:.9;letter-spacing:-.04em;transition:color .3s} .cs-next a:hover h2{color:var(--blue)} .cs-next .arrow{font-size:32px;transition:transform .4s var(--ease)} .cs-next a:hover .arrow{transform:translateY(8px)} /* ============================================================ THEME TOGGLE (fixed, bottom-right) ============================================================ */ .theme-toggle{ position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px); z-index:300; width:56px;height:56px;border-radius:50%; display:grid;place-items:center; background:var(--text);color:var(--bg); border:1px solid var(--text); box-shadow:0 8px 28px rgba(0,0,0,.18); cursor:none; transition:transform .35s var(--ease),background .35s,color .35s; overflow:hidden; } @media (hover:none),(pointer:coarse){.theme-toggle{cursor:pointer}} .theme-toggle:hover{transform:scale(1.08);background:var(--blue);color:var(--paper);border-color:var(--blue)} .theme-toggle svg{width:22px;height:22px;transition:transform .5s var(--ease),opacity .35s var(--ease)} .theme-toggle .icon-sun{position:absolute;opacity:0;transform:rotate(90deg) scale(.5)} .theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)} [data-theme="light"] .theme-toggle .icon-moon{opacity:0;transform:rotate(-90deg) scale(.5)} [data-theme="light"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)} /* ============================================================ RESPONSIVE — tablet (≤ 1024px) ============================================================ */ @media (max-width:1024px){ .nav__menu{display:none} .nav__toggle{display:grid;place-items:center} .nav .btn--pill{display:none} .bento{grid-template-columns:repeat(2,1fr)} .bento__card--lg{grid-column:span 2;grid-row:span 1;min-height:280px} .bento__card--wide{grid-column:span 2} .ailab__cards{grid-template-columns:repeat(2,1fr)} .stats__grid{grid-template-columns:repeat(2,1fr)} .stat{border-right:none;border-bottom:1px solid var(--line);padding-bottom:24px} .stat:nth-child(odd){border-right:1px solid var(--line)} .method__inner{grid-template-columns:1fr;gap:48px} .method__sticky{position:relative;top:0} .manifesto__cols{margin-left:0} .foot__top{grid-template-columns:1fr;gap:48px} .foot__cols{grid-template-columns:repeat(3,1fr)} .hero__sub{grid-template-columns:1fr;gap:24px;align-items:start} /* Service pages */ .srv-what__inner{grid-template-columns:1fr;gap:48px} .srv-what__sticky{position:relative;top:0} .srv-outcomes__grid{grid-template-columns:repeat(2,1fr)} .srv-related__cards{grid-template-columns:repeat(2,1fr)} /* Case study pages */ .cs-facts .container{grid-template-columns:repeat(2,1fr);gap:32px} .cs-block{grid-template-columns:1fr;gap:24px} .cs-results__grid{grid-template-columns:repeat(3,1fr);gap:14px} .cs-gallery__grid{grid-template-columns:repeat(2,1fr)} .cs-gallery .g-wide,.cs-gallery .g-tall,.cs-gallery .g-half{grid-column:span 1} } /* ============================================================ RESPONSIVE — mobile (≤ 640px) ============================================================ */ @media (max-width:640px){ .nav{padding:14px var(--pad-x)} .logo__word{display:none} .hero{padding:88px var(--pad-x) 80px;min-height:88svh} .hero__top{flex-wrap:wrap;gap:8px} .hero__sub p{font-size:18px} .floater--a{font-size:60px;right:4%;top:12%} .floater--b{display:none} /* keep decorative asterisks from poking past the edge / over text on mobile */ .floater--cr,.floater--cl{display:none} .floater--tr,.floater--br,.floater--tl,.floater--bl{font-size:clamp(28px,9vw,52px)} .marquee__track{font-size:36px} .manifesto__cols{grid-template-columns:1fr;gap:24px} .manifesto__cols p{font-size:18px} .bento{grid-template-columns:1fr;gap:10px} .bento__card--lg,.bento__card--wide{grid-column:span 1} .bento__card{padding:24px;min-height:200px} .bento__arrow{width:36px;height:36px;top:20px;right:20px} .ailab__cards{grid-template-columns:1fr;gap:10px} .ailab__card{min-height:auto;padding:24px} .stats__grid{grid-template-columns:1fr} .stat{border-right:none!important;border-bottom:1px solid var(--line);padding-bottom:32px} .stat:last-child{border-bottom:none} .cta__row{grid-template-columns:1fr;gap:48px} .cta::before{width:300px;height:300px;right:-30%} .foot__cols{grid-template-columns:1fr 1fr;gap:24px} .foot__bottom{flex-direction:column;align-items:flex-start;gap:8px} /* Service pages mobile */ .srv-hero{padding-top:120px} .srv-hero__actions{flex-direction:column;align-items:stretch} .srv-hero__actions .btn{justify-content:center} .srv-what__list li{grid-template-columns:1fr;gap:8px;padding:24px} .srv-outcomes__grid{grid-template-columns:1fr} .srv-related__cards{grid-template-columns:1fr} .theme-toggle{width:48px;height:48px} .theme-toggle svg{width:18px;height:18px} /* Work / case study mobile */ .work__head{align-items:flex-start} .work-card{width:80vw} .cs-facts .container{grid-template-columns:1fr;gap:24px} .cs-results__grid{grid-template-columns:1fr} .cs-gallery__grid{grid-template-columns:1fr} .cs-hero__title{font-size:clamp(38px,11vw,128px)} .srv-hero__title{font-size:clamp(40px,12vw,168px)} /* footer mega wordmark must not get clipped on small screens */ .foot__mega{flex-wrap:wrap;font-size:clamp(34px,12vw,180px);overflow:visible} /* leave room for the fixed theme toggle */ .foot{padding-bottom:96px} /* mobile menu: fit shorter screens, allow scroll */ .nav__overlay{padding-top:72px;gap:18px} .nav__overlay nav a{padding:11px 0;font-size:clamp(30px,10vw,56px)} } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .floater,.marquee__track,.work__hint .arr{animation:none!important} .hero__particles,.fx-particles{display:none} .hero__video{display:none} .hero__media{background:linear-gradient(135deg,var(--ink),var(--blue-deep))} [data-reveal]{opacity:1;transform:none} .hero__title .line>span{transform:none} } /* ============================================================ PRINT (light cleanup) ============================================================ */ @media print{ .cursor,.loader,.scroll-progress,.nav,.foot__mega,.marquee,.floater,.hero__media{display:none!important} body{background:#fff;color:#000;cursor:auto} }