/* Wotta WP — stili per pagine interne, nav, blog, works, prose. Estende assets/css/styles.css (design system della landing). */ /* ============ Variabili tema (header/glass theme-aware) ============ */ :root{ --header-bg:rgba(10,10,10,.72); --glass:rgba(255,255,255,.03); --glass-strong:rgba(255,255,255,.06); --menu-bg:rgba(10,10,10,.96); } [data-theme="light"]{ --bg:#F4F6F9; --bg-elev:#FFFFFF; --fg:#0A0C12; --muted:#5A6573; --border:rgba(10,12,20,.10); --border-strong:rgba(10,12,20,.18); --header-bg:rgba(255,255,255,.80); --glass:rgba(10,12,20,.025); --glass-strong:rgba(10,12,20,.05); --menu-bg:rgba(255,255,255,.97); --shadow-card:0 8px 30px rgba(20,30,50,.12); --shadow-glow:0 0 40px rgba(0,122,255,.18); } html{transition:background-color .35s ease} /* Lo sfondo pagina vive su (anti-flash inline). Il body resta trasparente, altrimenti copre .gradient-bg che sta a z-index:-1. NON rimuovere. */ body{background:transparent} /* Canvas 3D: trasparente e invisibile finché three.js non dipinge il primo frame (classe is-ready da three-hero.js) — niente flash bianco al load. */ #hero-canvas{background:transparent;opacity:0;transition:opacity .5s ease} #hero-canvas.is-ready{opacity:1} [data-theme="light"] body{color:var(--fg)} [data-theme="light"] .gradient-bg{mix-blend-mode:normal} /* ============ Header doppio stato (barra → pill su scroll) ============ */ .site-header{ padding:0;height:auto; background:var(--header-bg); border-bottom:1px solid var(--border); transition:background .35s,border-color .35s; } .site-header__inner{ display:flex;align-items:center;justify-content:space-between;gap:20px; max-width:var(--container);margin:0 auto;height:64px;padding:0 24px; transition:max-width .4s var(--ease-out),height .35s,padding .35s,border-radius .35s,background .35s,box-shadow .35s,margin .35s; } .site-header__brand{display:inline-flex;align-items:center} .site-header__brand img{height:36px;width:auto} /* Logo doppia variante: scuro di default, chiaro su tema light */ .site-logo--light{display:none} [data-theme="light"] .site-logo--light{display:inline-block} [data-theme="light"] .site-logo--dark{display:none} .site-nav{display:flex;align-items:center;gap:8px} .site-nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0} .site-nav__list a{ display:inline-flex;align-items:center; padding:8px 14px;border-radius:10px; font-size:14px;font-weight:600;color:var(--muted); transition:color .2s,background .2s; } .site-nav__list a:hover{color:var(--fg);background:var(--glass-strong)} .site-nav__list .current-menu-item>a, .site-nav__list .current_page_item>a{color:var(--brand)} .site-nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;color:var(--fg)} .site-nav__toggle svg{width:24px;height:24px} .site-header__controls{display:flex;align-items:center;gap:10px} .theme-toggle{ width:40px;height:40px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border-strong);background:var(--glass);color:var(--fg); transition:color .2s,border-color .2s,background .2s; } .theme-toggle:hover{border-color:var(--brand);color:var(--brand)} .theme-toggle svg{width:18px;height:18px} .theme-toggle__moon{display:none} [data-theme="light"] .theme-toggle__sun{display:none} [data-theme="light"] .theme-toggle__moon{display:block} .lang-switcher{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border-strong);border-radius:999px;background:var(--glass)} .lang-switcher a{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);transition:color .2s,background .2s} .lang-switcher a:hover{color:var(--fg)} .lang-switcher a.is-active{background:var(--brand);color:#fff} /* stato scrolled → pill flottante (solo desktop) */ @media (min-width:769px){ .site-header.is-scrolled{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .site-header.is-scrolled .site-header__inner{ max-width:min(960px,calc(100% - 32px)); height:56px;margin:12px auto;padding:0 12px 0 20px; border-radius:999px; background:var(--header-bg); border:1px solid var(--border-strong); backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%); box-shadow:0 12px 40px rgba(0,0,0,.28); } .site-header.is-scrolled .site-header__brand img{height:28px} } @media (max-width:768px){ .site-nav__toggle{display:inline-flex;order:2} .site-header__controls{order:1} .site-nav__list{ display:none;position:fixed;top:64px;left:0;right:0; flex-direction:column;align-items:stretch;gap:2px; padding:16px 24px 24px; background:var(--menu-bg); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); } .site-nav__list a{padding:14px 16px;font-size:16px} .site-nav.is-open .site-nav__list{display:flex} .lang-switcher a{padding:4px 8px} } /* ---------- Sezioni pagine interne ---------- */ .page-section{min-height:auto;padding:160px 24px 96px;justify-content:flex-start} .section__inner--narrow{max-width:820px} .page-hero{margin-bottom:56px} .page-hero h1{font-size:clamp(36px,5.5vw,64px);margin-bottom:16px} .page-hero .lead{margin-top:8px} /* ---------- Card cliccabili (works/blog) ---------- */ .cards-grid .card{display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden} .cards-grid .card>p{padding:0 24px} .cards-grid .card>p:last-child{padding-bottom:24px} .card--link .card__cover-link{display:block} .card--link .card__cover-link h3{padding:20px 24px 0;transition:color .2s} .card--link:hover .card__cover-link h3{color:var(--brand)} .card__media{aspect-ratio:4/3;overflow:hidden;background:var(--bg-elev)} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)} .card--link:hover .card__media img{transform:scale(1.04)} .card__media--placeholder{ background: radial-gradient(120% 120% at 20% 0%, rgba(0,122,255,.25), transparent 60%), radial-gradient(120% 120% at 90% 100%, rgba(255,128,171,.18), transparent 60%), var(--bg-elev); } .card__meta{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .card__meta a{color:var(--brand)} /* ---------- Filter bar (categorie) ---------- */ .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px} .filter-pill{ padding:8px 18px;border-radius:999px; border:1px solid var(--border-strong); font-size:14px;font-weight:600;color:var(--muted); transition:color .2s,border-color .2s,background .2s; } .filter-pill:hover{color:var(--fg);border-color:var(--brand)} .filter-pill.is-active{color:#fff;background:var(--brand);border-color:var(--brand)} /* ---------- Prose (contenuto editor Gutenberg) ---------- */ .prose{max-width:760px} .prose>*+*{margin-top:1.2em} .prose h2{font-size:clamp(26px,3.4vw,38px);margin-top:1.8em} .prose h3{font-size:22px;margin-top:1.6em} .prose p,.prose li{color:#C9CFD8;font-size:17px;line-height:1.75} .prose ul,.prose ol{padding-left:1.4em} .prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .prose img{border-radius:var(--radius);border:1px solid var(--border)} .prose blockquote{ border-left:3px solid var(--brand); padding:8px 0 8px 24px; color:var(--fg);font-size:20px;font-weight:500; } .prose figure{margin:2em 0} .prose figcaption{font-size:13px;color:var(--muted);margin-top:10px} .prose .wp-block-image.alignwide,.prose .wp-block-image.alignfull{max-width:none} .prose code{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:.9em} /* ---------- Gallery progetti (contenuti migrati) ---------- */ .work-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:2em 0} .work-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)} .work-gallery img{width:100%;height:100%;object-fit:cover} /* Link video nei work (da filtro the_content) */ .prose a.video-link{ display:inline-flex;align-items:center;gap:6px; font-weight:700;text-decoration:none;color:var(--brand); border:1px solid var(--border-strong);border-radius:999px; padding:10px 20px;margin:4px 0; transition:border-color .2s,transform .2s; } .prose a.video-link:hover{border-color:var(--brand);transform:translateY(-2px)} /* ---------- Singolo work / post ---------- */ .work-meta{margin-bottom:48px} .work-meta .card{padding:22px} .work-meta h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px} .work-cover{margin:0 0 56px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)} .work-cover img{width:100%} .single-cta{margin-top:72px;padding:40px;text-align:left} .single-nav{ display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; margin-top:48px;padding-top:32px;border-top:1px solid var(--border); font-size:14px;font-weight:600; } .single-nav a{color:var(--muted);transition:color .2s} .single-nav a:hover{color:var(--brand)} /* ---------- Pagination ---------- */ .pagination{margin-top:56px} .pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap} .pagination .page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:44px;padding:0 14px;border-radius:10px; border:1px solid var(--border-strong);font-weight:600;font-size:14px; transition:border-color .2s,color .2s; } .pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)} .pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff} /* ---------- Footer esteso ---------- */ .site-footer__inner--grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:8px} .site-footer__brand{font-weight:700;margin-bottom:8px} .site-footer__small{font-size:13px;color:var(--muted);line-height:1.7} .site-footer__menu{display:flex;gap:18px;list-style:none;margin:0 0 12px;padding:0;flex-wrap:wrap} /* ---------- Allineamenti WP / admin bar ---------- */ .admin-bar .site-header{top:32px} @media (max-width:782px){.admin-bar .site-header{top:46px}} .aligncenter{margin-left:auto;margin-right:auto} .screen-reader-text{ border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%); height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute; } /* ============ Grid 2 colonne ============ */ .grid--2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} @media (max-width:680px){.grid--2{grid-template-columns:1fr}} /* ============ Reveal staggered (cards.js) ============ */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ============ Card WORK (animata + video + arrow) ============ */ .card--work{position:relative;padding:0;overflow:hidden;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);transition:transform .4s var(--ease-out),border-color .35s,box-shadow .4s} .card--work:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow-card)} .card--work .card__cover-link{display:block} .card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-elev)} .card__media .card__img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)} .card--work:hover .card__img{transform:scale(1.06)} .card__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s} .card--work:hover .card__video{opacity:1} .card__media--placeholder{position:absolute;inset:0;background: radial-gradient(120% 120% at 20% 0%, rgba(0,122,255,.25), transparent 60%), radial-gradient(120% 120% at 90% 100%, rgba(255,128,171,.18), transparent 60%), var(--bg-elev);} .card__arrow{ position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--header-bg);border:1px solid var(--border-strong);color:var(--fg); opacity:0;transform:translateY(-6px) scale(.9); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:opacity .35s,transform .35s; } .card--work:hover .card__arrow{opacity:1;transform:none} .card__arrow svg{width:18px;height:18px} .card__body{padding:20px 22px 24px} .card__title{font-size:20px;margin:0 0 6px;transition:color .2s} .card--work:hover .card__title{color:var(--brand)} .card--work .card__meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .card__year{color:var(--muted);white-space:nowrap} /* ============ Single work: layout credits + corpo ============ */ .single-work .work-cover{margin-bottom:56px} .work-layout{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start} .work-credits{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px} .work-credits__row{display:flex;flex-direction:column;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--border)} .work-credits__label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .work-credits__val{font-size:16px;font-weight:600;color:var(--fg)} .work-body{max-width:none} .work-layout--solo{grid-template-columns:1fr} @media (max-width:900px){ .work-layout{grid-template-columns:1fr;gap:40px} /* stack verticale: righe impilate, sempre allineate — niente wrap dipendente dalla lunghezza dei testi */ .work-credits{position:static} } /* ============ Blog: layout 2 colonne + sidebar ============ */ .blog-layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start} .blog-main{min-width:0} .blog-sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:32px} @media (max-width:980px){ .blog-layout{grid-template-columns:1fr} .blog-sidebar{position:static} } .widget{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);padding:22px} .widget__title{font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px} .widget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .widget a{color:var(--muted);transition:color .2s} .widget a:hover{color:var(--brand)} .widget_categories a:before{content:"›";color:var(--brand);margin-right:8px} .widget-post__link{display:flex;gap:12px;align-items:center} .widget-post__thumb img{width:54px;height:54px;border-radius:10px;object-fit:cover} .widget-post__text{display:flex;flex-direction:column;gap:2px} .widget-post__title{font-weight:600;color:var(--fg);font-size:14px;line-height:1.3} .widget-post__date{font-size:12px;color:var(--muted)} .widget_search .search-form{display:flex;gap:8px} .widget_search input[type=search]{flex:1;min-width:0;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;color:var(--fg);font:inherit} .widget_search button{padding:0 14px;border-radius:10px;background:var(--brand);color:#fff;font-weight:600} .tagcloud{display:flex;flex-wrap:wrap;gap:8px} .tag-pill,.tagcloud a{display:inline-flex;padding:6px 12px;border-radius:999px;border:1px solid var(--border-strong);font-size:13px!important;color:var(--muted)} .tag-pill:hover,.tagcloud a:hover{border-color:var(--brand);color:var(--brand)} /* ============ Override componenti per tema CHIARO ============ */ [data-theme="light"] .card{background:var(--glass)} [data-theme="light"] .btn--ghost{background:var(--glass);border-color:var(--border-strong)} [data-theme="light"] .price-card{background:var(--glass)} [data-theme="light"] .marquee__item{color:var(--muted)} [data-theme="light"] .prose p,[data-theme="light"] .prose li{color:#2A2F38} [data-theme="light"] .work-body.prose p,[data-theme="light"] .work-body.prose li{color:#2A2F38} /* Light: titolo hero nero (l'"AI" resta azzurra via inline var(--brand)) */ [data-theme="light"] .hero__title-gradient{ background:linear-gradient(180deg,#0A0C12 0%,rgba(10,12,18,.72) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* Light: la sfumatura hero muore su bianco, non su nero */ [data-theme="light"] .gradient-bg__veil{ background:linear-gradient(180deg,rgba(245,247,250,0) 50%,rgba(245,247,250,.55) 80%,#F5F7FA 100%); } /* ============ Sezioni compatte ============ */ .section--tight{min-height:auto;padding:96px 24px} .h2--small{font-size:clamp(28px,4vw,42px);margin-bottom:32px} /* ============ Card servizi con immagine ============ */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} @media (max-width:900px){.svc-grid{grid-template-columns:1fr}} .svc-card{ display:flex;flex-direction:column;overflow:hidden; background:var(--glass);border:1px solid var(--border);border-radius:var(--radius); transition:transform .4s var(--ease-out),border-color .3s,box-shadow .4s; } /* hover: sfondo azzurro (come le vecchie flip card) */ .svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); background:linear-gradient(160deg,rgba(0,122,255,.20),rgba(61,90,254,.07)); border-color:rgba(0,122,255,.45); } /* immagine mascherata con padding dai bordi della card */ .svc-card__media{position:relative;padding:14px} .svc-card__media img{ width:100%;aspect-ratio:16/10;object-fit:cover; border-radius:14px;background:var(--bg-elev); transition:transform .6s var(--ease-out); } .svc-card:hover .svc-card__media img{transform:scale(1.05)} /* icona in alto a destra, dentro i confini della card */ .svc-card__icon{ position:absolute;top:26px;right:26px;z-index:2; width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--header-bg);border:1px solid var(--border-strong);color:var(--fg); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:background .3s,color .3s,border-color .3s; } .svc-card__icon svg{width:18px;height:18px} .svc-card:hover .svc-card__icon{background:var(--brand);border-color:var(--brand);color:#fff} .svc-card__body{padding:26px 26px 30px} .svc-card__body h3{font-size:20px;margin-bottom:10px} .svc-card__body p{color:var(--muted);font-size:15px;line-height:1.65} /* ============ Carosello circolare WebGL ============ */ .circular-gallery{ position:relative;width:100%;height:600px;margin-top:40px; overflow:hidden;cursor:grab; opacity:0;transition:opacity .6s ease; } .circular-gallery.is-ready{opacity:1} .circular-gallery.is-dragging{cursor:grabbing} .circular-gallery canvas{display:block;width:100%;height:100%} @media (max-width:768px){.circular-gallery{height:420px}} /* ============ Griglia loghi clienti (home): loghi liberi, senza box ============ */ .logo-grid{ display:grid;grid-template-columns:repeat(6,1fr);gap:44px 32px;align-items:center; } .logo-grid__item{ display:flex;align-items:center;justify-content:center; min-height:110px; } .logo-grid__item img{max-height:92px;max-width:100%;width:auto;object-fit:contain;opacity:.85;transition:opacity .25s,transform .3s} .logo-grid__item:hover img{opacity:1;transform:scale(1.05)} .logo-grid__item .logo-light{display:none} [data-theme="light"] .logo-grid__item .logo-light{display:block} [data-theme="light"] .logo-grid__item .logo-dark{display:none} @media (max-width:1024px){.logo-grid{grid-template-columns:repeat(4,1fr);gap:32px 24px}} @media (max-width:680px){ .logo-grid{grid-template-columns:repeat(3,1fr);gap:22px 16px} .logo-grid__item{min-height:64px} .logo-grid__item img{max-height:52px} } /* ============ Flip card (home, perché sceglierci) ============ */ .flip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch} @media (max-width:900px){.flip-grid{grid-template-columns:1fr}} .flip{perspective:1200px} .flip__inner{ display:grid;width:100%;height:100%; text-align:left;font:inherit;color:inherit; transform-style:preserve-3d; transition:transform 1.15s cubic-bezier(.3,.75,.25,1); border-radius:var(--radius);cursor:pointer; } /* le due facce occupano la stessa cella: l'altezza è quella della faccia più alta */ .flip__face{ grid-area:1/1; display:flex;flex-direction:column;gap:12px; padding:28px;border-radius:var(--radius); border:1px solid var(--border); background:var(--glass); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); backface-visibility:hidden;-webkit-backface-visibility:hidden; } .flip__front p{color:var(--muted)} .flip__back{ transform:rotateY(180deg); justify-content:center; background:linear-gradient(160deg,rgba(0,122,255,.20),rgba(61,90,254,.08)); border-color:rgba(0,122,255,.35); } .flip__back p{color:var(--fg);font-size:16px;line-height:1.65} .flip__tag{ align-self:flex-start; padding:5px 12px;border-radius:999px; border:1px solid rgba(0,122,255,.5);color:var(--brand); font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } @media (hover:hover){ .flip:hover .flip__inner{transform:rotateY(180deg)} } .flip__inner:focus-visible{outline:2px solid var(--brand);outline-offset:3px;transform:rotateY(180deg)} .flip__inner.is-flipped{transform:rotateY(180deg)} @media (prefers-reduced-motion:reduce){.flip__inner{transition:none}} /* ============ Loghi clienti nel marquee (doppia variante per tema) ============ */ /* Fila da 5 loghi visibili, grandi, scorrimento lento */ .marquee__track{gap:0;animation-duration:75s} .marquee__item{ flex:0 0 auto; width:calc(min(var(--container),100vw - 48px) / 5); height:auto; display:flex;align-items:center;justify-content:center; padding:0 22px; } .marquee__item img{height:110px;width:auto;max-width:100%;object-fit:contain;opacity:.85;transition:opacity .25s} .marquee__item:hover img{opacity:1} .marquee__item .logo-light{display:none} [data-theme="light"] .marquee__item .logo-light{display:block} [data-theme="light"] .marquee__item .logo-dark{display:none} @media (max-width:900px){ .marquee__item{width:calc((100vw - 48px) / 3);padding:0 12px} .marquee__item img{height:64px} } /* ============ Folder gallery (home, sezione works) ============ */ .folder-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .folder{ position:relative;width:min(440px,100%);aspect-ratio:1.2;margin:0 auto; cursor:pointer;outline:none; } .folder__back{ position:absolute;inset:14% 4% 6% 4%;border-radius:16px; background:linear-gradient(180deg,#123, #0d1b30); border:1px solid var(--border-strong); } .folder__back::before{ /* linguetta */ content:"";position:absolute;top:-26px;left:0;width:38%;height:28px; background:inherit;border:1px solid var(--border-strong);border-bottom:0; border-radius:12px 12px 0 0; } .folder__papers{position:absolute;inset:0;z-index:5} .folder__paper{ position:absolute;left:50%;bottom:16%;width:58%; transform:translateX(-50%) translateY(calc(var(--i) * -7px)) rotate(calc((var(--i) - 1.5) * 1.5deg)); transform-origin:bottom center; transition:transform .55s var(--ease-out); z-index:calc(5 - var(--i)); border-radius:12px;overflow:hidden; border:1px solid var(--border-strong); box-shadow:0 14px 40px rgba(0,0,0,.45); background:var(--bg-elev); } .folder__paper img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover} .folder__paper-title{ position:absolute;left:10px;top:10px; padding:5px 12px;border-radius:999px; background:rgba(10,10,10,.72);color:#fff;font-size:12px;font-weight:600; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;transition:opacity .3s; } .folder__paper:hover .folder__paper-title{opacity:1} .folder:hover .folder__paper, .folder:focus-within .folder__paper, .folder:focus .folder__paper{ transform: translateX(calc(-50% + (var(--i) - 1.5) * 26%)) translateY(-52%) rotate(calc((var(--i) - 1.5) * 9deg)); } .folder__paper:hover{z-index:9;transform:translateX(calc(-50% + (var(--i) - 1.5) * 26%)) translateY(-56%) rotate(0deg) scale(1.05)!important} .folder__front{ position:absolute;inset:44% 2% 4% 2%;border-radius:16px;z-index:8; background:linear-gradient(180deg,rgba(0,122,255,.92),#0a5cd8); box-shadow:0 20px 60px rgba(0,122,255,.25); transform-origin:bottom center; transition:transform .55s var(--ease-out); pointer-events:none; } .folder:hover .folder__front, .folder:focus-within .folder__front, .folder:focus .folder__front{transform:perspective(900px) rotateX(-30deg)} .folder__label{ position:absolute;left:50%;bottom:12%;transform:translateX(-50%); z-index:9;pointer-events:none; color:rgba(255,255,255,.9);font-size:13px;font-weight:700;letter-spacing:.14em; } @media (max-width:900px){ .folder-split{grid-template-columns:1fr;gap:40px} .folder{aspect-ratio:1.35} } @media (prefers-reduced-motion:reduce){ .folder__paper,.folder__front{transition:none} } /* ============ Lightbox immagini (articoli + work) ============ */ .wlb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(5,6,8,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .wlb[hidden]{display:none} .wlb__img{max-width:min(92vw,1400px);max-height:86vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6)} .wlb__btn{ position:absolute;display:flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff; transition:background .2s,border-color .2s; } .wlb__btn:hover{background:rgba(255,255,255,.16);border-color:var(--brand)} .wlb__btn svg{width:22px;height:22px} .wlb__close{top:20px;right:20px} .wlb__prev{left:16px;top:50%;transform:translateY(-50%)} .wlb__next{right:16px;top:50%;transform:translateY(-50%)} .wlb__count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.08em} @media (max-width:680px){.wlb__prev{left:6px}.wlb__next{right:6px}} .prose img,.work-gallery img{cursor:zoom-in} /* ============ Immagini verticali: altezza limitata nel flow ============ */ .prose .wp-block-image img, .prose > p > img, .prose figure img{max-height:72vh;width:auto;max-width:100%;margin-left:auto;margin-right:auto;display:block} .work-cover{max-height:70vh} .work-cover img{width:100%;height:100%;max-height:70vh;object-fit:cover} .work-gallery figure img{max-height:none} /* la griglia resta com'è */ /* ============ Pagine editoriali (Chi siamo): pattern core blocks ============ */ /* Alignments dentro .prose (che è max 760px) */ .prose .alignwide{max-width:var(--container);width:100%;margin-left:calc((min(var(--container),100vw - 48px) - 100%) / -2);margin-right:calc((min(var(--container),100vw - 48px) - 100%) / -2)} @media (max-width:820px){.prose .alignwide{margin-left:0;margin-right:0}} .prose .alignfull{width:calc(100vw - var(--wlb-scrollbar,0px));max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} /* Pagine con hero video (Chi siamo/About): hero fullpage subito sotto l'header, contenuto a larghezza piena come la home */ .page-section--flush{padding-top:64px} .page-section--flush .prose{max-width:var(--container)} .page-section--flush .prose h2{font-size:clamp(30px,4.5vw,52px)} .page-section--flush .prose p{font-size:clamp(16px,1.4vw,19px)} /* Hero video pagina About/Chi siamo: full-bleed, video di sfondo, scroll CTA */ .about-hero{ position:relative; width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); /* 100% schermo meno l'header fisso (64px), poi respiro prima del contenuto */ min-height:calc(100dvh - 64px); margin-bottom:100px; display:flex;align-items:flex-end;overflow:hidden; } .about-hero__video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;filter:saturate(1.05); } .about-hero__scrim{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.15) 45%,rgba(10,10,10,.85) 100%); } .about-hero__inner{ position:relative;z-index:2; width:100%;max-width:var(--container);margin:0 auto;padding:0 24px 64px; } .about-hero h1{ font-size:clamp(38px,6.5vw,80px);line-height:1.05;color:#fff;margin:0 0 28px;max-width:16ch; } .about-hero__scroll{ display:inline-flex;align-items:center;gap:10px; padding:14px 26px;border-radius:999px; border:1px solid rgba(255,255,255,.35);color:#fff; font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); background:rgba(255,255,255,.08); transition:background .25s,border-color .25s,transform .25s; } .about-hero__scroll:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)} .about-hero__scroll svg{width:18px;height:18px;animation:about-hero-bob 1.8s ease-in-out infinite} @keyframes about-hero-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @media (prefers-reduced-motion:reduce){.about-hero__scroll svg{animation:none}} /* la hero sta dentro .prose: annulla i vincoli di larghezza del testo */ .prose .about-hero{max-width:none} /* Split testo+immagine (core Media & Text) */ .about-split{gap:48px;align-items:center;margin-top:72px;margin-bottom:72px} .about-split .wp-block-media-text__media{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)} .about-split .wp-block-media-text__media img, .about-split .wp-block-media-text__media video{border-radius:0;max-height:none} .about-split h2{margin-top:0} .about-split p{color:#C9CFD8} [data-theme="light"] .about-split p{color:#2A2F38} @media (max-width:600px){.about-split{margin-top:48px;margin-bottom:48px}} /* ============ Pagina Contatti ============ */ /* Card indice cliccabili */ .contact-index .card{transition:transform .35s var(--ease-out),border-color .3s,box-shadow .35s} .card--anchor{cursor:pointer} .card--anchor:hover{transform:translateY(-5px);border-color:var(--brand);box-shadow:var(--shadow-glow)} .card--anchor:hover h3{color:var(--brand)} .card--anchor .card__icon svg{width:26px;height:26px} /* Sezioni contatti più compatte della landing */ .contact-section{padding-top:110px;padding-bottom:80px} /* Mappa studio */ .contact-map{ border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--border-strong); box-shadow:var(--shadow-card); } .contact-map iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(35%) contrast(1.05)} [data-theme="light"] .contact-map iframe{filter:none} /* Social: bottoni icona grandi */ .social-row{display:flex;gap:18px;flex-wrap:wrap} .social-btn{ display:inline-flex;align-items:center;gap:14px; padding:20px 30px;border-radius:var(--radius); border:1px solid var(--border-strong);background:var(--glass); font-weight:600;font-size:16px; transition:transform .3s var(--ease-out),border-color .25s,color .25s,box-shadow .3s; } .social-btn svg{width:30px;height:30px} .social-btn:hover{transform:translateY(-4px);border-color:var(--brand);color:var(--brand);box-shadow:var(--shadow-glow)} /* ============ Pagina Chi siamo/About: aggiustamenti scoped ============ */ /* CTA nella folder: bianco su blu, hover invertito (blu su bianco) */ .folder-split .btn--primary{background:var(--brand);color:#fff} .folder-split .btn--primary:hover{background:#fff;color:var(--brand);box-shadow:0 8px 30px rgba(255,255,255,.15)} /* Marquee loghi in About: tornano i box con contorno */ .page-section--flush .marquee__item{ border:1px solid var(--border); background:var(--glass); border-radius:var(--radius); padding:22px 18px; margin:0 10px; width:calc(min(var(--container),100vw - 48px) / 5 - 20px); } .page-section--flush .marquee__item img{height:80px} @media (max-width:900px){ .page-section--flush .marquee__item{width:calc((100vw - 48px) / 3 - 16px);padding:14px 10px} .page-section--flush .marquee__item img{height:52px} } /* Light: footer resta SEMPRE scuro (scelta brand) */ [data-theme="light"] .site-footer{ background:#0A0A0A; border-top-color:rgba(255,255,255,.08); } [data-theme="light"] .site-footer p, [data-theme="light"] .site-footer__small, [data-theme="light"] .site-footer__links a{color:#9BA3AF} [data-theme="light"] .site-footer__links a:hover{color:var(--brand)} [data-theme="light"] .site-footer__brand{color:#F5F7FA}