/* * Site chrome — the "Party Home" header + footer, loaded on EVERY page. * Classes are kph-* so main.css (inner pages) can't collide with them. */ /* Accessible skip link (main.css isn't loaded on the front page). */ .skip-link{position:absolute;top:-100px;right:8px;z-index:100;background:#c20606;color:#fff;padding:10px 18px;border-radius:8px;text-decoration:none} .skip-link:focus{top:8px} /* ── Identical sizing on every page ──────────────────────────────────────── * main.css sets body{line-height:1.75; font-size:15px} and loads on inner * pages (shop, cart, single, …) but NOT on the home page. The header/footer * buttons and text inherit line-height, so without this they render a touch * taller/looser on inner pages than on home. Pin the shared chrome to the * browser-default line-height so it matches the home page exactly everywhere. * (Inline line-heights in header.php, e.g. the logo's 1.2, still win.) */ #masthead, #masthead *, .kph-topbar, #colophon, #colophon *{line-height:normal} /* ── Identical box model on every page ───────────────────────────────────── * main.css sets `*{box-sizing:border-box}` and loads on inner pages but NOT on * the home page (which uses home.css, with no such reset). The shared header's * padded pills (search, login, cart) and controls therefore render a touch * tighter on inner pages — padding is absorbed into the box instead of added * on top. Pin the chrome to content-box so it matches the home page exactly * everywhere. The two mobile-burger rules below re-assert border-box (with a * #masthead prefix so they out-specify this). */ #masthead, #masthead *, .kph-topbar, #colophon, #colophon *{box-sizing:content-box} /* ── Header nav ────────────────────────────────────────────────────────── */ /* overflow must stay visible so the categories dropdown can spill below the * nav; an overflow-x:auto here silently clips overflow-y and hides the menu. */ .kph-nav{overflow:visible;white-space:nowrap} .kph-nav-links > a:hover{color:#c20606 !important} .nav-helium{position:relative;overflow:hidden} .nav-helium:hover{background:#a30d0d !important} /* Animates transform, not `left`. Animating `left` runs on the main thread and triggers layout every frame (Lighthouse: "Avoid non-composited animations"), which competes with INP. translateX is composited on the GPU. The skew is folded into the keyframes because transform is a single property — setting it in the animation would otherwise overwrite the static skewX. */ .nav-helium::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,transparent,#ffffffcc,transparent);will-change:transform;animation:kphHeliumShine 3.6s ease-in-out infinite;pointer-events:none} /* left:-60%..150% of the PARENT converts to translateX -157.9%..394.7% of the ELEMENT (percentages on translate resolve against the element's own width, which is 38% of the parent — not the same basis as `left`). */ @keyframes kphHeliumShine{0%{transform:translateX(-157.9%) skewX(-18deg)}24%,100%{transform:translateX(394.7%) skewX(-18deg)}} /* ── Categories dropdown ("دسته‌بندی محصولات") ─────────────────────────── */ .kph-dd{position:relative} .kph-dd-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:13.5px;font-weight:600;color:#221a1c;cursor:pointer;line-height:inherit} .kph-dd-toggle:hover,.kph-dd[data-open="true"] .kph-dd-toggle{color:#c20606} .kph-dd-caret{flex:none;transition:transform .18s ease} .kph-dd[data-open="true"] .kph-dd-caret{transform:rotate(180deg)} .kph-dd-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:#ffffff;border:1px solid #efe8e6;border-radius:14px;box-shadow:0 16px 40px -18px rgba(34,26,28,.28);padding:6px;z-index:60} /* Transparent bridge so the hover doesn't drop while crossing the gap. */ .kph-dd-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:12px} .kph-dd[data-open="true"] .kph-dd-menu{display:block} .kph-dd-item{display:block;padding:10px 14px;border-radius:9px;color:#221a1c;text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap} .kph-dd-item:hover{background:#fff5f5;color:#c20606} @media (hover:hover) and (min-width:821px){ .kph-dd:hover .kph-dd-menu{display:block} .kph-dd:hover .kph-dd-caret{transform:rotate(180deg)} .kph-dd:hover .kph-dd-toggle{color:#c20606} } /* ── Header actions ────────────────────────────────────────────────────── */ .kph-login:hover{border-color:#c20606 !important;color:#c20606 !important} .kph-cartbtn:hover{background:#e60606 !important} .kph-burger:hover{border-color:#c20606 !important;color:#c20606 !important} /* Cart badge — replaced via WC fragments (span.kph-cart-count). */ .kph-cart-count{background:#ffffff;color:#c20606;border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;padding:0 5px;line-height:1} /* ── Header cart preview dropdown ──────────────────────────────────────── */ .kph-cart-dd{position:relative} .kph-cart-panel{display:none;position:absolute;top:calc(100% + 10px);left:0;width:320px;max-width:calc(100vw - 32px);background:#ffffff;border:1px solid #efe8e6;border-radius:14px;box-shadow:0 16px 40px -18px rgba(34,26,28,.28);padding:14px;z-index:60;box-sizing:border-box;text-align:right} .kph-cart-panel::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:12px} .kph-cart-dd[data-open="true"] .kph-cart-panel{display:block} .kph-cart-panel .woocommerce-mini-cart{list-style:none;margin:0 0 12px;padding:0;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:12px} .kph-cart-panel .woocommerce-mini-cart-item{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-inline-end:26px;font-size:12.5px;color:#221a1c} .kph-cart-panel .woocommerce-mini-cart-item img{width:46px;height:46px;object-fit:cover;border-radius:9px;flex:none} .kph-cart-panel .woocommerce-mini-cart-item a:not(.remove){color:#221a1c;text-decoration:none;font-weight:700;flex:1 1 auto;min-width:0} .kph-cart-panel .kph-mini-qty{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%} .kph-cart-panel .kph-mini-qty .kph-stepper{height:28px;background:#fff5f5} .kph-cart-panel .kph-mini-qty .kph-step{width:22px;height:22px;font-size:14px} .kph-cart-panel .kph-mini-qty .kph-step-count{font-size:12.5px;min-width:16px} .kph-cart-panel .kph-mini-qty__price{color:#6f676a;font-size:11.5px;white-space:nowrap} .kph-cart-panel .woocommerce-mini-cart-item .remove{position:absolute;top:0;left:0;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;color:#6f676a;text-decoration:none;font-size:15px} .kph-cart-panel .woocommerce-mini-cart-item .remove:hover{background:#fff5f5;color:#c20606} .kph-cart-panel .woocommerce-mini-cart__empty-message{margin:0;padding:20px 0;text-align:center;color:#6f676a;font-size:13px} .kph-cart-panel .woocommerce-mini-cart__total{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding-top:12px;border-top:1px solid #efe8e6;font-weight:800;font-size:13.5px;color:#221a1c} .kph-cart-panel .woocommerce-mini-cart__buttons{display:flex;gap:8px;margin:0} .kph-cart-panel .woocommerce-mini-cart__buttons a{flex:1 1 0;text-align:center;padding:10px 8px;border-radius:999px;font-size:12.5px;font-weight:700;text-decoration:none} .kph-cart-panel .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout){background:#fff5f5;color:#c20606} .kph-cart-panel .woocommerce-mini-cart__buttons a.checkout{background:#c20606;color:#ffffff} @media (max-width:480px){.kph-cart-panel{left:auto;right:0;width:290px}} @media (max-width:820px){.kph-cart-panel{display:none !important}} /* ── Footer ────────────────────────────────────────────────────────────── */ .kph-fcol{display:flex;flex-direction:column;align-items:flex-start;gap:11px;font-size:13px} .kph-fcol-title{position:relative;font-weight:800;font-size:13.5px;color:#ffffff;margin-bottom:6px;padding-bottom:10px} .kph-fcol-title::after{content:"";position:absolute;bottom:0;right:0;width:26px;height:2px;border-radius:2px;background:#ff6b6b} .kph-flink{color:#a79da0;text-decoration:none;font-size:13px;line-height:1.9;transition:color .15s ease,transform .15s ease;display:inline-flex} .kph-flink:hover{color:#ffffff;transform:translateX(-3px)} .kph-flink--icon{align-items:flex-start;gap:8px;transform:none !important} .kph-flink--icon:hover{transform:none !important} .kph-flink--icon svg{flex:none;margin-top:3px;color:#ff6b6b} .kph-flink--icon span{line-height:1.7} .kph-social{flex-wrap:wrap} .kph-social-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#2e2426;color:#c9c0c2;transition:background .15s ease,color .15s ease,transform .15s ease} .kph-social-btn:hover{background:#ff6b6b;color:#ffffff;transform:translateY(-2px)} .kph-trust-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap} .kph-trust-badge{width:64px;height:64px;background:#2e2426;border:1px dashed #4a3f42;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#948a8e;text-align:center;padding:4px} .kph-footer-bottom-wrap{border-top:1px solid #2e2426} .kph-footer-bottom{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;font-size:11.5px;color:#948a8e} .kph-footer-secure{display:inline-flex;align-items:center;gap:6px;color:#c9c0c2} .kph-footer-secure svg{color:#6fbf73} /* ── Product card (home grids + every WooCommerce loop) ────────────────── */ .kph-card-img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#f2e9e6;display:block} /* A long name otherwise grows one card taller than its row-mates and shoves its own price/add-button row down out of line with the rest of the grid. Clamped to 2 lines with an ellipsis so every card in a row keeps the same rhythm no matter how long the title is. */ .kph-card-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Instalment "ticket" — SnappPay blue, punched-notch seam between the icon stub and the count. Notches are solid circles half outside the ticket's box; the parent's overflow:hidden crops them into a clean half-moon bite, so no CSS masking (and its patchier support) is needed. */ .kph-card-instalment{display:flex;align-items:stretch;height:24px;background:#eaf1fe;border:1px solid #bdd6fb;border-radius:8px;overflow:hidden;box-shadow:0 3px 8px rgba(11,90,238,.2)} .kph-card-instalment__icon{position:relative;display:flex;align-items:center;justify-content:center;width:22px;flex:none;background:#0b5aee;color:#ffffff;border-left:1px dashed rgba(255,255,255,.55)} .kph-card-instalment__icon svg{display:block} .kph-card-instalment__icon::before,.kph-card-instalment__icon::after{content:"";position:absolute;left:-5px;width:10px;height:10px;border-radius:50%;background:#ffffff} .kph-card-instalment__icon::before{top:-5px} .kph-card-instalment__icon::after{bottom:-5px} .kph-card-instalment__text{display:flex;align-items:center;gap:3px;padding:0 8px;font-size:11px;font-weight:700;color:#0b5aee;white-space:nowrap} .kph-card-instalment__text b{font-size:12.5px;font-weight:800;color:#0844b8} .kph-card:hover{box-shadow:0 10px 26px rgba(34,26,28,.08);border-color:#ffd9dc !important} .kph-add{background:#ffe9eb;border:none;border-radius:999px;width:38px;height:38px;font-size:20px;font-weight:800;color:#c20606;cursor:pointer;line-height:1;font-family:inherit;transition:background .15s ease,color .15s ease,transform .1s ease} .kph-add:hover{background:#c20606 !important;color:#ffffff !important} .kph-add:active{transform:scale(.9)} .kph-add[hidden]{display:none !important} /* Card qty stepper: appears in place of the "+" once the product is in the cart. */ .kph-stepper{display:flex;align-items:center;gap:2px;height:38px;padding:0 4px;border-radius:999px;background:#ffe9eb;animation:kphPopIn .32s cubic-bezier(.3,1.5,.5,1)} .kph-stepper[hidden]{display:none !important} .kph-step{width:30px;height:30px;flex:none;cursor:pointer;border:none;background:transparent;border-radius:50%;color:#c20606;font-size:17px;font-weight:800;line-height:1;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease,transform .1s ease} .kph-step:hover{background:#c20606;color:#ffffff} .kph-step:active{transform:scale(.82)} .kph-step-count{min-width:20px;text-align:center;font-weight:900;font-size:14px;color:#221a1c} .kph-step-count.pop{animation:kphCountPop .32s cubic-bezier(.3,1.5,.5,1)} @keyframes kphPopIn{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}} @keyframes kphCountPop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}} /* WooCommerce loop
  • wrapper: neutral box, card fills the cell. */ li.kph-card-li{list-style:none;margin:0;padding:0;display:flex} li.kph-card-li > .kph-card{flex:1;font-family:'Vazirmatn',Tahoma,Arial,sans-serif} /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width:900px){ .kph-header-row{flex-wrap:wrap !important;gap:12px !important} .kph-search{order:3;flex:1 1 100% !important;max-width:none !important} .kph-login{padding:9px !important} .kph-login-label{display:none !important} .kph-footer-grid{grid-template-columns:1fr 1fr !important} } @media (max-width:520px){ .kph-footer-grid{grid-template-columns:1fr !important;gap:28px !important} /* Stacked single column reads as one flat block without dividers between sections. */ .kph-footer-grid > div{border-top:1px solid #2e2426;padding-top:24px} .kph-footer-grid > div:first-child{border-top:none;padding-top:0} .kph-footer-bottom{flex-direction:column;text-align:center;gap:8px} } @media (max-width:480px){ /* Row 1: logo + icon-only login/cart. Row 2: full-width search — NOT crammed onto row 1 (that made the search box a few px wide). */ .kph-header-row{flex-wrap:wrap !important;gap:10px !important;padding:10px 12px !important} .kph-logo-desc{display:none !important} .kph-logo-img{height:32px !important;width:auto !important;max-width:150px !important} .kph-cart-label{display:none !important} .kph-cartbtn{padding:10px !important} .kph-login{padding:10px !important} .kph-search{order:3 !important;flex:1 1 100% !important;min-width:0 !important;max-width:none !important;padding:10px 14px !important} /* 16px stops iOS Safari auto-zooming the page on focus. */ .kph-search input{font-size:16px !important} } @media (max-width:380px){ .kph-header-row{gap:8px !important;padding:8px 10px !important} /* Height-driven: the wordmark is 365x109, so a fixed square would crop it. */ .kph-logo-img{height:30px !important;width:auto !important;max-width:130px !important} .kph-cartbtn{padding:8px !important} .kph-login{padding:8px !important} .kph-search{padding:9px 12px !important} } @media (max-width:340px){ .kph-header-row{gap:6px !important;padding:8px 8px !important} .kph-logo-img{height:26px !important;width:auto !important;max-width:110px !important} .kph-cartbtn{padding:7px !important} .kph-login{padding:7px !important} .kph-search{padding:8px 10px !important} } @media (max-width:820px){ .kph-burger{display:inline-flex !important} .kph-nav{overflow:visible !important;white-space:normal !important} .kph-nav-links{position:absolute;top:100%;right:24px;width:200px;max-width:60%;flex-direction:column;align-items:flex-start !important;gap:0 !important;background:#ffffff;border:1px solid #efe8e6;border-radius:14px;box-shadow:0 16px 40px -18px rgba(34,26,28,.28);padding:6px;z-index:40;display:none !important} .kph-nav-links[data-open="true"]{display:flex !important} #masthead .kph-nav-links > a{width:100%;box-sizing:border-box;align-self:stretch;padding:11px 14px;border-radius:9px} .kph-nav-links > a:hover{background:#fff5f5} /* Dropdown collapses inline inside the burger panel (tap to expand). */ .kph-dd{width:100%} #masthead .kph-dd-toggle{width:100%;box-sizing:border-box;justify-content:space-between;padding:11px 14px;border-radius:9px} .kph-dd-toggle:hover{background:#fff5f5} .kph-dd-menu{position:static;box-shadow:none;border:none;border-radius:0;padding:0 0 4px;min-width:0} .kph-dd-menu::before{display:none} .kph-dd-item{padding:9px 24px;white-space:normal} } /* ── Variable product popup (card "+" → pick options, add without leaving) ── */ body.kp-noscroll{overflow:hidden} .kph-variation-popup{position:fixed;inset:0;z-index:200;display:none;font-family:'Vazirmatn',Tahoma,Arial,sans-serif} .kph-variation-popup.is-open{display:block} .kph-variation-popup__backdrop{position:absolute;inset:0;background:rgba(34,26,28,.5)} /* Top padding is deliberately taller than the sides: the close button lives in that reserved band on its own, so the title/price row below never fights it for space — the button gets a clear row, the header gets a clear row under it, the way a considered modal does it rather than cramming both into the same 22px corner. */ .kph-variation-popup__box{position:relative;margin:6vh auto;width:min(420px,92vw);max-height:88vh;overflow-y:auto;background:#ffffff;border-radius:18px;padding:54px 22px 22px;box-sizing:border-box;text-align:right;box-shadow:0 24px 60px -20px rgba(0,0,0,.4)} .kph-variation-popup__close{position:absolute;top:16px;left:16px;width:32px;height:32px;border:none;border-radius:50%;background:#f2e9e6;color:#221a1c;font-size:18px;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease} .kph-variation-popup__close:hover{background:#ffe9eb;color:#c20606} .kph-variation-popup__close:active{transform:scale(.9)} .kph-variation-popup__loading{padding:40px 0;text-align:center;color:#6f676a;font-size:13.5px} .kph-variation-popup__head{display:flex;gap:14px;align-items:center;margin-bottom:14px} .kph-variation-popup__head img{width:76px;height:76px;object-fit:cover;border-radius:12px;background:#f2e9e6;flex:none} .kph-variation-popup__info{min-width:0;flex:1} /* Long names ("۳۰ عدد بادکنک قرمز سایز بزرگ...") get cut to one line with an ellipsis instead of wrapping into the price/close-button area below and beside it — `min-width:0` on the flex parent above is what lets this actually shrink instead of forcing the popup wider. */ .kph-variation-popup__name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#221a1c;font-weight:800;font-size:14.5px;text-decoration:none;margin-bottom:4px} .kph-variation-popup__name:hover{color:#c20606} .kph-variation-popup__price{font-size:14px;font-weight:700;color:#c20606} .kph-variation-popup__desc{font-size:12.5px;line-height:1.9;color:#6f676a;margin-bottom:14px} .kph-variation-popup__body .variations{width:100%;margin-bottom:12px;border-collapse:collapse} .kph-variation-popup__body .variations tr{display:block;margin-bottom:10px} .kph-variation-popup__body .variations th.label{display:block;text-align:right;font-size:12.5px;font-weight:700;color:#221a1c;padding-bottom:5px} .kph-variation-popup__body .variations td.value{display:block} /* Native