/* * Front page — "Party Home" design. * Loaded ONLY on the front page (main.css is skipped there to avoid * class collisions: this design has its own .kp-nav/.kp-search/.kp-burger). */ body { margin: 0; background: #fcf9f8; } /* ── Flip cards (specials) ─────────────────────────────────────────────── */ .bcard{cursor:pointer;position:relative;transition:transform .26s cubic-bezier(.2,.8,.3,1);font-family:Vazirmatn,system-ui,sans-serif} .bcard.flipped .bcard-flip{transform:rotateY(180deg)} .bcard .bcard-back{pointer-events:none} .bcard.flipped .bcard-back{pointer-events:auto} .bcard.flipped .bcard-front{pointer-events:none} .holo{position:absolute;inset:0;border-radius:17px;pointer-events:none;z-index:2;opacity:.82;mix-blend-mode:overlay;background:linear-gradient(115deg,#7b2ff7 6%,#ff2d9b 22%,#ff8a3d 34%,#ffe14d 46%,#3dff9e 58%,#3dd2ff 70%,#7b2ff7 86%);background-size:280% 280%;animation:holoShift 7s linear infinite} @keyframes holoShift{0%{background-position:0% 50%}100%{background-position:280% 50%}} .holo.h-under{z-index:0;opacity:.42} /* ── Qty stepper ───────────────────────────────────────────────────────── */ .qty-stepper{display:flex;align-items:center;gap:2px;height:50px;padding:0 5px;border-radius:999px;background:linear-gradient(#fbf8f1,#fbf8f1) padding-box,linear-gradient(125deg,#a96cff,#ff8ac4,#7fd8ff) border-box;border:1.5px solid transparent;box-shadow:0 4px 14px #2a1a4a1f} .qty-stepper.pop{animation:stepperPop .36s cubic-bezier(.3,1.5,.5,1)} @keyframes stepperPop{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}} .qty-btn{width:40px;height:40px;flex:none;cursor:pointer;border:none;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s ease,transform .1s ease} .qty-btn:hover{background:#6b4bb016} .qty-btn:active{transform:scale(.82)} .qty-count{min-width:22px;text-align:center;font-family:Vazirmatn,sans-serif;font-weight:900;font-size:17px;color:#241a30} .qty-count.pop{animation:countPop .32s cubic-bezier(.3,1.5,.5,1)} @keyframes countPop{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1)}} .add-fab.pop{animation:fabPop .3s cubic-bezier(.3,1.5,.5,1)} @keyframes fabPop{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} .trust-chip{display:inline-flex;align-items:center;gap:5px;font-family:Vazirmatn,sans-serif;font-weight:700;font-size:11px;color:#241a30a6;background:#2419300a;border:1px solid #24193016;padding:6px 11px;border-radius:999px} .bcard-add{transition:transform .18s cubic-bezier(.3,1.3,.5,1),box-shadow .18s ease,filter .18s ease} .add-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px #6b4bb03d} .add-fab:active{transform:translateY(0) scale(.95)} /* ── Holographic badges / sheens ───────────────────────────────────────── */ .hb{position:relative;overflow:hidden;color:#fff;font-weight:800;font-size:14px;padding:6px 17px;border-radius:20px;box-shadow:0 2px 8px #00000033;text-shadow:0 1px 2px #00000055;white-space:nowrap} @keyframes hbSweep{0%{background-position:0% 50%}100%{background-position:300% 50%}} /* The shine sweeps animate transform, not `left`. Animating `left` runs on the main thread and forces layout on every frame — PageSpeed counted 20 such elements here and 1.2s of Rendering + 0.6s of Style & Layout. translateX is GPU-composited. Percentages on translateX resolve against the ELEMENT'S OWN width, whereas `left` resolved against the PARENT — so the two consumers (40%- and 45%-wide) need their OWN keyframes. One shared keyframe would sweep the wrong distance for one of them. The skew is folded in because transform is a single property. */ @keyframes hbShineBadge{0%{transform:translateX(-150%) skewX(-18deg)}60%,100%{transform:translateX(350%) skewX(-18deg)}} @keyframes hbShineSheen{0%{transform:translateX(-133.3%) skewX(-18deg)}60%,100%{transform:translateX(311.1%) skewX(-18deg)}} .hb-3{background:linear-gradient(110deg,#7b2ff7,#ff2d9b,#ff8a3d,#3dd2ff,#7b2ff7);background-size:300% 100%;animation:hbSweep 5s linear infinite} .hb-3::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,#ffffffcc,transparent);will-change:transform;animation:hbShineBadge 2.6s ease-in-out infinite} .card-sheen{position:absolute;inset:0;border-radius:17px;z-index:0;pointer-events:none;overflow:hidden} .card-sheen::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#7b2ff7,#ff2d9b,#ff8a3d,#3dd2ff,#7b2ff7);background-size:300% 100%;animation:hbSweep 5s linear infinite;opacity:.30;mix-blend-mode:overlay} .card-sheen::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,#ffffffcc,transparent);will-change:transform;animation:hbShineSheen 3.4s ease-in-out infinite;mix-blend-mode:screen} .card-sheen.soft::before{background:linear-gradient(110deg,#9c6bff,#ff8ac4,#7fd8ff,#9c6bff);background-size:300% 100%;opacity:.2;mix-blend-mode:soft-light} .card-sheen.soft::after{opacity:.35} .spec-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;border-bottom:1px dashed #2419301a;padding-bottom:7px} .spec-row:last-child{border-bottom:none;padding-bottom:0} /* ── Hero animations ───────────────────────────────────────────────────── */ @keyframes heroF1{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes heroF2{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}} @keyframes heroF3{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes heroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes heroDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-8px) rotate(3deg)}} /* ── Best-sellers / newest sliders — the row is a .kp-catstrip__scroll (same overflow/scroll-behavior + arrow-nav & wheel/drag-scroll JS as the category strip), but laid out as a 2-row grid that flows into columns, so the 16 cards form 2 rows × 8 columns and scroll horizontally as pages of 8. */ .prod-grid{display:grid !important;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:200px;gap:10px} .prod-grid .kph-card{border-radius:12px !important} .prod-grid .kph-card-media{padding:8px 8px 0 !important} .prod-grid .kph-card-img{border-radius:9px !important} .prod-grid .kph-card-badge{top:16px !important;right:16px !important;padding:3px 9px !important;font-size:10px !important} .prod-grid .kph-card-body{padding:10px 12px 12px !important;gap:6px !important} .prod-grid .kph-card-name{font-size:12.5px !important} .prod-grid .kph-card-cat{font-size:10.5px !important} .prod-grid .kph-card-old{font-size:10.5px !important} .prod-grid .kph-card-price{font-size:13px !important} .prod-grid .kph-add{width:32px !important;height:32px !important;font-size:17px !important} .prod-grid .kph-stepper{height:32px !important} .prod-grid .kph-step{width:26px !important;height:26px !important;font-size:15px !important} /* Mobile: smaller product cards, single row (was 2 rows × 8 columns) so a peek of the next card is visible and the strip doesn't get too tall. */ @media (max-width:600px){ .prod-grid{grid-template-rows:none;grid-auto-columns:132px;gap:8px} .prod-grid .kph-card-media{padding:6px 6px 0 !important} .prod-grid .kph-card-badge{top:12px !important;right:12px !important;padding:2px 7px !important;font-size:9px !important} .prod-grid .kph-card-body{padding:8px 9px 9px !important;gap:4px !important} .prod-grid .kph-card-name{font-size:11px !important;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden} .prod-grid .kph-card-cat{font-size:9.5px !important} .prod-grid .kph-card-old{font-size:9.5px !important} .prod-grid .kph-card-price{font-size:12px !important} .prod-grid .kph-add{width:26px !important;height:26px !important;font-size:14px !important} .prod-grid .kph-stepper{height:26px !important} .prod-grid .kph-step{width:21px !important;height:21px !important;font-size:13px !important} } /* Mobile: the strip sections had a lot of dead white space beside the arrow buttons (24px section padding + the nav's own gap); tighten both so the arrows sit closer to the screen edge and are easier to reach with a thumb. */ @media (max-width:600px){ .kph-strip-section{padding-inline:12px !important} .kp-catstrip{gap:2px} .kp-catstrip__arrow{width:28px;height:28px} } /* ── Responsive (page sections; header/footer rules live in chrome.css) ── */ @media (max-width:900px){ .kp-hero-grid{grid-template-columns:1fr !important;padding:36px 20px !important;gap:28px !important} .kp-hero-title{font-size:32px !important} .kp-offer{flex-direction:column !important;align-items:flex-start !important;padding:26px 24px !important} } @media (max-width:520px){ .kp-hero-title{font-size:27px !important} .kp-hero-img{height:250px !important} .kp-hero-stats{gap:16px !important} } /* ── Disable heavy animations on mobile ────────────────────────────────── */ @media (max-width: 768px) { .holo { animation: none; } .hb-3 { animation: none; background-position: 0 50%; } .hb-3::after { animation: none; } .card-sheen::before, .card-sheen::after { animation: none; } } /* ── Hover states (converted from the design's style-hover attributes) ─── */ .kph-btn-primary:hover{background:#e60606 !important} .kph-btn-ghost:hover{border-color:#c20606 !important;color:#c20606 !important} .kph-offer-btn:hover{background:#ffe9eb !important} .product-link:hover{background-color:rgba(194,6,6,.08)} /* ── Category strip (shared component from the shop page, #14 ordered source) — sized to match the home page's original tile dimensions (148px card / 84px media) instead of the shop's smaller default. ─────── */ .kp-catstrip{display:flex;align-items:center;gap:6px;margin-block:2px 22px} .kp-catstrip__scroll{flex:1;display:flex;gap:18px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch} .kp-catstrip__scroll::-webkit-scrollbar{display:none} .kp-catstrip__arrow{flex:none;width:34px;height:34px;border:1.5px solid #e3d9d6;border-radius:50%;background:#ffffff;color:#c20606;box-shadow:0 1px 2px rgba(34,26,28,.05),0 8px 24px -18px rgba(34,26,28,.22);display:flex;align-items:center;justify-content:center;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;cursor:pointer;padding:0} .kp-catstrip__arrow:hover{border-color:#c20606;box-shadow:0 16px 40px -22px rgba(194,6,6,.45);transform:scale(1.1)} .kp-catstrip__arrow[hidden]{display:none !important} .kp-catchip{flex:0 0 auto;width:148px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;background:#ffffff;border:1px solid #efe8e6;border-radius:16px;text-decoration:none;color:#221a1c;transition:all .15s ease} .kp-catchip:hover{border-color:#c20606;box-shadow:0 8px 22px rgba(194,6,6,.1)} .kp-catchip.is-active{border-color:#c20606;background:#fff5f5} .kp-catchip__media{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#f2e9e6;display:flex;align-items:center;justify-content:center;color:#c20606} .kp-catchip__media img{width:100%;height:100%;object-fit:cover} .kp-catchip__name{font-size:13px;font-weight:700;text-align:center;line-height:1.6;max-width:100%;overflow:hidden;text-overflow:ellipsis} /* Mobile: shrink the category icons so more of the strip is visible at once. */ @media (max-width:600px){ .kp-catchip{width:88px;padding:10px 6px;gap:6px} .kp-catchip__media{width:56px;height:56px} .kp-catchip__name{font-size:11px} } /* ── Reduced motion ──────────────────────────────────────────────────────── The holo/sheen/badge effects are decorative and run `infinite`, so they never stop consuming main-thread time. Users who ask the OS for reduced motion get the static gradient (the visual identity survives; only the movement stops), and the page stops animating 20 elements forever. */ @media (prefers-reduced-motion: reduce) { .holo, .hb-3, .hb-3::after, .card-sheen::before, .card-sheen::after, .nav-helium::after { animation: none !important; } .bcard, .bcard-flip, .qty-btn, .add-fab, .bcard-add { transition: none !important; } }