/* ========================================================================== TECHNOFA v3 — Storefront layer حس فروشگاه‌های رسمی اپل و سامسونگ: فضای روشن، تایپوگرافی درشت، شیشه‌ای، حرکت نرم و محصول در مرکز توجه. ========================================================================== */ :root { --tf-brand: #1652F0; --tf-brand-2: #4F7BFF; --tf-brand-ink: #0D3BC4; --tf-brand-soft: #EAF1FF; --tf-link: #0066CC; --tf-ink: #1D1D1F; --tf-ink-2: #3A3A3F; --tf-muted: #6E6E73; --tf-faint: #8E8E93; --tf-bg: #F5F5F7; --tf-surface: #FFFFFF; --tf-fill: #EFEFF3; --tf-line: #E6E6EB; --tf-line-2: #D2D2D7; --tf-sale: #FF3B30; --tf-ok: #0A9A55; --tf-r-xl: 32px; --tf-r-lg: 24px; --tf-r-md: 18px; --tf-r-sm: 12px; --tf-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .04); --tf-shadow-2: 0 18px 48px rgba(20, 28, 48, .12); --tf-shadow-brand: 0 10px 26px rgba(22, 82, 240, .28); --tf-ease: cubic-bezier(.22, .8, .24, 1); --tf-font: "Yekan Bakh", "IRANSansX", "Vazirmatn", system-ui, -apple-system, sans-serif; --technofa-brand: var(--tf-brand); --technofa-bg-app: var(--tf-bg); --technofa-ink-primary: var(--tf-ink); --technofa-ink-secondary: var(--tf-muted); /* فاصلهٔ چسبان‌ها از بالا: نوار ادمین + هدر قابل مشاهده (JS مقدار دقیق را به‌روز می‌کند) */ --tf-admin: 0px; --tf-head-base: 128px; } @media (max-width: 991px) { :root { --tf-head-base: 64px; } } body { --tf-head: calc(var(--tf-head-base) + var(--tf-admin)); } .admin-bar { --tf-admin: 32px; } @media screen and (max-width: 782px) { .admin-bar { --tf-admin: 46px; } } @media screen and (max-width: 600px) { .admin-bar { --tf-admin: 0px; } } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tf-head-base) + 52px); overflow-x: clip; } .tf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body.technofa-body { font-family: var(--tf-font); font-size: 15px; line-height: 1.8; background: var(--tf-bg); color: var(--tf-ink); font-feature-settings: "ss01"; overflow-x: clip; } body.technofa-body button, body.technofa-body input, body.technofa-body select, body.technofa-body textarea { font-family: inherit; } body.has-tf-lock { overflow: hidden; } ::selection { background: rgba(22, 82, 240, .18); } :focus-visible { outline: 3px solid rgba(22, 82, 240, .45); outline-offset: 2px; } .tf-wrap { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); } .technofa-container { max-width: 1340px; padding-inline: clamp(16px, 3vw, 32px); } .tf-ico { flex: none; display: block; } .tf-skip { position: absolute; top: -60px; right: 16px; z-index: 2000; padding: 10px 18px; border-radius: 999px; background: var(--tf-ink); color: #FFF; } .tf-skip:focus { top: 12px; } #tf-main { position: absolute; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .tf-header [hidden], .tf-search [hidden], .tf-toast[hidden] { display: none !important; } [data-tf-reveal] { transition: opacity .8s var(--tf-ease), transform .8s var(--tf-ease); } .tf-js [data-tf-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); } .technofa-body [hidden] { display: none !important; } /* ---------- Buttons ---------- */ .tf-btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 22px; border: 0; border-radius: 999px; font: 500 14.5px/1 var(--tf-font); text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--tf-ease); } .tf-btn:active { transform: scale(.97); } .tf-btn--primary { background: var(--tf-brand); color: #FFF !important; box-shadow: 0 6px 16px rgba(22, 82, 240, .22); } .tf-btn--primary:hover { background: var(--tf-brand-ink); box-shadow: var(--tf-shadow-brand); } .tf-btn--light { background: #FFF; color: var(--tf-ink) !important; } .tf-btn--light:hover { background: #F2F2F7; } .tf-btn--ghost { background: var(--tf-fill); color: var(--tf-ink-2) !important; } .tf-btn--ghost:hover { background: #E4E4EA; } .tf-btn--lg { --h: 56px; padding: 0 30px; font-size: 16px; } .tf-btn--sm { --h: 42px; padding: 0 18px; font-size: 13.5px; } .tf-btn--block { width: 100%; } .tf-btn.loading { opacity: .7; pointer-events: none; } .tf-btn.loading .tf-ico { animation: tf-spin 1s linear infinite; } .tf-btn.added { background: var(--tf-ok); box-shadow: 0 8px 20px rgba(10, 154, 85, .25); } .tf-icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tf-ink); cursor: pointer; transition: background .2s; } .tf-icon-btn:hover { background: rgba(0, 0, 0, .05); } .technofa-btn--primary, .technofa-body .button.alt, .technofa-body .single_add_to_cart_button { background: var(--tf-brand); } .technofa-btn { font-size: 14.5px; } /* ---------- Header ---------- */ .tf-header { position: sticky; top: 0; z-index: 900; } .admin-bar .tf-header { top: var(--tf-admin); } .tf-header__bar { position: relative; z-index: 3; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid rgba(0, 0, 0, .06); } .tf-header__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 40px); height: 72px; } .tf-header__burger { display: none; } .tf-header__brand { display: flex; align-items: center; min-width: 0; } /* اندازهٔ لوگو قفل است؛ هر لوگویی (PNG/SVG/افزونه‌های WebP) هدر را بزرگ نمی‌کند */ .tf-logo { display: inline-flex; align-items: center; height: 44px; max-width: 200px; overflow: hidden; line-height: 0; text-decoration: none !important; } .tf-logo picture { display: contents; } .tf-logo img, .tf-logo svg, .tf-logo__img { display: block; width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; object-position: right center; } .tf-header__bar .tf-logo { height: 48px; max-width: 220px; } .tf-logo--sm { height: 36px; } .tf-logo--footer { height: 42px; } .tf-search-trigger { justify-self: center; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 520px; height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: var(--tf-fill); color: var(--tf-faint); font-size: 14.5px; font-weight: 400; text-align: right; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; } .tf-search-trigger:hover { background: #E7E7EC; } .tf-search-trigger:focus-visible { border-color: var(--tf-brand); box-shadow: 0 0 0 4px rgba(22, 82, 240, .14); outline: 0; } .tf-search-trigger .tf-ico { color: var(--tf-ink-2); } .tf-search-trigger__text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tf-search-trigger__kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--tf-line-2); border-radius: 7px; background: #FFF; color: var(--tf-muted); font: 500 12px/1 var(--tf-font); } .tf-header .tf-action.tf-action--search { display: none; border: 0; background: transparent; cursor: pointer; } /* Search layer (opens on click) */ .tf-search-layer { position: fixed; inset: 0; z-index: 1400; visibility: hidden; } .tf-search-layer.is-open { visibility: visible; } .tf-search-layer__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(20, 20, 24, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; cursor: default; } .tf-search-layer.is-open .tf-search-layer__scrim { opacity: 1; } .tf-search-layer__sheet { position: relative; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 18px 0 24px; background: #FFF; border-radius: 0 0 28px 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .14); transform: translateY(-16px); opacity: 0; transition: transform .35s var(--tf-ease), opacity .25s; } .admin-bar .tf-search-layer__sheet { margin-top: var(--tf-admin); } .tf-search-layer.is-open .tf-search-layer__sheet { transform: none; opacity: 1; } .tf-search-layer__inner { position: relative; display: flex; align-items: flex-start; gap: 12px; max-width: 860px; } .tf-search-layer .tf-search { flex: 1; min-width: 0; } .tf-search-layer .tf-search__field { height: 56px; background: var(--tf-fill); } .tf-search-layer .tf-search__input { font-size: 16px; } .tf-search-layer .tf-search__panel { position: static; min-width: 0; max-height: none; margin-top: 12px; padding: 4px 0 0; border-radius: 0; box-shadow: none; animation: none; } .tf-search-layer__close { flex: none; height: 56px; padding: 0 6px; border: 0; background: none; color: var(--tf-link); font-size: 15px; font-weight: 500; cursor: pointer; } .tf-header__actions { display: flex; align-items: center; gap: 6px; } .tf-header__divider { width: 1px; height: 28px; margin-inline: 6px; background: var(--tf-line-2); } .tf-action { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 999px; color: var(--tf-ink) !important; font-size: 14.5px; font-weight: 500; text-decoration: none !important; transition: background .2s; } .tf-action:hover { background: rgba(0, 0, 0, .05); } .tf-action__icon { position: relative; display: inline-flex; } .tf-cart-count { position: absolute; top: -7px; left: -9px; display: none; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border: 2px solid #FFF; border-radius: 999px; background: var(--tf-sale); color: #FFF; font-size: 11.5px; font-weight: 600; line-height: 1; } .tf-cart-count.has-items { display: grid; animation: tf-pop .45s var(--tf-ease); } /* Nav row */ .tf-nav { position: relative; z-index: 2; background: rgba(255, 255, 255, .97); border-bottom: 1px solid rgba(0, 0, 0, .06); transition: transform .35s var(--tf-ease), opacity .2s linear, visibility .35s; will-change: transform; } /* فقط transform — ارتفاع هدر هرگز تغییر نمی‌کند تا اسکرول صفحه نپرد و هدر چشمک نزند */ .tf-header.is-compact .tf-nav { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; } .tf-nav__row { display: flex; align-items: center; gap: 6px; min-height: 56px; } .tf-nav__cats { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--tf-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .2s; } .tf-nav__cats:hover, .tf-mega.is-open .tf-nav__cats { background: var(--tf-fill); } .tf-nav__cats .tf-ico--chev-d { transition: transform .25s; } .tf-mega.is-open .tf-nav__cats .tf-ico--chev-d { transform: rotate(180deg); } .tf-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .tf-nav__list > li { position: relative; } .tf-nav__list > li > a { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; color: var(--tf-ink-2); font-size: 14.5px; font-weight: 450; text-decoration: none !important; transition: color .2s, background .2s; } .tf-nav__list > li > a:hover, .tf-nav__list > li.current-menu-item > a { color: var(--tf-brand); background: var(--tf-brand-soft); } .tf-nav__list > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .6; } .tf-nav__list .sub-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px; margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: #FFF; box-shadow: var(--tf-shadow-2); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--tf-ease); } .tf-nav__list li:hover > .sub-menu, .tf-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .tf-nav__list .sub-menu a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--tf-ink-2); font-size: 14px; text-decoration: none !important; } .tf-nav__list .sub-menu a:hover { background: var(--tf-bg); color: var(--tf-brand); } .tf-nav__deal { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin-inline-start: 8px; padding: 0 14px; border-radius: 999px; background: #FFECEB; color: #E5281D !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .2s, transform .2s; } .tf-nav__deal:hover { background: #FFDCDA; transform: translateY(-1px); } .tf-nav__note { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; color: var(--tf-muted); font-size: 13.5px; font-weight: 450; white-space: nowrap; } .tf-nav__note .tf-ico { color: var(--tf-brand); } /* Mega menu */ .tf-mega { position: static; } .tf-mega__panel { position: absolute; top: calc(100% + 1px); right: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); max-width: 1276px; margin-inline: auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 380px; border-radius: 0 0 28px 28px; background: #FFF; box-shadow: var(--tf-shadow-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .28s var(--tf-ease); overflow: hidden; } .tf-mega.is-open .tf-mega__panel { opacity: 1; visibility: visible; transform: none; } .tf-mega__roots { margin: 0; padding: 14px; list-style: none; background: var(--tf-bg); overflow-y: auto; max-height: 70vh; } .tf-mega__roots a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; color: var(--tf-ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none !important; } .tf-mega__roots a > span:nth-child(2) { flex: 1; } .tf-mega__roots a .tf-ico { opacity: 0; transition: .2s; } .tf-mega__roots li.is-active a { background: #FFF; color: var(--tf-brand); box-shadow: var(--tf-shadow-1); } .tf-mega__roots li.is-active a .tf-ico { opacity: 1; } .tf-mega__thumb { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #FFF; overflow: hidden; } .tf-mega__thumb img { width: 32px; height: 32px; object-fit: contain; } .tf-mega__pane { position: relative; display: none; padding: 28px 32px; } .tf-mega__pane.is-active { display: block; animation: tf-fade .3s var(--tf-ease); } .tf-mega__pane-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .tf-mega__pane-head strong { font-size: 20.5px; font-weight: 700; } .tf-mega__pane-head a { display: inline-flex; align-items: center; gap: 4px; color: var(--tf-link); font-size: 14px; font-weight: 500; } .tf-mega__children { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 4px 20px; margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; } .tf-mega__children a { display: block; padding: 8px 0; color: var(--tf-ink-2); font-size: 14.5px; text-decoration: none !important; transition: color .2s, transform .2s; } .tf-mega__children a:hover { color: var(--tf-brand); transform: translateX(-4px); } .tf-mega__empty { color: var(--tf-muted); } .tf-mega__art { position: absolute; left: 32px; bottom: 24px; width: 220px; height: 220px; object-fit: contain; mix-blend-mode: multiply; } /* ---------- Live search ---------- */ .tf-search { position: relative; margin: 0; } .tf-search__field { position: relative; display: flex; align-items: center; height: 52px; padding-inline: 20px 6px; border: 1.5px solid transparent; border-radius: 999px; background: var(--tf-fill); transition: background .25s, border-color .25s, box-shadow .25s; } .tf-search:hover .tf-search__field { background: #E9E9EE; } .tf-search.is-focused .tf-search__field { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 0 0 5px rgba(22, 82, 240, .12); } .tf-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--tf-ink); font-size: 15px; font-weight: 400; outline: 0 !important; -webkit-appearance: none; appearance: none; } .tf-search__input::placeholder { color: var(--tf-faint); } .tf-search__input::-webkit-search-cancel-button { display: none; } .tf-search__submit, .tf-search__clear, .tf-search__back { display: grid; place-items: center; flex: none; padding: 0; border: 0; background: transparent; color: var(--tf-ink-2); cursor: pointer; } .tf-search__submit { width: 42px; height: 42px; border-radius: 50%; transition: background .2s, color .2s; } .tf-search.is-focused .tf-search__submit { background: var(--tf-brand); color: #FFF; } .tf-search__clear { width: 30px; height: 30px; margin-inline: 4px; border-radius: 50%; background: #D8D8DE; color: #FFF; } .tf-search__back { display: none; width: 40px; height: 40px; } .tf-search__panel { position: absolute; top: calc(100% + 10px); right: 0; left: 0; z-index: 50; min-width: min(620px, 92vw); max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border-radius: 26px; background: #FFF; box-shadow: 0 24px 70px rgba(15, 23, 42, .18), 0 0 0 1px rgba(0, 0, 0, .04); animation: tf-drop .25s var(--tf-ease); } .tf-search__panel[hidden] { display: none; } .tf-sr-group { padding: 6px 4px 10px; } .tf-sr-group + .tf-sr-group { border-top: 1px solid var(--tf-line); padding-top: 12px; } .tf-sr-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 10px 8px; color: var(--tf-muted); font-size: 12.5px; font-weight: 500; } .tf-sr-label button { padding: 0; border: 0; background: none; color: var(--tf-link); font-size: 12.5px; font-weight: 500; cursor: pointer; } .tf-sr-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; } .tf-sr-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tf-bg); color: var(--tf-ink-2); font-size: 13.5px; font-weight: 450; cursor: pointer; transition: background .2s, color .2s; } .tf-sr-chip:hover, .tf-sr-chip.is-active { background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-sr-chip .tf-ico { color: var(--tf-faint); } .tf-sr-item { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 18px; color: var(--tf-ink) !important; text-decoration: none !important; transition: background .15s; } .tf-sr-item:hover, .tf-sr-item.is-active { background: var(--tf-bg); } .tf-sr-item__img { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(145deg, #F7F7F9, #EEEEF2); overflow: hidden; } .tf-sr-item__img img { width: 52px; height: 52px; object-fit: contain; mix-blend-mode: multiply; } .tf-sr-item__title { display: block; overflow: hidden; font-size: 14.5px; font-weight: 500; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; } .tf-sr-item__title mark, .tf-sr-item__en mark, .tf-sr-cat mark { padding: 0 1px; border-radius: 4px; background: rgba(22, 82, 240, .12); color: var(--tf-brand); } .tf-sr-item__meta { display: flex; align-items: center; gap: 8px; color: var(--tf-muted); font-size: 12px; } .tf-sr-item__en { direction: ltr; unicode-bidi: isolate; } .tf-sr-item__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: left; } .tf-sr-item__side .tf-price { align-items: flex-end; } .tf-sr-item__side .tf-price__now { font-size: 14px; } .tf-sr-item__side .tf-price__old { font-size: 11.5px; } .tf-sr-item .tf-pill { font-size: 11.5px; } .tf-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; } .tf-pill.is-sale { background: var(--tf-sale); color: #FFF; } .tf-pill.is-out { background: var(--tf-fill); color: var(--tf-muted); } .tf-sr-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--tf-ink-2) !important; font-size: 14px; font-weight: 450; text-decoration: none !important; } .tf-sr-cat:hover, .tf-sr-cat.is-active { background: var(--tf-bg); color: var(--tf-brand) !important; } .tf-sr-cat small { margin-inline-start: auto; color: var(--tf-faint); } .tf-sr-all { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 4px 2px; min-height: 50px; border-radius: 16px; background: var(--tf-brand-soft); color: var(--tf-brand) !important; font-size: 14.5px; font-weight: 600; text-decoration: none !important; transition: background .2s; } .tf-sr-all:hover, .tf-sr-all.is-active { background: #DCE7FF; } .tf-sr-empty { padding: 30px 16px; text-align: center; } .tf-sr-empty strong { display: block; margin-bottom: 4px; font-size: 16px; } .tf-sr-empty p { margin: 0; color: var(--tf-muted); font-size: 13.5px; } .tf-sr-skeleton { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; padding: 8px 10px; } .tf-sr-skeleton i, .tf-sr-skeleton b { display: block; border-radius: 12px; background: linear-gradient(90deg, #F0F0F4 25%, #E6E6EC 50%, #F0F0F4 75%); background-size: 200% 100%; animation: tf-shimmer 1.2s infinite; } .tf-sr-skeleton i { width: 60px; height: 60px; border-radius: 16px; } .tf-sr-skeleton b { height: 14px; width: 70%; } .tf-sr-skeleton b + b { width: 40%; margin-top: 10px; } /* ---------- Drawer ---------- */ .tf-drawer { position: fixed; inset: 0; z-index: 1300; visibility: hidden; } .tf-drawer.is-open { visibility: visible; } .tf-drawer__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; } .tf-drawer.is-open .tf-drawer__scrim { opacity: 1; } .tf-drawer__sheet { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(380px, 88vw); padding: 14px 16px 24px; overflow-y: auto; background: #FFF; transform: translateX(105%); transition: transform .42s var(--tf-ease); } .tf-drawer.is-open .tf-drawer__sheet { transform: none; box-shadow: -20px 0 60px rgba(0, 0, 0, .15); } .tf-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .tf-drawer__account { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--tf-bg); color: var(--tf-ink) !important; text-decoration: none !important; } .tf-drawer__account > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FFF; color: var(--tf-brand); } .tf-drawer__account b { flex: 1; font-size: 15px; } .tf-drawer__title { margin: 22px 6px 8px; color: var(--tf-muted); font-size: 12.5px; font-weight: 600; } .tf-drawer__cats, .tf-drawer__links, .tf-drawer__cats ul { margin: 0; padding: 0; list-style: none; } .tf-drawer__cats > li > a, .tf-drawer__cats summary { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 14px; color: var(--tf-ink) !important; font-size: 15px; font-weight: 500; text-decoration: none !important; cursor: pointer; list-style: none; } .tf-drawer__cats summary::-webkit-details-marker { display: none; } .tf-drawer__cats summary > span:nth-child(2) { flex: 1; } .tf-drawer__cats summary .tf-ico { color: var(--tf-faint); transition: transform .25s; } .tf-drawer__cats details[open] summary .tf-ico { transform: rotate(180deg); } .tf-drawer__cats .tf-mega__thumb { background: var(--tf-bg); } .tf-drawer__cats details ul { margin: 2px 56px 8px 0; padding-right: 12px; border-right: 2px solid var(--tf-line); } .tf-drawer__cats details ul a { display: block; padding: 8px 4px; color: var(--tf-ink-2); font-size: 14px; text-decoration: none !important; } .tf-drawer__links a { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 14px; color: var(--tf-ink-2) !important; font-size: 14.5px; font-weight: 450; text-decoration: none !important; } .tf-drawer__links a .tf-ico { color: var(--tf-brand); } .tf-drawer__links a:hover { background: var(--tf-bg); } .tf-drawer__call { display: flex; flex-direction: column; margin-top: auto; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, var(--tf-brand), var(--tf-brand-2)); color: #FFF !important; text-decoration: none !important; } .tf-drawer__call small { opacity: .85; font-size: 12.5px; } .tf-drawer__call strong { font-size: 19.5px; text-align: right; } /* ---------- Sections & headings ---------- */ .tf-home { padding-bottom: 20px; } .tf-section { padding-block: clamp(18px, 2.4vw, 30px); } .tf-section--hero { padding-top: clamp(14px, 2vw, 26px); } .tf-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .tf-head__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: 0; } .tf-head h2 { margin: 0; color: var(--tf-ink); font-size: clamp(20.5px, 2.3vw, 30px); font-weight: 700; line-height: 1.4; } .tf-head h2 span { color: var(--tf-muted); font-weight: 600; } .tf-head__side { display: flex; align-items: center; gap: 14px; } .tf-head__more { display: inline-flex; align-items: center; gap: 2px; color: var(--tf-link) !important; font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none !important; } .tf-head__more:hover .tf-ico { transform: translateX(-3px); } .tf-head__more .tf-ico { transition: transform .2s; } .tf-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--tf-brand); font-size: 14px; font-weight: 600; } .tf-countdown { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: #FFECEB; color: #E5281D; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; } .tf-countdown span { display: inline-grid; place-items: center; min-width: 32px; height: 30px; border-radius: 9px; background: var(--tf-sale); color: #FFF; font-size: 14px; } .tf-countdown i { font-style: normal; } .tf-countdown .tf-ico { margin-left: 4px; } /* ---------- Hero ---------- */ .tf-hero-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); } .tf-hero { position: relative; min-height: clamp(360px, 32vw, 470px); border-radius: var(--tf-r-xl); overflow: hidden; isolation: isolate; box-shadow: var(--tf-shadow-1); } .tf-hero__track { position: absolute; inset: 0; } .tf-hero__slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: clamp(24px, 4vw, 56px); color: var(--tf-ink); opacity: 0; visibility: hidden; transition: opacity .9s var(--tf-ease), visibility .9s; } .tf-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .tf-hero__slide.tone-sky { background: radial-gradient(120% 120% at 10% 90%, #BBD3FF 0%, rgba(187, 211, 255, 0) 55%), linear-gradient(135deg, #F4F8FF 0%, #DCE8FF 60%, #C8DBFF 100%); } .tf-hero__slide.tone-graphite { background: radial-gradient(70% 90% at 22% 55%, #3A3A40 0%, #141416 55%, #000 100%); color: #F5F5F7; } .tf-hero__slide.tone-aurora { background: radial-gradient(80% 100% at 15% 80%, #F9D7EF 0%, rgba(249, 215, 239, 0) 60%), linear-gradient(125deg, #F6F0FF 0%, #E4E2FF 55%, #D8E6FF 100%); } .tf-hero__slide.tone-mint { background: linear-gradient(135deg, #F0FBF6 0%, #D3F3E6 60%, #BDEBDA 100%); } .tf-hero__slide.tone-sunset { background: linear-gradient(135deg, #FFF6EE 0%, #FFE6D6 60%, #FFD6C2 100%); } .tf-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .tf-hero__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--tf-ease), transform .7s var(--tf-ease); } .tf-hero__slide.is-active .tf-hero__copy > * { opacity: 1; transform: none; } .tf-hero__slide.is-active .tf-hero__copy > *:nth-child(2) { transition-delay: .08s; } .tf-hero__slide.is-active .tf-hero__copy > *:nth-child(3) { transition-delay: .16s; } .tf-hero__slide.is-active .tf-hero__copy > *:nth-child(4) { transition-delay: .24s; } .tf-hero__slide.is-active .tf-hero__copy > *:nth-child(5) { transition-delay: .32s; } .tone-graphite .tf-eyebrow { color: #FF9F0A; } .tf-hero__title { display: -webkit-box; margin: 0; overflow: hidden; font-size: clamp(26.5px, 3.5vw, 49px); font-weight: 700; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .tone-graphite .tf-hero__title { background: linear-gradient(180deg, #FFF 30%, #B9B9C0); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf-hero__text { max-width: 440px; margin: 0; color: var(--tf-ink-2); font-size: clamp(15px, 1.35vw, 18px); font-weight: 400; line-height: 1.75; } .tone-graphite .tf-hero__text { color: #A1A1A6; } .tf-hero__price .tf-price__now { font-size: clamp(19px, 1.8vw, 24.5px); color: inherit; } .tone-graphite .tf-hero__price .tf-price__old { color: #86868B; } .tf-hero__copy .tf-btn { margin-top: 8px; } .tf-hero__media { position: relative; display: grid; place-items: center; height: 100%; min-height: 0; } .tf-hero__glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 68%); filter: blur(10px); } .tone-graphite .tf-hero__glow { background: radial-gradient(circle, rgba(64, 120, 255, .45) 0%, rgba(64, 120, 255, 0) 65%); } .tone-aurora .tf-hero__glow { background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(197, 172, 255, 0) 68%); } .tf-hero__img, .tf-hero__media img { position: relative; width: 100%; max-width: 480px; height: auto; max-height: clamp(260px, 26vw, 400px); object-fit: contain; transform: translateX(-30px) scale(.94) rotate(-2deg); opacity: 0; transition: transform 1.2s var(--tf-ease), opacity .9s var(--tf-ease); } .tf-hero__slide:not(.tone-graphite) .tf-hero__media img { mix-blend-mode: multiply; } .tone-graphite .tf-hero__media img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); } .tf-hero__slide.is-active .tf-hero__img, .tf-hero__slide.is-active .tf-hero__media img { transform: none; opacity: 1; animation: tf-float 7s ease-in-out 1.2s infinite; } .tf-hero__device { position: relative; width: 44%; aspect-ratio: 9 / 18.5; border-radius: 42px; background: linear-gradient(150deg, #2B2B30, #0B0B0D); box-shadow: inset 0 0 0 7px #3B3B40, 0 40px 60px rgba(0, 0, 0, .25); transform: rotate(-8deg); } .tf-hero__device i { position: absolute; inset: 14px; border-radius: 32px; background: radial-gradient(circle at 30% 20%, #5E8BFF, #1652F0 45%, #6B2BD9 100%); } .tf-hero__controls { position: absolute; bottom: 20px; left: 26px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .tf-hero__arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--tf-ink); cursor: pointer; transition: transform .2s; } .tf-hero__arrow:hover { transform: scale(1.08); } .tf-hero__dots { display: flex; align-items: center; gap: 6px; direction: rtl; } .tf-hero__dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .22); overflow: hidden; cursor: pointer; transition: width .4s var(--tf-ease), background .3s; } .tf-hero__dots button.is-active { width: 34px; background: rgba(0, 0, 0, .14); } .tf-hero__dots button i { position: absolute; inset: 0 0 0 auto; width: 0; border-radius: inherit; background: var(--tf-ink); } .tf-hero__dots button.is-active i { animation: tf-progress var(--tf-interval, 6.5s) linear forwards; } .tf-hero.is-paused .tf-hero__dots button.is-active i { animation-play-state: paused; } /* Promo */ .tf-promo { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--tf-r-xl); overflow: hidden; background: radial-gradient(90% 70% at 15% 100%, #FFD9C4 0%, rgba(255, 217, 196, 0) 70%), linear-gradient(160deg, #FFF8F2 0%, #FFEDE2 100%); color: var(--tf-ink) !important; text-decoration: none !important; box-shadow: var(--tf-shadow-1); isolation: isolate; } .tf-promo__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .tf-promo h2 { display: -webkit-box; margin: 0; overflow: hidden; font-size: clamp(20.5px, 2.1vw, 30px); font-weight: 700; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tf-promo p { max-width: 240px; margin: 0 0 10px; color: var(--tf-ink-2); font-size: 14.5px; line-height: 1.7; } .tf-promo .tf-card__badge { position: static; margin-bottom: 4px; } .tf-promo__media { position: absolute; inset: auto auto -8% -6%; width: 64%; aspect-ratio: 1; display: grid; place-items: center; } .tf-promo__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--tf-ease); } .tf-promo:hover .tf-promo__media img { transform: scale(1.06) rotate(-3deg); } .tf-promo__orb { width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF, #FFC7A8 60%, #FF9E6D); box-shadow: 0 30px 50px rgba(255, 120, 60, .25); animation: tf-float 6s ease-in-out infinite; } /* ---------- Categories ---------- */ .tf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(10px, 1.2vw, 16px); } .tf-cat { position: relative; display: flex; max-width: 240px; width: 100%; justify-self: center; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px; border-radius: var(--tf-r-lg); background: #FFF; color: var(--tf-ink) !important; text-decoration: none !important; box-shadow: var(--tf-shadow-1); transition: transform .45s var(--tf-ease), box-shadow .45s var(--tf-ease); overflow: hidden; } .tf-cat::before { content: ""; position: absolute; inset: auto 15% 34% 15%; height: 42%; border-radius: 50%; background: radial-gradient(circle, rgba(22, 82, 240, .12), transparent 70%); opacity: 0; transition: opacity .45s; } .tf-cat:hover { transform: translateY(-6px); box-shadow: var(--tf-shadow-2); } .tf-cat:hover::before { opacity: 1; } .tf-cat__media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; } .tf-cat__media img { width: 86%; height: 100%; object-fit: contain; transition: transform .6s var(--tf-ease); } .tf-cat:hover .tf-cat__media img { transform: scale(1.1) rotate(-3deg); } .tf-cat__media b { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--tf-brand-soft); color: var(--tf-brand); font-size: 26.5px; } .tf-cat__name { font-size: 15.5px; font-weight: 600; line-height: 1.5; text-align: center; } /* ---------- Product card ---------- */ .tf-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); } .tf-grid--row > .tf-card:nth-child(n+6) { display: none; } .tf-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 12px 12px 14px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); transition: transform .45s var(--tf-ease), box-shadow .45s var(--tf-ease); } .tf-card:hover { transform: translateY(-6px); box-shadow: var(--tf-shadow-2); } .tf-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--tf-r-md); background: radial-gradient(circle at 50% 45%, #FFF 0%, #F4F4F7 75%); overflow: hidden; text-decoration: none !important; } .tf-card__img, .tf-card__media img { width: 82%; height: 82%; object-fit: contain; transition: transform .7s var(--tf-ease); mix-blend-mode: multiply; } .tf-card:hover .tf-card__img, .tf-card:hover .tf-card__media img { transform: scale(1.07); } .tf-card.is-out .tf-card__media img { filter: grayscale(.8); opacity: .65; } .tf-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1; } .tf-card__badge.is-sale { background: var(--tf-sale); color: #FFF; box-shadow: 0 6px 14px rgba(255, 59, 48, .3); } .tf-card__badge.is-new { background: var(--tf-ink); color: #FFF; } .tf-card__rating { position: absolute; bottom: 10px; right: 10px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #B7791F; font-size: 12px; font-weight: 600; } .tf-card__body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 3px; padding: 10px 2px 0; text-align: center; } .tf-dots { display: inline-flex; align-items: center; gap: 5px; min-height: 16px; margin-bottom: 2px; direction: ltr; } .tf-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); } .tf-dots b { color: var(--tf-muted); font-size: 11.5px; font-weight: 500; } .tf-card__title { display: -webkit-box; min-height: 3.2em; margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tf-card__title a { color: var(--tf-ink) !important; text-decoration: none !important; } .tf-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .tf-card__sub { margin: 0; overflow: hidden; color: var(--tf-muted); font-size: 13px; font-weight: 400; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .tf-card__price { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-top: 8px; } .tf-card__aed { color: var(--tf-faint); font-size: 12px; } .tf-card__stock { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; font-weight: 500; } .tf-card__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .tf-card__stock.is-in { color: var(--tf-ok); } .tf-card__stock.is-out { color: var(--tf-faint); } .tf-card__cta { position: relative; z-index: 2; width: 100%; margin-top: 10px; } .tf-card__cta .tf-btn { --h: 46px; border-radius: 14px; font-size: 14px; box-shadow: none; } .tf-card__cta .added_to_cart { display: none !important; } /* Price */ .tf-price { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.35; } .tf-price__old { color: var(--tf-faint); font-size: 12.5px; font-weight: 400; text-decoration-color: rgba(255, 59, 48, .7); } .tf-price__now { display: inline-flex; align-items: baseline; gap: 5px; color: var(--tf-ink); font-weight: 700; } .tf-price__num { font-size: 17.5px; letter-spacing: -.2px; } .tf-price__cur { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-price__from { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-price.is-empty { color: var(--tf-muted); font-weight: 500; } .tf-card .tf-price__now { color: var(--tf-brand); } /* Rails */ .tf-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; margin: -12px calc(-1 * clamp(16px, 3vw, 32px)) -18px; padding: 12px clamp(16px, 3vw, 32px) 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(16px, 3vw, 32px); scrollbar-width: none; overscroll-behavior-x: contain; } .tf-rail::-webkit-scrollbar { display: none; } .tf-rail > * { scroll-snap-align: start; } .tf-rail-nav { display: inline-flex; gap: 8px; } .tf-rail-nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #FFF; color: var(--tf-ink); box-shadow: var(--tf-shadow-1); cursor: pointer; transition: transform .2s, opacity .2s; } .tf-rail-nav button:hover { transform: scale(1.08); } .tf-rail-nav button:disabled { opacity: .35; cursor: default; transform: none; } /* Tabs */ .tf-tabs { display: flex; gap: 8px; margin: -4px 0 18px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; } .tf-tabs::-webkit-scrollbar { display: none; } .tf-tabs button { flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: #FFF; color: var(--tf-ink-2); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: var(--tf-shadow-1); transition: background .25s, color .25s; } .tf-tabs button:hover { color: var(--tf-brand); } .tf-tabs button.is-active { background: var(--tf-ink); color: #FFF; } [data-tf-tabs-target] { transition: opacity .3s; } [data-tf-tabs-target].is-loading { opacity: .35; pointer-events: none; } .tf-empty { grid-column: 1 / -1; padding: 40px 16px; border-radius: var(--tf-r-lg); background: #FFF; color: var(--tf-muted); text-align: center; } /* ---------- Brand showcase ---------- */ .tf-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .tf-brand { position: relative; display: flex; flex-direction: column; align-items: center; min-height: clamp(420px, 38vw, 540px); padding: clamp(28px, 3.4vw, 48px) 24px 0; border-radius: var(--tf-r-xl); overflow: hidden; text-align: center; text-decoration: none !important; isolation: isolate; } .tf-brand.tone-dark { background: radial-gradient(60% 45% at 50% 100%, #2A2A2F 0%, #000 70%); color: #F5F5F7 !important; } .tf-brand.tone-ocean { background: radial-gradient(70% 50% at 50% 105%, #6A8CFF 0%, rgba(106, 140, 255, 0) 70%), linear-gradient(170deg, #07153D 0%, #1428A0 62%, #2F5BFF 100%); color: #FFF !important; } .tf-brand__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tf-brand__eyebrow { color: rgba(255, 255, 255, .6); font-size: 14px; font-weight: 500; letter-spacing: .2px; } .tone-dark .tf-brand__eyebrow { color: #FF9F0A; } .tf-brand h2 { margin: 0; font-size: clamp(24.5px, 3vw, 39.5px); font-weight: 700; line-height: 1.35; } .tone-dark h2 { background: linear-gradient(180deg, #FFF 35%, #A7A7AD); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf-brand p { max-width: 430px; margin: 0; color: rgba(255, 255, 255, .72); font-size: clamp(14.5px, 1.3vw, 17px); line-height: 1.75; } .tf-brand__links { display: inline-flex; align-items: center; gap: 18px; margin-top: 12px; } .tf-brand__more { display: inline-flex; align-items: center; gap: 2px; color: #4DA3FF; font-size: 14.5px; font-weight: 500; } .tone-ocean .tf-brand__more { color: #BFD4FF; } .tf-brand__media { position: relative; z-index: 1; display: grid; place-items: end center; flex: 1; width: 100%; margin-top: 18px; } .tf-brand.is-noimg { min-height: 0; padding-bottom: clamp(36px, 4vw, 56px); justify-content: center; } .tf-brand__media img { width: auto; max-width: 78%; height: 100%; max-height: clamp(220px, 20vw, 300px); object-fit: contain; object-position: bottom; filter: drop-shadow(0 -10px 40px rgba(120, 160, 255, .25)); transform: translateY(18px); transition: transform .9s var(--tf-ease); } .tf-brand__media.is-auto img { max-width: 64%; mix-blend-mode: normal; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); object-position: center; filter: none; transform: translateY(24px) scale(1.05); } .tf-brand:hover .tf-brand__media img { transform: translateY(0) scale(1.03); } /* ---------- Service banners ---------- */ .tf-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .tf-service { position: relative; display: flex; align-items: center; gap: 18px; min-height: 128px; padding: 20px 26px; border-radius: var(--tf-r-lg); color: var(--tf-ink) !important; text-decoration: none !important; overflow: hidden; transition: transform .45s var(--tf-ease), box-shadow .45s var(--tf-ease); } .tf-service:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-2); } .tf-service.tone-sky { background: radial-gradient(60% 120% at 0% 100%, #C9DBFF 0%, rgba(201, 219, 255, 0) 70%), linear-gradient(135deg, #F3F7FF, #E2ECFF); } .tf-service.tone-peach { background: radial-gradient(60% 120% at 0% 100%, #FFD2BC 0%, rgba(255, 210, 188, 0) 70%), linear-gradient(135deg, #FFF7F2, #FFE9DD); } .tf-service__icon { display: grid; place-items: center; flex: none; width: 70px; height: 70px; border-radius: 22px; background: #FFF; color: var(--tf-brand); box-shadow: var(--tf-shadow-1); transition: transform .5s var(--tf-ease); } .tone-peach .tf-service__icon { color: #F2621F; } .tf-service:hover .tf-service__icon { transform: rotate(-8deg) scale(1.06); } .tf-service__copy { display: flex; flex: 1; flex-direction: column; gap: 2px; } .tf-service__copy strong { font-size: clamp(18px, 1.7vw, 22.5px); font-weight: 700; } .tf-service__copy small { color: var(--tf-ink-2); font-size: 14.5px; } .tf-service__go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .8); transition: transform .3s; } .tf-service:hover .tf-service__go { transform: translateX(-4px); } /* ---------- Journal ---------- */ .tf-journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); } .tf-post { display: flex; flex-direction: column; border-radius: var(--tf-r-lg); background: #FFF; color: var(--tf-ink) !important; text-decoration: none !important; overflow: hidden; box-shadow: var(--tf-shadow-1); transition: transform .45s var(--tf-ease), box-shadow .45s; } .tf-post:hover { transform: translateY(-5px); box-shadow: var(--tf-shadow-2); } .tf-post__media { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--tf-brand-soft), #F3E8FF); overflow: hidden; } .tf-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tf-ease); } .tf-post:hover .tf-post__media img { transform: scale(1.05); } .tf-post__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; } .tf-post__body small { color: var(--tf-muted); font-size: 12.5px; } .tf-post__body strong { display: -webkit-box; overflow: hidden; font-size: 16.5px; font-weight: 600; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tf-post__body em { display: inline-flex; align-items: center; gap: 2px; color: var(--tf-link); font-size: 14px; font-style: normal; font-weight: 500; } /* ---------- Footer ---------- */ .tf-footer { margin-top: clamp(24px, 4vw, 48px); padding-top: 28px; background: #FFF; border-top: 1px solid var(--tf-line); color: var(--tf-ink-2); } .tf-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 8px; padding: 18px 8px; list-style: none; border-radius: var(--tf-r-lg); background: var(--tf-bg); } .tf-trust li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 12px; } .tf-trust li + li { border-right: 1px solid var(--tf-line-2); } .tf-trust__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: #FFF; color: var(--tf-brand); } .tf-trust strong { display: block; color: var(--tf-ink); font-size: 15px; font-weight: 600; line-height: 1.5; } .tf-trust small { color: var(--tf-muted); font-size: 12.5px; } .tf-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; padding: 36px 0 28px; } .tf-footer__brand p { max-width: 340px; margin: 14px 0 16px; color: var(--tf-muted); font-size: 14px; line-height: 1.9; } .tf-footer__socials { display: flex; gap: 8px; } .tf-footer__socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tf-bg); color: var(--tf-ink-2); transition: background .2s, color .2s, transform .2s; } .tf-footer__socials a:hover { background: var(--tf-brand); color: #FFF; transform: translateY(-2px); } .tf-footer h3 { margin: 0 0 14px; color: var(--tf-ink); font-size: 16px; font-weight: 700; } .tf-footer__links { margin: 0; padding: 0; list-style: none; } .tf-footer__links a { display: inline-block; padding: 6px 0; color: var(--tf-muted); font-size: 14px; text-decoration: none !important; transition: color .2s, transform .2s; } .tf-footer__links a:hover { color: var(--tf-brand); transform: translateX(-3px); } .tf-footer__phone { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 18px; background: var(--tf-brand-soft); color: var(--tf-ink) !important; text-decoration: none !important; transition: transform .25s; } .tf-footer__phone:hover { transform: translateY(-2px); } .tf-footer__phone.is-alt { background: var(--tf-bg); } .tf-footer__phone > span:first-child { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #FFF; color: var(--tf-brand); } .tf-footer__phone small { display: block; color: var(--tf-muted); font-size: 12px; line-height: 1.4; } .tf-footer__phone strong { display: block; font-size: 17px; font-weight: 700; text-align: right; } .tf-footer__address { display: flex; gap: 8px; margin: 12px 0 0; color: var(--tf-muted); font-size: 13.5px; line-height: 1.8; } .tf-footer__address .tf-ico { margin-top: 4px; color: var(--tf-brand); } .tf-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 18px 0 26px; border-top: 1px solid var(--tf-line); color: var(--tf-muted); font-size: 13px; } .tf-footer__bottom p { margin: 0; } .tf-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 4px 18px; } .tf-footer__bottom nav a { color: var(--tf-muted); text-decoration: none !important; } .tf-footer__bottom nav a:hover { color: var(--tf-brand); } .tf-footer__tag { font-weight: 500; } /* Legacy footer/bottom nav hidden if cached markup exists */ .technofa-bottom-nav, .technofa-trust-bar { display: none !important; } /* ---------- Bottom nav (mobile) ---------- */ .tf-bottom-nav { display: none; } /* ---------- Toast ---------- */ .tf-toast { position: fixed; bottom: 28px; left: 50%; z-index: 1400; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; background: rgba(29, 29, 31, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #FFF; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); transform: translate(-50%, 20px); opacity: 0; transition: .4s var(--tf-ease); } .tf-toast.is-visible { transform: translate(-50%, 0); opacity: 1; } .tf-toast a { color: #7CB4FF; } .tf-toast .tf-ico { color: #30D158; } /* ---------- WooCommerce loops (shop, related, Ajax) ---------- */ .woocommerce ul.products li.tf-loop-item, ul.products li.tf-loop-item { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none; box-shadow: none !important; } .woocommerce ul.products li.tf-loop-item:hover { transform: none; } .technofa-shop-archive ul.products, .technofa-body ul.products { gap: clamp(10px, 1.2vw, 18px) !important; } @media (min-width: 1280px) { .technofa-shop-archive ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .technofa-shop-archive .technofa-shop-header h1 { font-weight: 700; } .technofa-shop-category, .technofa-shop-ordering select, .technofa-shop-search input { font-size: 14.5px; } .technofa-product-summary__title { font-weight: 700; line-height: 1.45; } /* ---------- Compare button (card + product page) ---------- */ .tf-compare-btn { position: absolute; top: 20px; right: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 0; height: 36px; min-width: 36px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--tf-ink-2) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); font-size: 12.5px; font-weight: 600; text-decoration: none !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, color .25s, gap .3s var(--tf-ease), padding .3s var(--tf-ease), transform .2s; } .tf-compare-btn span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s var(--tf-ease), opacity .25s; } .tf-card:hover .tf-compare-btn, .tf-compare-btn:focus-visible { gap: 6px; padding: 0 12px; } .tf-card:hover .tf-compare-btn span, .tf-compare-btn:focus-visible span { max-width: 80px; opacity: 1; } .tf-compare-btn:hover { background: var(--tf-ink); color: #FFF !important; } .tf-compare-btn:active { transform: scale(.94); } .tf-compare-btn.is-active { background: var(--tf-brand); color: #FFF !important; } .tf-compare-btn.is-loading .tf-ico, .tf-compare-pill.is-loading .tf-ico { animation: tf-pulse .8s ease-in-out infinite; } @keyframes tf-pulse { 50% { opacity: .35; } } .tf-compare-pill { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--tf-line); border-radius: 20px; background: #FFF; color: var(--tf-ink) !important; text-decoration: none !important; transition: border-color .25s, box-shadow .25s, transform .25s var(--tf-ease); } .tf-compare-pill:hover { border-color: rgba(22, 82, 240, .35); box-shadow: var(--tf-shadow-1); transform: translateY(-2px); } .tf-compare-pill__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-compare-pill__text { display: flex; flex: 1; flex-direction: column; line-height: 1.6; } .tf-compare-pill__text strong { font-size: 15px; font-weight: 600; } .tf-compare-pill__text small { color: var(--tf-muted); font-size: 12.5px; } .tf-compare-pill > .tf-ico { color: var(--tf-faint); } .tf-compare-pill.is-active .tf-compare-pill__icon { background: var(--tf-brand); color: #FFF; } /* ---------- Compare page ---------- */ .tf-compare { padding: clamp(18px, 3vw, 40px) 0 20px; } .tf-compare__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; } .tf-compare__intro h1 { margin: 6px 0 4px; font-size: clamp(26.5px, 3.4vw, 43px); font-weight: 700; line-height: 1.3; } .tf-compare__intro h1 span { color: var(--tf-muted); } .tf-compare__intro p { margin: 0; color: var(--tf-muted); font-size: 15.5px; } .tf-compare__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .tf-toggle { display: inline-flex; align-items: center; gap: 10px; margin-inline-end: 6px; color: var(--tf-ink-2); font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; } .tf-toggle input { position: absolute; opacity: 0; pointer-events: none; } .tf-toggle__track { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #D8D8DE; transition: background .25s; } .tf-toggle__track i { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--tf-ease); } .tf-toggle input:checked + .tf-toggle__track { background: var(--tf-ok); } .tf-toggle input:checked + .tf-toggle__track i { transform: translateX(-18px); } .tf-toggle input:focus-visible + .tf-toggle__track { outline: 3px solid rgba(22, 82, 240, .45); outline-offset: 2px; } .tf-compare__scroller { margin-inline: calc(-1 * clamp(16px, 3vw, 32px)); padding-inline: clamp(16px, 3vw, 32px); overflow-x: auto; scrollbar-width: thin; } .tf-compare__table { --gap: clamp(10px, 1.4vw, 18px); min-width: calc(var(--cols) * 180px); } .tf-cmp-products, .tf-cmp-row__cells { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); } .tf-cmp-products { padding: 8px 0 12px; } .tf-cmp-product { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); text-align: center; animation: tf-fade .5s var(--tf-ease); } .tf-cmp-product__remove { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tf-fill); color: var(--tf-ink-2) !important; transition: background .2s, color .2s, transform .2s; } .tf-cmp-product__remove:hover { background: var(--tf-sale); color: #FFF !important; transform: rotate(90deg); } .tf-cmp-product__media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--tf-r-md); background: radial-gradient(circle at 50% 45%, #FFF 0%, #F4F4F7 75%); } .tf-cmp-product__media img { width: 70%; height: 86%; object-fit: contain; mix-blend-mode: multiply; } .tf-cmp-product__media .tf-card__badge { top: 8px; right: 8px; left: auto; } .tf-cmp-product__title { display: -webkit-box; min-height: 3.2em; margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tf-cmp-product__title a { color: var(--tf-ink) !important; text-decoration: none !important; } .tf-cmp-product__price .tf-price__now { color: var(--tf-brand); } .tf-cmp-product .tf-btn { margin-top: auto; border-radius: 14px; } .tf-cmp-product .added_to_cart { display: none !important; } .tf-cmp-slot { display: flex; min-height: 100%; } .tf-cmp-slot__add { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px; padding: 18px; border: 2px dashed var(--tf-line-2); border-radius: var(--tf-r-lg); background: rgba(255, 255, 255, .5); color: var(--tf-ink-2); cursor: pointer; transition: border-color .25s, background .25s, color .25s; } .tf-cmp-slot__add:hover { border-color: var(--tf-brand); background: #FFF; color: var(--tf-brand); } .tf-cmp-slot__add > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tf-brand-soft); color: var(--tf-brand); transition: transform .35s var(--tf-ease); } .tf-cmp-slot__add:hover > span { transform: scale(1.1) rotate(90deg); } .tf-cmp-slot__add strong { font-size: 15.5px; } .tf-cmp-slot__add small { color: var(--tf-muted); font-size: 12.5px; line-height: 1.6; } .tf-cmp-picker { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 260px; padding: 10px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-2); animation: tf-fade .3s var(--tf-ease); } .tf-cmp-picker__field { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border: 1.5px solid var(--tf-brand); border-radius: 14px; box-shadow: 0 0 0 4px rgba(22, 82, 240, .1); color: var(--tf-muted); } .tf-cmp-picker__field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; font-size: 14.5px; } .tf-cmp-picker__field input::-webkit-search-cancel-button { display: none; } .tf-cmp-picker__field button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--tf-fill); color: var(--tf-ink-2); cursor: pointer; } .tf-cmp-picker__results { max-height: 320px; overflow-y: auto; } .tf-cmp-picker__results .tf-sr-item { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 6px; } .tf-cmp-picker__results .tf-sr-item__img { width: 48px; height: 48px; border-radius: 12px; } .tf-cmp-picker__results .tf-sr-item__img img { width: 42px; height: 42px; } .tf-cmp-picker__results .tf-sr-item__title { font-size: 13.5px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tf-cmp-picker__results .tf-price { flex-direction: row; gap: 6px; align-items: baseline; } .tf-cmp-picker__results .tf-price__now { font-size: 13px; } .tf-cmp-picker__empty { margin: 16px 0; color: var(--tf-muted); text-align: center; font-size: 13.5px; } .tf-cmp-specs { overflow: hidden; margin-top: 6px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-cmp-row { padding: 14px clamp(14px, 1.6vw, 22px) 16px; transition: background .25s; } .tf-cmp-row + .tf-cmp-row { border-top: 1px solid var(--tf-line); } .tf-cmp-row:hover { background: #FAFAFC; } .tf-cmp-row__label { position: sticky; right: 0; margin-bottom: 6px; color: var(--tf-muted); font-size: 12.5px; font-weight: 600; } .tf-cmp-row.is-diff .tf-cmp-row__label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 8px; vertical-align: middle; border-radius: 50%; background: var(--tf-brand); } .tf-cmp-row__cell { min-width: 0; color: var(--tf-ink); font-size: 14.5px; font-weight: 450; line-height: 1.75; overflow-wrap: anywhere; } .tf-cmp-row__cell .tf-price { align-items: flex-start; } .tf-cmp-row__cell .tf-price__num { font-size: 15.5px; } .tf-cmp-none { color: var(--tf-line-2); } .tf-cmp-rating { color: #B7791F; font-weight: 600; } .tf-cmp-rating small { color: var(--tf-muted); font-weight: 400; } .tf-cmp-colors { display: flex; flex-wrap: wrap; gap: 6px 12px; } .tf-cmp-colors span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; } .tf-cmp-colors i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .tf-compare.is-diff-only .tf-cmp-row.is-same { display: none; } .tf-compare__empty { margin-top: 18px; padding: 22px; border-radius: var(--tf-r-lg); background: #FFF; text-align: center; box-shadow: var(--tf-shadow-1); } .tf-compare__empty p { margin: 0 0 14px; color: var(--tf-ink-2); font-size: 15px; } .tf-compare__empty b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--tf-fill); } @media (max-width: 991px) { .tf-compare-btn { top: 16px; right: 16px; width: 34px; height: 34px; min-width: 0; padding: 0; justify-content: center; } .tf-card:hover .tf-compare-btn { gap: 0; padding: 0; } .tf-compare-btn span, .tf-card:hover .tf-compare-btn span { display: none; } .tf-compare__table { min-width: calc(var(--cols) * 44vw); } .tf-cmp-product { padding: 10px; } .tf-cmp-product__title { font-size: 13.5px; } .tf-cmp-slot__add, .tf-cmp-picker { min-height: 220px; } .tf-cmp-row__label { display: inline-block; } .tf-cmp-row__cell { font-size: 13.5px; } } @media (max-width: 639px) { .tf-compare-btn { top: 13px; right: 13px; width: 32px; height: 32px; } .tf-compare__tools { width: 100%; } .tf-compare__tools .tf-btn span { display: none; } .tf-compare__tools .tf-btn { width: 42px; padding: 0; } } /* ========================================================================== Trade-in (تعویض گوشی) ========================================================================== */ .tf-ti { padding-bottom: 12px; } .tf-ti-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, 4vw, 60px); margin-top: clamp(14px, 2vw, 26px); padding: clamp(28px, 4.5vw, 64px); border-radius: var(--tf-r-xl); background: radial-gradient(70% 90% at 12% 100%, #C7DAFF 0%, rgba(199, 218, 255, 0) 60%), radial-gradient(50% 60% at 95% 0%, #F3E3FF 0%, rgba(243, 227, 255, 0) 70%), linear-gradient(135deg, #F7FAFF 0%, #E6EEFF 100%); overflow: hidden; isolation: isolate; } .tf-ti-hero__copy h1 { margin: 10px 0 12px; font-size: clamp(30px, 4.4vw, 56.5px); font-weight: 700; line-height: 1.25; } .tf-ti-hero__copy h1 span { display: block; background: linear-gradient(90deg, var(--tf-brand), #7B4DFF); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf-ti-hero__copy > p { max-width: 520px; margin: 0; color: var(--tf-ink-2); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.9; } .tf-ti-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .tf-ti-hero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .tf-ti-hero__stats li { display: flex; flex-direction: column; min-width: 120px; padding: 10px 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .tf-ti-hero__stats strong { font-size: 18px; font-weight: 700; } .tf-ti-hero__stats small { color: var(--tf-muted); font-size: 12.5px; } .tf-ti-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 380px; } .tf-ti-hero__glow { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 65%); z-index: -1; } .tf-ti-device { position: relative; width: clamp(110px, 12vw, 160px); aspect-ratio: 9 / 18.5; border-radius: 30px; box-shadow: 0 30px 50px rgba(20, 30, 70, .22); } .tf-ti-device i { position: absolute; inset: 7px; border-radius: 24px; } .tf-ti-device span { position: absolute; bottom: -34px; right: 0; left: 0; color: var(--tf-muted); font-size: 13px; font-weight: 600; text-align: center; } .tf-ti-device.is-old { background: linear-gradient(160deg, #8E9199, #4C4F56); transform: rotate(-9deg) translateY(12px); animation: tf-ti-old 5s ease-in-out infinite; } .tf-ti-device.is-old i { background: linear-gradient(160deg, #2C2F36, #17181C); } .tf-ti-device.is-old i::after { content: ""; position: absolute; top: 20%; right: 18%; width: 60%; height: 2px; background: rgba(255, 255, 255, .25); transform: rotate(35deg); box-shadow: 0 30px 0 rgba(255, 255, 255, .12); } .tf-ti-device.is-new { background: linear-gradient(160deg, #F1F1F4, #BFC3CC); transform: rotate(7deg); animation: tf-ti-new 5s ease-in-out infinite; } .tf-ti-device.is-new i { background: radial-gradient(circle at 30% 20%, #8FB1FF 0%, #1652F0 45%, #7B2BD9 100%); } .tf-ti-device.is-new::before { content: ""; position: absolute; top: 14px; left: 50%; z-index: 2; width: 34%; height: 12px; border-radius: 999px; background: #0B0B0D; transform: translateX(-50%); } .tf-ti-hero__swap { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #FFF; color: var(--tf-brand); box-shadow: var(--tf-shadow-2); animation: tf-ti-spin 5s var(--tf-ease) infinite; } .tf-ti-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--tf-shadow-2); animation: tf-float 6s ease-in-out infinite; } .tf-ti-float .tf-ico { display: grid; flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--tf-brand-soft); color: var(--tf-brand); box-sizing: border-box; } .tf-ti-float span { display: flex; flex-direction: column; line-height: 1.5; } .tf-ti-float b { font-size: 13.5px; } .tf-ti-float small { color: var(--tf-muted); font-size: 12px; } .tf-ti-float.is-a { top: 10%; right: 0; } .tf-ti-float.is-b { bottom: 8%; left: 0; animation-delay: -3s; } .tf-ti-float.is-b .tf-ico { background: #E7F8EF; color: var(--tf-ok); } @keyframes tf-ti-old { 50% { transform: rotate(-12deg) translate(-6px, 18px); } } @keyframes tf-ti-new { 50% { transform: rotate(4deg) translateY(-10px); } } @keyframes tf-ti-spin { 0%, 35% { transform: rotate(0); } 55%, 100% { transform: rotate(180deg); } } .tf-ti-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; counter-reset: ti; } .tf-ti-steps li { position: relative; padding: 22px 20px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); transition: transform .45s var(--tf-ease), box-shadow .45s; } .tf-ti-steps li:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-2); } .tf-ti-steps li:not(:last-child)::after { content: ""; position: absolute; top: 48px; left: calc(-1 * clamp(10px, 1.4vw, 18px)); width: clamp(10px, 1.4vw, 18px); border-top: 2px dashed var(--tf-line-2); } .tf-ti-steps__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 18px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-ti-steps__icon em { position: absolute; top: -6px; left: -6px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #FFF; border-radius: 50%; background: var(--tf-ink); color: #FFF; font-size: 12px; font-style: normal; font-weight: 700; } .tf-ti-steps strong { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 700; } .tf-ti-steps p { margin: 0; color: var(--tf-muted); font-size: 14px; line-height: 1.8; } /* Result */ .tf-ti-result { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; padding: 20px 22px; border-radius: var(--tf-r-lg); animation: tf-fade .5s var(--tf-ease); } .tf-ti-result.is-success { background: linear-gradient(135deg, #E9FAF1, #D6F3E4); color: #0B5D37; } .tf-ti-result.is-error { background: #FFF0EF; color: #9E1F17; } .tf-ti-result__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #FFF; } .tf-ti-result__body strong { display: block; font-size: 17px; font-weight: 700; } .tf-ti-result__body p { margin: 2px 0 0; color: inherit; opacity: .85; font-size: 14px; } .tf-ti-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .tf-ti-ref { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px dashed rgba(11, 93, 55, .4); border-radius: 14px; background: rgba(255, 255, 255, .7); color: inherit; cursor: pointer; } .tf-ti-ref small { opacity: .7; } .tf-ti-ref b { font-size: 15px; letter-spacing: .5px; } /* Wizard */ .tf-ti-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: clamp(12px, 1.8vw, 22px); } .tf-ti-form { position: relative; margin: 0; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-ti-progress { position: relative; margin: -4px 0 26px; } .tf-ti-progress ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .tf-ti-progress button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--tf-faint); font-size: 12.5px; font-weight: 600; cursor: pointer; } .tf-ti-progress button:disabled { cursor: default; } .tf-ti-progress i { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--tf-line-2); border-radius: 50%; background: #FFF; font-style: normal; transition: .35s var(--tf-ease); } .tf-ti-progress i b { font-size: 14px; } .tf-ti-progress i .tf-ico { position: absolute; opacity: 0; transform: scale(.5); transition: .3s var(--tf-ease); } .tf-ti-progress li.is-active button { color: var(--tf-ink); } .tf-ti-progress li.is-active i { border-color: var(--tf-brand); background: var(--tf-brand); color: #FFF; box-shadow: 0 0 0 6px rgba(22, 82, 240, .14); } .tf-ti-progress li.is-done button { color: var(--tf-ink-2); } .tf-ti-progress li.is-done i { border-color: var(--tf-ok); background: var(--tf-ok); color: #FFF; } .tf-ti-progress li.is-done i b { opacity: 0; } .tf-ti-progress li.is-done i .tf-ico { opacity: 1; transform: none; } .tf-ti-progress__bar { position: absolute; top: 18px; right: 10%; left: 10%; height: 3px; border-radius: 3px; background: var(--tf-line); } .tf-ti-progress__bar > span { position: absolute; top: 0; right: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--tf-brand), var(--tf-ok)); transition: width .5s var(--tf-ease); } .tf-ti-step { min-width: 0; margin: 0; padding: 0; border: 0; } .tf-ti-step.is-active { animation: tf-fade .45s var(--tf-ease); } .tf-ti-step.is-shake { animation: tf-ti-shake .4s; } @keyframes tf-ti-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .tf-ti-step__title { display: flex; flex-direction: column; float: none; width: 100%; margin-bottom: 20px; padding: 0; } .tf-ti-step__title span { font-size: clamp(19px, 2vw, 24.5px); font-weight: 700; line-height: 1.5; } .tf-ti-step__title small { color: var(--tf-muted); font-size: 14px; } .tf-ti-field { margin-bottom: 20px; } .tf-ti-field > label, .tf-ti-label { display: block; margin-bottom: 8px; color: var(--tf-ink-2); font-size: 14px; font-weight: 600; } .tf-ti-input { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--tf-fill); color: var(--tf-faint); transition: border-color .2s, background .2s, box-shadow .2s; } .tf-ti-input:focus-within { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12); color: var(--tf-brand); } .tf-ti-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--tf-ink); font-size: 15.5px; font-weight: 450; } .tf-ti-input--ltr input { text-align: left; letter-spacing: .6px; } .tf-ti-input em { color: var(--tf-faint); font-size: 12.5px; font-style: normal; font-variant-numeric: tabular-nums; } .tf-ti-input.is-invalid, .tf-ti-segments.is-invalid label span { border-color: var(--tf-sale) !important; } .tf-ti-input.is-invalid { background: #FFF6F5; box-shadow: 0 0 0 4px rgba(255, 59, 48, .1); } .tf-ti-error { display: none; margin: 8px 2px 0; color: #D92D20; font-size: 13px; font-weight: 500; } .tf-ti-error.is-visible { display: block; animation: tf-fade .3s; } .tf-ti-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tf-ti-chips button { min-height: 36px; padding: 0 14px; border: 1px solid var(--tf-line); border-radius: 999px; background: #FFF; color: var(--tf-ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: .2s; } .tf-ti-chips button:hover, .tf-ti-chips button.is-active { border-color: var(--tf-brand); background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-ti-segments { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .tf-ti-segments label, .tf-ti-options label { position: relative; cursor: pointer; } .tf-ti-segments input, .tf-ti-options input, .tf-ti-check input, .tf-ti-consents input, .tf-ti-upload input { position: absolute; opacity: 0; pointer-events: none; } .tf-ti-segments span { display: grid; place-items: center; min-height: 52px; border: 1.5px solid var(--tf-line); border-radius: 14px; background: #FFF; color: var(--tf-ink-2); font-size: 14px; font-weight: 600; transition: .2s; } .tf-ti-segments label:hover span { border-color: var(--tf-line-2); } .tf-ti-segments input:checked + span { border-color: var(--tf-brand); background: var(--tf-brand-soft); color: var(--tf-brand); box-shadow: inset 0 0 0 1px var(--tf-brand); } .tf-ti-segments input:focus-visible + span, .tf-ti-options input:focus-visible + span, .tf-ti-check input:focus-visible ~ .tf-ti-check__label { outline: 3px solid rgba(22, 82, 240, .4); outline-offset: 2px; } .tf-ti-health { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; padding: 12px 16px; border-radius: 16px; background: var(--tf-bg); } .tf-ti-health__meter, .tf-ti-summary__meter { position: relative; flex: 1; min-width: 120px; height: 8px; border-radius: 8px; background: #E1E1E8; overflow: hidden; } .tf-ti-health__meter span, .tf-ti-summary__meter i { position: absolute; top: 0; right: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--tf-sale); transition: width .5s var(--tf-ease), background .3s; } [data-tone="mid"] { background: #F5A623 !important; } [data-tone="good"] { background: var(--tf-ok) !important; } .tf-ti-health p { margin: 0; color: var(--tf-ink-2); font-size: 13.5px; } .tf-ti-link { padding: 0; border: 0; background: none; color: var(--tf-link); font-size: 13.5px; font-weight: 600; cursor: pointer; } .tf-ti-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .tf-ti-check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--tf-line); border-radius: 16px; background: #FFF; cursor: pointer; transition: .25s var(--tf-ease); } .tf-ti-check:hover { border-color: var(--tf-line-2); transform: translateY(-1px); } .tf-ti-check__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--tf-fill); color: var(--tf-muted); transition: .25s; } .tf-ti-check__label { flex: 1; color: var(--tf-ink-2); font-size: 13.5px; font-weight: 500; line-height: 1.5; } .tf-ti-check__tick { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--tf-line-2); border-radius: 50%; color: transparent; transition: .25s; } .tf-ti-check:has(input:checked) { border-color: rgba(10, 154, 85, .5); background: #F2FBF6; } .tf-ti-check input:checked ~ .tf-ti-check__icon { background: #DDF5E8; color: var(--tf-ok); } .tf-ti-check input:checked ~ .tf-ti-check__tick { border-color: var(--tf-ok); background: var(--tf-ok); color: #FFF; } .tf-ti-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: #FFF8E6; color: #7A5200; font-size: 13px; line-height: 1.8; } .tf-ti-tip .tf-ico { flex: none; margin-top: 3px; } .tf-ti-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tf-ti-options span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 12px; min-height: 76px; padding: 12px 16px; border: 1.5px solid var(--tf-line); border-radius: 16px; background: #FFF; transition: .2s; } .tf-ti-options .tf-ico { grid-row: span 2; color: var(--tf-muted); } .tf-ti-options strong { font-size: 14.5px; } .tf-ti-options small { color: var(--tf-muted); font-size: 12.5px; } .tf-ti-options input:checked + span { border-color: var(--tf-brand); background: var(--tf-brand-soft); box-shadow: inset 0 0 0 1px var(--tf-brand); } .tf-ti-options input:checked + span .tf-ico { color: var(--tf-brand); } .tf-ti-uploads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .tf-ti-upload { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 12px 14px; border: 2px dashed var(--tf-line-2); border-radius: 20px; background: var(--tf-bg); text-align: center; cursor: pointer; transition: .25s; } .tf-ti-upload:hover { border-color: var(--tf-brand); background: #FFF; } .tf-ti-upload.has-file { border-style: solid; border-color: rgba(10, 154, 85, .5); background: #FFF; } .tf-ti-upload.is-invalid { border-color: var(--tf-sale); } .tf-ti-upload__preview { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: 14px; background: #FFF; color: var(--tf-brand); overflow: hidden; } .tf-ti-upload__preview img { width: 100%; height: 100%; object-fit: cover; } .tf-ti-upload strong { font-size: 14px; } .tf-ti-upload small { color: var(--tf-muted); font-size: 12px; } .tf-ti-upload__remove { position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #FFF; cursor: pointer; } .tf-ti-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .tf-ti-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; } .tf-ti-review:empty { display: none; } .tf-ti-review > div { display: grid; grid-template-columns: 1fr auto; padding: 10px 14px; border-radius: 14px; background: var(--tf-bg); } .tf-ti-review dt { color: var(--tf-muted); font-size: 12px; } .tf-ti-review dd { grid-column: 1; margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .tf-ti-review button { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; border: 0; background: none; color: var(--tf-link); font-size: 12.5px; font-weight: 600; cursor: pointer; } .tf-ti-consents { display: grid; gap: 8px; } .tf-ti-consents label { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--tf-ink-2); font-size: 13.5px; line-height: 1.8; cursor: pointer; transition: background .2s; } .tf-ti-consents label:hover { background: var(--tf-bg); } .tf-ti-consents__box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 3px; border: 1.5px solid var(--tf-line-2); border-radius: 7px; color: transparent; transition: .2s; } .tf-ti-consents input:checked + .tf-ti-consents__box { border-color: var(--tf-brand); background: var(--tf-brand); color: #FFF; } .tf-ti-consents input:focus-visible + .tf-ti-consents__box { outline: 3px solid rgba(22, 82, 240, .4); outline-offset: 2px; } .tf-ti-nav { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--tf-line); } .tf-ti-nav__hint { margin-inline-start: auto; color: var(--tf-faint); font-size: 13px; font-weight: 500; } .tf-ti-nav [data-ti-prev][hidden] + .tf-ti-nav__hint { margin-inline-start: 0; } .tf-ti-nav .tf-btn--primary { min-width: 160px; } .tf-ti-nav [data-ti-submit].loading .tf-ico { animation: tf-spin 1s linear infinite; } /* Summary aside */ .tf-ti-summary { position: sticky; top: calc(var(--tf-head) + 20px); padding: 20px; border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-ti-summary__title { margin: 0 0 14px; color: var(--tf-muted); font-size: 13px; font-weight: 600; } .tf-ti-summary__device { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--tf-line); } .tf-ti-summary__phone { position: relative; flex: none; width: 46px; height: 88px; border-radius: 14px; background: linear-gradient(160deg, #DADCE2, #9FA3AD); transition: transform .5s var(--tf-ease); } .tf-ti-summary__phone i { position: absolute; inset: 4px; border-radius: 10px; background: linear-gradient(160deg, #3A3D45, #1C1D22); transition: background .5s; } .tf-ti-wizard.has-model .tf-ti-summary__phone { transform: rotate(-6deg); } .tf-ti-wizard.has-model .tf-ti-summary__phone i { background: radial-gradient(circle at 30% 20%, #8FB1FF, #1652F0 50%, #7B2BD9); } .tf-ti-summary__device strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } .tf-ti-summary__device small { color: var(--tf-muted); font-size: 13px; } .tf-ti-summary dl { display: grid; gap: 12px; margin: 0 0 16px; } .tf-ti-summary dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tf-ti-summary dt { color: var(--tf-muted); font-size: 13.5px; } .tf-ti-summary dd { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; } .tf-ti-summary__meter { width: 80px; flex: none; min-width: 0; height: 6px; } .tf-ti-summary__perks { display: grid; gap: 8px; margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--tf-line); } .tf-ti-summary__perks li { display: flex; align-items: center; gap: 8px; color: var(--tf-ink-2); font-size: 13px; } .tf-ti-summary__perks .tf-ico { color: var(--tf-brand); } /* Help */ .tf-ti-help { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(12px, 1.8vw, 22px); align-items: start; } .tf-ti-prep { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--tf-r-xl); background: radial-gradient(80% 60% at 0% 100%, #2B3A7A 0%, rgba(43, 58, 122, 0) 70%), linear-gradient(160deg, #10142A, #1B2250); color: #FFF; } .tf-ti-prep__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .1); color: #8FB1FF; } .tf-ti-prep h2 { margin: 16px 0 4px; font-size: 22.5px; font-weight: 700; } .tf-ti-prep > p { margin: 0 0 16px; color: rgba(255, 255, 255, .65); font-size: 14px; } .tf-ti-prep ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .tf-ti-prep li { display: flex; align-items: center; gap: 10px; font-size: 14px; } .tf-ti-prep li i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(48, 209, 88, .18); color: #30D158; } .tf-ti-prep__call { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #FFF !important; text-decoration: none !important; transition: background .2s; } .tf-ti-prep__call:hover { background: rgba(255, 255, 255, .14); } .tf-ti-prep__call span { display: flex; flex-direction: column; } .tf-ti-prep__call small { color: rgba(255, 255, 255, .6); font-size: 12px; } .tf-ti-prep__call b { font-size: 18px; text-align: right; } .tf-ti-faq { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-ti-faq h2 { margin: 0 0 10px; font-size: 22.5px; font-weight: 700; } .tf-ti-faq details { border-bottom: 1px solid var(--tf-line); } .tf-ti-faq details:last-child { border-bottom: 0; } .tf-ti-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; } .tf-ti-faq summary::-webkit-details-marker { display: none; } .tf-ti-faq summary i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tf-fill); color: var(--tf-ink-2); transition: transform .3s var(--tf-ease), background .2s; } .tf-ti-faq details[open] summary i { transform: rotate(45deg); background: var(--tf-brand); color: #FFF; } .tf-ti-faq details p { margin: 0 0 16px; color: var(--tf-ink-2); font-size: 14.5px; line-height: 1.95; animation: tf-fade .35s var(--tf-ease); } .tf-ti-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--tf-r-xl); background: radial-gradient(60% 120% at 0% 100%, #2F5BFF 0%, rgba(47, 91, 255, 0) 60%), #000; color: #FFF !important; text-decoration: none !important; overflow: hidden; transition: transform .45s var(--tf-ease); } .tf-ti-cta:hover { transform: translateY(-3px); } .tf-ti-cta__eyebrow { color: #FF9F0A; font-size: 13.5px; font-weight: 600; } .tf-ti-cta h2 { margin: 6px 0; font-size: clamp(20.5px, 2.6vw, 32px); font-weight: 700; line-height: 1.4; } .tf-ti-cta p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 15px; } .tf-ti-cta .tf-btn { flex: none; } /* Account endpoint */ .tf-ti-account__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .tf-ti-account__head h2 { margin: 6px 0 2px; font-size: 22.5px; font-weight: 700; } .tf-ti-account__head p { margin: 0; color: var(--tf-muted); font-size: 14px; } .tf-ti-quotes { display: grid; gap: 12px; } .tf-ti-quote { overflow: hidden; padding: 18px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: inset 0 0 0 1px var(--tf-line); } .tf-ti-quote header { display: flex; align-items: center; gap: 12px; } .tf-ti-quote__device { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-ti-quote header > div { flex: 1; min-width: 0; } .tf-ti-quote h3 { margin: 0; font-size: 16px; font-weight: 700; text-align: right; } .tf-ti-quote header small { color: var(--tf-muted); font-size: 12.5px; } .tf-ti-status { flex: none; padding: 4px 12px; border-radius: 999px; background: #FFF4E0; color: #9A6200; font-size: 12.5px; font-weight: 600; } .tf-ti-status.is-success { background: #E7F8EF; color: #0B7A45; } .tf-ti-status.is-danger { background: #FFECEB; color: #C4291F; } .tf-ti-quote__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 14px; padding: 0; list-style: none; } .tf-ti-quote__flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--tf-faint); font-size: 12px; font-weight: 500; text-align: center; } .tf-ti-quote__flow li::before { content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 2px; background: var(--tf-line); } .tf-ti-quote__flow li:first-child::before { display: none; } .tf-ti-quote__flow i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--tf-line-2); } .tf-ti-quote__flow li.is-done, .tf-ti-quote__flow li.is-current { color: var(--tf-ink-2); } .tf-ti-quote__flow li.is-done i, .tf-ti-quote__flow li.is-done::before, .tf-ti-quote__flow li.is-current::before { background: var(--tf-ok); } .tf-ti-quote__flow li.is-current i { background: var(--tf-brand); box-shadow: 0 0 0 5px rgba(22, 82, 240, .18); } .tf-ti-quote__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tf-ti-quote__meta > div { padding: 10px 12px; border-radius: 14px; background: var(--tf-bg); } .tf-ti-quote__meta small { display: block; color: var(--tf-muted); font-size: 12px; } .tf-ti-quote__meta strong { font-size: 14px; font-weight: 700; } .tf-ti-quote__meta em { display: block; color: var(--tf-sale); font-size: 12px; font-style: normal; } .tf-ti-quote__meta .is-price { background: #EAF1FF; } .tf-ti-quote__meta .is-price strong { color: var(--tf-brand); font-size: 16px; } .tf-ti-quote.is-rejected { box-shadow: inset 0 0 0 1px #F5C2CC; } .tf-ti-quote__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--tf-line); } .tf-ti-quote__foot p { flex: 1; min-width: 200px; margin: 0; color: var(--tf-muted); font-size: 12.5px; line-height: 1.9; } .tf-ti-quote__actions { display: flex; flex-wrap: wrap; gap: 8px; } .tf-ti-quote__actions .tf-btn { --h: 40px; } .tf-ti-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 16px; border: 2px dashed var(--tf-line-2); border-radius: var(--tf-r-lg); text-align: center; } .tf-ti-empty span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-ti-empty p { margin: 0; color: var(--tf-ink-2); } @media (max-width: 1100px) { .tf-ti-wizard { grid-template-columns: 1fr; } .tf-ti-summary { position: static; order: -1; padding: 14px 16px; } .tf-ti-summary__title, .tf-ti-summary__perks { display: none; } .tf-ti-summary__device { margin: 0 0 10px; padding-bottom: 10px; } .tf-ti-summary__phone { width: 30px; height: 58px; border-radius: 9px; } .tf-ti-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; } .tf-ti-summary dl > div { flex-direction: column; align-items: flex-start; gap: 2px; } .tf-ti-summary dt { font-size: 12px; } .tf-ti-summary dd { font-size: 13px; } .tf-ti-summary__meter { width: 44px; } } @media (max-width: 991px) { .tf-ti-hero { grid-template-columns: 1fr; text-align: center; } .tf-ti-hero__copy > p { margin-inline: auto; } .tf-ti-hero__copy .tf-eyebrow, .tf-ti-hero__actions, .tf-ti-hero__stats { justify-content: center; } .tf-ti-hero__visual { min-height: 300px; order: -1; } .tf-ti-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-ti-steps li::after { display: none; } .tf-ti-help { grid-template-columns: 1fr; } .tf-ti-summary { top: auto; } } @media (max-width: 639px) { .tf-ti-hero { padding: 22px 16px 26px; border-radius: 28px; } .tf-ti-hero__visual { min-height: 250px; gap: 10px; } .tf-ti-device { width: 92px; border-radius: 22px; } .tf-ti-device i { inset: 5px; border-radius: 18px; } .tf-ti-hero__swap { width: 46px; height: 46px; } .tf-ti-float { padding: 8px 10px; } .tf-ti-float small { display: none; } .tf-ti-float .tf-ico { width: 28px; height: 28px; padding: 6px; } .tf-ti-float.is-a { top: 2%; } .tf-ti-float.is-b { bottom: 4%; } .tf-ti-hero__stats li { min-width: 0; flex: 1; padding: 8px 10px; } .tf-ti-hero__stats strong { font-size: 15px; } .tf-ti-hero__stats small { font-size: 11.5px; } .tf-ti-hero__actions .tf-btn { flex: 1; } .tf-ti-steps { grid-template-columns: 1fr; } .tf-ti-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; padding: 16px; } .tf-ti-steps__icon { grid-row: span 2; margin: 0; } .tf-ti-form { padding: 16px 14px; border-radius: 26px; } .tf-ti-progress span { font-size: 11.5px; } .tf-ti-progress i { width: 32px; height: 32px; } .tf-ti-progress__bar { top: 15px; } .tf-ti-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-ti-checks { grid-template-columns: 1fr 1fr; gap: 8px; } .tf-ti-check { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 10px; } .tf-ti-check__tick { position: absolute; top: 10px; left: 10px; } .tf-ti-check__label { font-size: 12.5px; } .tf-ti-options, .tf-ti-grid2, .tf-ti-review { grid-template-columns: 1fr; } .tf-ti-uploads { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tf-ti-upload { padding: 8px 6px 10px; border-radius: 16px; } .tf-ti-upload strong { font-size: 12.5px; } .tf-ti-upload small { display: none; } .tf-ti-upload__remove { top: 12px; left: 12px; width: 26px; height: 26px; } .tf-ti-nav { margin-top: 20px; padding-top: 14px; } .tf-ti-device span { display: none; } .tf-ti-float.is-b { bottom: 14%; } .tf-ti-nav__hint { display: none; } .tf-ti-nav .tf-btn--primary { flex: 1; min-width: 0; margin-inline-start: auto; } .tf-ti-quote__meta { grid-template-columns: 1fr 1fr; } .tf-ti-cta { flex-direction: column; align-items: flex-start; } } /* ========================================================================== B2B partner registration (فروش ویژه همکاران) ========================================================================== */ .tf-b2b { padding: clamp(14px, 2vw, 26px) 0 10px; } .tf-b2b-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(28px, 4.5vw, 64px); border-radius: var(--tf-r-xl); background: radial-gradient(60% 80% at 100% 0%, rgba(79, 123, 255, .55) 0%, rgba(79, 123, 255, 0) 60%), radial-gradient(50% 70% at 0% 100%, rgba(123, 77, 255, .45) 0%, rgba(123, 77, 255, 0) 65%), linear-gradient(135deg, #0A1440 0%, #101C5C 55%, #14207A 100%); color: #FFF; overflow: hidden; isolation: isolate; } .tf-b2b-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(70% 70% at 30% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 30% 50%, #000, transparent); } .tf-b2b-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #C9D6FF; font-size: 13.5px; font-weight: 600; } .tf-b2b-hero h1 { margin: 16px 0 12px; font-size: clamp(30px, 4.4vw, 54.5px); font-weight: 700; line-height: 1.3; } .tf-b2b-hero h1 span { display: block; background: linear-gradient(90deg, #8FB1FF, #D5B8FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf-b2b-hero__copy > p { max-width: 520px; margin: 0; color: rgba(255, 255, 255, .72); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.9; } .tf-b2b-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; } .tf-b2b-hero__login { color: rgba(255, 255, 255, .75) !important; font-size: 14.5px; text-decoration: none !important; } .tf-b2b-hero__login b { color: #FFF; } .tf-b2b-hero__points { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; list-style: none; } .tf-b2b-hero__points li { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 450; } .tf-b2b-hero__points .tf-ico { color: #30D158; } .tf-b2b-hero__visual { position: relative; min-height: 360px; display: grid; place-items: center; } .tf-b2b-panel { width: min(100%, 400px); padding: 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 26px; background: rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px rgba(0, 0, 0, .35); transform: perspective(900px) rotateY(10deg) rotateX(4deg); animation: tf-float 7s ease-in-out infinite; } .tf-b2b-panel__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .tf-b2b-panel__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .tf-b2b-panel__bar i:first-child { background: #FF5F57; } .tf-b2b-panel__bar i:nth-child(2) { background: #FEBC2E; } .tf-b2b-panel__bar i:nth-child(3) { background: #28C840; } .tf-b2b-panel__bar span { margin-inline-start: auto; color: rgba(255, 255, 255, .8); font-size: 12.5px; font-weight: 600; } .tf-b2b-panel__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .tf-b2b-panel__stats div { padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); } .tf-b2b-panel__stats small { display: block; color: rgba(255, 255, 255, .6); font-size: 11.5px; } .tf-b2b-panel__stats b { font-size: 14px; } .tf-b2b-panel__row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); } .tf-b2b-panel__row + .tf-b2b-panel__row { margin-top: 6px; } .tf-b2b-panel__thumb { flex: none; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(145deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .1)); } .tf-b2b-panel__lines { display: flex; flex: 1; flex-direction: column; gap: 6px; } .tf-b2b-panel__lines i { display: block; height: 7px; border-radius: 7px; background: rgba(255, 255, 255, .28); } .tf-b2b-panel__lines i + i { width: 42%; background: rgba(255, 255, 255, .14); } .tf-b2b-panel__price { padding: 4px 10px; border-radius: 999px; background: rgba(48, 209, 88, .18); color: #6EF09A; font-size: 12px; font-weight: 600; } .tf-b2b-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: #FFF; color: var(--tf-ink); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); animation: tf-float 6s ease-in-out infinite; } .tf-b2b-chip .tf-ico { box-sizing: border-box; width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-b2b-chip span { display: flex; flex-direction: column; line-height: 1.5; } .tf-b2b-chip small { color: var(--tf-muted); font-size: 12px; } .tf-b2b-chip b { font-size: 13.5px; } .tf-b2b-chip.is-a { top: 6%; right: 0; } .tf-b2b-chip.is-b { bottom: 6%; left: 0; animation-delay: -3s; } .tf-b2b-chip.is-b .tf-ico { background: #E7F8EF; color: var(--tf-ok); } .tf-b2b-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); } .tf-b2b-benefits article { padding: 22px 20px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); transition: transform .45s var(--tf-ease), box-shadow .45s; } .tf-b2b-benefits article:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-2); } .tf-b2b-benefits span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(145deg, #EEF3FF, #E3E9FF); color: var(--tf-brand); } .tf-b2b-benefits strong { display: block; font-size: 16.5px; font-weight: 700; } .tf-b2b-benefits p { margin: 4px 0 0; color: var(--tf-muted); font-size: 14px; line-height: 1.8; } .tf-b2b-form-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: clamp(12px, 1.8vw, 22px); } .tf-b2b-aside { position: sticky; top: calc(var(--tf-head) + 20px); padding: clamp(22px, 2.4vw, 30px); border-radius: var(--tf-r-xl); background: radial-gradient(80% 60% at 100% 0%, rgba(79, 123, 255, .4) 0%, rgba(79, 123, 255, 0) 70%), linear-gradient(160deg, #0B1442, #131E62); color: #FFF; } .tf-b2b-aside__eyebrow { color: #8FB1FF; font-size: 13px; font-weight: 600; } .tf-b2b-aside h2 { margin: 8px 0; font-size: 22.5px; font-weight: 700; line-height: 1.5; } .tf-b2b-aside > p { margin: 0 0 20px; color: rgba(255, 255, 255, .65); font-size: 14px; line-height: 1.85; } .tf-b2b-aside__steps { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .tf-b2b-aside__steps li { position: relative; display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .5); transition: color .3s; } .tf-b2b-aside__steps li:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: 18px; height: 14px; border-right: 2px dashed rgba(255, 255, 255, .2); } .tf-b2b-aside__steps i { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid rgba(255, 255, 255, .2); border-radius: 50%; font-style: normal; transition: .3s var(--tf-ease); } .tf-b2b-aside__steps i .tf-ico { position: absolute; opacity: 0; } .tf-b2b-aside__steps span { display: flex; flex-direction: column; line-height: 1.5; } .tf-b2b-aside__steps strong { font-size: 14.5px; } .tf-b2b-aside__steps small { font-size: 12px; opacity: .8; } .tf-b2b-aside__steps li.is-active { color: #FFF; } .tf-b2b-aside__steps li.is-active i { border-color: #8FB1FF; background: var(--tf-brand); box-shadow: 0 0 0 6px rgba(79, 123, 255, .25); } .tf-b2b-aside__steps li.is-done { color: rgba(255, 255, 255, .85); } .tf-b2b-aside__steps li.is-done i { border-color: #30D158; background: #30D158; } .tf-b2b-aside__steps li.is-done i b { opacity: 0; } .tf-b2b-aside__steps li.is-done i .tf-ico { opacity: 1; } .tf-b2b-aside__call { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #FFF !important; text-decoration: none !important; } .tf-b2b-aside__call span { display: flex; flex-direction: column; } .tf-b2b-aside__call small { color: rgba(255, 255, 255, .6); font-size: 12px; } .tf-b2b-aside__call b { font-size: 18px; text-align: right; } .tf-b2b-card { min-width: 0; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-b2b-form { margin: 0; } .tf-b2b-progress ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-b2b-progress .tf-ti-progress__bar { right: 25%; left: 25%; } .tf-b2b-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-b2b-volume { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tf-b2b-volume span { padding: 6px; font-size: 13px; text-align: center; line-height: 1.5; } .tf-ti-label small, .tf-ti-field > label small { color: var(--tf-faint); font-weight: 400; } .tf-ti-input--select { position: relative; } .tf-ti-input--select select { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--tf-ink); font-size: 15px; font-weight: 450; -webkit-appearance: none; appearance: none; cursor: pointer; } .tf-ti-input--area { height: auto; padding: 12px 16px; align-items: stretch; } .tf-ti-input--area textarea { flex: 1; min-height: 88px; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--tf-ink); font: 450 15px/1.8 var(--tf-font); resize: vertical; } .tf-b2b-upload { position: relative; display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; padding: 14px 16px; border: 2px dashed var(--tf-line-2); border-radius: 18px; background: var(--tf-bg); cursor: pointer; transition: .25s; } .tf-b2b-upload:hover { border-color: var(--tf-brand); background: #FFF; } .tf-b2b-upload.has-file { border-style: solid; border-color: rgba(10, 154, 85, .5); background: #F2FBF6; } .tf-b2b-upload input { position: absolute; opacity: 0; pointer-events: none; } .tf-b2b-upload__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: #FFF; color: var(--tf-brand); } .tf-b2b-upload.has-file .tf-b2b-upload__icon { color: var(--tf-ok); } .tf-b2b-upload__text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .tf-b2b-upload__text strong { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; } .tf-b2b-upload__text small { color: var(--tf-muted); font-size: 12.5px; } .tf-b2b-upload .tf-btn { pointer-events: none; } .tf-b2b-card .tf-ti-consents { margin-top: 12px; } .tf-b2b-faq { max-width: 900px; margin: 0 auto; } .tf-b2b-result { max-width: 720px; margin: clamp(10px, 3vw, 40px) auto; padding: clamp(28px, 4vw, 56px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); text-align: center; animation: tf-fade .5s var(--tf-ease); } .tf-b2b-result__icon { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; background: #E7F8EF; color: var(--tf-ok); box-shadow: 0 0 0 12px rgba(10, 154, 85, .08); } .tf-b2b-result.is-pending .tf-b2b-result__icon { background: #FFF4E0; color: #C27C00; box-shadow: 0 0 0 12px rgba(245, 166, 35, .1); } .tf-b2b-result h1 { margin: 8px 0; font-size: clamp(22.5px, 3vw, 34px); font-weight: 700; line-height: 1.4; } .tf-b2b-result p { max-width: 520px; margin: 0 auto; color: var(--tf-ink-2); font-size: 15.5px; line-height: 1.9; } .tf-b2b-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } @media (max-width: 1100px) { .tf-b2b-form-layout { grid-template-columns: 1fr; } .tf-b2b-aside { position: static; } .tf-b2b-aside__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tf-b2b-aside__steps li { flex-direction: column; align-items: flex-start; } .tf-b2b-aside__steps li::after { display: none; } } @media (max-width: 991px) { .tf-b2b-hero { grid-template-columns: 1fr; } .tf-b2b-hero__visual { min-height: 300px; } .tf-b2b-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-b2b-types { grid-template-columns: 1fr; } .tf-b2b-volume { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .tf-b2b-hero { padding: 26px 18px; border-radius: 28px; } .tf-b2b-hero__actions .tf-btn { width: 100%; } .tf-b2b-hero__visual { min-height: 250px; } .tf-b2b-panel { transform: none; padding: 12px; } .tf-b2b-chip { padding: 8px 10px; } .tf-b2b-chip small { display: none; } .tf-b2b-chip .tf-ico { width: 28px; height: 28px; padding: 6px; } .tf-b2b-chip.is-a { top: -4%; } .tf-b2b-chip.is-b { bottom: -4%; } .tf-b2b-benefits { grid-template-columns: 1fr; } .tf-b2b-benefits article { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; padding: 16px; } .tf-b2b-benefits span { grid-row: span 2; margin: 0; } .tf-b2b-aside { padding: 20px 16px; border-radius: 26px; } .tf-b2b-aside__steps small { display: none; } .tf-b2b-aside__steps strong { font-size: 12.5px; } .tf-b2b-card { padding: 16px 14px; border-radius: 26px; } .tf-b2b-upload { flex-wrap: wrap; } .tf-b2b-upload .tf-btn { display: none; } } /* ========================================================================== Single product (صفحه محصول) ========================================================================== */ .tf-pdp { padding: 8px 0 20px; } .tf-pdp__crumbs { padding: 12px 0 14px; overflow: hidden; } .tf-pdp__crumbs .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 !important; padding: 0; color: var(--tf-muted) !important; font-size: 13px !important; } .tf-pdp__crumbs .woocommerce-breadcrumb a { color: var(--tf-ink-2) !important; text-decoration: none !important; } .tf-pdp__crumbs .woocommerce-breadcrumb a:hover { color: var(--tf-brand) !important; } .tf-pdp__sep { color: var(--tf-line-2); } .tf-pdp__hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; gap: clamp(16px, 2.6vw, 40px); } .tf-pdp__media { position: sticky; top: calc(var(--tf-head) + 16px); transition: top .35s var(--tf-ease); display: grid; gap: 12px; min-width: 0; } .technofa-product-gallery-card { position: relative; padding: clamp(14px, 2vw, 28px); border-radius: var(--tf-r-xl); background: radial-gradient(70% 60% at 50% 40%, #FFF 0%, #F6F6F9 100%); box-shadow: var(--tf-shadow-1); overflow: hidden; } .technofa-product-gallery-card__badges { position: absolute; top: 18px; right: 18px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; } .technofa-product-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .technofa-product-badge--sale { background: var(--tf-sale); color: #FFF; box-shadow: 0 8px 18px rgba(255, 59, 48, .28); } .technofa-product-badge--featured { background: var(--tf-ink); color: #FFF; } .technofa-product-badge--out { background: #FFF; color: var(--tf-muted); box-shadow: var(--tf-shadow-1); } .technofa-product-gallery-card .woocommerce-product-gallery { position: relative; float: none !important; width: 100% !important; margin: 0 !important; } .technofa-product-gallery-card .woocommerce-product-gallery__wrapper { margin: 0; } .technofa-product-gallery-card .flex-viewport, .technofa-product-gallery-card .woocommerce-product-gallery__wrapper { border-radius: var(--tf-r-lg); } .technofa-product-gallery-card .woocommerce-product-gallery__image a { display: grid; place-items: center; aspect-ratio: 1; max-height: min(600px, 62vh); margin: 0 auto; } .technofa-product-gallery-card .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; max-height: min(600px, 62vh); object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--tf-ease); } .technofa-product-gallery-card .woocommerce-product-gallery__trigger { position: absolute; top: 16px; left: 16px; z-index: 6; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FFF; box-shadow: var(--tf-shadow-1); font-size: 0 !important; text-indent: -9999px; overflow: hidden; } .technofa-product-gallery-card .woocommerce-product-gallery__trigger::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--tf-ink-2); border-radius: 50%; box-shadow: none; text-indent: 0; } .technofa-product-gallery-card .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; top: 26px; left: 25px; width: 7px; height: 2px; background: var(--tf-ink-2); transform: rotate(45deg); } .technofa-product-gallery-card .flex-control-thumbs { display: flex; gap: 10px; margin: 14px 0 0 !important; padding: 2px !important; overflow-x: auto; list-style: none; scrollbar-width: none; } .technofa-product-gallery-card .flex-control-thumbs::-webkit-scrollbar { display: none; } .technofa-product-gallery-card .flex-control-thumbs li { flex: none; width: 76px !important; float: none !important; margin: 0 !important; } .technofa-product-gallery-card .flex-control-thumbs img { width: 76px; height: 76px; padding: 6px; border: 2px solid transparent; border-radius: 18px; background: #FFF; object-fit: contain; opacity: .6 !important; cursor: pointer; transition: .25s; } .technofa-product-gallery-card .flex-control-thumbs img:hover { opacity: 1 !important; } .technofa-product-gallery-card .flex-control-thumbs img.flex-active { border-color: var(--tf-brand); opacity: 1 !important; box-shadow: 0 6px 16px rgba(22, 82, 240, .18); } .technofa-product-gallery-card__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: var(--tf-faint); font-size: 12.5px; } .tf-pdp__services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .tf-pdp__services li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 20px; background: #FFF; box-shadow: var(--tf-shadow-1); text-align: center; } .tf-pdp__services li span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-pdp__services strong { font-size: 13.5px; font-weight: 600; } .tf-pdp__services small { color: var(--tf-muted); font-size: 12px; } /* Summary */ .tf-pdp__summary { min-width: 0; padding-top: 4px; } .technofa-product-summary__topline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; } .technofa-product-summary__brand { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--tf-brand-soft); color: var(--tf-brand); font-size: 13px; font-weight: 700; } .tf-pdp__cat { color: var(--tf-muted) !important; font-size: 13px; font-weight: 500; text-decoration: none !important; } .tf-pdp__cat::before { content: "·"; margin-left: 10px; color: var(--tf-line-2); } .technofa-product-summary__rating { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--tf-ink-2) !important; font-size: 13px; text-decoration: none !important; } .technofa-product-summary__rating b { font-weight: 700; } .technofa-product-summary__rating small { color: var(--tf-muted); } .tf-pdp__stars { --pct: calc(var(--rating) / 5 * 100%); position: relative; display: inline-block; width: 84px; height: 16px; background: linear-gradient(90deg, #E1E1E8 0 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(17)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(34)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(51)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(68)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(17)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(34)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(51)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3Cpath transform='translate(68)' d='M8 0l2.4 5 5.6.6-4.2 3.7 1.2 5.5L8 12l-5 2.8 1.2-5.5L0 5.6 5.6 5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat; } .tf-pdp__stars::after { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--pct); background: #FFB400; } .technofa-product-summary__title { margin: 0; font-size: clamp(22.5px, 2.6vw, 35.5px) !important; font-weight: 700; line-height: 1.45; } .technofa-product-summary__english-title { margin: 4px 0 0; color: var(--tf-muted); font-size: 14.5px; font-weight: 450; text-align: right; } .technofa-product-summary__excerpt { margin-top: 14px; color: var(--tf-ink-2); font-size: 15px; line-height: 1.95; } .technofa-product-summary__excerpt p { margin: 0 0 6px; } .technofa-product-summary__excerpt ul { margin: 0; padding-right: 20px; } .technofa-product-key-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } .technofa-product-key-specs > div { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; border-radius: 16px; background: #FFF; box-shadow: inset 0 0 0 1px var(--tf-line); } .technofa-product-key-specs span { color: var(--tf-muted); font-size: 12px; } .technofa-product-key-specs strong { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .tf-pdp__allspecs { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 2px; justify-self: start; color: var(--tf-link) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; } .technofa-product-static-colors { display: flex; align-items: center; gap: 14px; margin-top: 16px; } .technofa-product-static-colors > span { color: var(--tf-muted); font-size: 13.5px; font-weight: 500; } .technofa-product-static-colors > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .technofa-product-static-colors i { width: 28px; height: 28px; border-radius: 50%; background: var(--technofa-swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 3px #FFF, 0 0 0 4px var(--tf-line); } .technofa-product-static-colors b { margin-inline-start: 6px; font-size: 13.5px; } /* Purchase card */ .technofa-product-purchase { margin-top: 20px; padding: clamp(16px, 2vw, 24px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-2); } .technofa-product-purchase__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .technofa-product-purchase__label { display: block; color: var(--tf-muted); font-size: 13px; font-weight: 500; } .technofa-product-purchase__price .price, .technofa-product-purchase__price > .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 0 0; color: var(--tf-ink) !important; font-size: clamp(22.5px, 2.4vw, 30px) !important; font-weight: 700; line-height: 1.4; } .technofa-product-purchase__price del { order: 2; color: var(--tf-faint); font-size: 15px; font-weight: 400; opacity: 1; text-decoration-color: rgba(255, 59, 48, .7); } .technofa-product-purchase__price ins { text-decoration: none; } .technofa-product-purchase__price .woocommerce-Price-currencySymbol { margin-right: 4px; color: var(--tf-muted); font-size: 14px; font-weight: 500; } .technofa-variable-price-range { display: flex !important; align-items: center !important; gap: 10px !important; } .technofa-variable-price-range > span { display: inline-flex; align-items: baseline; gap: 6px; } .technofa-variable-price-range small { color: var(--tf-muted); font-size: 13px; font-weight: 500; } .technofa-variable-price-range strong { font-size: clamp(19px, 2vw, 24.5px); } .technofa-variable-price-range > i { width: 16px; height: 2px; background: var(--tf-line-2); } .technofa-variable-price-hint { display: block; margin-top: 2px; color: var(--tf-muted); font-size: 12.5px; } .technofa-product-purchase__aed { display: block; margin-top: 2px; color: var(--tf-faint); font-size: 12.5px; } .technofa-product-purchase__saving { flex: none; padding: 6px 12px; border-radius: 999px; background: #E7F8EF; color: var(--tf-ok); font-size: 12.5px; font-weight: 700; } .technofa-product-purchase__availability { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--tf-line); font-size: 13.5px; } .technofa-product-purchase__availability span { width: 9px; height: 9px; border-radius: 50%; } .technofa-product-purchase__availability--in { color: var(--tf-ok); } .technofa-product-purchase__availability--in span { background: var(--tf-ok); box-shadow: 0 0 0 4px rgba(10, 154, 85, .15); animation: tf-ping 2s ease-out infinite; } .technofa-product-purchase__availability--out { color: var(--tf-faint); } .technofa-product-purchase__availability--out span { background: var(--tf-faint); } @keyframes tf-ping { 0% { box-shadow: 0 0 0 0 rgba(10, 154, 85, .35); } 100% { box-shadow: 0 0 0 10px rgba(10, 154, 85, 0); } } .technofa-product-purchase__cart form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0 !important; } .technofa-product-purchase__cart form.variations_form { display: block; } .technofa-product-purchase__cart table.variations { width: 100%; margin: 0 0 6px !important; border: 0 !important; border-collapse: collapse; } .technofa-product-purchase__cart table.variations tbody, .technofa-product-purchase__cart table.variations tr, .technofa-product-purchase__cart table.variations th, .technofa-product-purchase__cart table.variations td { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: right; } .technofa-product-purchase__cart table.variations tr { margin-bottom: 14px; } .technofa-product-purchase__cart table.variations th.label label { display: block; margin-bottom: 8px; color: var(--tf-ink-2); font-size: 14px; font-weight: 600; } .technofa-product-purchase__cart table.variations select { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid var(--tf-line); border-radius: 14px; background: var(--tf-fill); color: var(--tf-ink); font: 450 14.5px var(--tf-font); } .technofa-product-purchase__cart table.variations select.tf-pdp-select, .technofa-product-purchase__cart select.technofa-color-select { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; } .technofa-product-purchase__cart td.value { position: relative; } .technofa-product-purchase__cart .reset_variations { display: inline-block; margin-top: 8px; color: var(--tf-sale) !important; font-size: 12.5px; font-weight: 500; } .technofa-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .technofa-color-swatch { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: #FFF; cursor: pointer; transition: border-color .2s, transform .2s; } .technofa-color-swatch span { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .technofa-color-swatch:hover { transform: scale(1.06); } .technofa-color-swatch.is-selected { border-color: var(--tf-brand); } .technofa-color-swatch.is-disabled { opacity: .35; cursor: not-allowed; } .technofa-color-swatch.is-disabled::after { content: ""; position: absolute; width: 70%; height: 2px; background: var(--tf-ink-2); transform: rotate(-45deg); } .tf-pdp-pills { display: flex; flex-wrap: wrap; gap: 8px; } .tf-pdp-pills button { min-height: 46px; padding: 0 18px; border: 1.5px solid var(--tf-line); border-radius: 14px; background: #FFF; color: var(--tf-ink-2); font: 600 14px var(--tf-font); cursor: pointer; transition: .2s; } .tf-pdp-pills button:hover { border-color: var(--tf-line-2); } .tf-pdp-pills button.is-selected { border-color: var(--tf-brand); background: var(--tf-brand-soft); color: var(--tf-brand); box-shadow: inset 0 0 0 1px var(--tf-brand); } .tf-pdp-pills button:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; } .technofa-product-purchase__cart .single_variation_wrap { margin-top: 6px; } .technofa-product-purchase__cart .woocommerce-variation-price, .technofa-product-purchase__cart .woocommerce-variation-availability { display: none; } .technofa-product-purchase__cart .woocommerce-variation-add-to-cart { display: flex; gap: 10px; } .technofa-product-purchase__cart .quantity { position: relative; display: flex; align-items: center; flex: none; height: 56px; margin: 0 !important; padding: 4px; border-radius: 16px; background: var(--tf-fill); } .technofa-product-purchase__cart .quantity .qty { width: 44px !important; height: 100%; padding: 0; border: 0 !important; background: transparent !important; color: var(--tf-ink); font: 700 16px var(--tf-font); text-align: center; -moz-appearance: textfield; } .technofa-product-purchase__cart .quantity .qty::-webkit-inner-spin-button, .technofa-product-purchase__cart .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .technofa-quantity-button { display: grid; place-items: center; width: 40px; height: 100%; padding: 0; border: 0; border-radius: 12px; background: #FFF; color: var(--tf-ink); font: 500 19px/1 var(--tf-font); cursor: pointer; box-shadow: var(--tf-shadow-1); transition: transform .15s; } .technofa-quantity-button:active { transform: scale(.92); } .tf-pdp .single_add_to_cart_button, .tf-pdp .single_add_to_cart_button.alt { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 56px; margin: 0 !important; padding: 0 22px !important; border: 0 !important; border-radius: 16px !important; background: var(--tf-brand) !important; color: #FFF !important; font: 600 16px var(--tf-font) !important; box-shadow: var(--tf-shadow-brand); transition: background .2s, transform .15s, box-shadow .2s; } .tf-pdp .single_add_to_cart_button:hover { background: var(--tf-brand-ink) !important; } .tf-pdp .single_add_to_cart_button:active { transform: scale(.98); } .tf-pdp .single_add_to_cart_button.disabled, .tf-pdp .single_add_to_cart_button:disabled { background: #C7CCD8 !important; box-shadow: none; cursor: not-allowed; opacity: 1 !important; } .tf-pdp .single_add_to_cart_button.loading { opacity: .8 !important; } .technofa-product-purchase__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: var(--tf-muted); font-size: 12.5px; } .technofa-product-purchase__secure .tf-ico { color: var(--tf-ok); } .tf-pdp__extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .tf-pdp__extras .tf-compare-pill { margin: 0; padding: 12px; } .tf-pdp__extras .tf-compare-pill__text strong { font-size: 14px; } .tf-pdp__extras .tf-compare-pill__text small { font-size: 12px; line-height: 1.6; } .tf-compare-pill__icon.is-tradein { background: #FFF1E8; color: #F2621F; } .technofa-product-meta-line { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--tf-muted); font-size: 13px; } .technofa-product-meta-line strong { color: var(--tf-ink-2); } .technofa-product-meta-line a { color: var(--tf-ink-2) !important; } /* Back in stock */ .technofa-product-back-in-stock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 26px; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .technofa-product-back-in-stock__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #FFF4E0; color: #C27C00; } .technofa-product-back-in-stock h2 { margin: 10px 0 4px; font-size: 20.5px; font-weight: 700; } .technofa-product-back-in-stock p { margin: 0; color: var(--tf-muted); } .technofa-back-in-stock__form input[type="tel"] { height: 52px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 14px; background: var(--tf-fill); font: 450 15px var(--tf-font); } /* Details / tabs */ .tf-pdp__details { margin-top: clamp(30px, 4vw, 56px); scroll-margin-top: 90px; } .tf-pdp__details .woocommerce-tabs { margin: 0; } .tf-pdp__details ul.tabs { position: sticky; top: calc(var(--tf-head) + 10px); transition: top .35s var(--tf-ease); z-index: 20; display: flex; gap: 6px; width: fit-content; max-width: 100%; margin: 0 0 16px !important; padding: 6px !important; overflow-x: auto; border: 0 !important; border-radius: 999px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: var(--tf-shadow-1); list-style: none; scrollbar-width: none; } .tf-pdp__details ul.tabs::before, .tf-pdp__details ul.tabs::after { display: none !important; } .tf-pdp__details ul.tabs::-webkit-scrollbar { display: none; } .tf-pdp__details ul.tabs li { flex: none; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } .tf-pdp__details ul.tabs li::before, .tf-pdp__details ul.tabs li::after { display: none !important; } .tf-pdp__details ul.tabs li a { display: block; padding: 10px 18px !important; border-radius: 999px; color: var(--tf-ink-2) !important; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none !important; transition: background .2s, color .2s; } .tf-pdp__details ul.tabs li a:hover { background: var(--tf-fill); } .tf-pdp__details ul.tabs li.active a { background: var(--tf-ink); color: #FFF !important; } .tf-pdp__details .woocommerce-Tabs-panel { margin: 0 !important; padding: clamp(20px, 3vw, 40px) !important; border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); color: var(--tf-ink-2); font-size: 15.5px; line-height: 2; animation: tf-fade .35s var(--tf-ease); } .tf-pdp__details .woocommerce-Tabs-panel > h2:first-child { margin-top: 0; font-size: 20.5px; font-weight: 700; color: var(--tf-ink); } .tf-pdp__details .woocommerce-Tabs-panel img { height: auto; border-radius: 18px; } .tf-pdp__details .woocommerce-Tabs-panel h3 { color: var(--tf-ink); font-weight: 700; } .tf-pdp__details table.shop_attributes { width: 100%; margin: 0 !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0; } .tf-pdp__details table.shop_attributes tr:nth-child(odd) th, .tf-pdp__details table.shop_attributes tr:nth-child(odd) td { background: var(--tf-bg) !important; } .tf-pdp__details table.shop_attributes th, .tf-pdp__details table.shop_attributes td { padding: 14px 18px !important; border: 0 !important; font-style: normal !important; text-align: right; vertical-align: top; } .tf-pdp__details table.shop_attributes th { width: 32%; color: var(--tf-muted); font-size: 14px; font-weight: 500; border-radius: 0 14px 14px 0; } .tf-pdp__details table.shop_attributes td { color: var(--tf-ink); font-size: 14.5px; font-weight: 500; border-radius: 14px 0 0 14px; } .tf-pdp__details table.shop_attributes td p { margin: 0; padding: 0 !important; } .tf-pdp__details #reviews #comments h2, .tf-pdp__details #reviews .woocommerce-Reviews-title { font-size: 19px; font-weight: 700; } .tf-pdp__details #reviews ol.commentlist { margin: 0 !important; padding: 0 !important; } .tf-pdp__details #reviews ol.commentlist li { margin: 0 0 12px !important; padding: 16px !important; border-radius: 18px; background: var(--tf-bg); list-style: none; } .tf-pdp__details #reviews ol.commentlist li img.avatar { position: static !important; float: right; width: 44px !important; margin-left: 12px; padding: 0 !important; border: 0 !important; border-radius: 50%; } .tf-pdp__details #reviews ol.commentlist li .comment-text { margin: 0 !important; padding: 0 !important; border: 0 !important; } .tf-pdp__details #review_form_wrapper { margin-top: 20px; } .tf-pdp__details #review_form input[type="text"], .tf-pdp__details #review_form input[type="email"], .tf-pdp__details #review_form textarea { width: 100%; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 14px; background: var(--tf-fill); font: 450 14.5px var(--tf-font); } .tf-pdp__details #review_form textarea:focus, .tf-pdp__details #review_form input:focus { border-color: var(--tf-brand); background: #FFF; outline: 0; } .tf-pdp__details #review_form .submit { min-height: 48px; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important; background: var(--tf-brand) !important; color: #FFF !important; font: 600 14.5px var(--tf-font) !important; cursor: pointer; } .tf-pdp__details .technofa-warranty-tab__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .tf-pdp__details .technofa-warranty-tab__items li { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--tf-bg); font-size: 14px; } .tf-pdp__details .technofa-warranty-tab__items li.is-checked .technofa-warranty-tab__tick { color: var(--tf-ok); font-weight: 700; } /* Related */ .tf-pdp__related { margin-top: clamp(30px, 4vw, 56px); } .tf-pdp__related .related > h2, .tf-pdp__related .up-sells > h2 { margin: 0 0 16px; font-size: clamp(20.5px, 2.3vw, 30px); font-weight: 700; } .tf-pdp__related ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } /* Mobile bar */ .technofa-product-mobile-bar { position: fixed; right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 940; display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 8px; border-radius: 24px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 12px 40px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .04); transform: translateY(140%); transition: transform .45s var(--tf-ease); } .technofa-product-mobile-bar.is-visible { transform: none; } .tf-pdp-bar__info { display: flex; align-items: center; gap: 10px; min-width: 0; } .tf-pdp-bar__img { flex: none; width: 46px; height: 46px; padding: 3px; border-radius: 14px; background: var(--tf-bg); object-fit: contain; mix-blend-mode: multiply; } .tf-pdp-bar__info > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; } .tf-pdp-bar__info small { overflow: hidden; color: var(--tf-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .tf-pdp-bar__info strong, .tf-pdp-bar__info strong .price { overflow: hidden; color: var(--tf-ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .tf-pdp-bar__info del { display: none; } .tf-pdp-bar__info ins { text-decoration: none; } .technofa-product-mobile-bar__action { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--tf-brand); color: #FFF !important; font: 600 14px var(--tf-font); text-decoration: none !important; cursor: pointer; } @media (max-width: 1100px) { .tf-pdp__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tf-pdp__services { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-pdp__related ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .tf-pdp__related ul.products li:nth-child(n+5) { display: none; } } @media (max-width: 991px) { .tf-pdp { padding-bottom: 90px; } .tf-pdp__hero { grid-template-columns: 1fr; } .tf-pdp__media { position: static; display: contents; } .technofa-product-gallery-card { order: 1; } .tf-pdp__summary { order: 2; } .tf-pdp__services { order: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); } .technofa-product-mobile-bar { display: flex; } .tf-pdp__details ul.tabs { top: 70px; width: 100%; } .tf-pdp__related ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .tf-pdp__related ul.products li:nth-child(n+4) { display: none; } } @media (max-width: 639px) { .tf-pdp__crumbs { padding: 8px 0 10px; } .tf-pdp__crumbs .woocommerce-breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 12px !important; } .technofa-product-gallery-card { margin-inline: calc(-1 * clamp(16px, 3vw, 32px)); padding: 12px 16px; border-radius: 0; box-shadow: none; background: #FFF; } .technofa-product-gallery-card__badges { top: 14px; right: 16px; } .technofa-product-gallery-card__hint { display: none; } .technofa-product-gallery-card .flex-control-thumbs li, .technofa-product-gallery-card .flex-control-thumbs img { width: 60px !important; height: 60px; } .tf-pdp__services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tf-pdp__services li { flex-direction: row; gap: 10px; padding: 10px; text-align: right; } .tf-pdp__services li span { flex: none; width: 36px; height: 36px; margin: 0; border-radius: 12px; } .tf-pdp__services small { display: none; } .tf-pdp__services strong { font-size: 12.5px; } .technofa-product-summary__rating { margin-inline-start: 0; } .technofa-product-key-specs strong { font-size: 13.5px; } .technofa-product-purchase { margin-inline: -4px; } .tf-pdp__extras { grid-template-columns: 1fr; } .technofa-product-back-in-stock { grid-template-columns: 1fr; } .tf-pdp__details .woocommerce-Tabs-panel { padding: 18px 16px !important; font-size: 14.5px; } .tf-pdp__details table.shop_attributes th { width: 40%; padding: 12px !important; font-size: 13px; } .tf-pdp__details table.shop_attributes td { padding: 12px !important; font-size: 13.5px; } .tf-pdp__related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .tf-pdp__related ul.products li:nth-child(n+3) { display: list-item; } .tf-pdp__related ul.products li:nth-child(n+5) { display: none; } } /* ---------- Keyframes ---------- */ @keyframes tf-spin { to { transform: rotate(360deg); } } @keyframes tf-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes tf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes tf-drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes tf-shimmer { to { background-position: -200% 0; } } @keyframes tf-progress { from { width: 0; } to { width: 100%; } } @keyframes tf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1279px) { .tf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tf-grid > .tf-card:nth-child(n+9), .tf-grid--row > .tf-card:nth-child(n+5) { display: none; } .tf-rail { grid-auto-columns: calc((100% - 3 * 16px) / 4); } .tf-nav__note { display: none; } .tf-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } .tf-footer__contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 14px; } .tf-footer__contact h3 { grid-column: 1 / -1; } } @media (max-width: 991px) { html { scroll-padding-top: 130px; } body.technofa-body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } .tf-header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "burger brand actions"; gap: 6px; height: 62px; } .tf-search-trigger { display: none; } .tf-header .tf-action.tf-action--search { display: inline-flex; } .tf-search-layer__sheet { height: 100%; padding: calc(10px + env(safe-area-inset-top)) 0 16px; border-radius: 0; } .admin-bar .tf-search-layer__sheet { margin-top: 0; } .tf-search-layer__inner { gap: 6px; } .tf-search-layer .tf-search__field { height: 50px; } .tf-search-layer__close { height: 50px; font-size: 14px; } .tf-search-layer .tf-sr-item { grid-template-columns: 56px minmax(0, 1fr); } .tf-search-layer .tf-sr-item__side { grid-column: 2; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; } .tf-search-layer .tf-sr-item__side .tf-price { flex-direction: row-reverse; align-items: baseline; gap: 8px; } .tf-search-layer .tf-sr-item__side .tf-price__old { display: none; } .tf-header__burger { display: inline-grid; grid-area: burger; margin-inline-start: -8px; } .tf-header__brand { grid-area: brand; } .tf-header__bar .tf-logo { height: 36px; max-width: 150px; } .tf-header__actions { grid-area: actions; gap: 0; margin-inline-end: -8px; } .tf-action { width: 46px; padding: 0; justify-content: center; } .tf-action__label, .tf-header__divider { display: none; } .tf-nav { display: none; } .tf-search__field { height: 48px; } /* Full-screen search on mobile */ .tf-search.is-expanded { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 12px 12px; background: #FFF; animation: tf-fade .25s var(--tf-ease); } .tf-search.is-expanded .tf-search__back { display: grid; margin-inline: -12px 2px; } .tf-search.is-expanded .tf-search__field { padding-inline-start: 12px; } .tf-search.is-expanded .tf-search__panel { position: static; flex: 1; min-width: 0; max-height: none; margin-top: 10px; padding: 4px 0; border-radius: 0; box-shadow: none; animation: none; } .tf-search.is-expanded .tf-sr-item { grid-template-columns: 56px minmax(0, 1fr); } .tf-search.is-expanded .tf-sr-item__side { grid-column: 2; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; } .tf-search.is-expanded .tf-sr-item__side .tf-price { flex-direction: row-reverse; align-items: baseline; gap: 8px; } .tf-hero-grid { grid-template-columns: 1fr; } .tf-hero { min-height: 250px; border-radius: 26px; } .tf-hero__slide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding: 22px 20px 50px; } .tf-hero__copy { gap: 6px; } .tf-hero__title { font-size: clamp(20.5px, 5.4vw, 32px); -webkit-line-clamp: 2; } .tf-hero__text { font-size: 14px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .tf-hero__price .tf-price__num { font-size: 17px; } .tf-hero__copy .tf-btn { --h: 44px; margin-top: 6px; padding: 0 18px; font-size: 14px; } .tf-hero__img, .tf-hero__media img { max-height: 210px; } .tf-hero__controls { bottom: 12px; left: 50%; transform: translateX(-50%); padding: 4px; background: rgba(255, 255, 255, .5); } .tf-hero__arrow { display: none; } .tf-promo { flex-direction: row; align-items: center; min-height: 150px; border-radius: 26px; } .tf-promo__copy { max-width: 62%; } .tf-promo p { margin-bottom: 6px; font-size: 13.5px; } .tf-promo__media { inset: 50% auto auto 2%; width: 36%; transform: translateY(-50%); } .tf-cats { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(96px, 1fr); margin-inline: calc(-1 * clamp(16px, 3vw, 32px)); padding: 4px clamp(16px, 3vw, 32px) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .tf-cats::-webkit-scrollbar { display: none; } .tf-cat { scroll-snap-align: start; gap: 4px; padding: 10px 8px; border-radius: 20px; } .tf-cat__media { aspect-ratio: 1; } .tf-cat__name { font-size: 13px; } .tf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tf-grid > .tf-card:nth-child(n+7), .tf-grid--row > .tf-card:nth-child(n+4) { display: none; } .tf-rail { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } body.has-tf-search .tf-header__bar, body.has-tf-search .tf-header { -webkit-backdrop-filter: none; backdrop-filter: none; } body.has-tf-search .tf-bottom-nav { display: none; } body.has-tf-search .tf-header { z-index: 900; } .tf-rail-nav { display: none; } .tf-brands { grid-template-columns: 1fr; } .tf-brand { min-height: 440px; } .tf-brand.is-noimg { min-height: 0; } .tf-journal { grid-template-columns: 1fr; } .tf-post { flex-direction: row; } .tf-post__media { flex: none; width: 38%; aspect-ratio: auto; } .tf-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; } .tf-trust li { justify-content: flex-start; } .tf-trust li + li { border-right: 0; } .tf-footer__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .tf-footer__brand { grid-column: 1 / -1; } .tf-footer__bottom { flex-direction: column; align-items: flex-start; } .tf-bottom-nav { position: fixed; right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 950; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px; border-radius: 26px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 10px 40px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04); transition: transform .35s var(--tf-ease); } .tf-bottom-nav > a, .tf-bottom-nav > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--tf-muted) !important; font-size: 12px; font-weight: 500; text-decoration: none !important; cursor: pointer; transition: background .25s, color .25s; } .tf-bottom-nav > .is-active { background: var(--tf-brand-soft); color: var(--tf-brand) !important; } .tf-bottom-nav .tf-cart-count { top: -5px; left: -8px; } .single-product .tf-bottom-nav { display: none; } .tf-toast { bottom: calc(100px + env(safe-area-inset-bottom)); } } @media (max-width: 639px) { .tf-hero { min-height: 230px; } .tf-hero__slide { padding: 20px 18px 46px; gap: 4px; } .tf-eyebrow { font-size: 12px; } .tf-hero__text { display: none; } .tf-hero__glow { width: 110%; } .tf-promo h2 { font-size: 19px; } .tf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tf-grid > .tf-card:nth-child(n+4), .tf-grid > .tf-card:nth-child(n+7) { display: flex; } .tf-grid > .tf-card:nth-child(n+7), .tf-grid--row > .tf-card:nth-child(n+5) { display: none; } .tf-rail { grid-auto-columns: 46%; gap: 10px; } .tf-card { padding: 8px 8px 10px; border-radius: 20px; } .tf-card:hover { transform: none; } .tf-card__media { border-radius: 16px; } .tf-card__badge { top: 8px; left: 8px; min-height: 23px; padding: 0 8px; font-size: 12px; } .tf-card__rating { display: none; } .tf-card__title { font-size: 14px; } .tf-card__sub { font-size: 12px; } .tf-price__num { font-size: 15.5px; } .tf-price__cur { font-size: 11.5px; } .tf-card__aed { display: none; } .tf-card__cta .tf-btn { --h: 42px; gap: 6px; padding: 0 8px; border-radius: 12px; font-size: 13px; } .tf-card__cta .tf-btn .tf-ico { width: 17px; height: 17px; } .tf-head { margin-bottom: 12px; } .tf-head h2 span { display: none; } .tf-countdown span { min-width: 28px; height: 26px; font-size: 12.5px; } .tf-brand { min-height: 400px; padding-inline: 18px; } .tf-brand.is-noimg { min-height: 0; } .tf-brand__links { flex-direction: column; gap: 8px; } .tf-service { min-height: 104px; padding: 16px 18px; gap: 14px; } .tf-service__icon { width: 56px; height: 56px; border-radius: 18px; } .tf-service__icon .tf-ico { width: 28px; height: 28px; } .tf-post__body strong { font-size: 14.5px; } .tf-trust { grid-template-columns: 1fr 1fr; padding: 12px 4px; } .tf-trust li { flex-direction: column; gap: 6px; text-align: center; } .tf-trust__icon { width: 44px; height: 44px; } .tf-trust strong { font-size: 13.5px; } .tf-trust small { font-size: 12px; } .technofa-shop-archive ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (hover: none) { .tf-card:hover, .tf-cat:hover, .tf-service:hover, .tf-post:hover { transform: none; box-shadow: var(--tf-shadow-1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-tf-reveal] { opacity: 1; transform: none; } } /* ========================================================================== v3.4 — Card tools, wishlist, partner prices ========================================================================== */ .tf-card__tools { position: absolute; top: 20px; right: 20px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .tf-card__tools .tf-compare-btn { position: relative; top: auto; right: auto; } .tf-wish-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tf-ink-2); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s, color .25s, transform .2s, box-shadow .25s; } .tf-wish-btn .tf-ico { transition: transform .35s var(--tf-ease), fill .2s; } .tf-wish-btn:hover { color: #FF2D55; box-shadow: 0 6px 16px rgba(255, 45, 85, .18); } .tf-wish-btn:active { transform: scale(.9); } .tf-wish-btn:focus-visible { outline: 2px solid var(--tf-brand); outline-offset: 2px; } .tf-wish-btn.is-active { color: #FF2D55; } .tf-wish-btn.is-active .tf-ico { fill: currentColor; } .tf-wish-btn.is-pop .tf-ico { animation: tf-heart .45s var(--tf-ease); } .tf-wish-btn.is-busy { pointer-events: none; } .tf-wish-btn.is-large { width: 46px; height: 46px; background: #FFF; box-shadow: var(--tf-shadow-1); } @keyframes tf-heart { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .tf-card.is-removing { opacity: 0; transform: scale(.92); transition: .35s var(--tf-ease); } @media (hover: hover) and (min-width: 992px) { .tf-card__tools .tf-wish-btn:not(.is-active) { opacity: 0; transform: translateY(-4px); } .tf-card:hover .tf-card__tools .tf-wish-btn, .tf-card__tools .tf-wish-btn:focus-visible { opacity: 1; transform: none; } } @media (max-width: 991px) { .tf-card__tools { top: 16px; right: 16px; gap: 6px; } .tf-wish-btn { width: 34px; height: 34px; } } @media (max-width: 639px) { .tf-card__tools { top: 13px; right: 13px; } .tf-wish-btn { width: 32px; height: 32px; } .tf-wish-btn .tf-ico { width: 16px; height: 16px; } } .tf-partner-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 9px; border-radius: 999px; background: linear-gradient(90deg, #EEF3FF, #F4EEFF); color: #4B37C9; font-size: 11.5px; font-weight: 600; line-height: 1.8; } .tf-price.is-partner .tf-price__now { color: #4B37C9; } .tf-card .tf-price.is-partner .tf-price__now { color: #4B37C9; } .tf-pdp__partner-price { display: block !important; } .tf-pdp__partner-price .tf-price { align-items: flex-start; } .tf-pdp__partner-price .tf-price__num { font-size: clamp(22.5px, 2.4vw, 30px); } /* ========================================================================== v3.4 — Product page polish ========================================================================== */ .tf-pdp__crumbs { position: relative; z-index: 1; } .technofa-product-gallery-card { background: #FFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .035), 0 20px 50px rgba(20, 28, 48, .06); } .technofa-product-gallery-card .woocommerce-product-gallery__image img { mix-blend-mode: normal; } .technofa-product-gallery-card .woocommerce-product-gallery__trigger { top: auto; bottom: 110px; left: 18px; background: rgba(255, 255, 255, .9); } .technofa-product-gallery-card .flex-control-thumbs { justify-content: center; } .technofa-product-gallery-card .flex-control-thumbs img { background: #F5F5F7; } .tf-pdp__tools { position: absolute; top: 18px; left: 18px; z-index: 6; display: flex; flex-direction: column; gap: 8px; } .tf-pdp__tools .tf-wish-btn { box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .06); } .tf-pdp__share:hover { color: var(--tf-brand); box-shadow: 0 6px 16px rgba(22, 82, 240, .18); } .tf-pdp__services li { box-shadow: 0 0 0 1px rgba(0, 0, 0, .035); } .technofa-product-summary__title { font-size: clamp(20.5px, 2.2vw, 30px) !important; font-weight: 850; line-height: 1.55; letter-spacing: -.2px; } .technofa-product-summary__excerpt { font-size: 14.5px; line-height: 2; color: var(--tf-muted); } .technofa-product-key-specs > div { background: #FFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); } .technofa-product-purchase { position: relative; margin-top: 22px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 24px 60px rgba(20, 28, 48, .08); } .technofa-product-purchase__availability { margin: 10px 0 18px; } .tf-pdp .single_add_to_cart_button, .tf-pdp .single_add_to_cart_button.alt { box-shadow: 0 10px 24px rgba(22, 82, 240, .22); } /* Out of stock — تماس با فروشگاه */ .tf-pdp-oos { display: grid; gap: 12px; } .tf-pdp-oos[hidden] { display: none !important; } .tf-pdp-oos__text { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #FFF7EC; color: #8A5300; } .tf-pdp-oos__text > span { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: #FFF; color: #E07B00; box-shadow: 0 4px 12px rgba(224, 123, 0, .15); } .tf-pdp-oos__text strong { display: block; color: var(--tf-ink); font-size: 15px; font-weight: 700; } .tf-pdp-oos__text small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.8; } .tf-pdp-oos__actions { display: flex; gap: 10px; } .tf-pdp-oos__actions .tf-btn--primary { flex: 1; } .tf-pdp-oos__actions .tf-btn--primary b { margin-inline-start: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 13.5px; font-weight: 600; } .tf-pdp-oos__wa { flex: none; box-shadow: inset 0 0 0 1.5px var(--tf-line); color: #128C4B !important; } .tf-pdp-oos__wa:hover { background: #EAF8F0; } .technofa-product-purchase__cart:has(~ .tf-pdp-oos:not([hidden])) .single_add_to_cart_button { display: none !important; } .technofa-product-mobile-bar__action { gap: 6px; } .technofa-product-mobile-bar__action.is-contact { background: var(--tf-ink); } @media (max-width: 991px) { .tf-pdp__details ul.tabs { top: calc(var(--tf-head) + 8px); } .technofa-product-gallery-card .woocommerce-product-gallery__trigger { bottom: 92px; } } @media (max-width: 639px) { .tf-pdp__tools { top: 12px; left: 14px; } .tf-pdp__tools .tf-wish-btn { width: 40px; height: 40px; } .technofa-product-gallery-card .woocommerce-product-gallery__trigger { bottom: 80px; left: 14px; width: 38px; height: 38px; } .tf-pdp-oos__actions { flex-wrap: wrap; } .tf-pdp-oos__actions .tf-btn { --h: 52px; flex: 1 1 100%; } .tf-pdp-oos__actions .tf-btn--primary b { display: none; } } /* ========================================================================== v3.4 — My Account (پنل کاربری) ========================================================================== */ body.woocommerce-account .technofa-page { padding: 0; } .tf-acc { padding: clamp(14px, 2.4vw, 28px) 0 clamp(40px, 5vw, 72px); } .tf-acc .tf-eyebrow { font-size: 12.5px; } /* Hero */ .tf-acc-hero { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 28px; overflow: hidden; padding: clamp(20px, 3vw, 34px); border-radius: var(--tf-r-xl); background: radial-gradient(60% 120% at 100% 0%, rgba(79, 123, 255, .55) 0%, rgba(79, 123, 255, 0) 60%), radial-gradient(50% 100% at 0% 100%, rgba(155, 92, 255, .35) 0%, rgba(155, 92, 255, 0) 60%), linear-gradient(135deg, #0A1030 0%, #122063 100%); color: #FFF; isolation: isolate; } .tf-acc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); } .tf-acc-hero__user { display: flex; align-items: center; gap: 16px; min-width: 0; } .tf-acc-avatar { display: grid; place-items: center; flex: none; width: clamp(58px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #5B8CFF, #9B5CFF); color: #FFF; font-size: clamp(22.5px, 2.6vw, 30px); font-weight: 700; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .3); } .tf-acc-role { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #D7E2FF; font-size: 12px; font-weight: 600; } .tf-acc-role.is-partner { background: linear-gradient(90deg, #FFD66B, #FFB23F); color: #3D2600; } .tf-acc-hero h1 { margin: 8px 0 2px; color: #FFF; font-size: clamp(20.5px, 2.6vw, 30px); font-weight: 700; line-height: 1.4; } .tf-acc-hero p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; } .tf-acc-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: min(100%, 520px); } .tf-acc-hero__stats > * { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #FFF !important; text-decoration: none !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .25s, transform .25s var(--tf-ease); } .tf-acc-hero__stats a:hover { background: rgba(255, 255, 255, .15); transform: translateY(-2px); } .tf-acc-hero__stats small { color: rgba(255, 255, 255, .65); font-size: 12px; font-weight: 500; white-space: nowrap; } .tf-acc-hero__stats strong { overflow: hidden; font-size: 20.5px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .tf-acc-hero__stats strong em { font-size: 11.5px; font-style: normal; font-weight: 450; opacity: .7; } /* Layout */ .tf-acc-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; gap: clamp(14px, 2vw, 24px); margin-top: clamp(14px, 2vw, 24px); } .tf-acc-side { position: sticky; top: calc(var(--tf-head) + 18px); display: grid; gap: 12px; transition: top .35s var(--tf-ease); } .woocommerce-account .tf-acc .woocommerce-MyAccount-navigation, .woocommerce-account .tf-acc .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; } .tf-acc-main { min-width: 0; } .tf-acc-main.is-panel { padding: clamp(18px, 2.6vw, 30px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } /* Navigation */ .tf-acc-nav { padding: 8px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-acc-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .tf-acc-nav li { margin: 0; } .tf-acc-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 8px; border-radius: 16px; color: var(--tf-ink-2) !important; font-size: 14.5px; font-weight: 500; text-decoration: none !important; transition: background .2s, color .2s; } .tf-acc-nav a:hover { background: var(--tf-bg); } .tf-acc-nav__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--tf-bg); color: var(--tf-muted); transition: background .2s, color .2s; } .tf-acc-nav__label { flex: 1; min-width: 0; } .tf-acc-nav__count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--tf-fill); color: var(--tf-ink-2); font-size: 12px; font-weight: 700; } .tf-acc-nav li.is-active a { background: var(--tf-brand-soft); color: var(--tf-brand) !important; font-weight: 700; } .tf-acc-nav li.is-active .tf-acc-nav__icon { background: var(--tf-brand); color: #FFF; box-shadow: 0 6px 14px rgba(22, 82, 240, .3); } .tf-acc-nav li.is-active .tf-acc-nav__count { background: #FFF; color: var(--tf-brand); } .tf-acc-nav li.woocommerce-MyAccount-navigation-link--wishlist .tf-acc-nav__count { background: #FFE8EE; color: #E0244C; } .tf-acc-nav li.is-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--tf-line); } .tf-acc-nav li.is-logout a { color: #D12C4A !important; } .tf-acc-nav li.is-logout .tf-acc-nav__icon { background: #FFF0F2; color: #D12C4A; } .tf-acc-nav li.is-logout a:hover { background: #FFF5F7; } .tf-acc-side__partner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--tf-r-lg); background: linear-gradient(135deg, #1B1446, #3A2A9C); color: #FFF !important; text-decoration: none !important; box-shadow: 0 14px 30px rgba(58, 42, 156, .25); transition: transform .25s var(--tf-ease); } .tf-acc-side__partner:hover { transform: translateY(-2px); } .tf-acc-side__partner > .tf-ico:first-child { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #FFD66B; } .tf-acc-side__partner span { flex: 1; min-width: 0; } .tf-acc-side__partner strong { display: block; font-size: 14px; font-weight: 700; } .tf-acc-side__partner small { display: block; color: rgba(255, 255, 255, .7); font-size: 12px; } /* Dashboard */ .tf-acc-dash { display: grid; gap: clamp(12px, 1.6vw, 18px); } .tf-acc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .tf-acc-tiles a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 16px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); color: var(--tf-ink) !important; text-decoration: none !important; transition: transform .35s var(--tf-ease), box-shadow .35s var(--tf-ease); } .tf-acc-tiles a:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow-2); } .tf-acc-tiles a > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border-radius: 15px; background: var(--tf-brand-soft); color: var(--tf-brand); transition: transform .35s var(--tf-ease); } .tf-acc-tiles a:hover > span { transform: scale(1.08) rotate(-4deg); } .tf-acc-tiles a:nth-child(2) > span { background: #FFE8EE; color: #E0244C; } .tf-acc-tiles a:nth-child(3) > span { background: #FFF1E8; color: #F2621F; } .tf-acc-tiles a:nth-child(4) > span { background: #E7F8EF; color: var(--tf-ok); } .tf-acc-tiles a:nth-child(5) > span { background: #F1ECFF; color: #6A3DE8; } .tf-acc-tiles strong { font-size: 15px; font-weight: 700; } .tf-acc-tiles small { overflow: hidden; max-width: 100%; color: var(--tf-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .tf-acc-card, .tf-acc-track, .tf-acc-section { min-width: 0; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-acc-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .tf-acc-card > header h3 { margin: 0; font-size: 17px; font-weight: 700; } .tf-acc-card > header a, .tf-acc-link { display: inline-flex; align-items: center; gap: 2px; color: var(--tf-link) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } /* Track */ .tf-acc-track > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .tf-acc-track h2 { margin: 4px 0 2px; font-size: 19px; font-weight: 700; } .tf-acc-track header p { margin: 0; color: var(--tf-muted); font-size: 13px; } .tf-acc-track header .tf-btn--light { box-shadow: inset 0 0 0 1.5px var(--tf-line); } .tf-acc-steps { --pos: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 6px; padding: 0; list-style: none; } .tf-acc-steps::before, .tf-acc-steps::after { content: ""; position: absolute; top: 15px; right: 12.5%; height: 4px; border-radius: 4px; } .tf-acc-steps::before { left: 12.5%; background: var(--tf-fill); } .tf-acc-steps::after { width: calc(var(--pos) / 3 * 75%); background: linear-gradient(270deg, var(--tf-brand), #5B8CFF); transition: width .8s var(--tf-ease); } .tf-acc-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .tf-acc-steps i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFF; color: transparent; box-shadow: inset 0 0 0 2px var(--tf-line-2); transition: .3s; } .tf-acc-steps span { color: var(--tf-muted); font-size: 12.5px; font-weight: 500; line-height: 1.5; } .tf-acc-steps li.is-done i { background: var(--tf-brand); color: #FFF; box-shadow: none; } .tf-acc-steps li.is-current i { background: #FFF; box-shadow: inset 0 0 0 3px var(--tf-brand), 0 0 0 6px rgba(22, 82, 240, .14); } .tf-acc-steps li.is-current i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tf-brand); animation: tf-pulse 1.4s ease-in-out infinite; } .tf-acc-steps li.is-current i .tf-ico { display: none; } .tf-acc-steps li.is-done span, .tf-acc-steps li.is-current span { color: var(--tf-ink); font-weight: 600; } .tf-acc-track__items { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tf-line); } .tf-acc-track__items span { display: grid; place-items: center; width: 56px; height: 56px; padding: 4px; border-radius: 14px; background: var(--tf-bg); } .tf-acc-track__items img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* Partner credit */ .tf-acc-credit { position: relative; overflow: hidden; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--tf-r-lg); background: radial-gradient(60% 90% at 0% 0%, rgba(255, 214, 107, .22), transparent 60%), linear-gradient(135deg, #16123A, #2E2388); color: #FFF; } .tf-acc-credit .tf-eyebrow { color: #FFD66B; } .tf-acc-credit h2 { margin: 4px 0 14px; color: #FFF; font-size: 19px; font-weight: 700; } .tf-acc-credit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tf-acc-credit__grid > div { min-width: 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .tf-acc-credit__grid small { display: block; color: rgba(255, 255, 255, .65); font-size: 12px; font-weight: 500; } .tf-acc-credit__grid strong { display: block; overflow: hidden; color: #FFF; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .tf-acc-credit__grid strong .woocommerce-Price-currencySymbol { font-size: 11.5px; font-weight: 450; opacity: .7; } .tf-acc-credit__grid .is-debt strong { color: #FFB4C0; } .tf-acc-credit__bar { height: 8px; margin: 14px 0 12px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .12); } .tf-acc-credit__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(270deg, #FFD66B, #FF8A3D); } .tf-acc-credit .tf-acc-link { color: #C9D6FF !important; } /* Duo: orders + wishlist */ .tf-acc-duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 18px); } .tf-acc-orders-mini { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .tf-acc-orders-mini a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id status" "id total"; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 16px; color: var(--tf-ink) !important; text-decoration: none !important; transition: background .2s; } .tf-acc-orders-mini a:hover { background: var(--tf-bg); } .tf-acc-orders-mini__id { grid-area: id; display: flex; flex-direction: column; font-size: 14.5px; font-weight: 700; } .tf-acc-orders-mini__id small { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-acc-orders-mini .tf-status { grid-area: status; justify-self: end; } .tf-acc-orders-mini strong { grid-area: total; justify-self: end; font-size: 13px; font-weight: 600; } .tf-acc-orders-mini strong .woocommerce-Price-currencySymbol { color: var(--tf-muted); font-size: 11.5px; } .tf-status { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--tf-fill); color: var(--tf-ink-2); font-size: 12px; font-weight: 600; line-height: 1.8; white-space: nowrap; } .tf-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tf-status.is-processing { background: #EAF1FF; color: var(--tf-brand); } .tf-status.is-on-hold, .tf-status.is-pending { background: #FFF5E0; color: #B26A00; } .tf-status.is-completed { background: #E7F8EF; color: var(--tf-ok); } .tf-status.is-cancelled, .tf-status.is-failed, .tf-status.is-refunded { background: #FFF0F2; color: #D12C4A; } .tf-acc-wish-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tf-acc-wish-mini a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px; border-radius: 16px; background: var(--tf-bg); color: var(--tf-ink-2) !important; text-decoration: none !important; transition: transform .3s var(--tf-ease); } .tf-acc-wish-mini a:hover { transform: translateY(-3px); } .tf-acc-wish-mini span { display: grid; place-items: center; width: 100%; aspect-ratio: 1.3; } .tf-acc-wish-mini img { width: 80%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .tf-acc-wish-mini small { overflow: hidden; max-width: 100%; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } /* Banner + support */ .tf-acc-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--tf-r-lg); background: linear-gradient(110deg, #FFF3EA, #FFE6D6); color: #7A3510 !important; text-decoration: none !important; transition: transform .3s var(--tf-ease); } .tf-acc-banner:hover { transform: translateY(-2px); } .tf-acc-banner > span { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: #FFF; color: #F2621F; box-shadow: 0 6px 16px rgba(242, 98, 31, .18); } .tf-acc-banner > div { display: flex; flex-direction: column; flex: 1; min-width: 0; } .tf-acc-banner small { font-size: 12px; font-weight: 500; opacity: .8; } .tf-acc-banner strong { overflow: hidden; color: var(--tf-ink); font-size: 15.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .tf-acc-banner em { font-size: 12.5px; font-style: normal; font-weight: 500; } .tf-acc-support { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 16px 18px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-acc-support > span { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 16px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-acc-support > div { flex: 1; min-width: 180px; } .tf-acc-support strong { font-size: 15px; font-weight: 700; } .tf-acc-support p { margin: 2px 0 0; color: var(--tf-muted); font-size: 13px; } /* Empty + section */ .tf-acc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; border-radius: var(--tf-r-lg); background: var(--tf-bg); text-align: center; } .tf-acc-empty > span { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 4px; border-radius: 50%; background: #FFF; color: var(--tf-brand); box-shadow: var(--tf-shadow-1); } .tf-acc-empty strong { font-size: 16px; font-weight: 700; } .tf-acc-empty p, .tf-acc-empty small { margin: 0; color: var(--tf-muted); font-size: 13px; } .tf-acc-empty .tf-btn { margin-top: 6px; } .tf-acc-empty.is-compact { padding: 22px 12px; } .tf-acc-empty.is-compact > span { width: 52px; height: 52px; } .tf-acc-section__head, .tf-ti-account__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .tf-acc-section__head h2 { margin: 6px 0 2px; font-size: clamp(19px, 2vw, 22.5px); font-weight: 700; } .tf-acc-section__head p { margin: 0; color: var(--tf-muted); font-size: 14px; } .tf-grid.tf-acc-wishlist { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .tf-grid.tf-acc-wishlist > .tf-card:nth-child(n) { display: flex; } .tf-acc-section .tf-card { box-shadow: 0 0 0 1px var(--tf-line); } .tf-acc-main.is-trade-in .tf-ti-account { padding: clamp(16px, 2.2vw, 24px); border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } /* WooCommerce endpoints inside the panel */ .tf-acc-main.is-panel > h2, .tf-acc-main.is-panel > h3, .tf-acc-main h2.woocommerce-order-details__title, .tf-acc-main h2.woocommerce-column__title { margin: 0 0 14px; font-size: 19px; font-weight: 700; } .tf-acc-main .woocommerce-message, .tf-acc-main .woocommerce-info, .tf-acc-main .woocommerce-error, .tf-acc .woocommerce-notices-wrapper > * { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 16px !important; padding: 14px 18px !important; border: 0 !important; border-radius: 18px; background: var(--tf-brand-soft) !important; color: var(--tf-ink) !important; font-size: 14px; list-style: none; } .tf-acc-main .woocommerce-message::before, .tf-acc-main .woocommerce-info::before, .tf-acc-main .woocommerce-error::before { position: static !important; margin: 0; color: var(--tf-brand); } .tf-acc-main .woocommerce-error { background: #FFF0F2 !important; } .tf-acc-main .woocommerce-message { background: #E9F8F0 !important; } .tf-acc-main .woocommerce-message .button, .tf-acc-main .woocommerce-info .button { order: 3; margin-inline-start: auto; float: none !important; } .tf-acc-main .button, .tf-acc-main button.button, .tf-acc-main .woocommerce-Button, .tf-acc-main .woocommerce-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 42px; margin: 2px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--tf-fill) !important; color: var(--tf-ink) !important; font: 600 13.5px var(--tf-font) !important; text-decoration: none !important; cursor: pointer; transition: background .2s, transform .15s; } .tf-acc-main .button:hover { background: #E4E4EA !important; } .tf-acc-main .button.view, .tf-acc-main .button.pay, .tf-acc-main button[type="submit"].button, .tf-acc-main .woocommerce-Button[type="submit"] { background: var(--tf-brand) !important; color: #FFF !important; } .tf-acc-main .button.cancel { background: #FFF0F2 !important; color: #D12C4A !important; } .tf-acc-main .button:active { transform: scale(.97); } .tf-acc-main table.shop_table, .tf-acc-main table.woocommerce-orders-table, .tf-acc-main table.woocommerce-table { width: 100%; margin: 0 0 18px !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0; border-radius: 18px !important; overflow: hidden; box-shadow: inset 0 0 0 1px var(--tf-line); } .tf-acc-main table.shop_table th, .tf-acc-main table.shop_table td { padding: 14px 16px !important; border: 0 !important; border-top: 1px solid var(--tf-line) !important; background: none; font-size: 14px; text-align: right !important; vertical-align: middle; } .tf-acc-main table.shop_table thead th { border-top: 0 !important; background: var(--tf-bg); color: var(--tf-muted); font-size: 12.5px; font-weight: 600; } .tf-acc-main table.shop_table tbody tr { transition: background .2s; } .tf-acc-main table.woocommerce-orders-table tbody tr:hover { background: #FAFAFC; } .tf-acc-main .woocommerce-orders-table__cell-order-number a { color: var(--tf-ink) !important; font-weight: 700; text-decoration: none !important; } .tf-acc-main .woocommerce-orders-table__cell-order-actions { text-align: left !important; white-space: nowrap; } .tf-acc-main table.shop_table tfoot th, .tf-acc-main table.shop_table tfoot td { background: #FAFAFC; font-weight: 600; } .tf-acc-main table.shop_table tfoot tr:last-child td { color: var(--tf-brand); font-size: 16px; font-weight: 700; } .tf-acc-main table.shop_table .product-name a { color: var(--tf-ink) !important; font-weight: 600; text-decoration: none !important; } .tf-acc-main .woocommerce-pagination { display: flex; justify-content: space-between; gap: 10px; } .tf-acc-main mark { padding: 0 6px; border-radius: 6px; background: var(--tf-brand-soft); color: var(--tf-brand); font-weight: 600; } .tf-acc-main p.order-again { margin: 0 0 18px; } .tf-acc-main .woocommerce-customer-details address, .tf-acc-main .woocommerce-Address address { margin: 0; padding: 16px 18px; border: 0 !important; border-radius: 18px; background: var(--tf-bg); font-style: normal; line-height: 2; } .tf-acc-main .woocommerce-columns--addresses, .tf-acc-main .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tf-acc-main .woocommerce-columns--addresses::before, .tf-acc-main .woocommerce-columns--addresses::after, .tf-acc-main .woocommerce-Addresses::before, .tf-acc-main .woocommerce-Addresses::after { display: none !important; } .tf-acc-main .woocommerce-column, .tf-acc-main .woocommerce-Address { float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .tf-acc-main .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .tf-acc-main .woocommerce-Address-title::before, .tf-acc-main .woocommerce-Address-title::after { display: none !important; } .tf-acc-main .woocommerce-Address-title h2, .tf-acc-main .woocommerce-Address-title h3 { margin: 0; font-size: 16px; font-weight: 700; } .tf-acc-main .woocommerce-Address-title .edit { float: none !important; color: var(--tf-link) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } .tf-acc-main .woocommerce-MyAccount-content > p:first-child, .tf-acc-main.is-edit-address > p:first-of-type { color: var(--tf-muted); } .tf-acc-main form .form-row { float: none !important; width: 100% !important; margin: 0 0 14px !important; padding: 0 !important; } .tf-acc-main form .form-row-first, .tf-acc-main form .form-row-last { display: inline-block; width: calc(50% - 7px) !important; vertical-align: top; } .tf-acc-main form .form-row-first { margin-left: 10px !important; } .tf-acc-main form .clear { display: none; } .tf-acc-main form label { display: block; margin-bottom: 6px; color: var(--tf-ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.6; } .tf-acc-main form .required { color: var(--tf-sale); text-decoration: none; } .tf-acc-main form input.input-text, .tf-acc-main form input[type="text"], .tf-acc-main form input[type="email"], .tf-acc-main form input[type="tel"], .tf-acc-main form input[type="password"], .tf-acc-main form select, .tf-acc-main form textarea, .tf-acc-main .select2-container .select2-selection--single { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid transparent !important; border-radius: 14px !important; background: var(--tf-fill) !important; color: var(--tf-ink); font: 450 14.5px var(--tf-font); box-shadow: none; transition: border-color .2s, background .2s, box-shadow .2s; } .tf-acc-main form textarea { min-height: 110px; padding: 12px 16px; } .tf-acc-main form input:focus, .tf-acc-main form select:focus, .tf-acc-main form textarea:focus { border-color: var(--tf-brand) !important; background: #FFF !important; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12); outline: 0; } .tf-acc-main .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 48px; } .tf-acc-main .select2-container .select2-selection--single .select2-selection__arrow { top: 12px; left: 10px; right: auto; } .tf-acc-main form em, .tf-acc-main form .description { display: block; margin-top: 4px; color: var(--tf-muted); font-size: 12px; font-style: normal; } .tf-acc-main fieldset { margin: 18px 0; padding: 18px; border: 0; border-radius: 20px; background: var(--tf-bg); } .tf-acc-main fieldset legend { float: right; width: 100%; margin-bottom: 12px; padding: 0; font-size: 16px; font-weight: 700; } .tf-acc-main .password-input { position: relative; display: block; } .tf-acc-main .show-password-input { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); } @media (max-width: 1100px) { .tf-acc-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; min-width: 0; } .tf-acc-layout { grid-template-columns: 240px minmax(0, 1fr); } .tf-acc-duo { grid-template-columns: 1fr; } .tf-acc-wish-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 991px) { .tf-acc-layout { grid-template-columns: 1fr; } .tf-acc-side { position: relative; top: auto; } .tf-acc-nav { padding: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); } .tf-acc-nav::-webkit-scrollbar { display: none; } .tf-acc-nav ul { display: flex; gap: 4px; width: max-content; padding-left: 24px; } .tf-acc-nav a { min-height: 44px; padding: 4px 6px 4px 14px; font-size: 13.5px; white-space: nowrap; } .tf-acc-nav__icon { width: 34px; height: 34px; border-radius: 11px; } .tf-acc-nav li.is-logout { margin: 0; padding: 0; border: 0; } .tf-acc-side__partner { padding: 12px; } } @media (max-width: 639px) { .tf-acc { padding-top: 10px; } .tf-acc-hero { gap: 16px; padding: 18px 16px; border-radius: 26px; } .tf-acc-hero__user { gap: 12px; } .tf-acc-hero p { display: none; } .tf-acc-hero h1 { margin: 6px 0 0; font-size: 19px; } .tf-acc-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tf-acc-hero__stats > * { padding: 10px 12px; border-radius: 15px; } .tf-acc-hero__stats strong { font-size: 17px; } .tf-acc:not(:has(.tf-acc-main.is-dashboard)) .tf-acc-hero__stats { display: none; } .tf-acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tf-acc-tiles a { padding: 14px 12px; } .tf-acc-tiles a > span { width: 42px; height: 42px; margin-bottom: 6px; border-radius: 13px; } .tf-acc-tiles strong { font-size: 14px; } .tf-acc-tiles a:last-child:nth-child(odd) { grid-column: 1 / -1; } .tf-acc-steps span { font-size: 11.5px; } .tf-acc-steps i { width: 30px; height: 30px; } .tf-acc-steps::before, .tf-acc-steps::after { top: 13px; } .tf-acc-credit__grid { grid-template-columns: 1fr; gap: 6px; } .tf-acc-credit__grid > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tf-acc-wish-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-acc-support .tf-btn { width: 100%; } .tf-acc-main.is-panel { padding: 16px 14px; border-radius: 24px; } .tf-grid.tf-acc-wishlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-acc-section { padding: 14px 10px; } .tf-acc-section__head { padding: 0 4px; } .tf-acc-main .woocommerce-columns--addresses, .tf-acc-main .woocommerce-Addresses { grid-template-columns: 1fr; } .tf-acc-main form .form-row-first, .tf-acc-main form .form-row-last { display: block; width: 100% !important; margin-left: 0 !important; } /* جدول سفارش‌ها → کارت */ .tf-acc-main table.woocommerce-orders-table { box-shadow: none; overflow: visible; } .tf-acc-main table.woocommerce-orders-table thead { display: none; } .tf-acc-main table.woocommerce-orders-table, .tf-acc-main table.woocommerce-orders-table tbody, .tf-acc-main table.woocommerce-orders-table tr, .tf-acc-main table.woocommerce-orders-table td, .tf-acc-main table.woocommerce-orders-table tbody th { display: block; width: 100%; } .tf-acc-main table.woocommerce-orders-table tr { margin-bottom: 10px; padding: 6px 4px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--tf-line); } .tf-acc-main table.woocommerce-orders-table td, .tf-acc-main table.woocommerce-orders-table tbody th { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px !important; border: 0 !important; text-align: left !important; } .tf-acc-main table.woocommerce-orders-table td::before, .tf-acc-main table.woocommerce-orders-table tbody th::before { content: attr(data-title); float: none !important; color: var(--tf-muted); font-size: 12.5px; font-weight: 500; } .tf-acc-main table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; flex-wrap: wrap; } .tf-acc-main table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; } } /* Partner price list (حساب › فروش همکار) */ .tf-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tf-fill); } .tf-seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--tf-ink-2) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background .2s, color .2s, box-shadow .2s; } .tf-seg a.is-active { background: #FFF; color: var(--tf-ink) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .tf-ws-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .tf-ws-kpis > div { min-width: 0; padding: 14px 16px; border-radius: 18px; background: var(--tf-bg); } .tf-ws-kpis small { display: block; color: var(--tf-muted); font-size: 12px; font-weight: 500; } .tf-ws-kpis strong { display: block; overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .tf-ws-kpis strong .woocommerce-Price-currencySymbol { color: var(--tf-muted); font-size: 11.5px; font-weight: 450; } .tf-ws-kpis .is-debt { background: #FFF0F2; } .tf-ws-kpis .is-debt strong { color: #D12C4A; } .tf-ws-tiers { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(90deg, #F1ECFF, #EAF1FF); } .tf-ws-tiers__title { display: inline-flex; align-items: center; gap: 6px; color: #4B37C9; font-size: 13.5px; font-weight: 700; } .tf-ws-tiers ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .tf-ws-tiers li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #FFF; font-size: 12.5px; } .tf-ws-tiers li span { color: var(--tf-ok); font-weight: 600; } .tf-ws-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--tf-fill); color: var(--tf-muted); } .tf-ws-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--tf-ink); font: 450 14.5px var(--tf-font); outline: 0; } .tf-ws-search a { display: grid; place-items: center; color: var(--tf-muted); } .tf-ws-table { display: grid; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--tf-line); overflow: hidden; } .tf-ws-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) 170px; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--tf-line); } .tf-ws-row.is-head { border-top: 0; background: var(--tf-bg); color: var(--tf-muted); font-size: 12.5px; font-weight: 600; } .tf-ws-row.is-out { opacity: .75; } .tf-ws-product { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--tf-ink) !important; text-decoration: none !important; } .tf-ws-product__img { display: grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 4px; border-radius: 14px; background: var(--tf-bg); } .tf-ws-product__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .tf-ws-product__txt { display: flex; flex-direction: column; min-width: 0; } .tf-ws-product__txt strong { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; } .tf-ws-product__txt small { display: flex; align-items: center; gap: 8px; color: var(--tf-muted); font-size: 12px; } .tf-ws-product__txt em { font-style: normal; font-weight: 600; color: var(--tf-faint); } .tf-ws-product__txt em.is-in { color: var(--tf-ok); } .tf-ws-cell { font-size: 13.5px; } .tf-ws-cell small { color: var(--tf-muted); font-size: 11.5px; } .tf-ws-cell.is-retail { color: var(--tf-muted); } .tf-ws-cell.is-partner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: #4B37C9; font-weight: 700; } .tf-ws-cell.is-partner i { padding: 0 8px; border-radius: 999px; background: #E7F8EF; color: var(--tf-ok); font-size: 11.5px; font-style: normal; font-weight: 700; line-height: 1.9; } .tf-ws-cell .woocommerce-Price-currencySymbol { font-size: 11.5px; font-weight: 450; opacity: .8; } .tf-ws-cell.is-action { display: flex; justify-content: flex-end; } .tf-ws-add { display: flex; align-items: center; gap: 6px; margin: 0; } .tf-ws-add .tf-btn { width: 42px; padding: 0; } .tf-ws-qty { display: flex; align-items: center; height: 42px; margin: 0; padding: 3px; border-radius: 999px; background: var(--tf-fill); } .tf-ws-qty button { display: grid; place-items: center; width: 30px; height: 100%; padding: 0; border: 0; border-radius: 50%; background: #FFF; color: var(--tf-ink); font: 500 16px/1 var(--tf-font); cursor: pointer; } .tf-ws-qty input { width: 38px; height: 100%; padding: 0; border: 0; background: transparent; font: 700 14px var(--tf-font); text-align: center; -moz-appearance: textfield; } .tf-ws-qty input::-webkit-inner-spin-button, .tf-ws-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .tf-ws-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; } .tf-ws-pages a { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 12px; background: var(--tf-fill); color: var(--tf-ink-2) !important; font-weight: 600; text-decoration: none !important; } .tf-ws-pages a.is-current { background: var(--tf-ink); color: #FFF !important; } .tf-ws-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tf-ws-ledger .tf-acc-card { box-shadow: inset 0 0 0 1px var(--tf-line); } .tf-ws-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .tf-ws-list li { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px dashed var(--tf-line); } .tf-ws-list li:last-child { border-bottom: 0; } .tf-ws-list__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-ws-list__icon.is-pay { background: #E7F8EF; color: var(--tf-ok); } .tf-ws-list li > div { display: flex; flex-direction: column; flex: 1; min-width: 0; } .tf-ws-list strong, .tf-ws-list a { color: var(--tf-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; } .tf-ws-list small { color: var(--tf-muted); font-size: 12px; } .tf-ws-list b { font-size: 13.5px; font-weight: 700; white-space: nowrap; } .tf-ws-list b.is-plus { color: var(--tf-ok); } .tf-ws-list b.is-minus { color: #D12C4A; } .tf-ws-list b.is-settled { color: var(--tf-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); } @media (max-width: 1100px) { .tf-ws-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-ws-ledger { grid-template-columns: 1fr; } } @media (max-width: 767px) { .tf-ws-row.is-head { display: none; } .tf-ws-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p p" "r a" "q a"; gap: 4px 10px; padding: 12px; } .tf-ws-product { grid-area: p; margin-bottom: 4px; } .tf-ws-product__txt strong { white-space: normal; } .tf-ws-cell.is-retail { grid-area: r; font-size: 12px; text-decoration: line-through; text-decoration-color: rgba(255, 59, 48, .6); } .tf-ws-cell.is-partner { grid-area: q; font-size: 15px; } .tf-ws-cell.is-action { grid-area: a; align-self: end; } .tf-seg { width: 100%; } .tf-seg a { flex: 1; justify-content: center; } } .tf-b2b-credit { margin: 16px 0; } .tf-b2b-credit__links { display: flex; flex-wrap: wrap; gap: 8px 22px; } .tf-acc-main form label.tf-ws-qty { display: flex; margin: 0; } .tf-acc-main .tf-ws-qty input[type="number"] { width: 38px; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none; } /* ========================================================================== v3.4 — سبد خرید و تسویه‌حساب ========================================================================== */ body.woocommerce-cart .entry-header, body.woocommerce-checkout:not(.woocommerce-order-received) .entry-header { display: none; } body.woocommerce-cart .technofa-page, body.woocommerce-checkout:not(.woocommerce-order-received) .technofa-page { padding: 0; } body.woocommerce-cart .entry-content, body.woocommerce-checkout .entry-content { margin: 0; } body.woocommerce-order-received .technofa-page { padding: clamp(16px, 3vw, 34px) 0 clamp(40px, 5vw, 70px); } body.woocommerce-order-received .entry-title { font-size: clamp(22.5px, 2.6vw, 30px); font-weight: 700; } .tf-cart, .tf-co { padding: clamp(14px, 2.4vw, 28px) 0 clamp(40px, 5vw, 72px); } .tf-cart-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: clamp(14px, 2vw, 22px); } .tf-cart-hero h1 { margin: 6px 0 0; font-size: clamp(22.5px, 2.8vw, 32px); font-weight: 700; } .tf-steps { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px; border-radius: 999px; background: #FFF; box-shadow: var(--tf-shadow-1); list-style: none; } .tf-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; color: var(--tf-muted); font-size: 13.5px; font-weight: 600; } .tf-steps i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tf-fill); color: var(--tf-muted); font-style: normal; font-size: 13px; font-weight: 700; } .tf-steps li.is-active { background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-steps li.is-active i { background: var(--tf-brand); color: #FFF; } .tf-steps li.is-done { color: var(--tf-ok); } .tf-steps li.is-done i { background: #E7F8EF; color: var(--tf-ok); } .tf-cart-message { margin-bottom: 12px; padding: 12px 18px; border-radius: 16px; background: #E9F8F0; color: #0A7145; font-size: 14px; font-weight: 500; } .tf-cart-message.is-error { background: #FFF0F2; color: #C2334F; } .tf-cart-message[hidden] { display: none !important; } .tf-cart-loading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 18px; border-radius: 16px; background: #FFF; box-shadow: var(--tf-shadow-1); color: var(--tf-muted); } .tf-cart-loading[hidden] { display: none !important; } .tf-cart-loading span { width: 18px; height: 18px; border: 2.5px solid var(--tf-line); border-top-color: var(--tf-brand); border-radius: 50%; animation: tf-spin .8s linear infinite; } .tf-cart-loading p { margin: 0; font-size: 13.5px; } .tf-cart.is-loading .tf-cart-content { opacity: .55; pointer-events: none; transition: opacity .2s; } .tf-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: clamp(12px, 1.6vw, 20px); } .tf-cart-items { padding: clamp(14px, 2vw, 22px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-cart-items__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--tf-line); } .tf-cart-items__head h2 { margin: 0; font-size: 18px; font-weight: 700; } .tf-cart-items__head p { margin: 2px 0 0; color: var(--tf-muted); font-size: 13px; } .tf-cart-items__add { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--tf-brand-soft); color: var(--tf-brand) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: background .2s; } .tf-cart-items__add:hover { background: #DCE8FF; } .tf-cart-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--tf-line); } .tf-cart-row:last-child { border-bottom: 0; padding-bottom: 4px; } .tf-cart-row.is-out { background: linear-gradient(90deg, rgba(255, 59, 48, .04), transparent 60%); } .tf-cart-row__img { display: grid; place-items: center; width: 104px; height: 104px; padding: 8px; border-radius: 20px; background: var(--tf-bg); } .tf-cart-row__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .tf-cart-row__info { min-width: 0; } .tf-cart-row__info h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.7; } .tf-cart-row__info h3 a { color: var(--tf-ink) !important; text-decoration: none !important; } .tf-cart-row__info h3 a:hover { color: var(--tf-brand) !important; } .tf-cart-row__meta { margin-top: 2px; color: var(--tf-muted); font-size: 12.5px; } .tf-cart-row__meta dl.variation { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; } .tf-cart-row__meta dl.variation dt, .tf-cart-row__meta dl.variation dd { margin: 0; padding: 0; float: none; font-weight: 500; } .tf-cart-row__meta dl.variation dd { color: var(--tf-ink-2); } .tf-cart-row__meta dl.variation dd p { margin: 0; } .tf-cart-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; } .tf-cart-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--tf-fill); color: var(--tf-ink-2); font-size: 12px; font-weight: 500; line-height: 1.9; } .tf-cart-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .tf-cart-chip.is-in { background: #E7F8EF; color: #0A7145; } .tf-cart-chip.is-out { background: #FFF0F2; color: #C2334F; } .tf-cart-chip.is-unit .woocommerce-Price-amount { font-weight: 600; } .tf-cart-row__contact { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--tf-brand) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } .tf-cart-row__qty { display: flex; flex-direction: column; align-items: center; gap: 8px; } .tf-qty { display: flex; align-items: center; height: 46px; padding: 4px; border-radius: 999px; background: var(--tf-fill); } .tf-qty button { display: grid; place-items: center; width: 34px; height: 100%; padding: 0; border: 0; border-radius: 50%; background: #FFF; color: var(--tf-ink); font: 500 17px/1 var(--tf-font); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); transition: transform .15s, color .2s; } .tf-qty button:hover { color: var(--tf-brand); } .tf-qty button:active { transform: scale(.9); } .tf-qty button:disabled { opacity: .4; cursor: not-allowed; } .tf-qty input { width: 46px; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--tf-ink); font: 700 15px var(--tf-font); text-align: center; outline: 0; -moz-appearance: textfield; } .tf-qty input::-webkit-inner-spin-button, .tf-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .tf-cart-row__remove { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--tf-muted); font: 500 12.5px var(--tf-font); cursor: pointer; transition: color .2s, background .2s; } .tf-cart-row__remove:hover { background: #FFF0F2; color: #D12C4A; } .tf-cart-row__sum { display: flex; flex-direction: column; align-items: flex-end; min-width: 130px; text-align: left; } .tf-cart-row__sum small { color: var(--tf-muted); font-size: 12px; } .tf-cart-row__sum strong { font-size: 16px; font-weight: 700; white-space: nowrap; } .tf-cart-row__sum .woocommerce-Price-currencySymbol { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-cart-summary { position: sticky; top: calc(var(--tf-head) + 18px); padding: clamp(16px, 2vw, 22px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); transition: top .35s var(--tf-ease); } .tf-cart-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--tf-line); } .tf-cart-summary__head h2 { margin: 0; font-size: 17px; font-weight: 700; } .tf-cart-summary__head span { padding: 3px 10px; border-radius: 999px; background: var(--tf-brand-soft); color: var(--tf-brand); font-size: 12px; font-weight: 600; } .tf-cart-coupon { margin: 14px 0; } .tf-cart-coupon > label { display: block; margin-bottom: 8px; color: var(--tf-ink-2); font-size: 13.5px; font-weight: 600; } .tf-cart-coupon__field { display: flex; align-items: center; gap: 8px; height: 50px; padding: 4px 14px 4px 4px; border: 1.5px solid transparent; border-radius: 16px; background: var(--tf-fill); color: var(--tf-faint); transition: border-color .2s, background .2s, box-shadow .2s; } .tf-cart-coupon__field:focus-within { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12); } .tf-cart-coupon__field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--tf-ink); font: 450 14px var(--tf-font); } .tf-cart-coupon__field button, .tf-cart-coupon__apply { flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--tf-ink); color: #FFF; font: 600 13.5px var(--tf-font); cursor: pointer; transition: background .2s; } .tf-cart-coupon__field button:hover, .tf-cart-coupon__apply:hover { background: #000; } .tf-cart-coupons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .tf-cart-coupons__item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #E7F8EF; color: #0A7145; font-size: 12.5px; font-weight: 600; } .tf-cart-coupons__item button { display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: .7; } .tf-cart-coupons__item button:hover { opacity: 1; } .tf-cart-rows { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--tf-line); } .tf-cart-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--tf-ink-2); font-size: 14px; } .tf-cart-rows strong { font-weight: 600; } .tf-cart-rows strong.is-muted { color: var(--tf-muted); font-size: 13px; font-weight: 500; } .tf-cart-rows .is-discount, .tf-cart-rows .is-discount strong { color: var(--tf-ok); } .tf-cart-rows .woocommerce-Price-currencySymbol { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-cart-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: var(--tf-bg); } .tf-cart-total span { font-size: 14px; font-weight: 600; } .tf-cart-total strong { font-size: 19.5px; font-weight: 700; } .tf-cart-total strong .woocommerce-Price-currencySymbol { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-cart-warn { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: #FFF7EC; color: #8A5300; font-size: 12.5px; line-height: 1.8; } .tf-cart-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--tf-muted); font-size: 12.5px; } .tf-cart-secure .tf-ico { color: var(--tf-ok); } .tf-cart-perks { display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--tf-line); list-style: none; } .tf-cart-perks li { display: flex; align-items: center; gap: 10px; color: var(--tf-ink-2); } .tf-cart-perks .tf-ico { flex: none; color: var(--tf-brand); } .tf-cart-perks strong { display: block; font-size: 13.5px; font-weight: 600; } .tf-cart-perks small { display: block; color: var(--tf-muted); font-size: 12px; } .tf-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(36px, 6vw, 72px) 20px; border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); text-align: center; } .tf-cart-empty__art { display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 6px; border-radius: 50%; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-cart-empty strong { font-size: clamp(19px, 2.2vw, 24.5px); font-weight: 700; } .tf-cart-empty p { max-width: 460px; margin: 0; color: var(--tf-muted); font-size: 14.5px; } .tf-cart-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } /* ---------- Checkout ---------- */ .tf-co-notices:empty { display: none; } .tf-co-notices > * { margin: 0 0 10px; } .tf-co .woocommerce-info, .tf-co .woocommerce-message, .tf-co .woocommerce-error, .tf-co .woocommerce-NoticeGroup > ul { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px !important; padding: 14px 18px !important; border: 0 !important; border-radius: 18px; background: var(--tf-brand-soft) !important; color: var(--tf-ink) !important; font-size: 14px; list-style: none; } .tf-co .woocommerce-info::before, .tf-co .woocommerce-message::before, .tf-co .woocommerce-error::before { position: static !important; margin: 0; color: var(--tf-brand); } .tf-co .woocommerce-error { background: #FFF0F2 !important; color: #A32741 !important; } .tf-co .woocommerce-error li { width: 100%; } .tf-co .woocommerce-message { background: #E9F8F0 !important; } .tf-co .woocommerce-info a, .tf-co .woocommerce-message a { color: var(--tf-brand) !important; font-weight: 600; } .tf-co form.login, .tf-co form.checkout_coupon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px !important; padding: 18px !important; border: 0 !important; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-co form.checkout_coupon { grid-template-columns: minmax(0, 1fr) auto; } .tf-co form.login p, .tf-co form.checkout_coupon p { margin: 0 !important; } .tf-co form.login > p:first-child, .tf-co form.checkout_coupon > p:first-child { grid-column: 1 / -1; color: var(--tf-muted); font-size: 13.5px; } .tf-co-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: clamp(12px, 1.6vw, 20px); } .tf-co-main { display: grid; gap: 14px; min-width: 0; } .tf-co-card { padding: clamp(16px, 2.2vw, 26px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-co-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--tf-line); } .tf-co-card__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-co-card__head h2 { margin: 0; font-size: 18px; font-weight: 700; } .tf-co-card__head p { margin: 2px 0 0; color: var(--tf-muted); font-size: 13px; } /* فیلدهای ووکامرس */ .tf-co .woocommerce-billing-fields > h3, .tf-co .woocommerce-shipping-fields > h3:not(#ship-to-different-address), .tf-co .woocommerce-additional-fields > h3 { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; } .tf-co .woocommerce-billing-fields > h3 { display: none; } .tf-co .woocommerce-billing-fields__field-wrapper, .tf-co .woocommerce-shipping-fields__field-wrapper, .tf-co .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tf-co .form-row { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .tf-co .form-row-wide, .tf-co .address-field, .tf-co .notes, .tf-co #order_comments_field, .tf-co .form-row-last:last-child:nth-child(odd) { grid-column: 1 / -1; } .tf-co .form-row-first, .tf-co .form-row-last { grid-column: span 1; } .tf-co .form-row > label, .tf-co .woocommerce-input-wrapper > label { display: block; margin: 0 0 7px; color: var(--tf-ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.7; } .tf-co .form-row label .required, .tf-co abbr.required { border: 0 !important; color: var(--tf-sale); text-decoration: none !important; } .tf-co .form-row label .optional, .tf-co .optional { color: var(--tf-faint); font-size: 12px; font-weight: 450; } .tf-co .woocommerce-input-wrapper { display: block; width: 100%; } .tf-co .input-text, .tf-co input[type="text"], .tf-co input[type="email"], .tf-co input[type="tel"], .tf-co input[type="number"], .tf-co input[type="password"], .tf-co select:not(.select2-hidden-accessible), .tf-co textarea, .tf-co .select2-container .select2-selection--single { display: block; box-sizing: border-box; width: 100% !important; min-height: 52px; height: auto; margin: 0; padding: 0 16px; border: 1.5px solid transparent !important; border-radius: 16px !important; background: var(--tf-fill) !important; color: var(--tf-ink); font: 450 14.5px/52px var(--tf-font); box-shadow: none !important; outline: 0; transition: border-color .2s, background .2s, box-shadow .2s; } .tf-co textarea { min-height: 112px; padding: 14px 16px; line-height: 1.9; resize: vertical; } .tf-co select:not(.select2-hidden-accessible) { -webkit-appearance: none; appearance: none; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E'") !important; background-repeat: no-repeat !important; background-position: left 14px center !important; cursor: pointer; } .tf-co .input-text:focus, .tf-co select:focus, .tf-co textarea:focus, .tf-co .select2-container--focus .select2-selection--single, .tf-co .select2-container--open .select2-selection--single { border-color: var(--tf-brand) !important; background-color: #FFF !important; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12) !important; } .tf-co .input-text::placeholder, .tf-co textarea::placeholder { color: var(--tf-faint); font-weight: 400; } /* select2: فقط جعبهٔ ساخته‌شده دیده شود، نه سلکت اصلی */ .tf-co select.select2-hidden-accessible, .tf-acc-main select.select2-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; white-space: nowrap; } .tf-co .select2-container { width: 100% !important; } .tf-co .select2-container .select2-selection--single { display: flex !important; align-items: center; padding: 0 16px; } .tf-co .select2-container .select2-selection__rendered { width: 100%; padding: 0 !important; color: var(--tf-ink) !important; font-weight: 450; line-height: 50px !important; text-align: right; } .tf-co .select2-container .select2-selection__placeholder { color: var(--tf-faint); } .tf-co .select2-container .select2-selection__arrow { top: 50% !important; left: 12px !important; right: auto !important; height: 20px; transform: translateY(-50%); } .tf-co .select2-container .select2-selection__arrow b { border-color: var(--tf-muted) transparent transparent; } body.technofa-body .select2-dropdown { border: 0 !important; border-radius: 18px !important; background: #FFF; box-shadow: var(--tf-shadow-2); overflow: hidden; } body.technofa-body .select2-search--dropdown { padding: 10px; } body.technofa-body .select2-search--dropdown .select2-search__field { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--tf-line) !important; border-radius: 12px; background: var(--tf-fill); font: 450 14px var(--tf-font); } body.technofa-body .select2-results__option { padding: 10px 16px; font-size: 14px; } body.technofa-body .select2-container--default .select2-results__option--highlighted[aria-selected], body.technofa-body .select2-container--default .select2-results__option--highlighted { background: var(--tf-brand-soft) !important; color: var(--tf-brand) !important; } body.technofa-body .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--tf-fill); font-weight: 600; } /* حالت خطا و تأیید */ .tf-co .woocommerce-invalid .input-text, .tf-co .woocommerce-invalid select, .tf-co .woocommerce-invalid .select2-selection { border-color: var(--tf-sale) !important; background-color: #FFF7F8 !important; } .tf-co .woocommerce-invalid .woocommerce-error, .tf-co .woocommerce-invalid-required-field > .woocommerce-error { margin-top: 6px !important; padding: 6px 12px !important; background: transparent !important; color: var(--tf-sale) !important; font-size: 12px; } .tf-co .woocommerce-validated .input-text, .tf-co .woocommerce-validated select, .tf-co .woocommerce-validated .select2-selection { border-color: rgba(10, 154, 85, .5) !important; } .tf-co .form-row ::-ms-reveal { display: none; } .tf-co #ship-to-different-address { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--tf-line); font-size: 15px; font-weight: 600; } .tf-co #ship-to-different-address label, .tf-co .woocommerce-form__label-for-checkbox { display: flex !important; align-items: center; gap: 10px; margin: 0; cursor: pointer; } .tf-co input[type="checkbox"], .tf-co input[type="radio"] { flex: none; width: 20px !important; height: 20px !important; min-height: 0; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: none !important; accent-color: var(--tf-brand); box-shadow: none !important; cursor: pointer; } .tf-co .woocommerce-additional-fields { margin-top: 18px; } .tf-co-assurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .tf-co-assurance li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--tf-r-md); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-co-assurance .tf-ico { flex: none; color: var(--tf-brand); } .tf-co-assurance strong { display: block; font-size: 13.5px; font-weight: 600; } .tf-co-assurance small { display: block; color: var(--tf-muted); font-size: 12px; } /* ستون خلاصه سفارش */ .tf-co-aside { position: sticky; top: calc(var(--tf-head) + 18px); padding: clamp(16px, 2vw, 22px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); transition: top .35s var(--tf-ease); } .tf-co-aside__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--tf-line); } .tf-co-aside__head > div { display: flex; align-items: center; gap: 8px; } .tf-co-aside__head h2 { margin: 0; font-size: 17px; font-weight: 700; } .tf-co-aside__head > div span { padding: 3px 10px; border-radius: 999px; background: var(--tf-brand-soft); color: var(--tf-brand); font-size: 12px; font-weight: 600; } .tf-co-aside__head a { color: var(--tf-link) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } .tf-co.is-updating .woocommerce-checkout-review-order { opacity: .5; pointer-events: none; transition: opacity .2s; } .tf-co table.shop_table { width: 100%; margin: 14px 0 0 !important; border: 0 !important; border-collapse: collapse !important; background: none !important; } .tf-co table.shop_table thead { display: none; } .tf-co table.shop_table th, .tf-co table.shop_table td { padding: 10px 0 !important; border: 0 !important; background: none !important; font-size: 14px; text-align: right !important; vertical-align: middle; } .tf-co table.shop_table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px dashed var(--tf-line); } .tf-co table.shop_table .product-name { color: var(--tf-ink); font-weight: 500; line-height: 1.8; } .tf-co table.shop_table .product-quantity { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--tf-fill); color: var(--tf-ink-2); font-size: 12px; font-weight: 600; } .tf-co table.shop_table .product-name dl.variation { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 2px 0 0; color: var(--tf-muted); font-size: 12px; } .tf-co table.shop_table .product-name dl.variation dt, .tf-co table.shop_table .product-name dl.variation dd { margin: 0; float: none; font-weight: 500; } .tf-co table.shop_table .product-name dl.variation p { margin: 0; } .tf-co table.shop_table .product-total { white-space: nowrap; font-weight: 600; } .tf-co table.shop_table tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--tf-line); } .tf-co table.shop_table tfoot th { color: var(--tf-ink-2); font-weight: 500 !important; } .tf-co table.shop_table tfoot td { text-align: left !important; font-weight: 600; } .tf-co table.shop_table tfoot tr.order-total { margin-top: 6px; padding: 12px 14px !important; border: 0; border-radius: 16px; background: var(--tf-bg); } .tf-co table.shop_table tfoot tr.order-total th, .tf-co table.shop_table tfoot tr.order-total td { padding: 0 !important; font-size: 15px; } .tf-co table.shop_table tfoot tr.order-total .amount { color: var(--tf-brand); font-size: 19px; font-weight: 700; } .tf-co .woocommerce-Price-currencySymbol { color: var(--tf-muted); font-size: 12px; font-weight: 450; } .tf-co ul#shipping_method { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .tf-co ul#shipping_method li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--tf-fill); transition: background .2s, box-shadow .2s; } .tf-co ul#shipping_method li:has(input:checked) { background: var(--tf-brand-soft); box-shadow: inset 0 0 0 1.5px var(--tf-brand); } .tf-co ul#shipping_method label { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; margin: 0; font-size: 13.5px; font-weight: 500; cursor: pointer; } .tf-co .woocommerce-shipping-destination, .tf-co .shipping-calculator-button { color: var(--tf-muted); font-size: 12.5px; } .tf-co #payment { margin-top: 16px; padding: 0; border: 0; background: none !important; border-radius: 0; } .tf-co #payment ul.payment_methods { display: grid; gap: 8px; margin: 0 0 14px; padding: 0 !important; border: 0 !important; list-style: none; } .tf-co #payment ul.payment_methods li { margin: 0; padding: 0; background: none; } .tf-co #payment ul.payment_methods > li > label { display: flex !important; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--tf-fill); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, box-shadow .2s; } .tf-co #payment ul.payment_methods > li > input { position: absolute; opacity: 0; pointer-events: none; } .tf-co #payment ul.payment_methods > li > label::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--tf-line-2); border-radius: 50%; transition: .2s; } .tf-co #payment ul.payment_methods > li > input:checked + label { background: var(--tf-brand-soft); box-shadow: inset 0 0 0 1.5px var(--tf-brand); } .tf-co #payment ul.payment_methods > li > input:checked + label::before { border-color: var(--tf-brand); border-width: 6px; } .tf-co #payment ul.payment_methods > li > input:focus-visible + label { outline: 3px solid rgba(22, 82, 240, .45); outline-offset: 2px; } .tf-co #payment ul.payment_methods label img { max-height: 28px; margin-inline-start: auto; width: auto; } .tf-co #payment .payment_box { position: relative; margin: 6px 0 0 !important; padding: 12px 16px !important; border-radius: 14px; background: #FFF8E6 !important; color: #7A5200; font-size: 12.5px; line-height: 1.9; } .tf-co #payment .payment_box::before { display: none !important; } .tf-co #payment .payment_box p:last-child { margin-bottom: 0; } .tf-co .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; } .tf-co .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 !important; } .tf-co .woocommerce-privacy-policy-text { color: var(--tf-muted); font-size: 12.5px; line-height: 1.9; } .tf-co .place-order { display: grid; gap: 10px; } .tf-co #place_order { display: block; width: 100%; min-height: 58px; margin: 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 18px !important; background: var(--tf-brand) !important; color: #FFF !important; font: 700 16px var(--tf-font) !important; box-shadow: var(--tf-shadow-brand); cursor: pointer; transition: background .2s, transform .15s; } .tf-co #place_order:hover { background: var(--tf-brand-ink) !important; } .tf-co #place_order:active { transform: scale(.99); } .tf-co .blockUI.blockOverlay { border-radius: var(--tf-r-xl); } @media (max-width: 1100px) { .tf-cart-layout, .tf-co-layout { grid-template-columns: minmax(0, 1fr) 330px; } .tf-cart-row { grid-template-columns: 88px minmax(0, 1fr) auto; } .tf-cart-row__img { width: 88px; height: 88px; } .tf-cart-row__sum { grid-column: 2 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } } @media (max-width: 991px) { .tf-cart-layout, .tf-co-layout { grid-template-columns: 1fr; } .tf-cart-summary, .tf-co-aside { position: relative; top: auto; } .tf-co-layout { display: flex; flex-direction: column; } .tf-co-aside { order: 2; } .tf-co-main { order: 1; } } @media (max-width: 639px) { .tf-cart-hero { gap: 10px; } .tf-cart-hero h1 { font-size: 22.5px; } .tf-steps { width: 100%; justify-content: space-between; padding: 5px; } .tf-steps li { padding: 5px 8px 5px 5px; font-size: 12px; } .tf-steps li span { display: none; } .tf-steps li.is-active span { display: inline; } .tf-cart-items { padding: 12px; border-radius: 26px; } .tf-cart-row { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "img info" "qty sum"; gap: 10px 12px; } .tf-cart-row__img { grid-area: img; width: 76px; height: 76px; border-radius: 18px; } .tf-cart-row__info { grid-area: info; } .tf-cart-row__info h3 { font-size: 14px; } .tf-cart-row__qty { grid-area: qty; flex-direction: row; gap: 4px; } .tf-cart-row__sum { grid-area: sum; flex-direction: column; align-items: flex-end; min-width: 0; } .tf-cart-row__sum strong { font-size: 15px; } .tf-cart-summary, .tf-co-card, .tf-co-aside { padding: 16px 14px; border-radius: 26px; } .tf-co .woocommerce-billing-fields__field-wrapper, .tf-co .woocommerce-shipping-fields__field-wrapper, .tf-co .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; } .tf-co .form-row-first, .tf-co .form-row-last { grid-column: 1 / -1; } .tf-co-assurance { grid-template-columns: 1fr; } .tf-co form.login, .tf-co form.checkout_coupon { grid-template-columns: 1fr; } } /* صفحه «سفارش دریافت شد» */ .woocommerce-order { max-width: 900px; margin-inline: auto; } .woocommerce-order > p.woocommerce-notice--success, .woocommerce-order > .woocommerce-thankyou-order-received { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 18px 22px; border-radius: var(--tf-r-lg); background: #E9F8F0; color: #0A7145; font-size: 16px; font-weight: 700; } .woocommerce-order ul.woocommerce-order-overview, .woocommerce-order ul.woocommerce-thankyou-order-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; list-style: none; } .woocommerce-order ul.woocommerce-order-overview li { margin: 0; padding: 14px 16px; border: 0 !important; border-radius: 18px; background: #FFF; box-shadow: var(--tf-shadow-1); color: var(--tf-muted); font-size: 12px; font-weight: 500; text-transform: none; } .woocommerce-order ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; color: var(--tf-ink); font-size: 15.5px; font-weight: 700; } .woocommerce-order h2, .woocommerce-order h3 { margin: 18px 0 12px; font-size: 18px; font-weight: 700; } .woocommerce-order table.shop_table, .woocommerce-order table.woocommerce-table { width: 100%; margin: 0 0 16px !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0; border-radius: 20px !important; overflow: hidden; background: #FFF; box-shadow: var(--tf-shadow-1); } .woocommerce-order table.shop_table th, .woocommerce-order table.shop_table td { padding: 14px 18px !important; border: 0 !important; border-top: 1px solid var(--tf-line) !important; font-size: 14px; text-align: right !important; } .woocommerce-order table.shop_table thead th { border-top: 0 !important; background: var(--tf-bg); color: var(--tf-muted); font-size: 12.5px; font-weight: 600; } .woocommerce-order table.shop_table .product-name a { color: var(--tf-ink) !important; font-weight: 600; text-decoration: none !important; } .woocommerce-order table.shop_table tfoot tr:last-child td { color: var(--tf-brand); font-size: 16px; font-weight: 700; } .woocommerce-order .woocommerce-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .woocommerce-order .woocommerce-column { float: none !important; width: auto !important; } .woocommerce-order address { padding: 16px 18px; border: 0 !important; border-radius: 18px; background: #FFF; box-shadow: var(--tf-shadow-1); font-style: normal; line-height: 2; } @media (max-width: 639px) { .woocommerce-order .woocommerce-columns { grid-template-columns: 1fr; } } /* چیدمان فیلدهای پرداخت — با اولویت بالا تا استایل شناور افزونه‌ها آن را به هم نریزد */ body.woocommerce-checkout .tf-co .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .tf-co .woocommerce-shipping-fields__field-wrapper, body.woocommerce-checkout .tf-co .woocommerce-additional-fields__field-wrapper, body.woocommerce-checkout .tf-co .woocommerce-account-fields > .create-account { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } body.woocommerce-checkout .tf-co .form-row { float: none !important; clear: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.woocommerce-checkout .tf-co .form-row-first, body.woocommerce-checkout .tf-co .form-row-last { grid-column: span 1 !important; } body.woocommerce-checkout .tf-co .form-row-wide, body.woocommerce-checkout .tf-co .address-field, body.woocommerce-checkout .tf-co .notes, body.woocommerce-checkout .tf-co #order_comments_field { grid-column: 1 / -1 !important; } body.woocommerce-checkout .tf-co #billing_first_name_field, body.woocommerce-checkout .tf-co #shipping_first_name_field { grid-column: 1 / 2 !important; } body.woocommerce-checkout .tf-co #billing_last_name_field, body.woocommerce-checkout .tf-co #shipping_last_name_field { grid-column: 2 / 3 !important; } /* استان و شهر کنار هم؛ کد پستی و تلفن کنار هم */ body.woocommerce-checkout .tf-co #billing_state_field, body.woocommerce-checkout .tf-co #shipping_state_field, body.woocommerce-checkout .tf-co #billing_postcode_field, body.woocommerce-checkout .tf-co #shipping_postcode_field { grid-column: 1 / 2 !important; } body.woocommerce-checkout .tf-co #billing_city_field, body.woocommerce-checkout .tf-co #shipping_city_field, body.woocommerce-checkout .tf-co #billing_phone_field { grid-column: 2 / 3 !important; } body.woocommerce-checkout .tf-co .col2-set, body.woocommerce-checkout .tf-co .col2-set .col-1, body.woocommerce-checkout .tf-co .col2-set .col-2 { float: none !important; width: 100% !important; max-width: none !important; } body.woocommerce-checkout .tf-co .clear { display: none !important; } @media (max-width: 639px) { body.woocommerce-checkout .tf-co .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .tf-co .woocommerce-shipping-fields__field-wrapper, body.woocommerce-checkout .tf-co .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr !important; } body.woocommerce-checkout .tf-co .form-row, body.woocommerce-checkout .tf-co [id$="_field"] { grid-column: 1 / -1 !important; } } /* تعویض گوشی در پنل کاربری */ .tf-acc-main.is-trade-in .tf-ti-account__head { align-items: center; } .tf-acc-main.is-trade-in .tf-ti-account__head h2 { font-size: clamp(19px, 2vw, 22.5px); } .tf-acc-main.is-trade-in .tf-ti-quote { box-shadow: inset 0 0 0 1px var(--tf-line); } @media (max-width: 767px) { .tf-ti-quote { padding: 14px; } .tf-ti-quote__flow { margin: 16px 0 12px; } .tf-ti-quote__flow li { font-size: 11.5px; } .tf-ti-quote__meta { grid-template-columns: 1fr; } .tf-ti-quote__meta > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tf-ti-quote__meta small { display: inline; } .tf-ti-quote__foot { flex-direction: column; align-items: stretch; } .tf-ti-quote__actions .tf-btn { flex: 1; } } /* پنل کاربری — تکمیل‌ها */ .tf-acc-avatar.has-img { padding: 0; overflow: hidden; background: rgba(255, 255, 255, .12); } .tf-acc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .tf-acc-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .tf-acc-hero__actions .tf-btn--ghost { background: rgba(255, 255, 255, .12); color: #FFF !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .tf-acc-hero__actions .tf-btn--ghost:hover { background: rgba(255, 255, 255, .2); } .tf-acc-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 18px clamp(16px, 2.4vw, 30px); padding: clamp(18px, 2.4vw, 26px); border-radius: var(--tf-r-lg); background: linear-gradient(120deg, #EAF1FF, #F4EEFF); } .tf-acc-start h2 { margin: 6px 0 4px; font-size: clamp(18px, 2vw, 22.5px); font-weight: 700; } .tf-acc-start p { margin: 0; color: var(--tf-ink-2); font-size: 14px; line-height: 1.9; } .tf-acc-start__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .tf-acc-start__steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .75); } .tf-acc-start__steps i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tf-brand); color: #FFF; font-style: normal; font-size: 13px; font-weight: 700; } .tf-acc-start__steps strong { display: block; font-size: 13.5px; font-weight: 600; } .tf-acc-start__steps small { display: block; color: var(--tf-muted); font-size: 12px; } .tf-acc-start__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; } .tf-acc-start__actions .tf-btn--ghost { background: rgba(255, 255, 255, .8); } @media (max-width: 767px) { .tf-acc-start { grid-template-columns: 1fr; } .tf-acc-start__actions .tf-btn { flex: 1; } } /* ========================================================================== v3.5 — ورود با شمارهٔ موبایل ========================================================================== */ body.woocommerce-account:not(.logged-in) .entry-header, body.woocommerce-lost-password .entry-header { display: none; } .tf-auth { padding: clamp(16px, 3vw, 40px) 0 clamp(40px, 5vw, 72px); } .tf-auth__shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: stretch; gap: clamp(14px, 2vw, 24px); max-width: 1080px; margin-inline: auto; } .tf-auth__card { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 3vw, 36px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-2); } .tf-auth__head h1 { margin: 8px 0 4px; font-size: clamp(20.5px, 2.4vw, 28px); font-weight: 700; } .tf-auth__head p { margin: 0 0 18px; color: var(--tf-muted); font-size: 14px; line-height: 1.9; } .tf-auth__msg { margin-bottom: 14px; padding: 12px 16px; border-radius: 16px; background: var(--tf-brand-soft); color: var(--tf-ink); font-size: 13.5px; font-weight: 500; } .tf-auth__msg[data-type="error"] { background: #FFF0F2; color: #C2334F; } .tf-auth__msg[data-type="success"] { background: #E9F8F0; color: #0A7145; } .tf-auth__msg[hidden] { display: none !important; } .tf-auth__step[hidden] { display: none !important; } .tf-auth__label { display: block; margin-bottom: 8px; color: var(--tf-ink-2); font-size: 13.5px; font-weight: 600; } .tf-auth__field { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 18px; background: var(--tf-fill); color: var(--tf-faint); transition: border-color .2s, background .2s, box-shadow .2s; } .tf-auth__field:focus-within { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12); } .tf-auth__field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--tf-ink); font: 700 18px/1 var(--tf-font); letter-spacing: 1.5px; text-align: left; } .tf-auth__field input::placeholder { color: var(--tf-faint); font-weight: 450; letter-spacing: normal; } .tf-auth__prefix { flex: none; padding-left: 10px; border-left: 1px solid var(--tf-line-2); color: var(--tf-muted); font-size: 14px; font-weight: 600; } .tf-auth__hint { display: block; margin: 8px 2px 16px; color: var(--tf-muted); font-size: 12.5px; } .tf-auth__sent { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding: 10px 14px; border-radius: 14px; background: var(--tf-bg); color: var(--tf-ink-2); font-size: 13px; } .tf-auth__sent b { font-weight: 700; } .tf-auth__edit { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--tf-link); font: 600 12.5px var(--tf-font); cursor: pointer; } /* خانه‌های کد یکبارمصرف؛ ورودی واقعی شفاف روی آن‌هاست تا تکمیل خودکار کار کند */ /* کد یکبارمصرف همیشه چپ‌به‌راست پر می‌شود: رقم اول در خانهٔ سمت چپ. */ .tf-auth__code { position: relative; display: flex; flex-direction: row; justify-content: center; gap: 10px; margin-bottom: 12px; direction: ltr; unicode-bidi: isolate; } .tf-auth__code i { display: grid; place-items: center; width: 56px; height: 64px; border: 1.5px solid var(--tf-line); border-radius: 18px; background: var(--tf-fill); color: var(--tf-ink); font-size: 24.5px; font-style: normal; font-weight: 700; transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; } .tf-auth__code i.is-filled { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 6px 16px rgba(22, 82, 240, .12); } .tf-auth__code i.is-active { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12); } .tf-auth__code input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 24.5px; text-align: center; outline: 0; cursor: pointer; -webkit-text-fill-color: transparent; } .tf-auth__auto { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; color: var(--tf-brand); font-size: 12.5px; font-weight: 500; } .tf-auth__auto[hidden] { display: none !important; } .tf-auth__auto .tf-ico { animation: tf-pulse 1.4s ease-in-out infinite; } .tf-auth__timer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; color: var(--tf-muted); font-size: 12.5px; } .tf-auth__timer b { color: var(--tf-ink-2); font-weight: 700; } .tf-auth__resend { padding: 0; border: 0; background: none; color: var(--tf-link); font: 600 12.5px var(--tf-font); cursor: pointer; } .tf-auth__resend:disabled { color: var(--tf-faint); cursor: default; } .tf-auth__alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tf-line); } .tf-auth__toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--tf-bg); color: var(--tf-ink-2); font: 600 13.5px var(--tf-font); cursor: pointer; transition: background .2s; } .tf-auth__toggle span { flex: 1; text-align: right; } .tf-auth__toggle:hover { background: var(--tf-fill); } .tf-auth__toggle.is-open .tf-ico--chev-d { transform: rotate(180deg); } .tf-auth__alt-body { display: grid; gap: 16px; margin-top: 14px; } .tf-auth__alt-body[hidden] { display: none !important; } .tf-auth__pass h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; } .tf-auth__pass .form-row { margin: 0 0 12px !important; padding: 0 !important; float: none !important; width: 100% !important; } .tf-auth__pass label { display: block; margin-bottom: 6px; color: var(--tf-ink-2); font-size: 13px; font-weight: 600; } .tf-auth__pass .input-text { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid transparent !important; border-radius: 14px !important; background: var(--tf-fill) !important; color: var(--tf-ink); font: 450 14.5px var(--tf-font); box-shadow: none !important; } .tf-auth__pass .input-text:focus { border-color: var(--tf-brand) !important; background: #FFF !important; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12) !important; outline: 0; } .tf-auth__pass-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12.5px; } .tf-auth__remember { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500 !important; } .tf-auth__remember input { width: 18px; height: 18px; accent-color: var(--tf-brand); } .tf-auth__pass-row a { color: var(--tf-link) !important; font-weight: 600; text-decoration: none !important; } .tf-auth__legal { margin: 16px 0 0; color: var(--tf-muted); font-size: 12px; text-align: center; } .tf-auth__legal a { color: var(--tf-link) !important; font-weight: 600; text-decoration: none !important; } .tf-auth__back { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; color: var(--tf-muted) !important; font-size: 12.5px; font-weight: 500; text-decoration: none !important; } .tf-auth__promo { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(22px, 3vw, 40px); border-radius: var(--tf-r-xl); background: radial-gradient(70% 90% at 100% 0%, rgba(79, 123, 255, .5), transparent 60%), linear-gradient(150deg, #0A1030, #16205E); color: #FFF; } .tf-auth__promo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); pointer-events: none; } .tf-auth__glow { position: absolute; top: -30%; left: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .5), transparent 65%); filter: blur(10px); } .tf-auth__promo .tf-logo--auth { height: 40px; margin-bottom: 6px; filter: brightness(0) invert(1); } .tf-auth__promo h2 { position: relative; margin: 0; color: #FFF; font-size: clamp(20.5px, 2.4vw, 28px); font-weight: 700; line-height: 1.6; } .tf-auth__promo h2 span { color: #9BB8FF; } .tf-auth__promo p { position: relative; margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 2; } .tf-auth__perks { position: relative; display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; } .tf-auth__perks li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .tf-auth__perks li > span:first-child { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .12); color: #9BB8FF; } .tf-auth__perks strong { display: block; font-size: 13.5px; font-weight: 600; } .tf-auth__perks small { display: block; color: rgba(255, 255, 255, .6); font-size: 12px; } /* بازیابی رمز عبور */ .woocommerce-account .woocommerce-ResetPassword, .woocommerce-account form.lost_reset_password { max-width: 520px; margin: clamp(20px, 4vw, 48px) auto; padding: clamp(20px, 3vw, 32px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); } .woocommerce-account .woocommerce-ResetPassword .form-row { float: none !important; width: 100% !important; margin: 0 0 12px !important; } .woocommerce-account .woocommerce-ResetPassword .input-text { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid transparent !important; border-radius: 14px !important; background: var(--tf-fill) !important; font: 450 14.5px var(--tf-font); } .woocommerce-account .woocommerce-ResetPassword .button { display: block; width: 100%; min-height: 50px; border: 0 !important; border-radius: 14px !important; background: var(--tf-brand) !important; color: #FFF !important; font: 600 14.5px var(--tf-font) !important; cursor: pointer; } @media (max-width: 991px) { .tf-auth__shell { grid-template-columns: 1fr; } .tf-auth__promo { order: 2; } .tf-auth__promo h2 br { display: none; } .tf-auth__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .tf-auth { padding-top: 10px; } .tf-auth__card { padding: 20px 16px; border-radius: 26px; } .tf-auth__code { gap: 7px; } .tf-auth__code i { width: 46px; height: 56px; border-radius: 15px; font-size: 19px; font-weight: 500; } .tf-auth__perks { grid-template-columns: 1fr; } .tf-auth__promo { padding: 20px 16px; border-radius: 26px; } /* تایپوگرافی ظریف‌تر روی موبایل: کمتر درشت، کمتر بولد. */ .tf-auth__head h1 { font-size: 18.5px; font-weight: 600; letter-spacing: -.2px; } .tf-auth__edit { font-size: 12px; font-weight: 500; } .tf-auth__resend { font-size: 12px; font-weight: 500; } .tf-auth__head p { margin-bottom: 14px; font-size: 12.5px; line-height: 1.95; } .tf-eyebrow { font-size: 11.5px; font-weight: 500; } .tf-auth__label { margin-bottom: 6px; font-size: 12px; font-weight: 500; } .tf-auth__field { height: 54px; padding: 0 14px; } .tf-auth__field input { font: 500 16px/1 var(--tf-font); letter-spacing: 1px; } .tf-auth__prefix { font-size: 13px; font-weight: 500; } .tf-auth__hint { margin-bottom: 14px; font-size: 12px; } .tf-auth__msg { padding: 10px 13px; font-size: 12px; font-weight: 450; line-height: 1.85; } .tf-auth__sent { font-size: 12px; } .tf-auth__sent b { font-weight: 600; } .tf-auth__timer { font-size: 12px; } .tf-auth__auto { font-size: 12px; font-weight: 450; } .tf-auth__toggle { font-size: 12.5px; font-weight: 500; } .tf-auth__legal, .tf-auth__back { font-size: 12px; } .tf-auth .tf-btn--lg { min-height: 50px; font-size: 14px; font-weight: 600; } .tf-auth__promo h2 { font-size: 19px; font-weight: 600; } .tf-auth__promo p { font-size: 12.5px; } .tf-auth__perks strong { font-size: 12.5px; font-weight: 500; } .tf-auth__perks small { font-size: 11.5px; } .tf-auth__pass label { font-size: 12px; font-weight: 500; } } .tf-co .tf-invalid-phone, .tf-acc-main .tf-invalid-phone { border-color: var(--tf-sale) !important; background-color: #FFF7F8 !important; } /* ========================================================================== v3.5.4 — صفحهٔ تماس با ما ========================================================================== */ .tf-ct { padding: clamp(14px, 2.4vw, 30px) 0 clamp(40px, 5vw, 70px); } .tf-ct-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(18px, 3vw, 40px); padding: clamp(22px, 3vw, 44px); border-radius: var(--tf-r-xl); background: radial-gradient(70% 90% at 100% 0%, rgba(79, 123, 255, .16), transparent 60%), linear-gradient(140deg, #FFFFFF, #F1F5FF); box-shadow: var(--tf-shadow-1); } .tf-ct-hero h1 { margin: 10px 0 6px; font-size: clamp(24.5px, 3.4vw, 41.5px); font-weight: 700; line-height: 1.5; } .tf-ct-hero h1 span { color: var(--tf-brand); } .tf-ct-hero p { max-width: 48ch; margin: 0; color: var(--tf-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 2; } .tf-ct-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .tf-ct-hero__actions .tf-btn b { margin-inline-start: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 13.5px; font-weight: 600; } .tf-ct-hero__actions .tf-btn--light { box-shadow: inset 0 0 0 1.5px var(--tf-line); } .tf-ct-hero__stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--tf-line); list-style: none; } .tf-ct-hero__stats strong { display: block; font-size: 15px; font-weight: 700; } .tf-ct-hero__stats small { color: var(--tf-muted); font-size: 12px; } .tf-ct-hero__visual { position: relative; display: grid; place-items: center; min-height: 280px; } .tf-ct-hero__glow { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(22, 82, 240, .22), transparent 68%); filter: blur(6px); } .tf-ct-hero__ring { position: absolute; border: 1.5px dashed rgba(22, 82, 240, .22); border-radius: 50%; } .tf-ct-hero__ring.is-a { width: 58%; aspect-ratio: 1; animation: tf-spin 26s linear infinite; } .tf-ct-hero__ring.is-b { width: 82%; aspect-ratio: 1; border-style: solid; border-color: rgba(22, 82, 240, .12); } .tf-ct-hero__mark { position: relative; display: grid; place-items: center; width: clamp(96px, 12vw, 136px); aspect-ratio: 1; border-radius: 50%; background: linear-gradient(140deg, var(--tf-brand), #6C8BFF); color: #FFF; box-shadow: 0 20px 44px rgba(22, 82, 240, .32); } .tf-ct-float { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 18px; background: rgba(255, 255, 255, .92); box-shadow: var(--tf-shadow-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .tf-ct-float .tf-ico { color: var(--tf-brand); } .tf-ct-float b { display: block; font-size: 12.5px; font-weight: 700; } .tf-ct-float small { display: block; color: var(--tf-muted); font-size: 11.5px; } .tf-ct-float.is-a { top: 8%; right: 0; animation: tf-float 6s ease-in-out infinite; } .tf-ct-float.is-b { bottom: 8%; left: 0; animation: tf-float 7s ease-in-out infinite reverse; } .tf-ct-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: clamp(14px, 2vw, 22px); } .tf-ct-channel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); color: var(--tf-ink) !important; text-decoration: none !important; transition: transform .3s var(--tf-ease), box-shadow .3s var(--tf-ease); } .tf-ct-channel:hover { transform: translateY(-3px); box-shadow: var(--tf-shadow-2); } .tf-ct-channel__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--tf-brand-soft); color: var(--tf-brand); } .tf-ct-channel__text { flex: 1; min-width: 0; } .tf-ct-channel small { display: block; color: var(--tf-muted); font-size: 12px; } .tf-ct-channel strong { display: block; overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .tf-ct-channel > .tf-ico:last-child { color: var(--tf-faint); } .tf-ct-channel.is-wa .tf-ct-channel__icon { background: #E8F8EF; color: #128C4B; } .tf-ct-channel.is-tg .tf-ct-channel__icon { background: #E7F3FF; color: #2AABEE; } .tf-ct-channel.is-ig .tf-ct-channel__icon { background: #FDEBF3; color: #D6249F; } .tf-ct-channel.is-map .tf-ct-channel__icon { background: #FFF1E8; color: #F2621F; } .tf-ct-channel.is-mail .tf-ct-channel__icon { background: #F1ECFF; color: #6A3DE8; } .tf-ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(12px, 1.6vw, 20px); } .tf-ct-form-card { padding: clamp(18px, 2.6vw, 30px); border-radius: var(--tf-r-xl); background: #FFF; box-shadow: var(--tf-shadow-1); scroll-margin-top: calc(var(--tf-head) + 20px); } .tf-ct-form-card__head h2 { margin: 6px 0 4px; font-size: clamp(19px, 2vw, 24.5px); font-weight: 700; } .tf-ct-form-card__head p { margin: 0 0 18px; color: var(--tf-muted); font-size: 13.5px; } .tf-ct-msg { margin-bottom: 14px; padding: 12px 16px; border-radius: 16px; background: #E9F8F0; color: #0A7145; font-size: 13.5px; font-weight: 500; } .tf-ct-msg.is-error { background: #FFF0F2; color: #C2334F; } .tf-ct-msg.is-admin { background: var(--tf-brand-soft); color: var(--tf-ink); font-weight: 450; } .tf-ct-msg.is-admin a { color: var(--tf-brand) !important; font-weight: 600; } .tf-ct-msg[hidden] { display: none !important; } .tf-ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tf-ct-field { margin: 0; } .tf-ct-field.is-wide { grid-column: 1 / -1; } .tf-ct-field > label { display: block; margin-bottom: 7px; color: var(--tf-ink-2); font-size: 13.5px; font-weight: 600; } .tf-ct-field > label span { color: var(--tf-sale); } .tf-ct-field > label small { color: var(--tf-faint); font-size: 12px; font-weight: 450; } .tf-ct-input { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--tf-fill); color: var(--tf-faint); transition: border-color .2s, background .2s, box-shadow .2s; } .tf-ct-input:focus-within { border-color: var(--tf-brand); background: #FFF; box-shadow: 0 0 0 4px rgba(22, 82, 240, .12); } .tf-ct-input input, .tf-ct-input select, .tf-ct-input textarea { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--tf-ink); font: 450 14.5px var(--tf-font); } .tf-ct-input select { -webkit-appearance: none; appearance: none; cursor: pointer; } .tf-ct-input.is-select > .tf-ico:last-child { pointer-events: none; } .tf-ct-input.is-area { height: auto; padding: 14px 16px; } .tf-ct-input.is-area textarea { min-height: 130px; line-height: 2; resize: vertical; } .tf-ct-count { display: block; margin-top: 6px; color: var(--tf-faint); font-size: 12px; text-align: left; } .tf-ct-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; color: var(--tf-ink-2); font-size: 13.5px; cursor: pointer; } .tf-ct-consent input { position: absolute; opacity: 0; pointer-events: none; } .tf-ct-consent i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid var(--tf-line-2); border-radius: 7px; color: transparent; transition: .2s; } .tf-ct-consent input:checked + i { border-color: var(--tf-brand); background: var(--tf-brand); color: #FFF; } .tf-ct-consent input:focus-visible + i { box-shadow: 0 0 0 4px rgba(22, 82, 240, .18); } .tf-ct-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--tf-line); } .tf-ct-submit p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tf-muted); font-size: 12.5px; } .tf-ct-form button.is-loading { opacity: .7; pointer-events: none; } .tf-ct-side { display: grid; gap: 12px; position: sticky; top: calc(var(--tf-head) + 18px); transition: top .35s var(--tf-ease); } .tf-ct-store, .tf-ct-hours { padding: clamp(16px, 2vw, 22px); border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-ct-store h2 { margin: 8px 0 14px; font-size: 18px; font-weight: 700; } .tf-ct-store__badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; background: #E7F8EF; color: #0A7145; font-size: 12px; font-weight: 600; } .tf-ct-store__badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(10, 154, 85, .18); } .tf-ct-store__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--tf-line); } .tf-ct-store__row:first-of-type { border-top: 0; padding-top: 0; } .tf-ct-store__row > span { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--tf-bg); color: var(--tf-brand); } .tf-ct-store__row small { display: block; color: var(--tf-muted); font-size: 12px; } .tf-ct-store__row strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.9; } .tf-ct-store__row strong a { color: var(--tf-ink) !important; text-decoration: none !important; } .tf-ct-store__row > div > a { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; color: var(--tf-link) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; } .tf-ct-hours header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .tf-ct-hours header span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; } .tf-ct-hours > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--tf-line); color: var(--tf-ink-2); font-size: 13.5px; } .tf-ct-hours > div strong { font-weight: 600; } .tf-ct-hours .is-closed { color: var(--tf-faint); } .tf-ct-wa { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--tf-r-lg); background: linear-gradient(135deg, #0F9D58, #14B866); color: #FFF !important; text-decoration: none !important; box-shadow: 0 14px 30px rgba(15, 157, 88, .22); transition: transform .3s var(--tf-ease); } .tf-ct-wa:hover { transform: translateY(-2px); } .tf-ct-wa > span:first-child { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: rgba(255, 255, 255, .18); } .tf-ct-wa div { flex: 1; min-width: 0; } .tf-ct-wa small { display: block; color: rgba(255, 255, 255, .78); font-size: 12px; } .tf-ct-wa strong { display: block; font-size: 15px; font-weight: 700; } .tf-ct-map { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(12px, 1.6vw, 20px); padding: clamp(16px, 2vw, 24px); border-radius: var(--tf-r-xl); background: linear-gradient(135deg, #0B1442, #1B2C7A); color: #FFF !important; text-decoration: none !important; } .tf-ct-map__art { position: relative; display: grid; place-items: center; flex: none; width: 92px; height: 92px; overflow: hidden; border-radius: 24px; background: rgba(255, 255, 255, .08); } .tf-ct-map__art i { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 18px 18px; } .tf-ct-map__art b { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #FFF; color: var(--tf-brand); } .tf-ct-map__copy { flex: 1; min-width: 200px; } .tf-ct-map__copy small { display: block; color: #9BB8FF; font-size: 12px; font-weight: 600; } .tf-ct-map__copy strong { display: block; margin: 4px 0; font-size: clamp(17px, 2vw, 22.5px); font-weight: 700; } .tf-ct-map__copy em { color: rgba(255, 255, 255, .72); font-size: 13.5px; font-style: normal; } .tf-ct-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tf-ct-faq details { padding: 4px 18px; border-radius: var(--tf-r-lg); background: #FFF; box-shadow: var(--tf-shadow-1); } .tf-ct-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; } .tf-ct-faq summary::-webkit-details-marker { display: none; } .tf-ct-faq summary i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tf-fill); color: var(--tf-ink-2); transition: transform .3s var(--tf-ease), background .2s; } .tf-ct-faq details[open] summary i { background: var(--tf-brand); color: #FFF; transform: rotate(45deg); } .tf-ct-faq p { margin: 0; padding: 0 0 18px; color: var(--tf-muted); font-size: 14px; line-height: 2; } @media (max-width: 991px) { .tf-ct-hero { grid-template-columns: 1fr; } .tf-ct-hero__visual { display: none; } .tf-ct-layout { grid-template-columns: 1fr; } .tf-ct-side { position: relative; top: auto; } .tf-ct-faq { grid-template-columns: 1fr; } } @media (max-width: 639px) { .tf-ct-hero { padding: 20px 16px; border-radius: 26px; } .tf-ct-hero__actions .tf-btn { width: 100%; } .tf-ct-hero__stats { gap: 10px 18px; } .tf-ct-grid { grid-template-columns: 1fr; } .tf-ct-form-card, .tf-ct-store, .tf-ct-hours { padding: 16px 14px; border-radius: 24px; } .tf-ct-submit .tf-btn { width: 100%; } .tf-ct-map { padding: 16px 14px; border-radius: 26px; } .tf-ct-map .tf-btn { width: 100%; } } /* ========================================================================== v3.7 — ظرافت تایپوگرافی یکان‌بخ یک فونت متغیر با بازهٔ ۱۰۰ تا ۹۰۰ است؛ اینجا از سر باریکِ همان بازه برای متن‌های فرعی استفاده می‌کنیم تا صفحه سبک‌تر و تمیزتر دیده شود. ========================================================================== */ body.technofa-body { font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* متن‌های توضیحی، فرعی و کم‌رنگ → وزن باریک */ .tf-muted, .tf-auth__head p, .tf-auth__hint, .tf-auth__legal, .tf-acc-start p, .tf-hero__sub, .tf-sec__sub, .tf-co-card__head p, .tf-cart-hero p, .tf-ct-hero p, .tf-ct-card p, .tf-prod__meta, .tf-prod__desc, .tf-foot p, .tf-foot__about, .woocommerce-info, .woocommerce-message, .woocommerce-error li, figcaption, small:not([class]) { font-weight: 350; letter-spacing: 0; } /* پاراگراف‌های محتوایی: خوانا ولی سبک */ .entry-content p, .tf-rich p, .tf-prose p { font-weight: 350; line-height: 2; } /* عنوان‌ها: کمی جمع‌تر، بدون درشتیِ اضافه */ .tf-sec__title, .tf-hero h1, .entry-title, .tf-acc-hero h1, .tf-cart-hero h1, .tf-co h1, .tf-ct-hero h1 { font-weight: 700; letter-spacing: -.3px; } /* برچسب‌ها و ریزمتن‌ها */ .tf-eyebrow, .tf-badge, .tf-chip, .tf-pill { font-weight: 500; } .tf-table th { font-weight: 600; } .tf-table td { font-weight: 400; } /* اعداد و قیمت‌ها کمی سبک‌تر از قبل، ولی هنوز شاخص */ .tf-price__now, .tf-price b, .woocommerce-Price-amount { font-weight: 600; } @media (max-width: 767px) { body.technofa-body { font-size: 14.5px; line-height: 1.85; } .tf-sec__title, .tf-hero h1, .entry-title { letter-spacing: -.2px; } .entry-content p, .tf-rich p, .tf-prose p { line-height: 1.95; } }