/* Strona akcji z przepisami (pierwsza: /halloween, Fabbri) — prefiks .svp-akc__ · wersja 2.0.0 Wgrywane w ERP: Szablony menu → pozycja strony → CSS tylko dla tego adresu. Wygląd z katalogu Fabbri: tła = faktura łupka z PDF-a (img/tlo-*.jpg, barwiona na kolor strony przepisu), logo „Halloween Specials”, zdjęcie okładki. Tła podaje HTML (style="background-image"), bo adresy są w ERP. Karta produktu, przycisk koszyka i toast: styl panelu przepisów ALFAPRO (pdp-recipes.js, .svp-rp__). Przyciski: jak natywny .c-btna sklepu (wielkie litery, 14 px, 46 px wysokości, promień 3 px). Selektory #app#app#app: sklep ma #app #page .c-window.csB2BPortalsContent .c-container a/h2 (kolor, podkreślenie, wyśrodkowanie) — trzeba go przebić. Toast wisi w poza #app, więc zostaje na html body. Kolory: biblioteka/tokeny-sklep.css (blok niżej wstawia narzedzia/tokeny_erp.py). */ /* svp-tokeny: start — kopia biblioteka/tokeny-sklep.css, nie edytuj ręcznie (narzedzia/tokeny_erp.py) */ :root{--svp-btn:#5E9AD6;--svp-btn-hover:#4A87C4;--svp-blue-dark:#1568AB;--svp-link:#1C75BC;--svp-blue-brand:#69A2D9;--svp-tint:#EAF2FA;--svp-tint-hover:#DCEAF7;--svp-orange:#CE5F30;--svp-orange-light:#F3A07F;--svp-orange-tint:#FDEEE8;--svp-ink:#07243C;--svp-ink-pdp:#000;--svp-muted:#595959;--svp-muted-2:#5B6B7A;--svp-surface:#FFFFFF;--svp-surface-alt:#F5F5F5;--svp-surface-cool:#EDF0F3;--svp-dark:#1A1A1A;--svp-line:#E0E0E0;--svp-btn-line:#D5D9E1;--svp-ok:#3B8A5A;--svp-ok-dark:#1F6B3A;--svp-ok-strong:#14C95D;--svp-error:#B3261E;--svp-warning:#D98E1F;--svp-native-text:#333333;--svp-native-label:#7F7F7F;--svp-native-promo:#EB864C;--svp-native-stock:#00A541;--svp-font:inherit;--svp-r-btn:3px;--svp-r-tile:6px;--svp-r:8px;--svp-r-card:12px;--svp-r-modal:16px;--svp-r-block:24px;--svp-r-pill:9999px;--svp-shadow-float:0 4px 16px rgba(0,0,0,.08);--svp-shadow-modal:0 20px 60px rgba(0,0,0,.25);--svp-shadow-drawer:-12px 0 40px rgba(0,0,0,.18);--svp-shadow-hair:0 1px 2px rgba(0,0,0,.06)} /* svp-tokeny: koniec */ #app#app#app .svp-akc{color:var(--svp-ink);line-height:1.55;font-family:inherit;text-align:left;margin:24px 0 8px} #app#app#app .svp-akc *{box-sizing:border-box} #app#app#app .svp-akc ul{margin:0;padding:0;list-style:none} #app#app#app .svp-akc li{list-style:none;margin:0} #app#app#app .svp-akc p{text-align:left} #app#app#app .svp-akc h1,#app#app#app .svp-akc h2,#app#app#app .svp-akc h3{text-transform:none;letter-spacing:normal;text-align:left;padding:0} #app#app#app .svp-akc a{text-decoration:none} #app#app#app .svp-akc img{max-width:100%;display:block} #app#app#app .svp-akc [id]{scroll-margin-top:110px} /* Przyciski jak natywny .c-btna */ #app#app#app .svp-akc__btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;background:var(--svp-btn);color:#fff;border:1px solid var(--svp-btn);border-radius:var(--svp-r-btn);font-size:14px;font-weight:700;text-transform:uppercase;line-height:1;white-space:nowrap;transition:background .15s,border-color .15s} #app#app#app .svp-akc__btn:hover{background:var(--svp-btn-hover);border-color:var(--svp-btn-hover);color:#fff} #app#app#app .svp-akc__btn--line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff} #app#app#app .svp-akc__btn--line:hover{background:rgba(255,255,255,.1);border-color:#fff} /* Wspólne: tło-faktura, napisy na ciemnym */ #app#app#app .svp-akc__hero,#app#app#app .svp-akc__rcp,#app#app#app .svp-akc__more,#app#app#app .svp-akc__chip{background-color:var(--svp-dark);background-size:cover;background-position:center;color:#fff} #app#app#app .svp-akc__eye{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--svp-orange-light);margin:0} /* Hero: jak okładka katalogu */ #app#app#app .svp-akc__hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;border-radius:var(--svp-r-block);padding:40px 48px;overflow:hidden} #app#app#app .svp-akc__logo{width:300px;height:auto;margin:0 0 24px} #app#app#app .svp-akc__hero h1{color:#fff;font-size:40px;line-height:1.15;font-weight:700;margin:0 0 14px} #app#app#app .svp-akc__lead{font-size:17px;line-height:1.6;margin:0 0 28px;color:#fff;opacity:.88;max-width:560px} #app#app#app .svp-akc__cta{display:flex;flex-wrap:wrap;gap:12px} #app#app#app .svp-akc__cover{margin:0;transform:rotate(2deg)} #app#app#app .svp-akc__cover img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,#000 70%,transparent 100%)} /* Nawigacja: kafle w kolorach przepisów */ #app#app#app .svp-akc__chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 32px} #app#app#app .svp-akc__chip{display:flex;align-items:center;gap:12px;border-radius:var(--svp-r-card);padding:8px 12px 8px 8px;transition:transform .15s,box-shadow .15s} #app#app#app .svp-akc__chip:hover{transform:translateY(-2px);box-shadow:var(--svp-shadow-float);color:#fff} #app#app#app .svp-akc__chip img{width:64px;height:64px;object-fit:cover;border-radius:var(--svp-r-pill);flex-shrink:0;border:2px solid rgba(255,255,255,.85)} #app#app#app .svp-akc__chip b{display:block;font-size:14px;line-height:1.25;text-transform:uppercase;letter-spacing:.04em;color:#fff} #app#app#app .svp-akc__chip small{display:block;font-size:12px;line-height:1.3;color:#fff;opacity:.75;margin-top:2px} /* Przepis: karta w kolorze ze strony katalogu, zdjęcie + biały panel */ #app#app#app .svp-akc__rcp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;border-radius:var(--svp-r-block);padding:40px;margin:0 0 24px} #app#app#app .svp-akc__rcp:nth-of-type(even) .svp-akc__photo{order:2} #app#app#app .svp-akc__photo{margin:0;border-radius:var(--svp-r-modal);overflow:hidden;position:sticky;top:110px;box-shadow:var(--svp-shadow-modal)} #app#app#app .svp-akc__photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} #app#app#app .svp-akc__rcp h2{color:#fff;font-size:34px;line-height:1.15;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:6px 0 20px} #app#app#app .svp-akc__card{background:#fff;color:var(--svp-ink);border-radius:var(--svp-r-modal);padding:24px 24px 20px;box-shadow:var(--svp-shadow-float)} #app#app#app .svp-akc__sec{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--svp-orange);margin:22px 0 6px} #app#app#app .svp-akc__sec:first-child{margin-top:0} /* Składnik: nazwa z lewej, ilość z prawej (jak tabela w katalogu), karta produktu pod spodem */ #app#app#app .svp-akc__row{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--svp-line);font-size:15px} #app#app#app .svp-akc__iname{font-weight:600} #app#app#app .svp-akc__amt{color:var(--svp-muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} #app#app#app .svp-akc__steps{font-size:15px;margin:0;color:var(--svp-ink)} /* Karta produktu i koszyk — jak .svp-rp__prod */ #app#app#app .svp-akc__prod{grid-column:1/-1;display:flex;gap:12px;align-items:center;border:1px solid var(--svp-line);border-radius:var(--svp-r);padding:8px 10px 8px 8px;margin-top:8px;background:#fff} #app#app#app .svp-akc__prod img{width:48px;height:48px;object-fit:contain;flex-shrink:0;border-radius:var(--svp-r-tile)} #app#app#app .svp-akc__pinfo{flex:1;min-width:0} #app#app#app .svp-akc__pname{display:block;font-size:13px;font-weight:600;line-height:1.35;color:var(--svp-ink);max-height:2.7em;overflow:hidden} #app#app#app .svp-akc__pname:hover{color:var(--svp-link)} #app#app#app .svp-akc__pline{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:2px;min-height:4px} #app#app#app .svp-akc__price{font-size:15px;font-weight:700;color:var(--svp-blue-dark)} #app#app#app .svp-akc__sub,#app#app#app .svp-akc__na{font-size:12px;color:var(--svp-muted)} #app#app#app .svp-akc__add{flex:0 0 auto;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--svp-r-btn);background:var(--svp-btn);color:#fff;cursor:pointer;margin:0;min-width:0;box-shadow:none} #app#app#app .svp-akc__add:hover{background:var(--svp-btn-hover)} #app#app#app .svp-akc__add[disabled]{opacity:.6;cursor:default} #app#app#app .svp-akc__add svg{width:18px;height:16px} #app#app#app .svp-akc__added{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--svp-ok-strong);font-size:20px;font-weight:700} #app#app#app .svp-akc__actions{margin-top:20px} #app#app#app .svp-akc__actions:empty{display:none} #app#app#app .svp-akc__all{width:100%;height:46px;border:0;background:var(--svp-btn);color:#fff;border-radius:var(--svp-r-btn);padding:0 16px;font:inherit;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;letter-spacing:normal;margin:0} #app#app#app .svp-akc__all:hover{background:var(--svp-btn-hover)} #app#app#app .svp-akc__all[disabled]{opacity:.75;cursor:default} html body .svp-akc__toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--svp-ink);color:#fff;border-radius:var(--svp-r);padding:12px 18px;font-size:14px;opacity:0;transition:all .2s;z-index:100002;pointer-events:none} html body .svp-akc__toast--on{opacity:1;transform:translate(-50%,0)} /* Dekoracje: łupek + kafle produktów */ #app#app#app .svp-akc__more{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border-radius:var(--svp-r-block);padding:40px 48px;margin:8px 0 24px} #app#app#app .svp-akc__more h2{color:#fff;font-size:30px;line-height:1.2;font-weight:700;margin:6px 0 10px} #app#app#app .svp-akc__more p{color:#fff;opacity:.88;margin:0 0 24px;font-size:16px} #app#app#app .svp-akc__more .svp-akc__eye{opacity:1;margin:0} #app#app#app .svp-akc__dgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} #app#app#app .svp-akc__dtile{display:block;background:#fff;border-radius:var(--svp-r-modal);padding:10px;aspect-ratio:1;box-shadow:var(--svp-shadow-float)} #app#app#app .svp-akc__dtile:nth-child(1){transform:rotate(-3deg)} #app#app#app .svp-akc__dtile:nth-child(2){transform:rotate(2deg) translateY(12px)} #app#app#app .svp-akc__dtile:nth-child(3){transform:rotate(2deg)} #app#app#app .svp-akc__dtile:nth-child(4){transform:rotate(-2deg) translateY(12px)} #app#app#app .svp-akc__dtile img{width:100%;height:100%;object-fit:contain} #app#app#app .svp-akc__foot{padding:8px 0;color:var(--svp-muted);font-size:13px} #app#app#app .svp-akc__foot p{margin:0;color:var(--svp-muted)} @media (max-width:1023px){ #app#app#app .svp-akc__hero{grid-template-columns:1fr;padding:32px} #app#app#app .svp-akc__cover{max-width:420px} #app#app#app .svp-akc__chips{grid-template-columns:repeat(2,1fr)} #app#app#app .svp-akc__rcp{grid-template-columns:1fr;gap:24px;padding:28px} #app#app#app .svp-akc__rcp:nth-of-type(even) .svp-akc__photo{order:0} #app#app#app .svp-akc__photo{position:static} #app#app#app .svp-akc__more{grid-template-columns:1fr;padding:32px} } @media (max-width:599px){ #app#app#app .svp-akc{margin-top:16px} #app#app#app .svp-akc__hero{padding:24px 20px;border-radius:var(--svp-r-modal);gap:20px} #app#app#app .svp-akc__logo{width:220px} #app#app#app .svp-akc__hero h1{font-size:28px} #app#app#app .svp-akc__lead{font-size:15px} #app#app#app .svp-akc__btn{flex:1 1 100%} #app#app#app .svp-akc__chips{gap:8px} #app#app#app .svp-akc__chip{padding:6px;gap:8px} #app#app#app .svp-akc__chip img{width:44px;height:44px} #app#app#app .svp-akc__chip b{font-size:12px} #app#app#app .svp-akc__chip small{display:none} #app#app#app .svp-akc__rcp{padding:16px;border-radius:var(--svp-r-modal)} #app#app#app .svp-akc__rcp h2{font-size:26px;margin-bottom:14px} #app#app#app .svp-akc__card{padding:18px 16px 16px} #app#app#app .svp-akc__more{padding:24px 20px;border-radius:var(--svp-r-modal)} #app#app#app .svp-akc__more h2{font-size:24px} } @media (prefers-reduced-motion:reduce){html body .svp-akc__toast,#app#app#app .svp-akc__chip{transition:none}}