/* * SISTEMA DI DESIGN DELLE LANDING — scatolesumisura.it * * Foglio condiviso dalle tre landing di segmento (artigiani, bottiglie, * moda e cosmetica). Ogni pagina lo carica per primo e vi aggiunge sopra il * proprio foglio (landing-artigiani.css, landing-bottiglie.css, * landing-moda-cosmetica.css) con i soli accenti che le sono propri. * Qui dentro non deve finire nulla che valga per una pagina sola. * * Allineato alla brand identity del 2024-02-01 e allo stile della homepage: * * - font del sito: Helvetica Neue per i titoli, IBM Plex Mono per il testo, * come dichiarati dalla configurazione Fbuilder del tema. Nessun font * self-hosted: si usano quelli che il sito già carica; * - palette della brand identity (nessun colore inventato); * - angoli vivi ovunque: nessun border-radius, in nessun elemento; * - immagini di prodotto con il contorno tratteggiato, la firma del marchio * (il sito usa "border: 2px dashed" sulle foto prodotto di catalogo); * - titoli di sezione con lo schema della homepage: etichetta in nero * grassetto, due punti, seguito in peso normale e accento verde. * * TRE CONVENZIONI DA RISPETTARE SE SI METTE MANO QUI: * * 1. Tutto è scopato sotto .ssm-landing (o .ssm-landing-page sul ). * Nessun selettore di elemento nudo: il tema MGS/supro è condiviso con * tutto il sito e una regola che sfugge dallo scope rompe altre pagine. * * 2. I font-size sono in rem su base 16px: 1rem = 16px, 0.9rem = 14.4px. * Attenzione al tranello: styles-m.css (Luma) imposta html{font-size:62.5%}, * ma mgs_theme.css lo riporta a html{font-size:16px} e si carica DOPO * questo foglio, quindi la base valida è 16px. Verificarlo di nuovo dopo * ogni aggiornamento del tema: se cambia, qui va riscalato tutto. * Spaziature, bordi e raggi restano in px, dove la base non conta. * * 3. Le differenze fra le tre pagine passano dalle variabili dichiarate su * .ssm-landing, non da nuove regole: un foglio di pagina che ridefinisce * --ssm-accent cambia tutti gli accenti insieme e resta di dieci righe. */ /* * Nessun @font-face qui di proposito: Helvetica Neue e IBM Plex Mono sono * già caricati dal sito (media/mgs/fbuilder/css/1/fbuilder_config.min.css). * Se un domani quella configurazione cambiasse, i ripieghi qui sotto tengono * comunque il carattere giusto: monospace per il testo, grottesco per i titoli. */ /* ------------------------------------------------------------------ * * Neutralizzazione del contenitore del tema * ------------------------------------------------------------------ */ .ssm-landing-page .page-main-full-width, .ssm-landing-page .page-main-full-width .columns, .ssm-landing-page .page-main-full-width .column.main { padding: 0; margin: 0; max-width: none; } .ssm-landing-page .page-main-full-width .column.main { display: block; } /* ------------------------------------------------------------------ * * Radice e reset locale * ------------------------------------------------------------------ */ .ssm-landing { /* Palette della brand identity, più il crema che il sito usa come tela. I nomi restano quelli della v1 perché le regole sono le stesse: cambia solo il colore che ci finisce dentro. */ --ssm-paper: #FFF6EC; /* crema del sito */ --ssm-paper-2: #C1D3AA; /* salvia chiaro */ --ssm-card: #FFFFFF; --ssm-ink: #262626; /* nero del marchio */ --ssm-mut: #5A5A55; --ssm-pine: #062625; /* verde quasi nero */ --ssm-pine-deep: #041B1A; --ssm-moss: #52755E; /* verde salvia scuro */ --ssm-lime: #79DB66; /* verde principale, quello dei pulsanti */ --ssm-lime-soft: #CBF985; /* lime pallido */ --ssm-lime-ink: #FFFFFF; /* sul verde il sito scrive in bianco */ --ssm-sand: #C7AB8C; /* cartone */ --ssm-clay: #52755E; /* niente terracotta nel marchio: sovratitoli in verde */ --ssm-line: #E0D6C6; /* * Le tre leve con cui una landing si distingue dalle altre. Restano * dentro i sette colori del marchio: a cambiare fra le pagine è quale * campitura tocca a quale sezione, non la tavolozza. Il foglio di pagina * ridefinisce queste tre righe e nient'altro. */ --ssm-accent: #52755E; /* accento tipografico: dei titoli */ --ssm-panel: #C7AB8C; /* fondo del pannello foto "spedire" */ --ssm-panel-2: #C1D3AA; /* fondo del pannello foto "confezionare" */ --ssm-tint: #C1D3AA; /* campitura piena delle sezioni a colore */ --ssm-radius: 0; /* angoli vivi: richiesta esplicita del marchio */ --ssm-dash: 2px dashed var(--ssm-ink); /* il tratteggio, firma del marchio */ --ssm-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --ssm-body: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ssm-paper); color: var(--ssm-ink); font-family: var(--ssm-body); font-size: 1rem; line-height: 1.65; color-scheme: only light; -webkit-font-smoothing: antialiased; } .ssm-landing *, .ssm-landing *::before, .ssm-landing *::after { box-sizing: border-box; } /* * IL RESET STA DENTRO :where() E NON È UN VEZZO. * * Scritto come `.ssm-landing p { margin: 0 }` varrebbe 0,2,0 e batterebbe * ogni componente scritto con la sola classe — `.ssm-hero__lede`, * `.ssm-hero__chip`, `.ssm-vs__tag`, tutti a 0,1,0. Risultato: margini e * imbottiture dichiarati più sotto venivano ignorati e la pagina usciva * compressa, con il testo dei riquadri incollato ai bordi. (Difetto reale, * corretto ad agosto 2026: prima si vedeva sull'occhiello dell'hero e sul * bollino "Lusso da 50 pz".) * * `:where()` azzera la specificità di quello che contiene, quindi questo * reset vale 0,0,0 e qualunque regola di componente lo scavalca. Se un * domani si toglie il :where(), tornano i margini schiacciati. */ .ssm-landing :where(h1, h2, h3) { margin: 0; padding: 0; } .ssm-landing :where(p, ul, li, figure, figcaption, dl) { margin: 0; padding: 0; } .ssm-landing :where(ul) { list-style: none; } .ssm-landing h1, .ssm-landing h2, .ssm-landing h3 { font-family: var(--ssm-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.012em; text-transform: none; color: inherit; text-wrap: balance; } .ssm-landing img { display: block; max-width: 100%; height: auto; border: 0; } .ssm-landing a { color: var(--ssm-pine); text-decoration: none; } .ssm-landing strong { font-weight: 700; } .ssm-landing svg { display: block; } .ssm-landing__wrap { max-width: 1160px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); } .ssm-landing__sec { padding-block: clamp(56px, 8.5vw, 100px); } .ssm-landing__sec--tight { padding-top: 0; } .ssm-landing__eyebrow { margin-bottom: 18px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ssm-clay); } .ssm-landing__center { text-align: center; } .ssm-landing__h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); } /* * Titoli di sezione nello schema della homepage: * Etichetta: seguito in peso normale con accento verde * Il grassetto porta il concetto, il resto respira, il verde indica il gancio. */ .ssm-landing__h2 b { font-weight: 700; } .ssm-landing__h2 span { font-weight: 400; } .ssm-landing__h2 em { font-style: normal; font-weight: 400; color: var(--ssm-accent); } /* La homepage allinea a sinistra titoli e sottotitoli di sezione. */ .ssm-landing__sec > .ssm-landing__wrap > .ssm-landing__h2, .ssm-landing__sec > .ssm-landing__wrap > .ssm-landing__sub { text-align: left; margin-inline: 0; } .ssm-landing__sub { max-width: 62ch; color: var(--ssm-mut); } .ssm-landing__center .ssm-landing__sub { margin-inline: auto; } /* ------------------------------------------------------------------ * * Bottoni * * ATTENZIONE: i bottoni sono , quindi il reset ".ssm-landing a" * (specificità 0,1,1) batterebbe un ".ssm-btn--pine" (0,1,0) e imporrebbe * il verde al testo, rendendolo invisibile sui fondi scuri. Per questo qui * i selettori sono scopati sotto .ssm-landing (0,2,0): non "semplificarli". * ------------------------------------------------------------------ */ /* Come i pulsanti della homepage: rettangolo pieno, sans grassetto, niente maiuscoletto e niente raggio. */ .ssm-landing .ssm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 30px; border: 2px solid transparent; border-radius: 0; font-family: var(--ssm-display); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; text-transform: none; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .ssm-btn__icon { flex: none; width: 15px; height: 15px; transition: transform 0.18s ease; } .ssm-landing .ssm-btn:hover .ssm-btn__icon { transform: translateX(3px); } .ssm-landing .ssm-btn:focus-visible { outline: 3px solid var(--ssm-lime); outline-offset: 3px; } .ssm-landing .ssm-btn--lime { background: var(--ssm-lime); color: var(--ssm-lime-ink); } .ssm-landing .ssm-btn--lime:hover { background: #5FC94C; color: var(--ssm-lime-ink); } .ssm-landing .ssm-btn--pine { background: var(--ssm-pine); color: #FFFFFF; } .ssm-landing .ssm-btn--pine:hover { background: var(--ssm-pine-deep); color: #FFFFFF; } .ssm-landing .ssm-btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #FFFFFF; } .ssm-landing .ssm-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; } .ssm-landing .ssm-btn--outline { border-color: var(--ssm-lime); color: var(--ssm-lime); } .ssm-landing .ssm-btn--outline:hover { background: var(--ssm-lime); color: var(--ssm-pine); } /* ------------------------------------------------------------------ * * Comparsa allo scroll — solo CSS. * Dove animation-timeline non è supportato resta l'animazione al load: * in nessuno scenario il contenuto può restare invisibile. * ------------------------------------------------------------------ */ @keyframes ssm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .ssm-landing .ssm-rv { animation: ssm-rise 0.6s ease both; animation-delay: var(--ssm-d, 0s); } @supports (animation-timeline: view()) { .ssm-landing .ssm-rv { animation-delay: 0s; animation-duration: auto; animation-timing-function: linear; animation-timeline: view(); animation-range: entry 0% cover 24%; } } @media (prefers-reduced-motion: reduce) { .ssm-landing .ssm-rv { animation: none; } .ssm-landing *, .ssm-landing *::before, .ssm-landing *::after { transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------ * * Hero * ------------------------------------------------------------------ */ .ssm-hero { padding-block: clamp(40px, 6vw, 84px); } .ssm-hero__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .ssm-hero__title { /* il massimo è tarato perché "merita un packaging" stia su una riga nella colonna del testo: alzandolo il titolo va a cinque righe */ font-size: clamp(2.35rem, 4.9vw, 3.2rem); } .ssm-hero__title em { font-style: normal; color: var(--ssm-accent); } .ssm-hero__lede { max-width: 56ch; margin-top: 22px; font-size: 1.06rem; color: var(--ssm-mut); } .ssm-hero__usps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin: 30px 0 34px; } .ssm-hero__usps li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; font-weight: 600; line-height: 1.4; } .ssm-hero__usps svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 0; color: var(--ssm-pine); background: var(--ssm-lime-soft); } .ssm-hero__usps small { display: block; font-size: 0.9rem; font-weight: 400; color: var(--ssm-mut); } .ssm-hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .ssm-hero__alt { font-size: 0.92rem; color: var(--ssm-mut); } .ssm-hero__alt a { font-weight: 700; color: var(--ssm-pine); border-bottom: 1.5px solid var(--ssm-accent); } .ssm-hero__vis { position: relative; } .ssm-hero__panel { padding: clamp(18px, 2.6vw, 30px); border-radius: 0; background: var(--ssm-pine); } .ssm-hero__plate { overflow: hidden; border-radius: 0; border: var(--ssm-dash); background: var(--ssm-paper); } .ssm-hero__plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .ssm-hero__chip { position: absolute; top: -14px; right: 14px; padding: 9px 16px; border-radius: 0; background: var(--ssm-lime); color: var(--ssm-lime-ink); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .ssm-hero__badge { position: absolute; left: -10px; bottom: 26px; display: flex; gap: 11px; align-items: center; max-width: 240px; padding: 13px 16px; border: 1px solid var(--ssm-line); border-radius: 0; background: #FFFFFF; font-size: 0.82rem; line-height: 1.35; } .ssm-hero__badge svg { flex: none; width: 30px; height: 30px; color: var(--ssm-accent); } .ssm-hero__badge b { display: block; font-size: 0.84rem; } .ssm-hero__cap { margin-top: 12px; font-size: 0.8rem; font-style: italic; text-align: right; color: var(--ssm-mut); } @media (max-width: 900px) { .ssm-hero__grid { grid-template-columns: 1fr; } .ssm-hero__vis { max-width: 520px; } .ssm-hero__badge { left: 10px; bottom: 16px; } } @media (max-width: 560px) { .ssm-hero__usps { grid-template-columns: 1fr; } /* * Sotto i 560 px il cartellino sovrapposto alla foto copre la didascalia * e mangia mezzo prodotto: torna nel flusso, sotto il pannello. */ .ssm-hero__badge { position: static; max-width: none; margin-top: 14px; } .ssm-hero__cap { text-align: left; } } /* ------------------------------------------------------------------ * * Confronto * ------------------------------------------------------------------ */ .ssm-vs__head { max-width: 62ch; margin: 0 auto 46px; } .ssm-vs__head h2 { font-size: clamp(1.65rem, 3.1vw, 2.25rem); } .ssm-vs__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 34px); } .ssm-vs__card { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-card); } .ssm-vs__card--good { border-color: #CBDCA8; } .ssm-vs__tag { margin-bottom: 20px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; } .ssm-vs__card--bad .ssm-vs__tag { color: var(--ssm-clay); } .ssm-vs__card--good .ssm-vs__tag { color: var(--ssm-accent); } .ssm-vs__fig { overflow: hidden; margin-bottom: 22px; border-radius: 0; } .ssm-vs__fig svg { width: 100%; height: auto; } .ssm-vs__list { display: grid; gap: 13px; } .ssm-vs__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; } .ssm-vs__list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; } .ssm-vs__card--bad .ssm-vs__list li { color: var(--ssm-mut); } .ssm-vs__card--bad .ssm-vs__list svg { color: var(--ssm-clay); } .ssm-vs__card--good .ssm-vs__list li { font-weight: 600; } .ssm-vs__card--good .ssm-vs__list svg { color: var(--ssm-accent); } .ssm-vs__dot { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 5px solid var(--ssm-paper); border-radius: 0; background: var(--ssm-pine); color: #FFFFFF; font-family: var(--ssm-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; } @media (max-width: 820px) { .ssm-vs__grid { grid-template-columns: 1fr; } .ssm-vs__dot { position: static; transform: none; width: auto; height: auto; margin: -6px auto; border: 0; background: transparent; color: var(--ssm-mut); font-size: 0.8rem; letter-spacing: 0.3em; } } /* ------------------------------------------------------------------ * * Quattro motivi * ------------------------------------------------------------------ */ .ssm-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-card); } .ssm-why__cell { padding: clamp(22px, 2.6vw, 34px); border-left: 1px solid var(--ssm-line); } .ssm-why__cell:first-child { border-left: 0; } .ssm-why__cell svg { width: 38px; height: 38px; margin-bottom: 16px; color: var(--ssm-pine); } .ssm-why__cell h3 { margin-bottom: 8px; font-family: var(--ssm-body); font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .ssm-why__cell p { font-size: 0.9rem; line-height: 1.55; color: var(--ssm-mut); } @media (max-width: 920px) { .ssm-why__grid { grid-template-columns: 1fr 1fr; } .ssm-why__cell { border-top: 1px solid var(--ssm-line); } .ssm-why__cell:nth-child(-n + 2) { border-top: 0; } .ssm-why__cell:nth-child(odd) { border-left: 0; } } @media (max-width: 540px) { .ssm-why__grid { grid-template-columns: 1fr; } .ssm-why__cell { border-left: 0; } .ssm-why__cell:nth-child(2) { border-top: 1px solid var(--ssm-line); } } /* ------------------------------------------------------------------ * * I due percorsi: spedire / confezionare * ------------------------------------------------------------------ */ .ssm-paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); } .ssm-path { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3.2vw, 38px); border-radius: 0; } .ssm-path__kicker { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .ssm-path h3 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); } .ssm-path__ph { overflow: hidden; border-radius: 0; border: var(--ssm-dash); background: var(--ssm-panel); } .ssm-path--gift .ssm-path__ph { background: var(--ssm-panel-2); } .ssm-path__ph img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; /* come nelle card della homepage: il fondo bianco della foto si fonde col colore del pannello, così il prodotto sembra appoggiato lì sopra */ mix-blend-mode: multiply; } .ssm-path p { font-size: 0.96rem; } .ssm-path__tags { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-top: 2px; } .ssm-path__tags li { display: flex; gap: 9px; align-items: center; font-size: 0.9rem; font-weight: 600; } .ssm-path__tags svg { flex: none; width: 15px; height: 15px; } .ssm-path .ssm-btn { align-self: flex-start; margin-top: 6px; } .ssm-path--ship { background: var(--ssm-pine); color: #F2F1E8; } .ssm-path--ship .ssm-path__kicker { color: var(--ssm-lime); } .ssm-path--ship p { color: #D8DCCD; } .ssm-path--ship .ssm-path__tags svg { color: var(--ssm-lime); } .ssm-path--gift { border: 1px solid var(--ssm-line); background: var(--ssm-card); } .ssm-path--gift .ssm-path__kicker { color: var(--ssm-clay); } .ssm-path--gift p { color: var(--ssm-mut); } .ssm-path--gift .ssm-path__tags svg { color: var(--ssm-accent); } @media (max-width: 860px) { .ssm-paths { grid-template-columns: 1fr; } .ssm-path__ph img { aspect-ratio: 16 / 8; } } /* ------------------------------------------------------------------ * * Banda piccoli lotti * ------------------------------------------------------------------ */ .ssm-band { padding: clamp(26px, 3.6vw, 44px); border-radius: 0; background: var(--ssm-pine-deep); color: #F2F1E8; } .ssm-band__inner { display: grid; grid-template-columns: 1.1fr 1.6fr auto; gap: clamp(22px, 3vw, 40px); align-items: center; } .ssm-band h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); } .ssm-band__lead { margin-top: 10px; font-size: 0.9rem; color: #B9C2AC; } .ssm-band__items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; } .ssm-band__items li { display: flex; gap: 12px; align-items: center; font-size: 0.92rem; font-weight: 600; line-height: 1.35; } .ssm-band__items svg { flex: none; width: 36px; height: 36px; padding: 7px; border: 1px solid rgba(201, 232, 107, 0.4); border-radius: 0; color: var(--ssm-lime); } .ssm-band__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .ssm-band__cta small { font-size: 0.82rem; color: #B9C2AC; } .ssm-band__cta small a { color: var(--ssm-lime); font-weight: 700; } @media (max-width: 1020px) { .ssm-band__inner { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 560px) { .ssm-band__items { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * Il viaggio del pacco * ------------------------------------------------------------------ */ .ssm-journey { background: var(--ssm-tint); } .ssm-journey__sub { margin-top: 16px; } .ssm-steps { display: flex; align-items: stretch; gap: 10px; margin-top: 52px; } .ssm-step { display: flex; flex: 1; flex-direction: column; gap: 10px; align-items: center; padding: 22px 16px 20px; border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-card); text-align: center; } .ssm-step svg { width: 34px; height: 34px; color: var(--ssm-pine); } .ssm-step b { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; } .ssm-step span { font-size: 0.82rem; line-height: 1.45; color: var(--ssm-mut); } .ssm-step--wow { border-color: var(--ssm-accent); } .ssm-step--wow svg { color: var(--ssm-accent); } .ssm-step--wow b { color: var(--ssm-accent); } .ssm-steps__arrow { flex: none; align-self: center; color: var(--ssm-clay); } .ssm-steps__arrow svg { width: 22px; height: 22px; } @media (max-width: 900px) { .ssm-steps { flex-direction: column; max-width: 420px; margin-inline: auto; } .ssm-steps__arrow svg { transform: rotate(90deg); } } /* ------------------------------------------------------------------ * * Soluzioni più richieste * ------------------------------------------------------------------ */ .ssm-sol__sub { margin-top: 16px; } .ssm-sol__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-top: 52px; } .ssm-landing .ssm-sol__card { display: flex; flex-direction: column; padding: 14px 14px 20px; border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-card); color: var(--ssm-ink); transition: background-color 0.2s ease, border-color 0.2s ease; } .ssm-landing .ssm-sol__card:hover { border-color: var(--ssm-ink); background: var(--ssm-paper); color: var(--ssm-ink); } .ssm-sol__plate { display: block; position: relative; overflow: hidden; border-radius: 0; border: var(--ssm-dash); background: var(--ssm-paper); } /* * Riquadro quadrato con "contain", non "cover": diverse foto di catalogo * hanno il bollino "SU MISURA" stampato in basso a destra e un ritaglio lo * troncherebbe a metà. Il fondo bianco delle foto si fonde con la carta * grazie a multiply, quindi il prodotto sembra appoggiato sul riquadro. */ .ssm-sol__plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; } .ssm-sol__chip { position: absolute; left: 10px; top: 10px; padding: 5px 11px; border-radius: 0; background: var(--ssm-pine); color: #FFFFFF; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .ssm-sol__chip--gold { background: var(--ssm-sand); color: #2A1F10; } .ssm-sol__card h3 { margin: 16px 6px 6px; font-family: var(--ssm-body); font-size: 1.04rem; font-weight: 700; line-height: 1.3; } .ssm-sol__card p { flex: 1; margin: 0 6px 14px; font-size: 0.87rem; line-height: 1.5; color: var(--ssm-mut); } .ssm-sol__more { display: flex; gap: 7px; align-items: center; margin: 0 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ssm-pine); } .ssm-sol__more svg { width: 14px; height: 14px; transition: transform 0.18s ease; } .ssm-sol__card:hover .ssm-sol__more svg { transform: translateX(3px); } @media (max-width: 920px) { .ssm-sol__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ssm-sol__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * Chi si rivolge a noi * ------------------------------------------------------------------ */ .ssm-aud__sub { margin-top: 16px; } .ssm-aud__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 48px; } .ssm-aud__item { display: flex; gap: 13px; align-items: center; padding: 20px 16px; border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-tint); font-size: 0.9rem; font-weight: 700; line-height: 1.3; } .ssm-aud__item svg { flex: none; width: 34px; height: 34px; padding: 7px; border: 1px solid var(--ssm-line); border-radius: 0; background: #FFFFFF; color: var(--ssm-pine); } @media (max-width: 920px) { .ssm-aud__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .ssm-aud__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * FAQ * ------------------------------------------------------------------ */ .ssm-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 48px; align-items: start; } .ssm-faq__item { padding: 0 20px; border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-card); } .ssm-faq__item[open] { border-color: #CBDCA8; } .ssm-faq__q { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 17px 0; font-size: 0.95rem; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; } .ssm-faq__q::-webkit-details-marker { display: none; } .ssm-faq__q:focus-visible { outline: 3px solid var(--ssm-accent); outline-offset: 4px; border-radius: 0; } .ssm-faq__sign { flex: none; width: 22px; height: 22px; color: var(--ssm-pine); transition: transform 0.2s ease; } .ssm-faq__item[open] .ssm-faq__sign { transform: rotate(45deg); } .ssm-faq__a { max-width: 60ch; padding: 0 0 18px; font-size: 0.9rem; color: var(--ssm-mut); } @media (max-width: 760px) { .ssm-faq__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * Chiusura * ------------------------------------------------------------------ */ .ssm-final { background: var(--ssm-pine); color: #F2F1E8; } .ssm-final__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 60px); align-items: center; } .ssm-final h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: #FFFFFF; } .ssm-final__sub { max-width: 52ch; margin-top: 18px; color: #C4CCB8; } .ssm-final__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; } .ssm-final__contacts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; font-size: 0.92rem; } .ssm-final__contacts a { display: inline-flex; gap: 9px; align-items: center; color: var(--ssm-lime); font-weight: 700; } .ssm-final__contacts svg { width: 17px; height: 17px; } /* niente rotazione né ombre morbide: il marchio è squadrato */ .ssm-final__vis .ssm-final__plate { overflow: hidden; border-radius: 0; border: 2px dashed var(--ssm-lime-soft); background: var(--ssm-paper); } .ssm-final__vis img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .ssm-final__vis figcaption { margin-top: 14px; font-size: 0.8rem; font-style: italic; text-align: center; color: #B9C2AC; } @media (max-width: 860px) { .ssm-final__grid { grid-template-columns: 1fr; } .ssm-final__vis { max-width: 440px; margin-inline: auto; } } /* ------------------------------------------------------------------ * * Foto con fondo non bianco * * Le foto di catalogo hanno quasi tutte il fondo bianco, e "multiply" le * fonde col riquadro colorato: il prodotto sembra appoggiato lì sopra. * Alcune però sono scatti in ambiente o su fondo colorato (la maglieria * nella scatola, le shopper su fondo nero, gli astucci su fondo arancio): * lì multiply sporcherebbe tutto. Questo modificatore lo disattiva. * ------------------------------------------------------------------ */ .ssm-landing .ssm-plate--foto img { mix-blend-mode: normal; } /* ------------------------------------------------------------------ * * Segmenti * * La griglia con cui una landing di settore si divide nei suoi * sottosettori (vino, birra, olio… / abbigliamento, scarpe, cosmetica…). * Ogni cella è un link a una categoria vera del catalogo: è il punto in * cui la landing smette di raccontare e consegna il visitatore al sito. * ------------------------------------------------------------------ */ .ssm-seg__sub { margin-top: 16px; } .ssm-seg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 22px); margin-top: 48px; } .ssm-landing .ssm-seg__card { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--ssm-line); border-radius: 0; background: var(--ssm-card); color: var(--ssm-ink); transition: background-color 0.2s ease, border-color 0.2s ease; } .ssm-landing .ssm-seg__card:hover { border-color: var(--ssm-ink); background: var(--ssm-paper); color: var(--ssm-ink); } .ssm-seg__card svg { width: 38px; height: 38px; color: var(--ssm-pine); } .ssm-seg__card h3 { font-family: var(--ssm-body); font-size: 1.02rem; font-weight: 700; line-height: 1.3; } .ssm-seg__card p { flex: 1; font-size: 0.88rem; line-height: 1.5; color: var(--ssm-mut); } .ssm-seg__card b { display: flex; gap: 7px; align-items: center; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ssm-pine); } .ssm-seg__card b svg { width: 14px; height: 14px; transition: transform 0.18s ease; } .ssm-landing .ssm-seg__card:hover b svg { transform: translateX(3px); } @media (max-width: 920px) { .ssm-seg__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ssm-seg__grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * * Personalizzazione: tre foto in fila con didascalia * * Serve a mostrare le lavorazioni (stampa a caldo, serigrafia, stampa * digitale) una accanto all'altra. Le foto restano quadrate: è il * riquadro a essere più basso, così la fila non domina la pagina. * ------------------------------------------------------------------ */ .ssm-craft__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); margin-top: 48px; } .ssm-craft__item figure { overflow: hidden; border: var(--ssm-dash); background: var(--ssm-panel-2); } .ssm-craft__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; mix-blend-mode: multiply; } .ssm-craft__item.ssm-plate--foto img { mix-blend-mode: normal; } .ssm-craft__item h3 { margin: 18px 0 6px; font-family: var(--ssm-body); font-size: 1rem; font-weight: 700; line-height: 1.3; } .ssm-craft__item p { font-size: 0.88rem; line-height: 1.5; color: var(--ssm-mut); } @media (max-width: 820px) { .ssm-craft__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }