/** Shopify CDN: Minification failed Line 1715:10 Expected identifier but found whitespace Line 1715:16 Unexpected ";" **/ /* Google Fonts: Jost 300–800 Caricato qui per evitare il warning RemoteAsset nel file liquid */ @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap'); /* ═══════════════════════════════════════════════════ Skön Skin Test — skon-quiz.css asset: assets/skon-quiz.css Aggiornato: 30 aprile 2026 — 03:00 Versione: 5.1.2 Modifiche rispetto a 5.0.0: - Sticky bar: NC verde / RC arancione, chiusa di default, stile elegante - Gallery detail sheet: 1:1 aspect-ratio, scroll orizzontale - Accordion detail: classi .detail-acc-item/title/body - Tagline verde inline nel detail sheet - Varianti compatte .var-opt--compact / .var-list--compact - Foto tonalità: .var-opt-img-wrap / .var-opt-img / .var-opt-zoom - Lightbox AK: .ak-lb-overlay e classi correlate - Banner autofill: .name-autofill-title / .name-autofill-body - Resume: .resume-mini-title / .resume-pill-row / .resume-pill-q DIPENDENZA: skon-tokens.css deve essere caricato prima di questo file. I token locali (:root) sono ora alias dei token condivisi --skon-*. ═══════════════════════════════════════════════════ */ /* Nasconde header, footer e announcement bar del tema quando la classe .template-quiz è applicata all' */ .template-quiz .shopify-section-group-header-group, .template-quiz #shopify-section-sections--25042149376375__header_announcements_kcHY6p, .template-quiz #shopify-section-sections--25042149376375__header_section, .template-quiz footer.site-footer, .template-quiz #shopify-section-footer { display: none !important; } /* Azzera padding del main content imposto dal tema */ .template-quiz main#MainContent, .template-quiz .main-page-title { padding: 0 !important; margin: 0 !important; } /* ══════════════════════════════════════════════════════ TOKEN LOCALI — alias dei token condivisi skon-tokens.css Il codice del quiz usa ancora questi nomi brevi internamente. Modificare i valori qui è sufficiente per aggiornare l'intero quiz. ══════════════════════════════════════════════════════ */ :root { --green: var(--skon-green); --green-mid: var(--skon-green-mid); --green-dark: var(--skon-green-dark); --green-pale: #e8f2ed; /* mantenuto come solido — usato in animazione selPulse e background opaco */ --green-xpale: #f2f8f5; /* idem */ --bg: var(--skon-bg); --surface: var(--skon-surface); --charcoal: var(--skon-charcoal); --ink: var(--skon-ink); --muted: var(--skon-muted); --orange: var(--skon-orange); --orange-pale: #fdeadd; --fuchsia: #e85a9b; --fuchsia-pale:#fce9f2; --blue-pale: #e4eff7; --border-gray: var(--skon-border-gray); --radius: var(--skon-radius-md); /* 8px — era 4px */ --hh: 64px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--ink);font-family:'Jost',sans-serif;font-weight:300;min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent} /* Grain texture — dimensione sensoriale brand identity Skön */ body::after{ content:''; position:fixed;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events:none;z-index:0; } /* progress */ .progress-wrap{position:fixed;top:0;left:0;right:0;height:3px;background:var(--border-gray);z-index:200} .progress-bar{height:100%;background:var(--orange);width:0%;transition:width .5s var(--skon-ease-progress)} /* header */ .site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:var(--hh);background:rgba(250,248,245,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-gray)} .logo-mark{display:flex;align-items:center} .logo-img{height:38px;width:auto;max-width:120px;flex-shrink:0;display:block} .header-step { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .header-right { display: flex; align-items: center; gap: 16px; } .header-cart { position: relative; display: none; align-items: center; justify-content: center; color: var(--charcoal); text-decoration: none; transition: opacity var(--skon-dur-fast); } .header-cart.visible { display: flex; } .header-cart:hover { opacity: .65; } .cart-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #fff; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; padding: 0 4px; pointer-events: none; } /* shell */ .quiz-shell{position:relative;z-index:1;min-height:100vh;padding:calc(var(--hh) + 14px) 20px 48px} /* screens */ .screen{display:none;width:100%;max-width:560px;margin:0 auto;animation:fadeUp var(--skon-dur-md) var(--skon-ease) both} .screen.active{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* eyebrow */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:14px} .eyebrow::before{content:'';width:16px;height:2px;background:var(--green);flex-shrink:0} /* intro */ .intro-headline{font-family:'Jost',sans-serif;font-size:clamp(46px,14vw,76px);font-weight:700;line-height:.93;letter-spacing:-.01em;text-transform:uppercase;color:var(--charcoal);margin-bottom:18px} .intro-headline .accent{color:var(--orange);font-style:italic;font-weight:300;text-transform:none;letter-spacing:0} .intro-body{font-size:16px;font-weight:400;line-height:1.7;color:var(--ink);margin-bottom:24px} .intro-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px} .pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1.5px solid var(--border-gray);border-radius:40px;font-size:14px;color:var(--ink)} .pill-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0} /* question */ .q-category{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:8px} .q-text{font-family:'Jost',sans-serif;font-size:clamp(24px,7vw,38px);font-weight:600;line-height:1.05;text-transform:uppercase;color:var(--charcoal);margin-bottom:6px} .q-sub{font-size:15px;font-weight:400;color:var(--ink);line-height:1.6;margin-bottom:20px} /* options */ .opts{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:20px} .opts.cols-3{grid-template-columns:repeat(3,1fr)} .opt{position:relative;background:var(--surface);border:1.5px solid var(--border-gray);border-radius:var(--radius);padding:13px 15px 13px 44px;cursor:pointer;text-align:left;min-height:54px;transition:border-color var(--skon-dur-fast),background var(--skon-dur-fast);-webkit-user-select:none;user-select:none} .opt::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-gray);background:white;transition:border-color var(--skon-dur-fast),background var(--skon-dur-fast)} .opt:active{background:var(--green-xpale)} .opt.selected{border-color:var(--green);background:var(--green-pale);border-left:3px solid var(--green)} .opt.selected::before{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px white} .opt.has-icon{padding:13px 15px 13px 15px;text-align:left;display:flex;align-items:center;gap:12px} .opt.has-icon::before{display:none} .opt-icon{display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;flex-shrink:0;width:32px;margin-bottom:0} .opt-check{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s} .opt-check svg{width:10px;height:10px} .opt.selected .opt-check{opacity:1} .opt-title{font-family:'Jost',sans-serif;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--charcoal);display:block;margin-bottom:2px} .opt-desc{font-size:15px;font-weight:400;color:var(--ink);line-height:1.45;display:block} .opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } /* buttons */ .btn-row{display:flex;gap:8px;align-items:center;position:sticky;bottom:0;z-index:10;background:var(--bg);padding:10px 0 16px;box-shadow:0 -14px 20px 6px var(--bg);margin-top:16px} .btn-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;height:var(--skon-btn-h-lg);background:var(--green);color:white;font-family:'Jost',sans-serif;font-size:var(--skon-fs-btn);font-weight:var(--skon-btn-fw);letter-spacing:var(--skon-btn-ls);text-transform:uppercase;border:none;border-radius:var(--radius);cursor:pointer;transition:background var(--skon-dur-fast);-webkit-appearance:none} .btn-primary:active:not(.off){background:var(--green-dark)} .btn-primary.off{opacity:.35;pointer-events:none} .btn-back{display:flex;align-items:center;justify-content:center;width:46px;height:var(--skon-btn-h-lg);flex-shrink:0;background:none;border:1.5px solid var(--border-gray);border-radius:var(--radius);color:var(--muted);cursor:pointer;transition:border-color var(--skon-dur-fast),color var(--skon-dur-fast)} .btn-back:active{border-color:var(--charcoal);color:var(--charcoal)} /* Bottoni prodotto risultati */ .prod-btn-row{display:flex;gap:8px;margin-top:12px} .prod-btn-outline{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;background:white;color:var(--green);border:1.5px solid var(--green);font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;border-radius:var(--radius);text-decoration:none;cursor:pointer;transition:background var(--skon-dur-fast)} .prod-btn-outline:active{background:var(--green-pale)} .prod-btn-cart{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;background:var(--green);color:white;border:none;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;border-radius:var(--radius);cursor:pointer;transition:background var(--skon-dur-fast)} .prod-btn-cart:active{background:var(--green-dark)} .prod-btn-cart.adding{opacity:.6;pointer-events:none} .prod-btn-cart.added{background:var(--green-dark)} /* Sezione "perché per te" */ .prod-why-you{margin-top:10px;padding:10px 12px;background:var(--green-xpale);border-left:2.5px solid var(--green);border-radius:0 var(--radius) var(--radius) 0} .prod-why-you-label{font-family:'Jost',sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:4px} .prod-why-you-text{font-size:15px;font-weight:300;color:var(--ink);line-height:1.6} /* Copia codice */ .code-wrap{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 14px} .code-val{font-family:'Jost',sans-serif;font-size:20px;font-weight:700;letter-spacing:.15em;color:#a8e6cf;background:rgba(255,255,255,.12);padding:6px 18px;border:1px dashed rgba(255,255,255,.45);border-radius:var(--skon-radius-sm)} .result-cta--return .code-val{color:#7a2e00!important;background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.5)!important} .copy-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);cursor:pointer;flex-shrink:0;transition:background var(--skon-dur-fast)} .copy-btn:active{background:rgba(255,255,255,.3)} .copy-btn svg{width:16px;height:16px;stroke:rgba(255,255,255,.85);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .copy-toast{font-size:11px;color:rgba(255,255,255,.65);margin-top:-6px;margin-bottom:10px;text-align:center;min-height:16px;transition:opacity .3s} /* email */ .reveal-box{background:var(--green-xpale);border:1.5px solid rgba(31,88,66,.2);border-left:3px solid var(--green);border-radius:var(--radius);padding:18px;margin-bottom:22px} .reveal-box[open]{padding:18px} .reveal-box:not([open]){padding:12px 18px} .reveal-box summary,.reveal-label{font-family:'Jost',sans-serif;font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--green);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none} .reveal-box summary::-webkit-details-marker{display:none} .reveal-box:not([open]) summary{margin-bottom:0} .reveal-box summary::after{content:'＋';font-size:14px;font-weight:400;transition:transform 200ms} .reveal-box[open] summary::after{content:'－'} .reveal-list{list-style:none} .reveal-list li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-top:1px solid rgba(31,88,66,.1);font-size:14px;font-weight:400;color:var(--ink);line-height:1.5} .reveal-list li:first-child{border-top:none;padding-top:0} .rl-bullet{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:6px} .field-wrap{margin-bottom:12px} .field-label{display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .field-input{width:100%;padding:14px 15px;background:white;border:1.5px solid var(--border-gray);border-radius:var(--radius);font-family:'Jost',sans-serif;font-size:16px;font-weight:300;color:var(--charcoal);outline:none;-webkit-appearance:none;transition:border-color var(--skon-dur-fast)} .field-input:focus{border-color:var(--green)} .field-input::placeholder{color:#c5bfb9} .field-error{font-size:11px;color:var(--skon-error);margin-top:4px;display:none} .field-error.show{display:block} .privacy-row{display:flex;gap:12px;align-items:flex-start;margin-top:14px} .privacy-row input[type="checkbox"]{margin-top:2px;flex-shrink:0;accent-color:var(--green);width:18px;height:18px;cursor:pointer} .privacy-row label{font-size:14px;font-weight:300;color:var(--muted);line-height:1.6} .privacy-row a{color:var(--green)} /* processing */ .proc-wrap{text-align:center;padding:80px 0} .proc-ring{width:42px;height:42px;border:2px solid var(--border-gray);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 22px} @keyframes spin{to{transform:rotate(360deg)}} .proc-title{font-family:'Jost',sans-serif;font-size:24px;font-weight:600;text-transform:uppercase;color:var(--charcoal);margin-bottom:6px} .proc-sub{font-size:14px;font-weight:400;color:var(--ink)} .proc-gif{display:block;width:180px;height:auto;margin:32px auto 0;border-radius:12px;opacity:0;animation:procFadeIn .6s ease .3s forwards} @keyframes procFadeIn{to{opacity:1}} /* result */ .result-flag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--green-pale);border:1px solid var(--green);border-radius:40px;margin-bottom:18px} .result-flag-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.4}} .result-flag-text{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green)} .result-title{font-family:'Jost',sans-serif;font-size:clamp(26px,7vw,44px);font-weight:700;text-transform:uppercase;color:var(--green);margin-bottom:12px;line-height:1.0} .result-profile-text{font-size:16px;font-weight:300;color:var(--ink);line-height:1.75;margin-bottom:28px} .result-products-head{font-family:'Jost',sans-serif;font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--border-gray)} /* product card */ .prod-item{padding:18px 0;border-bottom:1px solid var(--border-gray)} .prod-item:last-child{border-bottom:none} .prod-gallery{display:flex;gap:5px;margin-bottom:12px;border-radius:var(--radius);overflow:hidden} .prod-gallery--single{display:block} .prod-gallery--single .prod-gimg{width:100%;height:180px;object-fit:cover;border-radius:var(--radius);cursor:zoom-in} .prod-gallery-icon{font-size:32px;margin-bottom:12px;text-align:center;padding:12px;background:var(--green-pale);border-radius:var(--radius)} .prod-gimg{flex:1;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);background:var(--green-pale);min-width:0;display:block;width:100%} .prod-step{font-family:'Jost',sans-serif;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid var(--green-pale)} .prod-name{font-family:'Jost',sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--charcoal);margin-bottom:4px;line-height:1.1} .prod-subtitle{font-size:14px;font-weight:400;color:var(--muted);margin-bottom:6px;line-height:1.4} .prod-why{font-size:14px;font-weight:400;color:var(--ink);line-height:1.5;margin-bottom:8px} .prod-badge{display:inline-block;font-family:'Jost',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--green-pale);padding:3px 10px;border-radius:20px} .prod-badge.badge-orange,.prod-badge.badge-collagen,.prod-badge.badge-spf{color:#7a3010;background:var(--orange-pale)} .prod-badge.badge-proaging,.prod-badge.badge-forever{color:#6a1040;background:var(--fuchsia-pale)} .prod-badge.badge-idrata,.prod-badge.badge-staysoft{color:#1a4a6e;background:var(--blue-pale)} .prod-badge.badge-green,.prod-badge.badge-imperfect{color:var(--green-dark);background:var(--green-pale)} .prod-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green);text-decoration:none;border-bottom:1px solid rgba(31,88,66,.4);padding-bottom:1px} /* cta */ .result-cta{margin-top:30px;background:var(--green);border-radius:var(--radius);padding:26px 22px;text-align:center} .result-cta--return{background:var(--orange)} .result-cta--return .btn-cta{background:var(--charcoal);color:white} .result-cta--return .btn-cta:hover{background:#111} .result-cta-title{font-family:'Jost',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;color:white;margin-bottom:8px} .result-cta-code{display:inline-block;font-family:'Jost',sans-serif;font-size:20px;font-weight:700;letter-spacing:.15em;color:#a8e6cf;background:rgba(255,255,255,.12);padding:6px 18px;border:1px dashed rgba(255,255,255,.45);border-radius:var(--skon-radius-sm);margin:10px 0 14px} .result-cta--return .result-cta-code{color:#7a2e00!important;background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.5)!important} .result-cta-sub{font-size:15px;color:rgba(255,255,255,.82);font-weight:300;line-height:1.7;margin-bottom:18px} .btn-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:var(--skon-btn-h-lg);background:white;color:var(--green);font-family:'Jost',sans-serif;font-size:var(--skon-fs-btn);font-weight:700;letter-spacing:var(--skon-btn-ls);text-transform:uppercase;border:none;border-radius:var(--radius);text-decoration:none;cursor:pointer;transition:background var(--skon-dur-fast)} .btn-cta:active{background:var(--green-pale)} /* Opzioni con icona inline (Q2 tipo pelle, Q5 timing) — layout orizzontale */ .opt:has(.opt-icon) { display: flex; align-items: center; gap: 12px; padding: 13px 15px 13px 15px; } .opt:has(.opt-icon)::before { display: none; } .opt:has(.opt-icon) .opt-icon { flex-shrink: 0; width: 32px; display: flex; align-items: center; justify-content: center; } .opt:has(.opt-icon) .opt-check { top: 8px; right: 8px; } .opt:has(.opt-icon) .opt-title, .opt:has(.opt-icon) .opt-desc { display: block; } /* Opzioni cols-3 con icona (Q4 routine, Q6 sole): verticale centrato */ .opts.cols-3 .opt.has-icon, .opts.cols-3 .opt:has(.opt-icon) { flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 12px; gap: 6px; } .opts.cols-3 .opt.has-icon .opt-icon, .opts.cols-3 .opt:has(.opt-icon) .opt-icon { width: auto; font-size: 24px; } .opts.cols-3 .opt-text { align-items: center; text-align: center; } /* ── PREZZI NEL POPUP VARIANTI ───────────────────────── */ .var-opt-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; } .var-price-original { font-size: 12px; font-weight: 400; color: var(--muted); text-decoration: line-through; } .var-price-discounted { font-size: 14px; font-weight: 700; color: var(--green); } /* Seconda riga prezzo per cliente di ritorno */ .var-price-second-line { display: block; font-size: 11px; font-weight: 400; color: var(--orange); margin-top: 2px; font-style: italic; } .var-price-second-line strong, .var-price-second-line span { font-weight: 700; color: var(--orange); font-style: normal; } /* ── NOTA SCONTO ─────────────────────────────────────── */ .var-discount-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--green-xpale); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; font-size: 13px; font-weight: 400; color: var(--ink); line-height: 1.5; margin-bottom: 14px; } .var-discount-note--repeat { background: var(--orange-pale); border-left-color: var(--orange); } .var-discount-text { display: flex; flex-direction: column; gap: 2px; } .var-checkout-note { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } .var-discount-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; background: var(--green); color: white; flex-shrink: 0; margin-top: 1px; } .var-discount-note--repeat .var-discount-badge { background: var(--orange); } @media(min-width:480px){ .site-header{padding:0 28px} .quiz-shell{padding-left:28px;padding-right:28px} } @media(min-width:640px){ .site-header{padding:0 max(28px,calc(50vw - 300px))} .logo-img{height:34px;max-width:110px} .quiz-shell{padding-left:max(28px,calc(50vw - 300px));padding-right:max(28px,calc(50vw - 300px))} } /* Pulse feedback selezione risposta */ @keyframes selPulse{0%{background:var(--green-pale)}50%{background:#c3e0d0}100%{background:var(--green-pale)}} .opt.selected.pulse{animation:selPulse .35s ease} /* Animazioni overlay condivise */ @keyframes lbIn { from { opacity: 0 } to { opacity: 1 } } @keyframes lbOut { to { opacity: 0 } } @keyframes varFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #detailActions { will-change: opacity, transform; } /* ── POPUP VARIANTI — DOM fisso, aperto via .var-overlay--open ─────── */ .var-overlay { position: fixed; inset: 0; z-index: var(--skon-z-overlay); background: rgba(0,0,0,.55); display: none; align-items: flex-end; justify-content: center; } .var-overlay--open { display: flex; animation: lbIn var(--skon-dur-fast) ease; } .var-sheet { background: white; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; max-height: 90vh; /* limite altezza per contenuti lunghi come AK 7 varianti */ overflow: hidden; display: flex; flex-direction: column; animation: sheetUp var(--skon-dur-md) var(--skon-ease); box-shadow: 0 -4px 32px rgba(0,0,0,.12); } @keyframes sheetUp { from { transform: translateY(100%) } to { transform: none } } /* Header prodotto nel variant sheet */ .var-product-header { display: flex; align-items: center; gap: 14px; padding: 0 20px 16px; } .var-product-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: var(--green-pale); flex-shrink: 0; } .var-product-name { font-family: 'Jost', sans-serif; font-size: var(--skon-fs-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 2px; } .var-product-slug { font-size: 12px; font-weight: 400; color: var(--muted); } .var-section-label { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); padding: 0 20px 10px; } .var-sheet-inner { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px 32px; } .var-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; /* Nessun max-height fisso: lo scroll è gestito da .var-sheet-inner */ } .var-opt { display: flex; align-items: stretch; /* stretch = img-wrap tocca i bordi verticali */ justify-content: space-between; padding: 13px 16px; border: 1.5px solid var(--border-gray); border-radius: var(--radius); cursor: pointer; gap: 10px; transition: border-color var(--skon-dur-fast), background var(--skon-dur-fast); overflow: hidden; /* necessario per img-wrap con margini negativi */ } .var-opt:active, .var-opt.selected { border-color: var(--green); background: var(--green-pale); } .var-opt-name { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 600; color: var(--charcoal); } .var-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .var-btn-primary { width: 100%; height: var(--skon-btn-h-md); background: var(--green); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-family: 'Jost', sans-serif; font-size: var(--skon-fs-btn); font-weight: var(--skon-btn-fw); letter-spacing: var(--skon-btn-ls); text-transform: uppercase; transition: background var(--skon-dur-fast); } .var-btn-primary:active { background: var(--green-dark); } .var-btn-primary.off { opacity: .35; pointer-events: none; } .var-btn-secondary { display: block; width: 100%; text-align: center; padding: 8px; font-size: var(--skon-fs-sm); color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: none; font-family: 'Jost', sans-serif; } /* nome chiave vecchia per retrocompatibilità con var-confirm in JS */ .var-confirm { display: none; } /* ── TAGLINE PRODOTTO ────────────────────────────────── */ .prod-tagline { font-family: 'Jost', sans-serif; font-size: var(--skon-fs-sm); font-weight: 300; font-style: italic; color: var(--green); line-height: 1.4; margin: 2px 0 6px; } /* ── PALLINI COLORATI opzioni quiz ───────────────────── */ .opt-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: inline-block; border: 1.5px solid rgba(0,0,0,0.08); } /* Domanda CONCERN (Q1) */ .opt-dot--proaging { background: #C4B2D0; } .opt-dot--spf { background: rgb(245, 122, 122); } .opt-dot--nutrizione { background: #D4A574; } .opt-dot--imperfezioni{ background: #7DB87D; } .opt-dot--idratazione { background: #7CB8D4; } .opt-dot--luminosita { background: #F2D06B; } /* Domanda TIPO PELLE (Q3) */ .opt-dot--secca { background: #E8C4A0; } .opt-dot--normale { background: #C8D4A4; } .opt-dot--mista { background: #B4C4D4; } .opt-dot--grassa { background: #A4C4A8; } .opt-dot--sensibile { background: #F4B8B8; } .opt-dot--disidratata { background: #A8D0E8; } /* Domanda ESPOSIZIONE SOLARE (Q5) */ .opt-dot--bassa { background: #C8D8E8; } .opt-dot--media { background: #F4D490; } .opt-dot--alta { background: #F4A050; } /* Opzione selezionata */ .opt.selected .opt-dot { filter: saturate(1.3) brightness(0.92); } /* ── BOTTONE "MI INTERESSA" ──────────────────────────── */ .prod-btn-interest { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--green); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-family: 'Jost', sans-serif; font-size: var(--skon-fs-sm); font-weight: var(--skon-btn-fw); letter-spacing: var(--skon-btn-ls); text-transform: uppercase; transition: background var(--skon-dur-fast), opacity var(--skon-dur-fast); white-space: nowrap; } .prod-btn-interest:active { background: var(--green-dark); } .prod-btn-interest.adding { opacity: .6; pointer-events: none; } .prod-btn-interest.added { background: var(--skon-green-mid); pointer-events: none; } /* ── OPT-DOT in contesto has-icon ────────────────────── */ .opt.has-icon .opt-dot { width: 16px; height: 16px; flex-shrink: 0; align-self: flex-start; margin-top: 3px; } /* ══════════════════════════════════════════════════════ QUIZ RESUME SYSTEM ══════════════════════════════════════════════════════ */ .resume-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .resume-eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--orange); flex-shrink: 0; } .resume-headline { font-family: 'Jost', sans-serif; font-size: clamp(28px, 8vw, 44px); font-weight: 700; line-height: 1.05; text-transform: uppercase; color: var(--charcoal); margin-bottom: 10px; } .resume-sub { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--ink); margin-bottom: 24px; } .resume-answers-box { background: var(--green-xpale); border: 1.5px solid rgba(31, 88, 66, .18); border-left: 3px solid var(--green); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 24px; } .resume-answers-label { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 12px; } .resume-pills-wrap { display: flex; flex-direction: column; gap: 10px; } /* Riga domanda → risposta */ .resume-pill-row { display: flex; flex-direction: column; gap: 4px; } .resume-pill-q { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .resume-pill { display: inline-flex; align-items: center; align-self: flex-start; padding: 5px 13px; background: white; border: 1.5px solid rgba(31, 88, 66, .25); border-radius: 40px; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; color: var(--charcoal); line-height: 1; } .btn-resume-confirm { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--skon-btn-h-lg); background: var(--green); color: white; font-family: 'Jost', sans-serif; font-size: var(--skon-fs-btn); font-weight: var(--skon-btn-fw); letter-spacing: var(--skon-btn-ls); text-transform: uppercase; border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--skon-dur-fast); margin-bottom: 10px; } .btn-resume-confirm:active { background: var(--green-dark); } .btn-resume-modify { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; background: none; color: var(--charcoal); font-family: 'Jost', sans-serif; font-size: var(--skon-fs-sm); font-weight: var(--skon-btn-fw); letter-spacing: .14em; text-transform: uppercase; border: 1.5px solid var(--border-gray); border-radius: var(--radius); cursor: pointer; transition: border-color var(--skon-dur-fast), color var(--skon-dur-fast); } .btn-resume-modify:active { border-color: var(--charcoal); } .resume-privacy-note { margin-top: 16px; font-size: 12px; font-weight: 300; color: var(--muted); line-height: 1.6; text-align: center; } .resume-mini-banner { display: flex; align-items: flex-start; gap: 8px; padding: 9px 13px; background: rgba(240, 112, 48, .08); border-left: 2.5px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 14px; font-size: 13px; font-weight: 400; color: var(--charcoal); line-height: 1.5; } .resume-mini-banner svg { flex-shrink: 0; margin-top: 2px; stroke: var(--orange); } /* ── PILL VANTAGGIO — coerente con nota prezzo NC Experience ─────────── */ .intro-pills .pill:last-child { background: rgba(240, 112, 48, .06); border-color: rgba(240, 112, 48, .25); color: #a84a10; font-weight: 700; } .intro-pills .pill:last-child .pill-dot { background: #c85a10; } /* ── Sheet handle — pattern condiviso tra variant e detail sheet ─────── */ .skon-sheet-handle-wrap { display: flex; align-items: center; justify-content: center; padding: 14px 0; cursor: grab; touch-action: none; user-select: none; border-radius: 20px 20px 0 0; position: relative; width: 100%; box-sizing: border-box; background: transparent; transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1); } .skon-sheet-handle-wrap:active { cursor: grabbing; } .skon-sheet-handle-pill { width: 40px; height: 5px; background: rgba(31, 88, 66, .22); border-radius: 3px; transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), background 120ms cubic-bezier(0.34,1.56,0.64,1), width 200ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, background; } /* ── OPT verbose: Q2 tipo pelle, Q3 desiderio, Q4 SPF ───────────────── */ /* Layout con testo principale lungo + tag secondario classificatorio */ .opts--compact { grid-template-columns: repeat(5, 1fr); gap: 8px; } .opts--compact .opt { padding: 14px 8px; text-align: center; justify-content: center; min-height: 48px; } .opts--compact .opt::before { display: none; } .opts--compact .opt-check { top: 6px; right: 6px; } .opts--compact .opt-title { font-size: 13px; letter-spacing: .02em; } /* ── Q1 — opzioni età: layout orizzontale con descrizione ─────────── */ .opt--age { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 44px; } .opt-age-label { font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--charcoal); flex-shrink: 0; min-width: 44px; } .opt.selected .opt-age-label { color: var(--green-dark); } .opt-age-desc { font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.4; } .opt.selected .opt-age-desc { color: var(--green); } /* ── Q2 — pill colorate tipo pelle ────────────────────────────────── */ .opt-body { display: flex; flex-direction: column; gap: 8px; } .opt-primary { font-size: 15px; font-weight: 400; /* NON bold — leggibilità */ color: var(--charcoal); line-height: 1.55; display: block; } .opt.selected .opt-primary { color: var(--green-dark); } /* Pill classificatoria */ .opt-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border: 1.5px solid transparent; align-self: flex-start; } .opt-pill--normale { background: #e8f5e9; color: #2e7d32; border-color: rgba(46,125,50,.2); } .opt-pill--disidratata { background: #e3f2fd; color: #1565c0; border-color: rgba(21,101,192,.2); } .opt-pill--secca { background: #fff3e0; color: #e65100; border-color: rgba(230,81,0,.2); } .opt-pill--mista { background: #f3e5f5; color: #6a1b9a; border-color: rgba(106,27,154,.2); } .opt-pill--stanca { background: #fce4ec; color: #880e4f; border-color: rgba(136,14,79,.2); } .opt.selected .opt-pill { filter: saturate(1.2) brightness(0.94); } /* ── Q3 / Q4 — stile titolo: font-weight 700 (correzione manuale Matteo) ─── */ .opt-desire-title { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 700; color: var(--charcoal); line-height: 1.55; margin-bottom: 0; display: block; } .opt.selected .opt-desire-title { color: var(--green-dark); } .opt-desire-desc { font-size: 14px; font-weight: 300; color: var(--ink); line-height: 1.5; display: block; margin-top: 4px; } .opt.selected .opt-desire-desc { color: var(--ink); } /* ── LAYOUT RISULTATO 4b ─────────────────────────────────────────────── */ .result-intro { margin-bottom: 28px; } .result-intro-text { font-size: 15px; font-weight: 300; color: var(--ink); line-height: 1.8; margin-top: 10px; } /* Header sezione (La tua routine / Skön Tips) */ .section-header { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border-gray); } .section-sub { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.5; margin-bottom: 16px; font-style: italic; } .section-separator { border: none; border-top: 1px solid var(--border-gray); margin: 32px 0; } /* Griglia card prodotti */ .cards-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .cards-grid--tips { gap: 12px; } /* Card prodotto (core e tip) */ .prod-card { display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1.5px solid var(--border-gray); border-radius: var(--radius); align-items: flex-start; } .prod-card--tip { border-style: dashed; border-color: rgba(31,88,66,.25); background: var(--green-xpale); } .prod-image { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--skon-radius-sm); overflow: hidden; background: var(--green-pale); } .prod-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .prod-card--tip .prod-image { width: 60px; height: 60px; } .prod-card .prod-info { flex: 1; min-width: 0; } .prod-step--core { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; display: block; } .prod-step--tip { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; display: block; } .prod-card .prod-name { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--charcoal); margin-bottom: 3px; line-height: 1.15; } .prod-card .prod-subtitle { font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 10px; } /* Box "Perché è l'ideale per te" */ .prod-card .prod-why-you { margin: 6px 0 10px; padding: 8px 11px; background: var(--green-xpale); border-left: 2.5px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; } .prod-card--tip .prod-why-you { background: rgba(31,88,66,.05); } .prod-why-you-label { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: 4px; } .prod-why-you-text { font-size: 13px; font-weight: 300; color: var(--ink); line-height: 1.6; display: block; } /* Bottoni affiancati nella card */ .prod-card .prod-btn-row { display: flex; gap: 7px; margin-top: 0; flex-wrap: nowrap; } /* "Mi interessa" affiancato al "Vedi prodotto" */ .prod-card .prod-btn-interest { flex: 1; justify-content: center; white-space: nowrap; padding: 8px 12px; font-size: 11px; } /* Pulsante "Vedi prodotto" — apre detail sheet */ .prod-btn-view { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 12px; flex: 1; background: none; color: var(--charcoal); border: 1.5px solid var(--border-gray); border-radius: var(--radius); cursor: pointer; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; transition: border-color var(--skon-dur-fast), background var(--skon-dur-fast); white-space: nowrap; } .prod-btn-view:active { border-color: var(--charcoal); background: var(--surface); } /* CTA bundle sezioni */ .cta-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--skon-btn-h-lg); background: var(--green); color: white; border: none; border-radius: var(--radius); cursor: pointer; font-family: 'Jost', sans-serif; font-size: var(--skon-fs-btn); font-weight: var(--skon-btn-fw); letter-spacing: var(--skon-btn-ls); text-transform: uppercase; transition: background var(--skon-dur-fast); margin-top: 12px; } .cta-primary:active:not(:disabled) { background: var(--green-dark); } .cta-primary:disabled { opacity: .5; pointer-events: none; } .cta-secondary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--skon-btn-h-lg); background: none; color: var(--green); border: 1.5px solid var(--green); border-radius: var(--radius); cursor: pointer; font-family: 'Jost', sans-serif; font-size: var(--skon-fs-btn); font-weight: var(--skon-btn-fw); letter-spacing: var(--skon-btn-ls); text-transform: uppercase; transition: background var(--skon-dur-fast); margin-top: 10px; } .cta-secondary:active:not(:disabled) { background: var(--green-pale); } .cta-secondary:disabled { opacity: .5; pointer-events: none; } /* Pulsante "Rifai il test" */ .restart-wrap { padding: 24px 0 8px; text-align: center; border-top: 1px solid var(--border-gray); margin-top: 20px; } .restart-prompt { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 12px; } .btn-restart { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; background: none; border: 1.5px solid var(--border-gray); border-radius: var(--radius); font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: border-color var(--skon-dur-fast), color var(--skon-dur-fast); } .btn-restart:active { border-color: var(--charcoal); color: var(--charcoal); } /* ── STICKY DISCOUNT BAR ──────────────────────────────────────────────────── */ .sticky-discount-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 150; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; will-change: transform; } /* ── COLLASSATA: sfondo pieno, testo centrato, no handle ─────────────────── */ .sticky-discount-bar.is-collapsed { border-radius: 12px 12px 0 0; box-shadow: 0 -3px 16px rgba(0,0,0,.15); padding: 0; } .sticky-discount-bar.is-collapsed.sticky--nc { background: var(--green); } .sticky-discount-bar.is-collapsed.sticky--rc { background: var(--orange); } /* ── APERTA: stesso sfondo, più padding ──────────────────────────────────── */ .sticky-discount-bar:not(.is-collapsed) { border-radius: 16px 16px 0 0; box-shadow: 0 -4px 32px rgba(0,0,0,.18); padding: 0 20px 28px; } .sticky-discount-bar.sticky--nc { background: var(--green); color: white; } .sticky-discount-bar.sticky--rc { background: var(--orange); color: white; } /* ── Handle: nascosta da collassata, visibile da aperta ──────────────────── */ .sticky-handle { width: 100%; display: flex; align-items: center; justify-content: center; padding: 10px 0 6px; cursor: grab; touch-action: none; user-select: none; flex-shrink: 0; background: transparent; transition: background 150ms; } .sticky-handle:active { cursor: grabbing; } .sticky-discount-bar.is-collapsed .sticky-handle { display: none; } .sticky-pill { width: 36px; height: 4px; background: rgba(255,255,255,.35); border-radius: 2px; transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), background 120ms cubic-bezier(0.34,1.56,0.64,1); will-change: transform, background; } /* ── Label collassata: centrata, bianca ──────────────────────────────────── */ .sticky-collapsed-label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 32px; cursor: pointer; width: 100%; box-sizing: border-box; } .sticky-discount-bar:not(.is-collapsed) .sticky-collapsed-label { display: none; } .sticky-collapsed-text { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: white; } .sticky-chevron-open { flex-shrink: 0; color: rgba(255,255,255,.75); transform: rotate(180deg); transition: transform 300ms; } /* ── Contenuto espanso ───────────────────────────────────────────────────── */ .sticky-expanded-content { width: 100%; } .sticky-discount-bar.is-collapsed .sticky-expanded-content { display: none; } /* Titolo uppercase piccolo */ .sticky-head-title { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.70); text-align: center; margin-bottom: 10px; } /* Box codice tratteggiato */ .sticky-code-box { display: flex; align-items: center; justify-content: space-between; border: 1.5px dashed rgba(255,255,255,.40); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; gap: 10px; } .sticky-code-value { font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: .18em; color: white; flex: 1; } .sticky-code-copy { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.15); border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: white; flex-shrink: 0; transition: background 150ms; } .sticky-code-copy:active { background: rgba(255,255,255,.28); } .sticky-body { font-size: 13px; font-weight: 300; color: rgba(255,255,255,.85); line-height: 1.5; text-align: center; margin-bottom: 14px; } .sticky-body strong { font-weight: 700; color: white; } .sticky-catalog-cta { display: block; width: 100%; padding: 11px 16px; background: white; border-radius: 8px; text-align: center; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-sizing: border-box; } .sticky--nc .sticky-catalog-cta { color: var(--green); } .sticky--rc .sticky-catalog-cta { color: var(--orange); } /* ── DETAIL SHEET — mini-PDP ─────────────────────────────────────────── */ .detail-overlay { position: fixed; inset: 0; z-index: var(--skon-z-overlay); background: rgba(0,0,0,.55); display: none; align-items: flex-end; justify-content: center; } .detail-overlay--open { display: flex; animation: lbIn var(--skon-dur-fast) ease; } .detail-sheet { background: white; width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; max-height: 94vh; /* aumentato per AK con 7 varianti */ overflow: hidden; display: flex; flex-direction: column; animation: sheetUp var(--skon-dur-md) var(--skon-ease); box-shadow: 0 -4px 32px rgba(0,0,0,.12); } .detail-sheet-inner { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 20px 40px; /* padding-bottom extra per evitare clipping */ } .detail-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 20px; color: var(--muted); font-size: 14px; } .skon-nc-micro-spinner { width: 28px; height: 28px; border: 2px solid var(--border-gray); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; } .detail-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; background: var(--green-pale); display: block; } .detail-name { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--charcoal); margin-bottom: 4px; } .detail-slug { font-size: 13px; font-weight: 400; color: var(--muted); margin-bottom: 12px; } .detail-tagline { font-size: 15px; font-weight: 300; font-style: italic; color: var(--green); line-height: 1.6; margin-bottom: 16px; } .detail-accordion { margin-bottom: 16px; } .detail-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } /* ═══════════════════════════════════════════════════════════════════ NUOVE CLASSI — aggiornamento aprile/maggio 2026 ═══════════════════════════════════════════════════════════════════ */ /* ── RESUME mini banner ──────────────────────────────────────────── */ .resume-mini-banner { display: flex; align-items: flex-start; gap: 8px; background: rgba(240,112,48,.08); border-left: 2.5px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; padding: 8px 12px; margin-bottom: 14px; } .resume-mini-icon { color: var(--orange); font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .resume-mini-text { font-size: 13px; font-weight: 400; color: var(--charcoal); line-height: 1.5; } /* ── BANNER "Ci conosciamo già!" sopra campo nome ─────────────────── */ .name-autofill-banner { display: block; background: rgba(240,112,48,.08); border-left: 2.5px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; padding: 7px 12px; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--orange); line-height: 1.45; } /* ── OPTS verbose: aggiustamento padding con .opt-body ───────────── */ .opts--verbose .opt { padding: 13px 15px 13px 44px; min-height: unset; } /* Radio allineato al top del testo, non al centro della card */ .opts--verbose .opt::before { top: 16px; transform: none; } /* ── Q2 uniformità: corpo testo identico a Q3/Q4 ─────────────────── */ /* .opt-primary già a weight 400 — nessuna sovrascrittura necessaria */ /* ── DETAIL SHEET gallery ────────────────────────────────────────── */ .detail-gallery { width: 100%; margin-bottom: 14px; } /* Immagine singola */ .detail-img--single { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); background: var(--green-pale); display: block; } .detail-img-placeholder { width: 100%; height: 180px; background: var(--green-pale); border-radius: var(--radius); } /* Gallery scroll orizzontale */ .detail-gallery-scroll { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 0; border-radius: var(--radius); scroll-behavior: smooth; } .detail-gallery-scroll::-webkit-scrollbar { display: none; } /* .detail-gallery-item definita più in basso con aspect-ratio 1:1 corretta */ /* Dot indicator */ .detail-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; } .detail-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-gray); cursor: pointer; transition: background 200ms, transform 200ms; } .detail-gallery-dot.active { background: var(--green); transform: scale(1.25); } /* ── DETAIL SHEET: descrizione prodotto (non più tagline) ─────────── */ .detail-tagline { font-size: 14px; font-weight: 300; color: var(--ink); line-height: 1.7; margin-bottom: 14px; /* non più in corsivo — ora è il testo descrittivo "Cos'è?" */ font-style: normal; } /* ── DETAIL SHEET: varianti inline ──────────────────────────────── */ /* usa gli stessi .var-opt e .var-list già definiti */ #detailActions .var-list { margin-bottom: 10px; max-height: 40vh; } #detailActions .var-btn-primary { margin-bottom: 8px; } /* ── sticky-expanded-content: gestita sopra con display:none ── */ .sticky-code { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 300; letter-spacing: .1em; color: white; text-align: center; margin-bottom: 4px; } .sticky-code strong { font-weight: 800; font-size: 22px; display: block; letter-spacing: .14em; } .sticky-catalog-cta { display: block; margin-top: 12px; padding: 10px 16px; background: white; color: var(--green); border-radius: var(--radius); text-align: center; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background 200ms; } .sticky-catalog-cta:active { background: var(--green-pale); } /* ── PULSANTE CART con riga prezzo ───────────────────────────────── */ .cart-btn-sub { display: block; font-size: 11px; font-weight: 300; letter-spacing: .03em; margin-top: 2px; opacity: .9; text-transform: none; } .cart-btn-sub s { opacity: .6; } /* ── Pulsante "Mi interessa" aggiunto (arancio post-add) ─────────── */ .prod-btn-interest.added { background: var(--orange) !important; } /* ── prod-card--core: stile esplicito (le card core non hanno differenziazioni rispetto alla base) */ .prod-card--core { /* identità — nessuna sovrascrittura rispetto a .prod-card */ } /* ═══════════════════════════════════════════════════════════════════ AGGIORNAMENTO v2.1.0 — 29 aprile 2026 ═══════════════════════════════════════════════════════════════════ */ /* ── Resume: titolo Bentornata! + pill con label domanda ─────────── */ .resume-mini-wrap { margin-bottom: 14px; } .resume-mini-title { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; } .resume-pill-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .resume-pill-q { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex-shrink: 0; } .resume-pill { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--green-pale); border: 1px solid rgba(31,88,66,.2); border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--green-dark); } /* ── Banner autofill CRM: uppercase title ────────────────────────── */ .name-autofill-banner { display: block; background: rgba(240,112,48,.08); border-left: 2.5px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0; padding: 8px 12px; margin-bottom: 8px; overflow: hidden; animation: slideDownBanner 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; } @keyframes slideDownBanner { 0% { opacity: 0; max-height: 0; transform: translateY(-8px); } 100% { opacity: 1; max-height: 140px; transform: translateY(0); } } .name-autofill-title { display: block; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 2px; } .name-autofill-body { display: block; font-size: 13px; font-weight: 400; color: var(--charcoal); line-height: 1.45; } display: block; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 2px; } .name-autofill-body { display: block; font-size: 13px; font-weight: 400; color: var(--charcoal); line-height: 1.45; } /* ── Gallery detail sheet: 1:1 scroll orizzontale ────────────────── */ .detail-gallery { width: 100%; margin-bottom: 14px; } .detail-gallery-scroll { display: flex; gap: 6px; overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 2px; } .detail-gallery-scroll::-webkit-scrollbar { display: none; } .detail-gallery-item { flex: 0 0 35%; /* 100/2.86 → ~2.86 card visibili, indica lo scroll */ scroll-snap-align: start; aspect-ratio: 1 / 1; overflow: hidden; background: var(--green-pale); flex-shrink: 0; border-radius: 6px; } .detail-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .detail-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; } .detail-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-gray); cursor: pointer; transition: background 200ms, transform 200ms; } .detail-gallery-dot.active { background: var(--green); transform: scale(1.25); } .detail-img-placeholder { width: 100%; aspect-ratio: 1/1; background: var(--green-pale); border-radius: var(--radius); } /* ── Detail sheet: tagline verde inline + accordion ─────────────── */ .detail-tagline-inline { color: var(--green); font-size: 12px; font-weight: 300; font-style: italic; } .detail-acc-item { border-bottom: 1px solid var(--border-gray); padding: 0; margin-bottom: 0; } .detail-acc-item:first-child { border-top: 1px solid var(--border-gray); margin-top: 10px; } .detail-acc-title { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); padding: 11px 4px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .detail-acc-title::-webkit-details-marker { display: none; } .detail-acc-title::after { content: '+'; font-size: 16px; font-weight: 300; color: var(--muted); flex-shrink: 0; margin-left: 8px; } details[open] > .detail-acc-title::after { content: '\2212'; } .detail-acc-body { font-size: 14px; font-weight: 300; color: var(--ink); line-height: 1.7; padding: 0 4px 12px; margin: 0; } /* ── Varianti compatte (>4 opzioni, AK) ──────────────────────────── */ .var-opt--compact { padding: 9px 12px; min-height: unset; } .var-opt--compact .var-opt-name { font-size: 12px; } .var-list--compact { gap: 6px; } /* Foto tonalità: riempie il lato sinistro toccando i 3 bordi */ .var-opt-img-wrap { flex-shrink: 0; position: relative; width: 56px; /* align-self:stretch funziona perché .var-opt ha align-items:stretch */ margin-top: -13px; margin-bottom: -13px; margin-left: -16px; margin-right: 12px; border-radius: var(--radius) 0 0 var(--radius); overflow: hidden; cursor: pointer; } /* Compact variant (AK con >4 opzioni) */ .var-opt--compact .var-opt-img-wrap { margin-top: -7px; margin-bottom: -7px; margin-left: -10px; width: 50px; } .var-opt-img { width: 100%; height: 100%; object-fit: cover; display: block; } .var-opt-zoom { position: absolute; bottom: 4px; right: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.85); border-radius: 50%; font-size: 10px; line-height: 1; opacity: 1; /* sempre visibile — indica l'interattività */ pointer-events: none; /* il click va al parent .var-opt-img-wrap */ box-shadow: 0 1px 3px rgba(0,0,0,.2); } /* ── Lightbox tonalità AK — coverflow 3D + add-to-cart ─────────────── */ .ak-lb-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 0 10px; opacity: 0; transition: opacity 280ms; } .ak-lb-overlay.ak-lb-visible { opacity: 1; } .ak-lb-inner { position: relative; width: min(96vw, 420px); display: flex; flex-direction: column; background: white; border-radius: 20px; overflow: hidden; max-height: 92vh; } .ak-lb-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.50); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; z-index: 20; } /* Stage con prospettiva 3D per coverflow */ .ak-lb-stage { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; perspective: 600px; perspective-origin: 50% 50%; background: #f0e8e4; } /* Gallery prodotto: proporzione quadrata */ .ak-lb-stage--square { aspect-ratio: 1/1; background: var(--green-pale); } .ak-lb-track { position: absolute; inset: 0; transform-style: preserve-3d; } /* Ogni slide posizionata al centro, trasformata via JS */ .ak-lb-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform, opacity; transform-origin: center center; backface-visibility: hidden; } .ak-lb-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Caption */ .ak-lb-caption { padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; } .ak-lb-dots { display: flex; gap: 4px; justify-content: center; margin-bottom: 4px; } .ak-lb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-gray); transition: background 220ms, transform 220ms; flex-shrink: 0; } .ak-lb-dot.active { background: var(--green); transform: scale(1.4); } .ak-lb-title { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--charcoal); line-height: 1; } .ak-lb-sub { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; } .ak-lb-price { font-size: 14px; color: var(--charcoal); margin-top: 2px; } .ak-lb-price strong { color: var(--green); font-weight: 700; } .ak-lb-price--rc strong { color: var(--orange); } .ak-lb-price s { color: var(--muted); font-size: 12px; } .ak-lb-pct { display: inline-block; background: var(--green); color: white; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 20px; vertical-align: middle; margin-left: 3px; } .ak-lb-reassure { font-size: 11px; font-weight: 300; color: var(--muted); font-style: italic; line-height: 1.4; margin: 4px 0 0; text-align: center; } .ak-lb-atc { display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; margin-top: 4px; background: var(--green); color: white; border: none; border-radius: var(--radius); font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background 180ms; } .ak-lb-atc:active { background: var(--green-dark); } .ak-lb-atc:disabled { opacity: .6; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ v2.1.0 — addendum stile/fix 29 aprile 2026 ═══════════════════════════════════════════════════════════════════ */ /* ── Accordion detail sheet: corpo con altezza animata ──────────── */ .detail-acc-item { border-bottom: 1px solid var(--border-gray); } .detail-acc-item:first-child { border-top: 1px solid var(--border-gray); margin-top: 10px; } /* Il body dentro details usa grid-template-rows per animazione */ .detail-acc-item > .detail-acc-body { /* override animazione: gestita con grid-rows */ animation: none; overflow: hidden; } details.detail-acc-item:not([open]) > .detail-acc-body { display: none; /* il browser gestisce natively il details */ } /* Titolo con + / - animato */ .detail-acc-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 4px; cursor: pointer; user-select: none; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); list-style: none; -webkit-tap-highlight-color: transparent; transition: color 150ms; } .detail-acc-title::-webkit-details-marker { display: none; } .detail-acc-title::after { content: '+'; font-size: 18px; font-weight: 300; color: var(--muted); flex-shrink: 0; line-height: 1; transition: transform 220ms cubic-bezier(0.16,1,0.3,1); } details[open] > .detail-acc-title::after { content: '\2212'; transform: rotate(0deg); } details[open] > .detail-acc-title { color: var(--green-dark); } .detail-acc-body { font-size: 14px; font-weight: 300; color: var(--ink); line-height: 1.7; padding: 4px 4px 14px; margin: 0; /* Animazione accOpen triggered dal toggle event JS */ } .detail-acc-body p { margin: 0 0 8px; } .detail-acc-body p:last-child { margin-bottom: 0; } @keyframes accOpen { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } } /* ── detail-accordion fade-out quando "Mi interessa" è premuto ──── */ #detailAccordion { transition: max-height 280ms cubic-bezier(0.16,1,0.3,1), opacity 220ms ease; } /* .var-opt già definito sopra con align-items:stretch */ .var-opt-name { flex: 1; min-width: 0; align-self: center; /* solo img-wrap deve allungarsi */ } .var-opt-price { flex-shrink: 0; text-align: right; align-self: center; /* solo img-wrap deve allungarsi */ } /* Compact per AK (>4 varianti) */ .var-opt--compact { padding: 7px 10px; min-height: unset; } .var-opt--compact .var-opt-img-wrap { /* dimensioni gestite dai margini negativi e align-self:stretch */ } /* ── Sticky btn-row: funziona perché il body è il contesto scrollante. NON aggiungere overflow su .screen — romperebbe lo sticky. ───────── */ /* ── TIP CARD — sfondo giallo caldo distinto dal core verde ──────────────── */ :root { --yellow-pale: #FEF8E8; --yellow: #E8A800; --yellow-mid: #F5C842; } .prod-card--tip { border-color: rgba(232,168,0,.30); background: var(--yellow-pale); } .prod-card--tip .prod-step--tip { color: var(--yellow); } .prod-card--tip .prod-why-you { background: rgba(232,168,0,.10); border-left-color: var(--yellow); } .prod-card--tip .prod-why-you-label { color: var(--yellow); } /* Titolo sezione tips evidenziato */ .section-header--tips { color: var(--yellow); } /* Icona lente sulla gallery del detail-sheet */ .detail-gallery-item { position: relative; cursor: pointer; } .detail-gallery-zoom { position: absolute; bottom: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.80); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.18); pointer-events: none; } /* ── Name edit toggle (return visit) ────────────────────────────────────── */ .name-edit-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--green); cursor: pointer; margin-bottom: 8px; opacity: .75; transition: opacity 150ms; } .name-edit-toggle:active { opacity: 1; }