:root { --wd-text-font: "YekanBakhFaNum", Arial, Helvetica, sans-serif; --wd-text-font-weight: 400; --wd-text-color: #777777; --wd-text-font-size: 14px; --wd-title-font: "YekanBakhFaNum", Arial, Helvetica, sans-serif; --wd-title-font-weight: 500; --wd-title-color: #242424; --wd-entities-title-font: "YekanBakhFaNum", Arial, Helvetica, sans-serif; --wd-entities-title-font-weight: 400; --wd-entities-title-color: #333333; --wd-entities-title-color-hover: rgb(51 51 51 / 65%); --wd-alternative-font: "YekanBakhFaNum", Arial, Helvetica, sans-serif; --wd-widget-title-font: "YekanBakhFaNum", Arial, Helvetica, sans-serif; --wd-widget-title-font-weight: 500; --wd-widget-title-transform: uppercase; --wd-widget-title-color: #333; --wd-widget-title-font-size: 16px; --wd-header-el-font: "YekanBakhFaNum", Arial, Helvetica, sans-serif; --wd-header-el-font-weight: 700; --wd-header-el-transform: uppercase; --wd-header-el-font-size: 13px; --wd-otl-style: dotted; --wd-otl-width: 2px; --wd-primary-color: rgb(207,191,178); --wd-alternative-color: rgb(192,177,165); --btn-default-bgcolor: rgb(207,191,178); --btn-default-bgcolor-hover: rgb(192,177,165); --btn-accented-bgcolor: rgb(207,191,178); --btn-accented-bgcolor-hover: rgb(192,177,165); --wd-form-brd-width: 1px; --notices-success-bg: rgb(37,150,39); --notices-success-color: #fff; --notices-warning-bg: rgb(173,162,145); --notices-warning-color: #fff; --wd-link-color: rgb(30,30,30); --wd-link-color-hover: rgb(17,17,17); --wd-sticky-btn-height: 95px; } .wd-age-verify-wrap { --wd-popup-width: 500px; } .wd-popup.wd-promo-popup { background-color: #111111; background-image: url(https://vamareys.com/wp-content/uploads/2021/08/promo-popup.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .wd-promo-popup-wrap { --wd-popup-width: 800px; } :is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content { max-height: 223px; } .wd-page-title .wd-page-title-bg img { object-fit: cover; object-position: center center; } .wd-footer { background-color: #ffffff; background-image: none; } :is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) { background-color: rgb(255,255,255); background-image: none; } .woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) { background-color: rgb(255,255,255); background-image: none; } .mfp-wrap.wd-popup-quick-view-wrap { --wd-popup-width: 920px; } @media (max-width: 1024px) { :root { --wd-sticky-btn-height: 95px; } } @media (max-width: 768.98px) { :root { --wd-sticky-btn-height: 42px; } } :root{ --wd-form-brd-radius: 5px; --btn-default-color: #fff; --btn-default-color-hover: #fff; --btn-accented-color: #fff; --btn-accented-color-hover: #fff; --btn-default-brd-radius: 5px; --btn-default-box-shadow: none; --btn-default-box-shadow-hover: none; --btn-accented-brd-radius: 5px; --btn-accented-box-shadow: none; --btn-accented-box-shadow-hover: none; --wd-brd-radius: 8px; } rs-slides :is([data-type=text],[data-type=button]) { font-family: YekanBakhFaNum !important; } rs-slides :is(h1,h2,h3,h4,h5,h6)[data-type=text] { font-family: YekanBakhFaNum !important; } .wd-page-title { background-color: #0a0a0a; } main#main-content:has(.elementor-video) { padding: 0 !important; } }.mid-button { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; } bdi { color: rgb(53,53,53); } /* ============================================================ Size Guide Button — Rotating Brown Gradient Stroke ============================================================ */ /* 1. Register the angle as an animatable property (this is what allows the gradient to truly ROTATE instead of slide) */ @property --stroke-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* 2. Base button */ .wd-sizeguide-btn a.wd-open-popup { /* Layout */ display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; gap: 8px; border-radius: 6px; text-decoration: none !important; /* Text */ color: rgb(17, 17, 17) !important; font-weight: 600; /* Depth: soft drop shadow + subtle inner top highlight */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.35); /* The stroke */ border: 2px solid transparent; background-color: #fffbf6; /* fallback */ background-image: /* Layer 1 — fill (padding box) */ linear-gradient(145deg, rgb(255, 255, 255), rgb(255, 250, 240)), /* Layer 2 — rotating stroke (border box) Brown → tan → warm shine, mirrored so it loops seamlessly */ conic-gradient( from var(--stroke-angle), rgb(228, 217, 202) 0deg, rgb(236, 230, 221) 60deg, rgb(255, 253, 248) 105deg, rgb(236, 230, 221) 150deg, rgb(228, 217, 202) 180deg, rgb(236, 230, 221) 240deg, rgb(255, 253, 248) 285deg, rgb(236, 230, 221) 330deg, rgb(228, 217, 202) 360deg ); background-origin: padding-box, border-box; background-clip: padding-box, border-box; animation: wdStrokeRotate 6s linear infinite; transition: transform 0.25s ease, box-shadow 0.25s ease; } /* 3. Hover polish */ .wd-sizeguide-btn a.wd-open-popup:hover { transform: translateY(-1px); box-shadow: 0 8px 14px -4px rgba(0, 0, 0, 0.14), 0 3px 6px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .wd-sizeguide-btn a.wd-open-popup:active { transform: translateY(0); } /* 4. Accessible focus state */ .wd-sizeguide-btn a.wd-open-popup:focus-visible { outline: 2px solid #fffbf6; outline-offset: 2px; } /* 5. Icon/label transition (unchanged) */ .wd-sizeguide-btn a.wd-open-popup span, .wd-sizeguide-btn a.wd-open-popup::before { transition: all 0.3s ease; } /* 6. Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .wd-sizeguide-btn a.wd-open-popup { animation: none; } } /* 7. The rotation — one line, perfectly seamless */ @keyframes wdStrokeRotate { to { --stroke-angle: 360deg; } }