/** * We Twin – Models: solo le aggiunte necessarie all'integrazione in WordPress. * Il design system resta in wetwin.css (il tuo file del mockup): non modificarlo qui. */ /* Il mockup applicava tipografia e colori al ; in WordPress il body e' di Flatsome, quindi lo scope e' il wrapper .wt-site dei template. */ .wt-site { font-family: Manrope, Arial, sans-serif; color: var(--wt-ink); } /* Il pulsante "Mostra altri" non esiste nel mockup: 60 card alla volta invece di 276 tiene la pagina leggera su mobile. Per disattivarlo: 'chunk' => 999. */ .wt-site .wt-more-row { display: flex; justify-content: center; padding: 0 0 80px; } .wt-site .wt-more-count { color: var(--wt-muted); } .wt-site .wt-button:hover .wt-more-count { color: #ddd; } /* Link ai PDF (Book / Composit) sotto il pulsante di booking. */ .wt-site .wt-profile-docs { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; } .wt-site .wt-profile-docs .wt-link { font-size: 13px; gap: 14px; } /* Flatsome aggiunge margini e bordi ai propri contenitori shop: qui il layout e' interamente custom, quindi si azzerano. */ .woocommerce .wt-site, .single-product .wt-site, .post-type-archive-product .wt-site, .tax-product_cat .wt-site { margin: 0; } .single-product .product-footer, .single-product .product-page-sections, .woocommerce-breadcrumb, .shop-container > .woocommerce-notices-wrapper, .archive .shop-page-title, .archive .shop-container > .row:first-child { display: none; } /* Nessun prezzo o carrello in giro (ricerca interna, widget, blocchi). */ .wt-site .price, .wt-site .add_to_cart_button, .wt-site .amount { display: none; } @media (max-width: 640px) { .wt-site .wt-more-row { padding-bottom: 45px; } } /* ------------------------------------------------------------------ */ /* La mia selezione */ /* ------------------------------------------------------------------ */ .wt-site .wt-card { position: relative; } .wt-site .wt-card .wt-pick { position: absolute; top: 4px; right: 4px; z-index: 2; width: 24px; height: 24px; margin: 0; padding: 0; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(255, 255, 255, .9); color: var(--wt-ink); border: 1px solid var(--wt-line); border-radius: 0; transition: background .2s, color .2s, border-color .2s; } .wt-site .wt-card .wt-pick:hover { background: #fff; border-color: var(--wt-ink); } .wt-site .wt-card .wt-pick.is-picked { background: var(--wt-ink); color: #fff; border-color: var(--wt-ink); } /* Tooltip: compare al passaggio del mouse e anche via tastiera. */ .wt-site .wt-pick[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; padding: 5px 8px; background: var(--wt-ink); color: #fff; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s; } .wt-site .wt-pick[data-tip]:hover::after, .wt-site .wt-pick[data-tip]:focus-visible::after { opacity: 1; } /* Avviso visibile al solo amministratore quando manca il form. */ .wt-site .wt-selnotice { font-size: 13px; line-height: 1.5; padding: 14px 16px; background: var(--wt-surface); color: var(--wt-ink); } .wt-site .wt-selnotice a { text-decoration: underline; text-underline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .wt-site .wt-pick[data-tip]::after { transition: none; } } .wt-site .wt-pick-inline { margin-top: 12px; } .wt-site .wt-pick-inline.is-picked { background: var(--wt-ink); color: #fff; } /* Barra fissa in basso: compare solo quando c'e' almeno un profilo. */ .wt-site .wt-selbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--wt-gutter); background: var(--wt-paper); border-top: 1px solid var(--wt-line); box-shadow: 0 -6px 24px rgba(0, 0, 0, .06); font-size: 14px; } .wt-site .wt-selbar .wt-button { padding: 12px 22px; } /* Pannello */ .wt-site .wt-selpanel { border: 0; padding: 28px var(--wt-gutter) 34px; background: #fff; width: min(760px, 96vw); max-width: 96vw; max-height: 92dvh; overflow: auto; } .wt-site .wt-selpanel::backdrop { background: #000c; } .wt-site .wt-selpanel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--wt-line); padding-bottom: 16px; margin-bottom: 22px; } .wt-site .wt-selpanel-head h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 400; letter-spacing: -.04em; } .wt-site .wt-selpanel-head button { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; } .wt-site .wt-sellist { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; margin-bottom: 26px; } .wt-site .wt-selitem { position: relative; } .wt-site .wt-selitem a { display: block; } .wt-site .wt-selitem img { aspect-ratio: 3/4; object-fit: cover; object-position: 50% 20%; background: var(--wt-surface); } .wt-site .wt-selitem-noimg { display: block; aspect-ratio: 3/4; background: var(--wt-surface); } .wt-site .wt-selitem span { display: block; padding-top: 8px; font-size: 14px; font-weight: 500; } .wt-site .wt-selitem button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; font-size: 16px; background: rgba(255, 255, 255, .92); border: 1px solid var(--wt-line); } .wt-site .wt-selshare { display: flex; align-items: flex-end; gap: 14px; padding-bottom: 26px; } .wt-site .wt-selshare label { flex: 1; display: flex; flex-direction: column; gap: 6px; } .wt-site .wt-selshare input { width: 100%; border: 0; border-bottom: 1px solid var(--wt-line); padding: 9px 0; font-size: 13px; background: transparent; } .wt-site .wt-selempty { font-size: 14px; color: var(--wt-muted); padding-bottom: 20px; } .wt-site .wt-selform { border-top: 1px solid var(--wt-line); padding-top: 24px; } .wt-site .wt-selform input[type=text], .wt-site .wt-selform input[type=email], .wt-site .wt-selform input[type=tel], .wt-site .wt-selform textarea { width: 100%; border: 1px solid var(--wt-line); background: #fff; padding: 11px 12px; font-size: 15px; border-radius: 0; } .wt-site .wt-selform textarea { min-height: 110px; } .wt-site .wt-selform .wt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; } .wt-site .wt-selform .wpcf7-submit { background: var(--wt-ink); color: #fff; border: 1px solid var(--wt-ink); padding: 15px 25px; font-size: 14px; margin-top: 14px; } .wt-site .wt-selform .wpcf7-submit[disabled] { opacity: .45; cursor: not-allowed; } /* La barra fissa coprirebbe il fondo del catalogo. */ .wt-site .wt-catalog-grid, .wt-site .wt-gallery { scroll-margin-bottom: 90px; } @media (max-width: 640px) { .wt-site .wt-selbar { padding: 11px var(--wt-gutter); font-size: 13px; } .wt-site .wt-selbar .wt-button { padding: 11px 16px; gap: 10px; } .wt-site .wt-selpanel { padding: 20px var(--wt-gutter) 26px; width: 100vw; max-width: 100vw; max-height: 100dvh; } .wt-site .wt-sellist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .wt-site .wt-selitem span { font-size: 12px; } .wt-site .wt-selform .wt-form-grid { grid-template-columns: 1fr; } .wt-site .wt-pick[data-tip]::after { display: none; } /* niente tooltip su touch */ } /* ------------------------------------------------------------------ */ /* Download di Book e Composit */ /* ------------------------------------------------------------------ */ .wt-site .wt-dl { --wt-dl-progress: 0; display: inline-flex; align-items: center; gap: 12px; } .wt-site .wt-dl .wt-dl-label { line-height: 1; } .wt-site .wt-dl-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wt-site .wt-dl-svg { flex: 0 0 auto; overflow: visible; } .wt-site .wt-dl-svg circle, .wt-site .wt-dl-svg path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .wt-site .wt-dl-track { stroke: var(--wt-line); } /* r=10 → circonferenza 62.83 */ .wt-site .wt-dl-bar { stroke-dasharray: 62.83; stroke-dashoffset: 62.83; transform: rotate(-90deg); transform-origin: 12px 12px; transition: stroke-dashoffset .18s linear; opacity: 0; } .wt-site .wt-dl-check { stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; } .wt-site .wt-dl-arrow { transition: opacity .2s, transform .3s; } /* In corso: la freccia esce verso il basso, l'anello si riempie */ .wt-site .wt-dl.is-loading .wt-dl-arrow, .wt-site .wt-dl.is-indeterminate .wt-dl-arrow { opacity: 0; transform: translateY(4px); } .wt-site .wt-dl.is-loading .wt-dl-bar { opacity: 1; stroke-dashoffset: calc(62.83 - 62.83 * var(--wt-dl-progress)); } /* Senza content-length: anello che gira */ .wt-site .wt-dl.is-indeterminate .wt-dl-bar { opacity: 1; stroke-dasharray: 16 47; stroke-dashoffset: 0; animation: wt-dl-spin 1s linear infinite; } @keyframes wt-dl-spin { to { transform: rotate(270deg); } } /* Fatto: anello completo e spunta che si disegna */ .wt-site .wt-dl.is-done .wt-dl-arrow { opacity: 0; } .wt-site .wt-dl.is-done .wt-dl-bar { opacity: 1; stroke-dashoffset: 0; } .wt-site .wt-dl.is-done .wt-dl-check { opacity: 1; animation: wt-dl-draw .45s .05s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes wt-dl-draw { to { stroke-dashoffset: 0; } } .wt-site .wt-dl.is-done { border-bottom-color: var(--wt-ink); } .wt-site .wt-dl[aria-busy=true] { cursor: progress; } /* Chi ha chiesto meno animazioni vede solo i cambi di stato, senza moto */ @media (prefers-reduced-motion: reduce) { .wt-site .wt-dl-bar, .wt-site .wt-dl-arrow { transition: none; } .wt-site .wt-dl.is-indeterminate .wt-dl-bar { animation: none; stroke-dasharray: 62.83; stroke-dashoffset: 31.4; } .wt-site .wt-dl.is-done .wt-dl-check { animation: none; stroke-dashoffset: 0; } } /* ------------------------------------------------------------------ */ /* Dati della scheda: una riga sola, alla maniera delle agenzie */ /* ------------------------------------------------------------------ */ .wt-site .wt-stats { display: flex; flex-wrap: wrap; column-gap: clamp(12px, 1.5vw, 30px); row-gap: 0; border-top: 1px solid var(--wt-line); border-bottom: 1px solid var(--wt-line); margin: 26px 0 30px; padding: 6px 0; } .wt-site .wt-stats div { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; padding: 12px 0; border: 0; } .wt-site .wt-stats dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--wt-muted); line-height: 1.2; } .wt-site .wt-stats dd { margin: 0; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.2; white-space: nowrap; text-transform: none; } @media (max-width: 640px) { .wt-site .wt-stats { column-gap: 18px; margin: 18px 0 22px; } .wt-site .wt-stats div { padding: 9px 0; } .wt-site .wt-stats dd { font-size: 15px; } } /* ------------------------------------------------------------------ */ /* Full width: nessun limite di larghezza, come nei siti di moda */ /* ------------------------------------------------------------------ */ /* 1. Neutralizza il contenitore del tema sulle nostre pagine. */ body.post-type-archive-product #wrapper, body.tax-product_cat #wrapper, body.single-product #wrapper, body.post-type-archive-product #main, body.tax-product_cat #main, body.single-product #main { max-width: none; width: 100%; } /* 2. Annulla il cap a 1920px del design system (regola in wetwin.css). */ @media (min-width: 1800px) { .wt-site { max-width: none; margin: 0; } } /* 3. Piu' colonne al crescere della larghezza: senza questo, a schermo ultralargo le card diventano enormi. */ @media (min-width: 1500px) { .wt-site .wt-catalog-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 1900px) { .wt-site .wt-catalog-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; } .wt-site .wt-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 2400px) { .wt-site .wt-catalog-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } /* 4. Scheda: a schermo largo le due colonne si pareggiano, cosi' il ritratto non diventa gigantesco e i dati stanno comodi su una riga. */ @media (min-width: 1600px) { .wt-site .wt-profile { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 5vw; } } /* ------------------------------------------------------------------ */ /* Normalizzazione dei campi: Flatsome stila input e select a modo suo */ /* ------------------------------------------------------------------ */ .wt-site .wt-search input, .wt-site .wt-filterbar select, .wt-site .wt-selshare input { box-shadow: none; margin: 0; height: auto; min-height: 0; border-radius: 0; } .wt-site .wt-search input { border: 0; background: transparent; padding: 10px 0; } .wt-site .wt-filterbar select { min-height: 42px; padding: 7px 8px; } .wt-site .wt-selform input, .wt-site .wt-selform textarea { box-shadow: none; margin: 0; border-radius: 0; } /* Con l'opzione 'container' attiva il respiro laterale lo da' il tema. */ .wt-site .wt-wrap-inherit { padding-left: 0; padding-right: 0; } /* La barra fissa non puo' stare dentro il contenitore del tema: in modalita' container il suo contenuto viene allineato con un .container interno. */ .wt-site .wt-selbar-contained { padding-left: 0; padding-right: 0; } .wt-site .wt-selbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; } /* ------------------------------------------------------------------ */ /* Scheda: nome + link Book / Composit / Portfolio */ /* ------------------------------------------------------------------ */ .wt-site .wt-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(20px, 3vw, 50px); margin: 14px 0 0; } .wt-site .wt-profile-head h1 { margin: 0; } .wt-site .wt-profile-links { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; padding-top: 10px; } .wt-site .wt-plink { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .1em; border: 0; padding: 3px 0; background: none; color: var(--wt-ink); position: relative; } .wt-site .wt-plink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; } .wt-site .wt-plink:hover::after, .wt-site .wt-plink:focus-visible::after { transform: scaleX(1); transform-origin: left; } .wt-site .wt-plink .wt-dl-svg { width: 16px; height: 16px; } .wt-site .wt-plink-anchor { padding-left: 25px; } /* ------------------------------------------------------------------ */ /* Misure separate dallo slash */ /* ------------------------------------------------------------------ */ .wt-site .wt-stats { --wt-stats-gap: clamp(12px, 7vw, 40px); column-gap: var(--wt-stats-gap); overflow: hidden; } .wt-site .wt-stats div { position: relative; } .wt-site .wt-stats div + div::before { content: '/'; position: absolute; left: calc(var(--wt-stats-gap) / -2); top: 50%; transform: translate(-50%, -50%); color: var(--wt-line); font-size: 15px; line-height: 1; } /* Barra selezione: comando di cancellazione a destra */ .wt-site .wt-selbar .wt-selclear { margin-left: auto; white-space: nowrap; } .wt-site .wt-selbar-inner .wt-selclear { margin-left: 0; } @media (max-width: 640px) { .wt-site .wt-profile-head { flex-direction: column; gap: 14px; } .wt-site .wt-profile-links { flex-direction: row; align-items: center; gap: 18px; padding-top: 0; } .wt-site .wt-plink-anchor { padding-left: 0; } .wt-site .wt-selbar .wt-selclear { display: none; } } /* ------------------------------------------------------------------ */ /* Ricerca globale */ /* ------------------------------------------------------------------ */ .wt-searchtrigger { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 8px 0; font-family: Manrope, Arial, sans-serif; font-size: 14px; letter-spacing: .02em; color: inherit; cursor: pointer; } .wt-searchtrigger-icon { font-size: 18px; line-height: 1; } .wt-searchtrigger:hover span:last-child { text-decoration: underline; text-underline-offset: 6px; } html.wt-search-open { overflow: hidden; } .wt-site .wt-searchpanel { width: 100vw; max-width: 100vw; max-height: 100dvh; height: auto; margin: 0; padding: 0 var(--wt-gutter) 40px; border: 0; background: var(--wt-paper); overflow: auto; } .wt-site .wt-searchpanel::backdrop { background: rgba(0, 0, 0, .45); } .wt-site .wt-searchbar { position: sticky; top: 0; z-index: 2; background: var(--wt-paper); display: flex; align-items: center; gap: clamp(16px, 3vw, 46px); padding: 26px 0 20px; border-bottom: 1px solid var(--wt-line); } .wt-site .wt-search-big { flex: 1 1 auto; border-bottom: 1px solid var(--wt-line); } .wt-site .wt-search-big span { font-size: 22px; } .wt-site .wt-search-big input { width: 100%; border: 0; background: transparent; padding: 10px 0; font-size: clamp(20px, 2.6vw, 38px); letter-spacing: -.02em; } .wt-site .wt-searchgenders { display: flex; gap: 22px; flex: 0 0 auto; } .wt-site .wt-searchbar .wt-reset { flex: 0 0 auto; } .wt-site .wt-searchfilters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--wt-line); } .wt-site .wt-searchfilters label { font-size: 11px; letter-spacing: .055em; display: flex; flex-direction: column; gap: 8px; } .wt-site .wt-searchfilters select { width: 100%; min-height: 42px; border: 1px solid var(--wt-line); background: #fff; padding: 7px 8px; font-size: 13px; border-radius: 0; box-shadow: none; margin: 0; } .wt-site .wt-searchmeta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 13px; color: var(--wt-muted); } .wt-site .wt-searchactions { display: flex; gap: 26px; } .wt-site .wt-searchresults { padding-bottom: 20px; } .wt-site .wt-searchempty, .wt-site .wt-searchloading { padding: 40px 0 60px; font-size: 14px; color: var(--wt-muted); } @media (max-width: 1000px) { .wt-site .wt-searchfilters { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 640px) { .wt-site .wt-searchbar { flex-wrap: wrap; gap: 14px; padding: 18px 0 14px; } .wt-site .wt-search-big { order: -1; flex-basis: 100%; } .wt-site .wt-searchfilters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wt-site .wt-searchmeta { flex-wrap: wrap; gap: 10px; } }