/* * Scambialo design system — estratto dal mockup approvato * (design/home-concept-APPROVATO.html). Tutto scopato sotto .sc-page * (classe sul dei template del child) o prefissato sc- per non * toccare le pagine Elementor / i plugin. */ :root{ --paper:#faf7f2; --ink:#161512; --ink-soft:#55534d; --acid:#c5f04c; --acid-deep:#9ed31f; --line:#e4dfd5; --radius:18px; } .sc-page, .sc-page *{margin:0;padding:0;box-sizing:border-box} .sc-page ::selection{background:var(--acid);color:var(--ink)} html:has(body.sc-page){scroll-behavior:smooth;overflow-x:clip} body.sc-page{ font-family:'Schibsted Grotesk',sans-serif; /* !important: il Custom CSS del kit Elementor (post-5.css) forza body{background-color:#00A1F712!important} su tutto il sito */ background:var(--paper) !important; color:var(--ink); -webkit-font-smoothing:antialiased; } .sc-page::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } .sc-wrap{max-width:1280px;margin:0 auto;padding:0 32px} /* ───── header ───── */ .sc-header{ position:sticky;top:0;z-index:100; background:rgba(250,247,242,.92);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .sc-hbar{display:flex;align-items:center;justify-content:space-between;height:68px} .sc-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.04em;text-decoration:none;color:var(--ink)} .sc-logo em{font-style:normal;color:var(--acid-deep)} .sc-page nav{display:flex;gap:28px;align-items:center} .sc-page nav a{font-size:14.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .2s} .sc-page nav a:hover{color:var(--ink)} .sc-btn{ display:inline-flex;align-items:center;gap:8px; font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:14.5px; background:var(--ink);color:var(--paper);border:none;cursor:pointer; padding:11px 22px;border-radius:999px;text-decoration:none; transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s; } .sc-btn:hover{transform:translateY(-2px);background:#000} .sc-btn.acid{background:var(--acid);color:var(--ink)} .sc-btn.acid:hover{background:#d4fa61} /* ───── hero ───── */ .sc-hero{padding:36px 0 56px;position:relative} .sc-kicker{ display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px; animation:sc-rise .7s .05s cubic-bezier(.2,.8,.2,1) both; } .sc-kicker::before{content:'';width:34px;height:2px;background:var(--acid-deep)} .sc-page h1{ font-family:'Bricolage Grotesque',sans-serif;font-weight:800; font-size:clamp(52px,8.5vw,118px);line-height:.95;letter-spacing:-.03em; text-transform:uppercase; } .sc-page h1 .l1{display:block;animation:sc-rise .7s .12s cubic-bezier(.2,.8,.2,1) both} .sc-page h1 .l2{ display:block;font-family:'Fraunces',serif;font-style:italic;font-weight:400; text-transform:none;letter-spacing:-.01em;color:var(--ink); padding-left:.8em;animation:sc-rise .7s .22s cubic-bezier(.2,.8,.2,1) both; } .sc-page h1 .l2 mark{ background:linear-gradient(transparent 58%, var(--acid) 58%); color:inherit;padding:0 .08em; } .sc-page h1 .l3{display:block;animation:sc-rise .7s .32s cubic-bezier(.2,.8,.2,1) both} .sc-hero-foot{ display:flex;gap:48px;align-items:flex-end;justify-content:space-between; flex-wrap:wrap;margin-top:44px;animation:sc-rise .7s .45s cubic-bezier(.2,.8,.2,1) both; } .sc-hero-sub{max-width:380px;font-size:16.5px;line-height:1.55;color:var(--ink-soft)} .sc-hero-sub strong{color:var(--ink)} .sc-search{ flex:1;min-width:320px;max-width:560px;display:flex;align-items:stretch; background:#fff;border:2px solid var(--ink);border-radius:999px; padding:0;overflow:hidden;box-shadow:6px 6px 0 var(--acid); transition:box-shadow .2s, transform .2s; } .sc-search:focus-within{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--acid)} .sc-search input{ flex:1;min-width:0;border:none;outline:none;background:none;font-family:inherit; font-size:16px;color:var(--ink);padding:14px 12px 14px 24px; } .sc-search .sc-btn{border-radius:0;padding:0 26px;align-self:stretch} .sc-search .sc-btn:hover{transform:none;background:#d4fa61} .sc-search input::placeholder{color:#a39e92} .sc-stats{display:flex;gap:36px;margin-top:40px;animation:sc-rise .7s .55s cubic-bezier(.2,.8,.2,1) both} .sc-stat b{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:800;display:block;letter-spacing:-.02em} .sc-stat span{font-size:13px;color:var(--ink-soft)} @keyframes sc-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} /* ───── marquee città ───── */ .sc-marquee{ background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap; padding:14px 0;transform:rotate(-1.2deg) scale(1.02);margin:30px 0 0; } .sc-marquee-track{display:inline-block;animation:sc-slide 28s linear infinite} .sc-marquee span{ font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px; letter-spacing:.12em;text-transform:uppercase;margin:0 18px; } .sc-marquee i{font-style:normal;color:var(--acid)} @keyframes sc-slide{to{transform:translateX(-50%)}} /* ───── griglia prodotti ───── */ .sc-section{padding:84px 0 40px} .sc-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:36px} .sc-page h2{ font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(32px,4vw,52px); letter-spacing:-.03em;text-transform:uppercase; } .sc-page h2 em{font-family:'Fraunces',serif;font-style:italic;font-weight:400;text-transform:none} .sc-sec-head a{font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--acid)} .sc-grid{ display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:18px; } .sc-card{ position:relative;border-radius:var(--radius);overflow:hidden;background:#e9e4da; text-decoration:none;color:var(--ink);grid-row:span 2; transition:transform .25s cubic-bezier(.2,.8,.2,1); } .sc-card.tall{grid-row:span 3} .sc-card:hover{transform:translateY(-5px)} .sc-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)} .sc-card:hover img{transform:scale(1.045)} .sc-card .sc-veil{ position:absolute;inset:0; background:linear-gradient(180deg,transparent 52%,rgba(12,11,9,.78) 100%); } .sc-card .sc-meta{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-direction:column;gap:7px} .sc-card .sc-city{ align-self:flex-start;background:var(--acid);color:var(--ink); font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:4px 11px;border-radius:999px; } .sc-card .sc-cities{display:flex;flex-wrap:wrap;gap:6px;max-width:100%} .sc-card .sc-city{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sc-pmeta .sc-cities{display:flex;flex-wrap:wrap;gap:8px} .sc-card .sc-title{ color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px; letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between;gap:8px; } .sc-card .sc-title .arrow{opacity:0;transform:translateX(-6px);transition:.25s} .sc-card:hover .sc-title .arrow{opacity:1;transform:none} /* cuore preferiti sulle card (markup .wishlist-heart = snippet 20, JS già delegato) */ .sc-card .wishlist-heart{ top:12px;right:12px;font-size:25px;line-height:1; color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55); } .sc-card .wishlist-heart.active .heart-icon{filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))} /* ───── come funziona ───── */ .sc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)} .sc-step{padding:40px 32px 48px;border-left:1px solid var(--line)} .sc-step:first-child{border-left:none;padding-left:0} .sc-step .n{ font-family:'Fraunces',serif;font-style:italic;font-size:64px;color:var(--acid-deep); line-height:1;display:block;margin-bottom:18px; } .sc-step h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em;margin-bottom:10px;text-transform:uppercase} .sc-step p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)} /* ───── CTA ───── */ .sc-cta{ background:var(--acid);border-radius:28px;margin:40px 0 90px; padding:clamp(40px,6vw,80px);display:flex;align-items:center;gap:40px; justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden; } .sc-cta::before{ content:'✺';position:absolute;right:-30px;top:-58px;font-size:230px;opacity:.16; font-family:'Fraunces',serif;pointer-events:none; } .sc-cta h2{max-width:560px} .sc-cta p{font-size:16px;font-weight:500;margin-top:10px;max-width:480px} .sc-cta .sc-btn{position:relative;z-index:1} /* ───── footer ───── */ .sc-footer{background:var(--ink);color:#b8b4ab;padding:56px 0 40px} .sc-fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} .sc-footer .sc-logo{color:var(--paper);font-size:30px} .sc-footer nav{flex-direction:column;gap:10px;align-items:flex-start} .sc-footer nav a{color:#b8b4ab} .sc-footer nav a:hover{color:var(--acid)} .sc-fbottom{border-top:1px solid #2c2a25;margin-top:44px;padding-top:24px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} @media(max-width:900px){ .sc-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px} .sc-steps{grid-template-columns:1fr} .sc-step{border-left:none;border-top:1px solid var(--line);padding-left:0} .sc-header nav.main{display:none} /* il min-width:320px desktop + 64px di padding wrap sfora i viewport ≤384px */ .sc-search{min-width:0} /* card mobile: SOLO la prima città, pill più piccola, mai coprire la foto */ .sc-card .sc-cities .sc-city:nth-child(n+2){display:none} .sc-card .sc-city{font-size:10.5px;padding:3px 9px;max-width:92%} } /* ───── pagina prodotto ───── */ .sc-product{padding:0 0 50px} .sc-pgal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;background:var(--ink);scrollbar-width:none} .sc-pgal::-webkit-scrollbar{display:none} .sc-pgal figure{flex:0 0 100%;margin:0;scroll-snap-align:center;height:60vh;min-height:320px;max-height:540px} .sc-pgal img{width:100%;height:100%;object-fit:cover;display:block} .sc-pgal-empty{display:flex;align-items:center;justify-content:center;font-size:80px;color:var(--acid);font-family:'Fraunces',serif} .sc-pgal-hint{font-size:13px;color:var(--ink-soft);margin-top:10px;letter-spacing:.04em} .sc-pinfo{padding-top:26px;max-width:760px} .sc-pmeta{display:flex;align-items:center;gap:14px;margin-bottom:14px} .sc-pmeta .sc-city{background:var(--acid);color:var(--ink);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px;text-decoration:none} .sc-pdate{font-size:13px;color:var(--ink-soft)} .sc-ptitle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .sc-page h1.sc-ptitle{font-size:clamp(34px,6vw,64px);margin-bottom:14px} .sc-pfav.wishlist-heart{position:static;font-size:34px;flex:0 0 auto;margin-top:6px;color:var(--ink);text-shadow:none} .sc-pdesc{font-size:16.5px;line-height:1.65;color:var(--ink-soft);margin:6px 0 26px} .sc-pdesc p{margin-bottom:12px} .sc-seller{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;background:#fff;margin-bottom:22px} .sc-seller img{border-radius:999px;display:block} .sc-seller b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;letter-spacing:-.01em} .sc-seller span{font-size:13.5px;color:var(--ink-soft)} .sc-seller-link{margin-left:auto;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--acid);white-space:nowrap} .sc-chatcta a, .sc-chatcta .sc-btn{ display:flex;align-items:center;justify-content:center;width:100%; background:var(--acid) !important;color:var(--ink) !important;border:none;cursor:pointer; font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:16.5px; padding:16px 24px;border-radius:999px;text-decoration:none !important; transition:transform .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 18px rgba(22,21,18,.16); } .sc-chatcta a:hover{transform:translateY(-2px)} .sc-own{font-size:14.5px;color:var(--ink-soft);font-style:italic} .sc-related{padding-top:60px} @media(max-width:900px){ /* CTA chat sticky sopra la bottom nav */ .sc-chatcta{position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:115} .sc-product{padding-bottom:120px} } @media(min-width:901px){ .sc-pgal figure{flex:0 0 42%} /* 1 foto: full width, niente bande nere; 2 foto: metà e metà */ .sc-pgal.sc-n1 figure{flex:0 0 100%;max-height:520px} .sc-pgal.sc-n2 figure{flex:0 0 50%} .sc-pgal{border-radius:0 0 var(--radius) var(--radius)} .sc-chatcta{max-width:420px} } /* ───── preferiti ───── */ .sc-favs{min-height:55vh} .sc-favcount{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:.55em;vertical-align:.45em;color:var(--acid-deep);text-transform:none} .sc-empty{border:1px dashed var(--line);border-radius:var(--radius);padding:56px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px} .sc-empty .sc-hero-sub{max-width:440px} .sc-heart-demo{color:var(--acid-deep);font-size:1.2em} .sc-card .remove-from-wishlist{ position:absolute;top:12px;right:12px;z-index:10;width:34px;height:34px;border-radius:999px; background:rgba(22,21,18,.78) !important;color:var(--paper) !important;border:none;cursor:pointer; font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center; transition:transform .2s, background .2s; } .sc-card .remove-from-wishlist:hover{transform:scale(1.12);background:#000 !important} /* bottom nav mobile (pattern già noto agli utenti del sito). NB specificità: .sc-page nav{display:flex} (0,1,1) batte .sc-bottomnav (0,1,0) — era il bug "bottom nav visibile su desktop" (punch #5). Da qui i selettori nav.sc-bottomnav e .sc-page .sc-bottomnav. */ nav.sc-bottomnav{display:none} @media(max-width:900px){ .sc-page nav.sc-bottomnav{ display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120; background:var(--ink);justify-content:space-evenly; gap:0; /* annulla il gap:28px di .sc-page nav (overflow a 320px) */ padding:8px 14px calc(8px + env(safe-area-inset-bottom)) 10px; } .sc-page .sc-bottomnav a{ color:var(--paper);text-decoration:none;font-size:10px;font-weight:700; display:flex;flex-direction:column;align-items:center;gap:2px;letter-spacing:.04em; } .sc-page .sc-bottomnav a:hover{color:var(--paper)} /* :hover persistente su touch: mai ink-su-ink */ .sc-bottomnav a .ico{line-height:0} .sc-bottomnav a .ico svg{width:22px;height:22px;display:block} .sc-page .sc-bottomnav a.active{color:var(--acid)} .sc-page .sc-bottomnav a.active:hover{color:var(--acid)} .sc-page{padding-bottom:62px} /* spazio per la bottom nav */ } /* badge preferenze privacy iubenda: su mobile NON deve coprire la bottom nav, ma DEVE restare visibile/cliccabile (obbligo privacy) → lo si alza e rimpicciolisce */ @media(max-width:900px){ .iubenda-tp-btn[data-tp-float^="bottom"]{ bottom:calc(70px + env(safe-area-inset-bottom)) !important; transform:scale(.82);transform-origin:bottom right; } }