/* ═══════════════════════════════════════════════════════════════ SINGLE PRODUCT v2 Layout per /it// — pagehead + intro (gallery + aside) + description (prose + PDF) + related (rel-card) + inquiry form. ═══════════════════════════════════════════════════════════════ */ .pagehead--product .pagehead__title { font-size: clamp(2.2rem, 5vw, 4.2rem); } .pagehead--product .pagehead__lede { max-width: 56ch; } /* ─── Intro: gallery + aside ─── */ /* `section.product` (non `.product` da solo) per non collidere con la classe "product" che WooCommerce aggiunge a . */ section.product { background: var(--paper); padding: clamp(2.5rem, 5vw, 4rem) 0; } .product__wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .product__gallery { margin: 0; } .product-gallery__stage { background: #E8F0F1; border-radius: 16px; aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-gallery__stage img, .product-gallery__img { max-width: 100%; max-height: 100%; width: auto; height: auto; padding: 1.5rem; mix-blend-mode: multiply; object-fit: contain; } .product-gallery__placeholder { width: 100%; height: 100%; background: url("../../images/home/timone.png") center / 60% no-repeat, linear-gradient(140deg, #E8F0F1 0%, #DAE6E8 100%); } .product__intro { display: flex; flex-direction: column; gap: 0.6rem; } .product__eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-2); font-weight: 600; margin: 0; } .product__code { font-family: var(--serif); font-weight: 320; font-variation-settings: "opsz" 96, "SOFT" 50; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); margin: 0; } .product__sku { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin: 0; } .product__sku span { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); margin-right: 0.5rem; } .product__excerpt { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0.5rem 0 0; } .product-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; } /* ─── Prosesection: descrizione lunga ─── */ .prosesection { background: var(--paper-tint); padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); } .prosesection__wrap { max-width: 900px; margin: 0 auto; padding-inline: var(--gutter); } .prosesection__head { margin-bottom: 2rem; } .prosesection__title { font-family: var(--serif); font-weight: 320; font-variation-settings: "opsz" 120, "SOFT" 60; font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0.5rem 0 0; } .prosesection__body { font-size: 1rem; line-height: 1.75; color: var(--ink-2); } .prosesection__body p { margin: 0 0 1.1rem; } .prosesection__body strong { color: var(--ink); font-weight: 600; } .prosesection__body a { color: var(--teal-2); text-decoration: underline; text-underline-offset: 3px; } .prosesection__body a:hover { color: var(--ink); } .prosesection__body h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 380; margin: 2rem 0 0.8rem; color: var(--ink); } .prosesection__pdf { margin-top: 1.75rem; } /* ─── Related products: rel-card ─── */ .related { background: var(--paper); padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); } .related__wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .related__head { margin-bottom: 2rem; } .related__title { font-family: var(--serif); font-weight: 320; font-variation-settings: "opsz" 120, "SOFT" 60; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.02em; margin: 0.5rem 0 0; color: var(--ink); } .related__carousel { position: relative; min-width: 0; } .related__grid { --rel-gap: clamp(0.85rem, 1.7vw, 1.35rem); --rel-visible: 3; display: flex; flex-wrap: nowrap; gap: var(--rel-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; min-width: 0; padding-bottom: 0.25rem; } .related__grid::-webkit-scrollbar { display: none; } .related__grid > .rel-card { flex: 0 0 calc((100% - (var(--rel-visible) - 1) * var(--rel-gap)) / var(--rel-visible)); min-width: 0; scroll-snap-align: start; } .related__nav { position: absolute; top: calc(50% + 0.5rem); transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; box-shadow: 0 10px 28px -18px rgba(11, 26, 31, 0.45); transition: background var(--t-base), color var(--t-base), border-color var(--t-base), opacity var(--t-base); } .related__nav:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); } .related__nav:disabled { opacity: 0.3; cursor: default; } .related__nav--prev { left: -22px; } .related__nav--next { right: -22px; } @media (max-width: 720px) { .related__nav--prev { left: 4px; } .related__nav--next { right: 4px; } } .rel-card { background: var(--surface); border-radius: 14px; padding: 1rem 1rem 3.2rem; position: relative; display: flex; flex-direction: column; gap: 0.85rem; color: var(--ink); box-shadow: 0 1px 0 rgba(11, 26, 31, 0.04), 0 10px 26px -20px rgba(11, 26, 31, 0.18); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } .rel-card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(11, 26, 31, 0.04), 0 30px 60px -28px rgba(11, 26, 31, 0.28); } .rel-card__media { aspect-ratio: 5 / 4; background: #E8F0F1; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .rel-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.8rem; mix-blend-mode: multiply; transition: transform var(--t-slow) var(--ease); } .rel-card:hover .rel-card__media img { transform: scale(1.04); } .rel-card__placeholder { width: 100%; height: 100%; background: url("../../images/home/timone.png") center / 60% no-repeat, linear-gradient(140deg, #E8F0F1 0%, #DAE6E8 100%); } .rel-card__body { display: flex; flex-direction: column; gap: 0.3rem; } .rel-card__code { font-family: var(--serif); font-weight: 380; font-size: 1.1rem; color: var(--ink); } .rel-card__cta { position: absolute; right: 0.9rem; bottom: 0.9rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(31, 101, 113, 0.12); color: var(--teal-2); font-family: var(--mono); font-size: 0.9rem; transition: background var(--t-base), color var(--t-base); } .rel-card:hover .rel-card__cta { background: var(--teal-2); color: var(--paper); } /* ─── Responsive ─── */ @media (max-width: 960px) { .product__wrap { grid-template-columns: 1fr; gap: 2rem; } .related__grid { --rel-visible: 2; } } @media (max-width: 640px) { .related__grid { --rel-visible: 1.15; } .product-cta { flex-direction: column; align-items: stretch; } .product-cta .btn { width: 100%; justify-content: center; } } /* ─── btn--ink-ghost variante (link PDF e secondari) ─── */ .btn--ink-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn--ink-ghost:hover { background: var(--ink); color: var(--paper); }