/* teznevise runtime 3d3be88219f6 */

/* assets/css/v2-foundation.css */
@font-face{font-family:"Vazirmatn";src:url("https://teznevise.ir/wp-content/themes/teznevise-2-preview/assets/fonts/Vazirmatn-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Vazirmatn";src:url("https://teznevise.ir/wp-content/themes/teznevise-2-preview/assets/fonts/Vazirmatn-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Vazirmatn";src:url("https://teznevise.ir/wp-content/themes/teznevise-2-preview/assets/fonts/Vazirmatn-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Vazirmatn";src:url("https://teznevise.ir/wp-content/themes/teznevise-2-preview/assets/fonts/Vazirmatn-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} :root{ --tz-color-brand:#145d4a; --tz-color-ink:#10231d; --tz-color-accent:#82d8b9; --tz-color-paper:#fff; --tz-color-mist:#f3f7f5; --tz-color-brand-strong:color-mix(in srgb,var(--tz-color-brand) 76%,var(--tz-color-ink)); --tz-color-brand-soft:color-mix(in srgb,var(--tz-color-brand) 9%,var(--tz-color-paper)); --tz-color-brand-softer:color-mix(in srgb,var(--tz-color-brand) 4%,var(--tz-color-paper)); --tz-color-text:color-mix(in srgb,var(--tz-color-ink) 86%,var(--tz-color-paper)); --tz-color-muted:color-mix(in srgb,var(--tz-color-ink) 62%,var(--tz-color-paper)); --tz-color-quiet:color-mix(in srgb,var(--tz-color-ink) 40%,var(--tz-color-paper)); --tz-color-border:color-mix(in srgb,var(--tz-color-brand) 16%,var(--tz-color-paper)); --tz-color-border-strong:color-mix(in srgb,var(--tz-color-brand) 24%,var(--tz-color-paper)); --tz-color-focus:color-mix(in srgb,var(--tz-color-brand) 28%,transparent); --tz-color-danger:#b45309; --tz-color-success:#047857; --tz-color-warning:#b4791c; --tz-color-info:#1b5a85; --tz-color-icon-teal:#d9f0e8; --tz-color-icon-indigo:#e3e5f5; --tz-color-icon-cyan:#daf0f5; --tz-color-icon-amber:#fbe9ca; --tz-color-icon-danger-soft:#f9deda; --tz-color-icon-purple-soft:#eadff5; --tz-font-sans:"Vazirmatn","Segoe UI",Tahoma,sans-serif; --tz-text-xs:.75rem; --tz-text-sm:.875rem; --tz-text-md:1rem; --tz-text-lg:1.125rem; --tz-text-xl:1.375rem; --tz-text-2xl:1.75rem; --tz-text-h2:clamp(1.75rem,3.4vw,2.75rem); --tz-text-h1:clamp(2rem,5vw,3.75rem); --tz-text-display:clamp(2.25rem,5.4vw,4.5rem); --tz-leading-tight:1.35; --tz-leading-heading:1.5; --tz-leading-body:1.9; --tz-leading-prose:1.7; --tz-space-1:.25rem; --tz-space-2:.5rem; --tz-space-3:.75rem; --tz-space-4:1rem; --tz-space-5:1.25rem; --tz-space-6:1.5rem; --tz-space-8:2rem; --tz-space-10:2.5rem; --tz-space-12:3rem; --tz-space-16:4rem; --tz-space-20:5rem; --tz-space-24:6rem; --tz-section-pad:clamp(3.5rem,7vw,6rem); --tz-section-pad-sm:clamp(2.5rem,5vw,4rem); --tz-radius-control:.75rem; --tz-radius-card:1.25rem; --tz-radius-panel:1.75rem; --tz-radius-pill:999px; --tz-shadow-card:0 10px 30px color-mix(in srgb,var(--tz-color-ink) 6%,transparent); --tz-shadow-float:0 18px 50px color-mix(in srgb,var(--tz-color-ink) 10%,transparent); --tz-shadow-lifted:0 24px 70px color-mix(in srgb,var(--tz-color-ink) 14%,transparent); --tz-duration-fast:120ms; --tz-duration-control:200ms; --tz-duration-layout:320ms; --tz-ease-standard:cubic-bezier(.2,.8,.2,1); --tz-content-wide:1180px; --tz-content-reading:72ch; --tz-content-focus:66ch; --tz-header-height:82px; --tz-bottom-nav-height:72px; --tz-z-base:0; --tz-z-header:100; --tz-z-bottom-nav:105; --tz-z-dropdown:110; --tz-z-fab:150; --tz-z-drawer:200; --tz-z-overlay:250; --tz-z-livechat:260; --tz-z-dialog:300; --tz-z-toast:500; --color-brand:var(--tz-color-brand); --color-brand-hover:var(--tz-color-brand-strong); --color-brand-soft:var(--tz-color-brand-soft); --color-brand-ink:var(--tz-color-ink); --color-bg:var(--tz-color-mist); --color-surface:var(--tz-color-paper); --color-surface-alt:var(--tz-color-mist); --color-border:var(--tz-color-border); --color-border-strong:var(--tz-color-border-strong); --color-text:var(--tz-color-text); --color-text-muted:var(--tz-color-muted); --color-text-subtle:var(--tz-color-quiet); --color-success:var(--tz-color-success); --color-warning:var(--tz-color-warning); --color-danger:var(--tz-color-danger); --color-info:var(--tz-color-info); --color-focus:var(--tz-color-focus); --color-teal-soft:var(--tz-color-icon-teal); --color-indigo-soft:var(--tz-color-icon-indigo); --color-cyan-soft:var(--tz-color-icon-cyan); --color-amber-soft:var(--tz-color-icon-amber); --color-danger-soft:var(--tz-color-icon-danger-soft); --color-purple-soft:var(--tz-color-icon-purple-soft); --space-0:0; --space-1:var(--tz-space-1); --space-2:var(--tz-space-2); --space-3:var(--tz-space-3); --space-4:var(--tz-space-4); --space-5:var(--tz-space-5); --space-6:var(--tz-space-6); --space-7:var(--tz-space-8); --space-8:var(--tz-space-10); --space-9:var(--tz-space-12); --space-10:var(--tz-space-16); --space-11:var(--tz-space-20); --space-12:var(--tz-space-24); --radius-1:4px; --radius-2:var(--tz-radius-control); --radius-3:var(--tz-radius-control); --radius-4:var(--tz-radius-card); --radius-5:var(--tz-radius-panel); --radius-round:var(--tz-radius-pill); --fs-display:var(--tz-text-display); --fs-h1:var(--tz-text-h1); --fs-h2:var(--tz-text-h2); --fs-h3:var(--tz-text-xl); --fs-h4:var(--tz-text-lg); --fs-body:var(--tz-text-md); --fs-body-lg:var(--tz-text-lg); --fs-small:var(--tz-text-sm); --fs-eyebrow:var(--tz-text-xs); --shadow-1:0 1px 2px color-mix(in srgb,var(--tz-color-ink) 6%,transparent); --shadow-2:var(--tz-shadow-card); --shadow-3:var(--tz-shadow-float); --shadow-4:var(--tz-shadow-lifted); --z-base:var(--tz-z-base); --z-dropdown:var(--tz-z-dropdown); --z-sticky:var(--tz-z-header); --z-bottom-nav:var(--tz-z-bottom-nav); --z-fab:var(--tz-z-fab); --z-overlay:var(--tz-z-overlay); --z-modal:var(--tz-z-drawer); --z-livechat:var(--tz-z-livechat); --z-toast:var(--tz-z-toast); --tr-fast:var(--tz-duration-fast); --tr-base:var(--tz-duration-control); --tr-slow:var(--tz-duration-layout); --container-max:var(--tz-content-wide); --container-content:var(--tz-content-reading); --container-narrow:var(--tz-content-focus); } @media(max-width:768px){:root{--tz-header-height:68px}} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--tz-header-height) + 1rem)} body{margin:0;min-height:100dvh;background:var(--tz-color-paper);color:var(--tz-color-text);font-family:var(--tz-font-sans);font-size:16px;line-height:var(--tz-leading-body);direction:rtl;text-align:right;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} img,picture,video{display:block;max-width:100%}img{height:auto} a{color:var(--tz-color-brand);text-decoration:none;transition:color var(--tz-duration-fast) var(--tz-ease-standard)}a:hover{color:var(--tz-color-brand-strong)}a:focus-visible{outline:2px solid var(--tz-color-brand);outline-offset:3px;border-radius:3px} button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--tz-color-brand);outline-offset:2px} h1,h2,h3,h4,h5,h6{color:var(--tz-color-ink);font-weight:800;line-height:var(--tz-leading-heading);text-wrap:balance}p{text-wrap:pretty} .container{width:min(var(--tz-content-wide),calc(100% - 2.5rem));margin-inline:auto} .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link:focus{position:fixed;inset-block-start:10px;inset-inline-start:10px;width:auto;height:auto;padding:.65rem .9rem;margin:0;clip:auto;overflow:visible;z-index:var(--tz-z-toast);border-radius:10px;background:var(--tz-color-paper);color:var(--tz-color-brand);box-shadow:var(--tz-shadow-float)} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} @media(max-width:480px){.container{width:min(var(--tz-content-wide),calc(100% - 1.5rem))}}
/* assets/css/blog.css */
.blog-archive{padding-block:48px 64px}.blog-archive__header{margin-bottom:28px}.blog-archive__eyebrow,.blog-post__kicker{display:inline-block;margin:0 0 8px;color:#145D4A;font-size:13px;font-weight:800}.blog-archive__header h1,.blog-post__title{margin:0;color:#172d26;font-weight:850;line-height:1.45}.blog-archive__intro{max-width:720px;margin:10px 0 0;color:#62736d;line-height:1.85}.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.post-card{min-width:0;background:#fff;border:1px solid rgba(20,93,74,.12);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(9,40,32,.04)}.post-card__media{display:block;aspect-ratio:16/10;background:#e8f0ec;overflow:hidden}.post-card__media img{width:100%;height:100%;object-fit:cover;display:block}.post-card__body{padding:16px}.post-card__meta,.blog-post__meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:#687972;font-size:12.5px;line-height:1.6}.post-card__body h2,.post-card__body h3{margin:8px 0;color:#172d26;font-size:17px;line-height:1.6}.post-card__body p{margin:0 0 12px;color:#52645d;font-size:13.5px;line-height:1.8}.post-card__body .link-arrow{font-weight:800}.blog-post{padding-block:32px 64px}.blog-post__header{text-align:center;max-width:820px;margin-inline:auto}.blog-post__featured{display:inline-block;margin:0 0 8px;padding:4px 9px;border-radius:999px;background:#e8f3ef;color:#145D4A;font-size:12px;font-weight:800}.blog-post__title{font-size:clamp(25px,3vw,38px);max-width:36ch;margin-inline:auto}.blog-post__subtitle{max-width:720px;margin:10px auto 14px;color:#687972;font-size:15px;line-height:1.85}.blog-post__meta{justify-content:center;margin-bottom:18px}.blog-post__featured-image{width:min(100%,900px);margin:0 auto 24px;border-radius:16px;overflow:hidden;background:#eef4f1}.blog-post__featured-image img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}.blog-post__layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}.blog-post__content{min-width:0}.blog-post__toc{position:sticky;top:92px;background:#fff;border:1px solid rgba(20,93,74,.12);border-radius:16px;padding:15px 14px;box-shadow:0 8px 22px rgba(9,40,32,.04)}.blog-post__toc-mobile{display:none;margin:0 0 18px;border:1px solid rgba(20,93,74,.12);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(9,40,32,.04);overflow:hidden}.blog-post__toc-mobile summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;color:#145D4A;font-size:14px;font-weight:850;cursor:pointer;list-style:none}.blog-post__toc-mobile summary::-webkit-details-marker{display:none}.blog-post__toc-mobile[open] summary{border-bottom:1px solid rgba(20,93,74,.1)}.blog-post__toc-mobile .post-toc-grid{padding:0 14px 12px}.entry-toc__label{margin:0 0 10px;color:#172d26;font-size:14px;font-weight:850}.post-toc-grid{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}.post-toc-item{display:block;padding:5px 0;color:#3d534a;text-decoration:none;font-size:13px;line-height:1.6}.post-toc-item:hover,.post-toc-item:focus-visible{color:#145D4A}.post-toc-item--level-3{padding-inline-start:12px;font-size:12.5px}.article-content{color:#2f3f38;font-size:15px;line-height:1.9}.article-content h2{margin:28px 0 12px;color:#172d26;font-size:22px;line-height:1.55;font-weight:850;scroll-margin-top:96px}.article-content h3{margin:22px 0 10px;color:#172d26;font-size:18px;line-height:1.6;font-weight:800;scroll-margin-top:96px}.article-content p{margin:0 0 14px}.article-content ul,.article-content ol{margin:0 0 16px;padding-inline-start:1.5em}.article-content blockquote{margin:20px 0;padding:14px 18px;border-inline-start:4px solid #145D4A;background:#f4f9f7;color:#3d534a}.article-content img{max-width:100%;height:auto}.article-content figure{margin:20px 0}.article-content figcaption{margin-top:7px;color:#687972;font-size:12.5px}.article-content table{width:100%;margin:20px 0;border-collapse:collapse}.article-content th,.article-content td{padding:9px;border:1px solid rgba(20,93,74,.14);text-align:start}.article-content pre{max-width:100%;overflow:auto;padding:14px;border-radius:10px;background:#172d26;color:#f4f9f7;direction:ltr;text-align:left}.article-footer{margin-top:24px}.post-tags{display:flex;flex-wrap:wrap;gap:7px}.post-tags a{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef4f1;color:#145D4A;text-decoration:none;font-size:12px}.blog-post__related{margin-top:40px}.blog-post__related h2{margin:0 0 16px;color:#172d26;font-size:22px}.blog-post__prev-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.blog-post__prev-next a{display:block;padding:12px 14px;border:1px solid rgba(20,93,74,.12);border-radius:12px;background:#fff;color:#172d26;text-decoration:none}.blog-post__prev-next small{display:block;margin-bottom:4px;color:#687972;font-size:11px}.blog-post__prev-next span{font-weight:750}.blog-archive .navigation.pagination{margin-top:28px}.blog-archive .page-numbers{display:inline-flex;min-width:36px;min-height:36px;align-items:center;justify-content:center;margin:2px;padding:6px 10px;border-radius:9px;text-decoration:none}.blog-archive .page-numbers.current{background:#145D4A;color:#fff}.blog-archive__empty{padding:24px;border:1px dashed rgba(20,93,74,.2);border-radius:14px;color:#62736d}@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-post__layout{grid-template-columns:1fr}.blog-post__toc{display:none}.blog-post__toc-mobile{display:block}.blog-post__title{font-size:clamp(23px,6vw,32px)}}@media (min-width:901px){.blog-post__toc-mobile{display:none}}@media (max-width:640px){.post-grid{grid-template-columns:1fr}.blog-archive,.blog-post{padding-block:32px 48px}.blog-post__prev-next{grid-template-columns:1fr}.article-content{font-size:14.5px}.article-content h2{font-size:20px}.article-content h3{font-size:17px}} .reading-progress { position: sticky; top: 0; z-index: 1200; height: 3px; background: transparent; pointer-events: none; } .reading-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #145d4a, #82d8b9); transform-origin: inline-start; } .blog-post__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; color: #8a9892; font-size: 13px; } .blog-post__crumbs a { color: #145d4a; text-decoration: none; font-weight: 700; } .blog-post__layout { display: grid !important; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important; grid-template-areas: "aside content" !important; gap: clamp(28px, 3vw, 44px) !important; align-items: start !important; } .blog-post__content { grid-area: content; min-width: 0; max-width: none; } .blog-post__aside { grid-area: aside; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; } .blog-post__toc { position: static !important; top: auto !important; max-height: min(70vh, 560px); overflow: auto; background: #fff; border: 1px solid rgba(20, 93, 74, 0.12); border-radius: 18px; padding: 16px 16px 18px; box-shadow: 0 8px 22px rgba(9, 40, 32, 0.04); } .entry-toc__label { margin: 0 0 12px !important; color: #10231d !important; font-size: 14px !important; font-weight: 850 !important; letter-spacing: 0; } .post-toc-item { border-radius: 8px; padding: 7px 10px !important; } .post-toc-item.is-active { background: #e8f5f1; color: #145d4a !important; font-weight: 800; } .blog-post__cta-card { background: linear-gradient(160deg, #145d4a, #0f4a3c); color: #fff; border-radius: 18px; padding: 18px 16px 16px; box-shadow: 0 12px 28px rgba(9, 40, 32, 0.12); } .blog-post__cta-card-kicker { margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; color: #bcebd9; } .blog-post__cta-card p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.92); font-size: 13.5px; line-height: 1.75; } .blog-post__cta-card .btn-tz, .blog-post__cta-card a.btn-primary-tz { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: #fff; color: #145d4a; font-weight: 800; text-decoration: none; white-space: nowrap; } .blog-post__cta-card .btn-tz:hover { background: #e8f5f1; } .share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; } .share-bar__label { font-size: 13px; font-weight: 800; color: #3d534a; margin-inline-end: 4px; } .share-bar button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border: 1px solid rgba(20, 93, 74, 0.16); border-radius: 999px; background: #fff; color: #145d4a; font-family: inherit; font-size: 13px; font-weight: 750; cursor: pointer; } .share-bar button:hover, .share-bar button:focus-visible { background: #e8f5f1; border-color: #145d4a; } .article-content { font-size: 16.5px !important; line-height: 2 !important; color: #2f3f38; } .article-content h2 { font-size: 24px !important; margin-top: 36px !important; } .article-content h3 { font-size: 19px !important; } .blog-post__prev-next small { color: #145d4a !important; font-weight: 800; } @media (max-width: 900px) { .blog-post__layout { grid-template-columns: 1fr !important; grid-template-areas: "content" "aside" !important; gap: 22px !important; } .blog-post__aside { position: static; } .blog-post__toc { display: none !important; } .blog-post__content { max-width: none; } } .article-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--tz-space-2); margin-bottom: var(--tz-space-6); } .article-tools__button { min-height: 40px; padding: var(--tz-space-2) var(--tz-space-4); border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-pill); background: var(--tz-color-paper); color: var(--tz-color-text); font: inherit; font-size: var(--tz-text-sm); font-weight: 800; } .article-tools__button:hover, .article-tools__button[aria-pressed="true"] { border-color: var(--tz-color-brand); background: var(--tz-color-brand-soft); color: var(--tz-color-brand); } .blog-post__content { font-size: var(--tz-reading-size, 1rem); } body.tz-reading-focus .blog-post__layout { display: block !important; max-width: var(--tz-content-focus); margin-inline: auto; } body.tz-reading-focus .blog-post__aside, body.tz-reading-focus .blog-post__prev-next, body.tz-reading-focus .blog-post__related, body.tz-reading-focus .comments-area { display: none !important; } body.tz-reading-focus .blog-post__content { max-width: none; } .comments-area { width: min(100%, 820px); margin: 48px auto 0; padding: clamp(20px, 4vw, 36px); border: 1px solid rgba(20, 93, 74, 0.12); border-radius: 24px; background: #f7fcfa; } .comments-title, .comment-reply-title { margin: 0 0 18px; color: #10231d; font-size: clamp(21px, 3vw, 28px); line-height: 1.55; } .comment-list { margin: 0 0 28px; padding: 0; list-style: none; } .comment-list .children { margin: 14px 0 0; padding-inline-start: 22px; list-style: none; border-inline-start: 2px solid #dfe9e5; } .comment-body { margin-bottom: 16px; padding: 18px; border: 1px solid #dfe9e5; border-radius: 16px; background: #fff; } .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #5a7268; font-size: 13px; } .comment-author { display: flex; align-items: center; gap: 10px; color: #10231d; font-weight: 800; } .comment-author .avatar { border-radius: 50%; } .comment-content { margin-top: 12px; color: #2f433c; } .reply { margin-top: 10px; } .comment-reply-link { color: #145d4a; font-size: 13px; font-weight: 800; } .comment-notes, .logged-in-as { margin: 0 0 18px; color: #5a7268; font-size: 14px; line-height: 1.9; } .tez-comment-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .tez-comment-form > p { margin: 0; } .tez-comment-form .comment-form-comment { display: flex; flex-direction: column; gap: 8px; } .tez-comment-form .comment-form-comment label { order: -1; } .tez-comment-form label { display: block; margin-bottom: 0; color: #17342c; font-size: 14px; font-weight: 800; } .tez-comment-form textarea, .tez-comment-form input[type="text"], .tez-comment-form input[type="email"], .tez-comment-form input[type="url"] { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #cbdcd5; border-radius: 14px; background: #fff; color: #10231d; font: inherit; line-height: 1.8; box-sizing: border-box; } .tez-comment-form textarea { min-height: 180px; resize: vertical; } .tez-comment-form textarea:focus, .tez-comment-form input:focus { border-color: #145d4a; outline: 3px solid rgba(20, 93, 74, 0.14); outline-offset: 2px; } .tez-comment-form .submit, .tez-comment-form button.submit, .tez-comment-form input[type="submit"] { appearance: none; -webkit-appearance: none; min-height: 48px; padding: 10px 22px; border: 0; border-radius: 14px; background: #145d4a; color: #fff; font: inherit; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .no-comments { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; color: #40574e; } @media (max-width: 640px) { .comments-area { border-radius: 18px; } .tez-comment-form .submit, .tez-comment-form button.submit, .tez-comment-form input[type="submit"] { width: 100%; } }
/* assets/css/page-extras.css */
.filter-tabs, .tools-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .filter-tab, .tools-filters [data-filter] { border: 1px solid var(--tz-line, #dfe9e5); background: #fff; color: #2f433c; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 13.5px; } .filter-tab.is-active, .filter-tab.active, .tools-filters [data-filter].is-active, .tools-filters [data-filter].active { background: #145D4A; color: #fff; border-color: #145D4A; } [data-cat][hidden], [data-category][hidden] { display: none !important; } .inquiry-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); gap: 24px; align-items: start; } @media (max-width: 900px) { .inquiry-grid { grid-template-columns: 1fr; } } .results-empty { padding: 24px; text-align: center; color: var(--tz-muted, #607069); border: 1px dashed var(--tz-line, #dfe9e5); border-radius: 16px; } .tz-honeypot { position: absolute !important; inset-inline-start: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .faq-group { display: grid; gap: 10px; }
/* assets/css/wp-compat.css */
body { background: var(--tz-surface, #fff) !important; color: var(--tz-ink, #10231d) !important; font-family: Vazirmatn, Tahoma, Arial, sans-serif !important; } a:where(:not(.btn-tz):not(.wp-block-button__link)) { text-decoration: none; } .wp-site-blocks, .is-layout-constrained, .is-layout-flow { max-width: none !important; padding: 0 !important; margin: 0 !important; } .has-global-padding { padding-inline: 0 !important; } .wp-block-group, .wp-block-columns, .wp-block-column { margin: 0; padding: 0; } figure { margin: 0; } .wp-element-button, .wp-block-button__link { background: var(--tz-primary, #145D4A); color: #fff; border-radius: 14px; padding: 12px 22px; font-weight: 800; } img, video, iframe, embed, object, svg { max-width: 100%; height: auto; } .article-content img, .longcopy img, .entry-content img, .post-card img { border-radius: 16px; } .article-content, .longcopy, .entry-content { overflow-wrap: anywhere; word-break: break-word; } .article-content > *:first-child, .longcopy > *:first-child { margin-top: 0; } html, body { overflow-x: hidden; } @media (min-width: 1051px) { .main-nav .nav-links { display: flex !important; align-items: center; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } .nav-links > li { position: relative; list-style: none; } .nav-links .sub-menu, .nav-links .nav-dropdown, .nav-links .nav-dropdown-l3 { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 240px; margin: 0; padding: 10px; list-style: none; background: #fff; border: 1px solid rgba(20, 93, 74, 0.1); border-radius: 18px; box-shadow: 0 20px 50px rgba(9, 40, 32, 0.12); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; z-index: 1200; display: block; } .nav-links > li:hover > .sub-menu, .nav-links > li:focus-within > .sub-menu, .nav-links > li.submenu-open > .sub-menu, .nav-links > li:hover > .nav-dropdown, .nav-links > li:focus-within > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-links .sub-menu .sub-menu, .nav-links .nav-dropdown-l3 { top: 0; right: calc(100% + 6px); left: auto; transform: translateX(6px); } .nav-links .sub-menu > li:hover > .sub-menu, .nav-links .sub-menu > li:focus-within > .sub-menu, .nav-links .sub-menu > li.submenu-open > .sub-menu, .nav-dropdown > li:hover > .nav-dropdown-l3 { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } .nav-links .sub-menu a, .nav-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #2f433c; white-space: nowrap; } .nav-links .sub-menu a:hover, .nav-dropdown a:hover { background: rgba(20, 93, 74, 0.08); color: #145D4A; } } @media (max-width: 1050px) { .main-nav > .nav-links, .main-nav > ul.nav-links, header .nav-links { display: none !important; } .menu-btn { display: inline-flex !important; } .desktop-cta-group { display: none !important; } } .mobile-nav-links ul, .mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .mobile-nav-links .sub-menu { display: none; padding-inline-start: 14px; margin-top: 4px; } .mobile-nav-links .menu-item-has-children.open > .sub-menu, .mobile-nav-links .menu-item-has-children.submenu-open > .sub-menu { display: flex; flex-direction: column; } .mobile-nav-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; font-weight: 750; color: #2f433c; } .page-content-section .section-head h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.35; letter-spacing: -0.6px; margin: 12px 0 10px; } .page-content-section .longcopy p:has(+ *) { margin-bottom: 1em; } .tz-shortcode-fallback { display: grid; gap: 28px; } .tz-shortcode-fallback .lead-card { background: linear-gradient(160deg, #f7fcfa, #fff); border: 1px solid var(--tz-line, #dfe9e5); border-radius: 28px; padding: 36px 32px; box-shadow: var(--tz-shadow-sm, 0 10px 30px rgba(9, 62, 49, 0.08)); } .tz-shortcode-fallback .lead-card h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); } .tz-shortcode-fallback .lead-card p { color: var(--tz-muted, #607069); margin: 0 0 22px; max-width: 54ch; } .tz-shortcode-fallback .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .tz-form { display: grid; gap: 14px; background: #fff; border: 1px solid var(--tz-line, #dfe9e5); border-radius: 24px; padding: 28px; box-shadow: var(--tz-shadow-sm, 0 10px 30px rgba(9, 62, 49, 0.08)); } .tz-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .tz-form .field { display: flex; flex-direction: column; gap: 6px; } .tz-form .field.full, .tz-form .form-grid .full { grid-column: 1 / -1; } .tz-form label { font-weight: 800; font-size: 13.5px; color: #2f433c; } .tz-form input, .tz-form select, .tz-form textarea { width: 100%; border: 1px solid var(--tz-line, #dfe9e5); border-radius: 14px; padding: 12px 14px; background: #fbfefd; color: var(--tz-ink, #10231d); } .tz-form textarea { min-height: 140px; resize: vertical; } .tz-form input:focus, .tz-form select:focus, .tz-form textarea:focus { outline: 2px solid rgba(20, 93, 74, 0.28); border-color: #145D4A; background: #fff; } .call-me-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--tz-primary-soft, #e8f5f1); border: 1px solid rgba(20, 93, 74, 0.12); } .call-me-card input { flex: 1 1 200px; border: 1px solid var(--tz-line, #dfe9e5); border-radius: 14px; padding: 12px 14px; background: #fff; } .inquiry-messengers { display: flex; flex-wrap: wrap; gap: 10px; } .inq-msg { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--tz-line, #dfe9e5); font-weight: 800; font-size: 13.5px; color: #145D4A; } .inq-msg:hover { background: var(--tz-primary-soft, #e8f5f1); } .faq-wrap { display: grid; gap: 10px; } .faq-item { border: 1px solid var(--tz-line, #dfe9e5); border-radius: 18px; background: #fff; overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: none; border: 0; font-weight: 800; text-align: right; color: #2f433c; } .faq-a { display: none; padding: 0 18px 16px; color: var(--tz-muted, #607069); } .faq-item.open .faq-a { display: block; } .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; align-items: start; } .blog-sidebar .blog-widget, .blog-sidebar .side-card { background: #fff; border: 1px solid var(--tz-line, #dfe9e5); border-radius: 20px; padding: 20px; margin-bottom: 16px; } .post-card__media { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, rgba(20, 93, 74, 0.18), rgba(130, 216, 185, 0.35)), var(--tz-surface-2, #f7faf9); border-radius: 18px 18px 0 0; overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; } .seo-panel, .seo-disclosure { background: #fff; border: 1px solid var(--tz-line, #dfe9e5); border-radius: 24px; padding: 32px 28px; } .seo-more-content:not(.is-open) { display: none; } .seo-more-btn { margin-top: 16px; background: none; border: 0; color: #145D4A; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 768px) { body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } .blog-layout { grid-template-columns: 1fr; } .tz-form .form-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .tz-legacy-embed { padding-top: 28px; padding-bottom: 48px; } .tz-legacy-embed .service-hero { padding: 8px 0 28px; background: none; overflow: visible; } .tz-shortcode-fallback .service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 28px 40px; align-items: start; } .tz-shortcode-fallback .service-lead { color: var(--tz-muted, #607069); max-width: 52ch; } .tz-shortcode-fallback .service-bullets { margin-top: 18px; } .lead-card > .tz-form.lead-card { box-shadow: none; border: 0; padding: 0; background: transparent; } .tz-form .privacy-note { margin: 8px 0 0; font-size: 12.5px; color: var(--tz-muted, #607069); } .tool-body .tzt-hero { display: none; } @media (max-width: 900px) { .tz-shortcode-fallback .service-hero-grid { grid-template-columns: 1fr; } } :where(.tz-button, .btn-tz) { display: inline-flex; align-items: center; justify-content: center; gap: var(--tz-space-2); min-height: 44px; padding: var(--tz-space-3) var(--tz-space-6); border: 1px solid transparent; border-radius: var(--tz-radius-control); font: inherit; font-weight: 800; line-height: 1.4; text-decoration: none; transition: background-color var(--tz-duration-control) var(--tz-ease-standard), border-color var(--tz-duration-control) var(--tz-ease-standard), color var(--tz-duration-control) var(--tz-ease-standard), transform var(--tz-duration-fast) var(--tz-ease-standard); } :where(.tz-button--primary, .btn-primary-tz) { background: var(--tz-color-brand); color: var(--tz-color-paper); } :where(.tz-button--secondary, .btn-outline-tz, .btn-light-tz) { border-color: var(--tz-color-border); background: var(--tz-color-paper); color: var(--tz-color-brand); } :where(.tz-button, .btn-tz):active { transform: translateY(1px); } :where(.tz-button, .btn-tz)[disabled], :where(.tz-button, .btn-tz)[aria-disabled="true"] { cursor: not-allowed; opacity: .55; } :where(.tz-card, .post-card, .article-card, .author-card, .lead-card) { border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-card); background: var(--tz-color-paper); color: var(--tz-color-text); } :where(a.tz-card, a.post-card, a.article-card) { transition: border-color var(--tz-duration-control) var(--tz-ease-standard), box-shadow var(--tz-duration-control) var(--tz-ease-standard), transform var(--tz-duration-control) var(--tz-ease-standard); } :where(a.tz-card, a.post-card, a.article-card):hover { border-color: var(--tz-color-brand); box-shadow: var(--tz-shadow-card); transform: translateY(-2px); } :where(.tz-badge, .eyebrow, .blog-post__kicker) { display: inline-flex; align-items: center; min-height: 28px; padding-inline: var(--tz-space-3); border-radius: var(--tz-radius-pill); background: var(--tz-color-brand-soft); color: var(--tz-color-brand); font-size: var(--tz-text-xs); font-weight: 800; } :where(.tz-field, .field) > label { display: block; margin-bottom: var(--tz-space-2); color: var(--tz-color-text); font-size: var(--tz-text-sm); font-weight: 800; } :where(.tz-field, .field) :is(input, select, textarea) { width: 100%; border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-control); background: var(--tz-color-paper); color: var(--tz-color-text); } :where(.tz-field, .field) :is(input, select, textarea):focus-visible { border-color: var(--tz-color-brand); outline: 3px solid var(--tz-color-focus); outline-offset: 2px; }
/* assets/css/v2-compat.css */
body.tz-react-shell { background: var(--tz-color-paper); color: var(--tz-color-text); font-family: var(--tz-font-sans); } body.tz-react-shell .flex-1 { min-height: 55vh; } .container { width: min(var(--tz-content-wide), calc(100% - 2.5rem)); margin-inline: auto; } .section, .tez-builder-section, .uni-strip { padding-block: var(--tz-section-pad); } .section.bg-soft, .tez-builder-section.bg-soft, .bg-soft { background: var(--tz-color-mist); } .section-head { display: grid; gap: var(--tz-space-3); max-width: 760px; margin-block-end: var(--tz-space-10); margin-inline-end: 0; } .section-head.center { text-align: center; margin-inline: auto; } .section-head h1, .section-head h2 { margin: 0; color: var(--tz-color-ink); font-size: var(--tz-text-h2); line-height: var(--tz-leading-heading); } .section-head h1 { font-size: var(--tz-text-h1); } .section-head p { margin: 0; max-width: 66ch; color: var(--tz-color-muted); } .section-head.center p { margin-inline: auto; } .eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: .55rem; color: var(--tz-color-brand); font-size: var(--tz-text-xs); font-weight: 800; } .section-head.center .eyebrow { margin-inline: auto; } .eyebrow::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 999px; background: var(--tz-color-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tz-color-accent) 20%, transparent); } .btn-tz, .nav-cta, .btn-readmore { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: var(--tz-radius-control); font-weight: 800; font-size: var(--tz-text-sm); text-decoration: none; transition: transform var(--tz-duration-fast) var(--tz-ease-standard), background var(--tz-duration-fast) var(--tz-ease-standard), border-color var(--tz-duration-fast) var(--tz-ease-standard), color var(--tz-duration-fast) var(--tz-ease-standard), box-shadow var(--tz-duration-fast) var(--tz-ease-standard); } .btn-tz:hover, .nav-cta:hover, .btn-readmore:hover { transform: translateY(-1px); } .btn-primary-tz, .nav-cta-solid { background: var(--tz-color-brand); color: var(--tz-color-paper); box-shadow: var(--tz-shadow-card); } .btn-primary-tz:hover, .nav-cta-solid:hover { background: var(--tz-color-brand-strong); color: var(--tz-color-paper); } .btn-light-tz, .btn-outline-tz, .nav-cta-outline, .btn-readmore { background: var(--tz-color-paper); border-color: var(--tz-color-border); color: var(--tz-color-brand); } .btn-light-tz:hover, .btn-outline-tz:hover, .nav-cta-outline:hover, .btn-readmore:hover { background: var(--tz-color-brand-softer); border-color: var(--tz-color-border-strong); color: var(--tz-color-brand-strong); } .btn-lg-tz { min-height: 50px; padding-inline: 1.25rem; font-size: var(--tz-text-md); } .site-header.site-header-new { position: sticky; inset-block-start: 0; z-index: var(--tz-z-header); background: color-mix(in srgb, var(--tz-color-paper) 96%, transparent); border-block-end: 1px solid var(--tz-color-border); backdrop-filter: blur(18px); } .announcement { background: linear-gradient(90deg, var(--tz-color-ink), var(--tz-color-brand)); color: var(--tz-color-paper); } .announcement-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--tz-space-4); } .announcement-items, .utility-links { display: flex; align-items: center; gap: var(--tz-space-3); flex-wrap: wrap; } .announce-pill { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--tz-text-xs); } .utility-links a { color: color-mix(in srgb, var(--tz-color-paper) 86%, transparent); font-size: 12px; font-weight: 700; } .main-nav { width: min(var(--tz-content-wide), calc(100% - 2.5rem)); height: var(--tz-header-height); margin-inline: auto; display: flex; align-items: center; gap: var(--tz-space-3); position: relative; } .brand { display: flex; align-items: center; flex: 0 0 auto; min-width: 112px; color: var(--tz-color-ink); font-weight: 900; } .brand img { display: block; width: auto; height: 46px; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 1px; flex: 1 1 auto; min-width: 0; list-style: none; padding: 0; margin: 0; } .nav-links > li { position: relative; } .nav-links > li.is-mega { position: static; } .nav-link { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .62rem; border-radius: 10px; color: color-mix(in srgb, var(--tz-color-ink) 78%, var(--tz-color-paper)); font-size: 13px; font-weight: 750; line-height: 1.45; white-space: nowrap; } .nav-link:hover, .nav-link[aria-current="page"] { color: var(--tz-color-brand); background: var(--tz-color-brand-softer); } .nav-actions { display: flex; align-items: center; gap: var(--tz-space-2); flex: 0 0 auto; margin-inline-start: auto; } .nav-search-btn, .nav-account, .nav-credits, .menu-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--tz-color-border); background: var(--tz-color-paper); color: var(--tz-color-brand); place-items: center; text-decoration: none; } .nav-search-btn, .nav-account { display: grid; } .nav-credits { width: auto; min-width: 42px; padding-inline: .65rem; display: flex; align-items: center; justify-content: center; gap: .35rem; } .desktop-cta-group { display: flex; align-items: center; gap: .45rem; } .menu-btn { display: none; } .nav-dropdown-toggle { display: none; } .nav-dropdown, .nav-panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: var(--tz-z-dropdown); min-width: 260px; max-width: min(360px, calc(100vw - 2rem)); padding: 8px; margin: 0; list-style: none; background: var(--tz-color-paper); border: 1px solid var(--tz-color-border); border-radius: 16px; box-shadow: var(--tz-shadow-float); opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity var(--tz-duration-fast) var(--tz-ease-standard), transform var(--tz-duration-fast) var(--tz-ease-standard), visibility var(--tz-duration-fast) linear; } .nav-links > li:hover > .nav-dropdown, .nav-links > li:focus-within > .nav-dropdown, .nav-links > li.is-open > .nav-dropdown { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .nav-dropdown .nav-link { display: flex; width: 100%; white-space: normal; } .nav-links > li.is-mega > .nav-dropdown { inset-inline: 0; width: 100%; max-width: none; max-height: min(68vh, 610px); overflow: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tz-space-3); padding: var(--tz-space-4); } .nav-links > li.is-mega:hover > .nav-dropdown, .nav-links > li.is-mega:focus-within > .nav-dropdown, .nav-links > li.is-mega.is-open > .nav-dropdown { display: grid; } .nav-links > li.is-mega > .nav-dropdown > .mega-col { position: relative; min-width: 0; padding: .5rem; border-radius: 12px; list-style: none; } .nav-links > li.is-mega > .nav-dropdown > .mega-col:hover { background: var(--tz-color-mist); } .mega-heading { margin: 0 0 .35rem; padding: .4rem .55rem; color: var(--tz-color-ink); font-size: var(--tz-text-sm); font-weight: 850; } .nav-links > li.is-mega .nav-dropdown-l3 { position: static; display: grid; gap: 1px; min-width: 0; max-width: none; max-height: none; overflow: visible; padding: 0; margin: 0; list-style: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .nav-links > li.is-mega .nav-dropdown-l3 .nav-link { padding: .42rem .55rem; font-size: 12.5px; color: var(--tz-color-muted); } .nav-links > li.is-mega .nav-dropdown-l3 .nav-link:hover { color: var(--tz-color-brand); background: var(--tz-color-brand-softer); } .mobile-nav[hidden], .search-overlay[hidden] { display: none; } .mobile-nav { position: fixed; inset: 0; z-index: var(--tz-z-drawer); visibility: visible; pointer-events: auto; background: color-mix(in srgb, var(--tz-color-ink) 44%, transparent); backdrop-filter: blur(4px); } .mobile-nav-panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(390px, 92vw); overflow-y: auto; background: var(--tz-color-paper); padding: var(--tz-space-5); box-shadow: var(--tz-shadow-lifted); transform: none; } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding-block-end: var(--tz-space-4); border-block-end: 1px solid var(--tz-color-border); } .mobile-nav-title { font-weight: 900; font-size: var(--tz-text-lg); } .mobile-nav-close { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--tz-color-border); background: var(--tz-color-paper); color: var(--tz-color-brand); } .mobile-menu-list, .mobile-menu-list ul { list-style: none; margin: 0; padding: 0; } .mobile-nav-links { padding-block: var(--tz-space-4); } .mobile-nav-links .nav-link { display: flex; width: 100%; justify-content: space-between; padding: .75rem; border-radius: 12px; white-space: normal; } .mobile-nav-links .sub-menu { position: static; display: block; min-width: 0; max-width: none; padding: .25rem var(--tz-space-3) .5rem 0; margin: 0; border: 0; border-inline-start: 2px solid var(--tz-color-brand-soft); border-radius: 0; box-shadow: none; background: transparent; opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .mobile-nav-cta { display: grid; gap: .65rem; margin-block-start: var(--tz-space-4); } .search-overlay { position: fixed; inset: 0; z-index: var(--tz-z-overlay); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; background: color-mix(in srgb, var(--tz-color-ink) 58%, transparent); backdrop-filter: blur(8px); } .search-overlay-panel { width: min(720px, 100%); padding: var(--tz-space-5); background: var(--tz-color-paper); border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-panel); box-shadow: var(--tz-shadow-lifted); } .search-overlay-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; } .search-input { width: 100%; min-height: 50px; border: 1px solid var(--tz-color-border); border-radius: 14px; background: var(--tz-color-mist); padding: .8rem 1rem; font: inherit; color: var(--tz-color-ink); } .search-close { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--tz-color-border); background: var(--tz-color-paper); color: var(--tz-color-brand); } .search-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .75rem; } .search-pills a { padding: .4rem .7rem; border-radius: var(--tz-radius-pill); background: var(--tz-color-mist); color: var(--tz-color-brand); font-size: var(--tz-text-xs); font-weight: 700; } .hero-new, .page-hero-new, .tz-home-hero, .tez-builder-section-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--tz-color-accent) 16%, transparent), transparent 31%), linear-gradient(180deg, var(--tz-color-paper), var(--tz-color-mist)); padding-block: clamp(3.5rem, 7vw, 6.5rem); } .hero-grid, .tz-hero-split__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero-copy, .tz-hero-split__copy { position: relative; z-index: 2; min-width: 0; } .hero-copy h1, .tz-hero-split__copy h1 { max-width: 15ch; margin: .7rem 0 1.1rem; color: var(--tz-color-ink); font-size: var(--tz-text-display); line-height: 1.2; letter-spacing: -.025em; } .hero-copy h1 .grad { color: var(--tz-color-brand); background: none; -webkit-text-fill-color: currentColor; } .hero-copy > p, .tz-hero-split__copy .section-head > p { max-width: 58ch; margin: 0; color: var(--tz-color-muted); font-size: clamp(1rem, 1.5vw, 1.16rem); } .hero-actions, .tez-builder-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: var(--tz-space-8) var(--tz-space-6); } .hero-points, .tez-builder-points { display: flex; flex-wrap: wrap; gap: .65rem 1rem; padding: 0; margin: 0; list-style: none; color: var(--tz-color-quiet); font-size: var(--tz-text-sm); font-weight: 700; } .hero-point, .tez-builder-points li { display: inline-flex; align-items: center; gap: .45rem; } .hero-point i, .tez-builder-points i { color: var(--tz-color-brand); } .hero-aside, .tz-hero-split__form { position: relative; min-height: 450px; display: grid; place-items: center; } .tz-hero-orbit { position: relative; width: min(440px, 100%); aspect-ratio: 1; min-height: 0; margin-inline: auto; isolation: isolate; } .tz-hero-orbit .ink-blot { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: -2; } .tz-hero-orbit .blot-one { width: 72%; aspect-ratio: 1; inset: 5% 4% auto auto; background: color-mix(in srgb, var(--tz-color-accent) 18%, transparent); } .tz-hero-orbit .blot-two { width: 46%; aspect-ratio: 1; inset: auto auto 8% 3%; background: color-mix(in srgb, var(--tz-color-brand) 10%, transparent); } .tz-hero-orbit .blot-three { width: 28%; aspect-ratio: 1; inset: 12% auto auto 4%; background: color-mix(in srgb, var(--tz-color-mist) 60%, transparent); } .tz-hero-orbit .hero-particles { position: absolute; inset: 0; pointer-events: none; } .tz-hero-orbit .hero-particles span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--tz-color-accent); opacity: .6; } .tz-hero-orbit .hero-particles span:nth-child(1) { inset: 8% 28% auto auto; } .tz-hero-orbit .hero-particles span:nth-child(2) { inset: 23% auto auto 4%; } .tz-hero-orbit .hero-particles span:nth-child(3) { inset: auto 8% 26% auto; } .tz-hero-orbit .hero-particles span:nth-child(4) { inset: auto auto 7% 32%; } .tz-hero-orbit .hero-particles span:nth-child(5) { inset: 46% 1% auto auto; } .tz-hero-orbit .hero-particles span:nth-child(6) { inset: 55% auto auto 0; } .tz-hero-orbit .hero-network { position: absolute; inset: 8%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at center, var(--tz-color-paper) 0 36%, transparent 37%), radial-gradient(circle at center, color-mix(in srgb, var(--tz-color-brand) 8%, transparent), transparent 70%); } .tz-hero-orbit .network-ring { position: absolute; border: 1px solid color-mix(in srgb, var(--tz-color-brand) 25%, transparent); border-radius: 50%; } .tz-hero-orbit .ring-one { width: 100%; height: 100%; } .tz-hero-orbit .ring-two { width: 72%; height: 72%; border-style: dashed; } .tz-hero-orbit .ring-three { width: 48%; height: 48%; border-color: color-mix(in srgb, var(--tz-color-accent) 55%, transparent); } .tz-hero-orbit .hero-order-button { position: relative; z-index: 4; width: 150px; height: 150px; display: grid; place-items: center; align-content: center; gap: .4rem; border-radius: 50%; background: linear-gradient(145deg, var(--tz-color-brand), var(--tz-color-ink)); color: var(--tz-color-paper); box-shadow: var(--tz-shadow-lifted); text-align: center; font-weight: 850; } .tz-hero-orbit .hero-order-button i { font-size: 1.35rem; } .tz-hero-orbit .orbit-tag { position: absolute; z-index: 5; display: inline-flex; align-items: center; min-height: 38px; padding: .45rem .8rem; border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-pill); background: color-mix(in srgb, var(--tz-color-paper) 94%, transparent); color: var(--tz-color-brand-strong); box-shadow: var(--tz-shadow-card); font-size: var(--tz-text-xs); font-weight: 800; backdrop-filter: blur(8px); } .tz-hero-orbit .tag-1 { inset: 7% auto auto 12%; } .tz-hero-orbit .tag-2 { inset: 27% 0 auto auto; } .tz-hero-orbit .tag-3 { inset: auto auto 19% 0; } .tz-hero-orbit .tag-4 { inset: auto 5% 3% auto; } .tez-builder-grid, .services-grid, .article-grid { display: grid; gap: var(--tz-space-5); padding: 0; margin: 0; list-style: none; } .tez-builder-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tez-builder-cols-3, .services-grid, .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tez-builder-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .service-card, .tez-builder-card, .post-card, .reason-item, .tez-builder-feature, .step, .tez-builder-step { min-width: 0; background: var(--tz-color-paper); border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-card); box-shadow: var(--tz-shadow-card); } .service-card, .tez-builder-card { position: relative; display: flex; flex-direction: column; padding: var(--tz-space-6); color: var(--tz-color-text); overflow: hidden; transition: transform var(--tz-duration-control) var(--tz-ease-standard), box-shadow var(--tz-duration-control) var(--tz-ease-standard), border-color var(--tz-duration-control) var(--tz-ease-standard); } .service-card::after, .tez-builder-card::after { content: ""; position: absolute; width: 120px; height: 120px; inset-inline-end: -55px; inset-block-start: -55px; border-radius: 50%; background: color-mix(in srgb, var(--tz-color-brand) 5%, transparent); transition: transform var(--tz-duration-layout) var(--tz-ease-standard); } .service-card:hover, .tez-builder-card:hover, .post-card:hover { transform: translateY(-3px); box-shadow: var(--tz-shadow-float); border-color: color-mix(in srgb, var(--tz-color-brand) 28%, var(--tz-color-border)); } .service-card:hover::after, .tez-builder-card:hover::after { transform: scale(1.25); } .service-card > *, .tez-builder-card > * { position: relative; z-index: 1; } .icon-box, .tz-icon-box { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; background: var(--tz-color-brand-softer); color: var(--tz-color-brand); } .icon-teal { background: var(--tz-color-icon-teal); } .icon-indigo { background: var(--tz-color-icon-indigo); } .icon-cyan { background: var(--tz-color-icon-cyan); } .icon-amber { background: var(--tz-color-icon-amber); } .icon-danger-soft { background: var(--tz-color-icon-danger-soft); } .icon-purple-soft { background: var(--tz-color-icon-purple-soft); } .service-card h3, .tez-builder-card h3 { margin: var(--tz-space-4) 0 var(--tz-space-2); font-size: var(--tz-text-lg); color: var(--tz-color-ink); } .service-card p, .tez-builder-card p { flex: 1; margin: 0 0 var(--tz-space-4); color: var(--tz-color-muted); font-size: var(--tz-text-sm); } .tez-builder-badge { width: fit-content; margin-block-start: var(--tz-space-3); padding: .25rem .55rem; border-radius: var(--tz-radius-pill); background: var(--tz-color-brand-softer); color: var(--tz-color-brand); font-size: 11px; font-weight: 800; } .link-arrow, .tz-link-arrow { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; color: var(--tz-color-brand); font-weight: 800; font-size: var(--tz-text-sm); } a.link-arrow::after, a.tz-link-arrow::after { content: "←"; transition: transform var(--tz-duration-fast) var(--tz-ease-standard); } a.link-arrow:hover::after, a.tz-link-arrow:hover::after { transform: translateX(-3px); } .reason-list, .reason-list.tez-builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tz-space-4); padding: 0; margin: 0; list-style: none; } .reason-list > li::marker { content: ""; } .reason-item, .tez-builder-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--tz-space-4); padding: var(--tz-space-5); } .reason-item > div:last-child, .tez-builder-feature > div:last-child { min-width: 0; } .reason-item h3, .tez-builder-feature h3, .reason-item b { display: block; margin: 0 0 var(--tz-space-2); color: var(--tz-color-ink); font-size: var(--tz-text-md); font-weight: 850; } .reason-item p, .tez-builder-feature p { margin: 0; color: var(--tz-color-muted); font-size: var(--tz-text-sm); } .reason-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--tz-space-6); align-items: stretch; } .reason-panel { position: relative; overflow: hidden; border-radius: var(--tz-radius-card); padding: clamp(2rem, 4vw, 3.5rem); background: linear-gradient(145deg, var(--tz-color-ink), var(--tz-color-brand)); color: var(--tz-color-paper); } .reason-panel h3 { margin: .5rem 0 1rem; color: var(--tz-color-paper); font-size: clamp(1.8rem, 3vw, 2.7rem); } .reason-panel p { color: color-mix(in srgb, var(--tz-color-paper) 78%, transparent); } .steps, .tez-builder-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tz-space-5); padding: 0; margin: 0; list-style: none; counter-reset: tz-step; } .tez-builder-steps > li::marker { content: ""; } .step, .tez-builder-step { position: relative; min-height: 220px; padding: var(--tz-space-6); overflow: hidden; counter-increment: tz-step; } .tez-builder-step::before { content: counter(tz-step, decimal-leading-zero); position: absolute; inset-block-start: .75rem; inset-inline-start: 1rem; color: color-mix(in srgb, var(--tz-color-brand) 13%, transparent); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; font-weight: 900; pointer-events: none; } .tez-builder-step-body { position: relative; z-index: 1; display: flex; min-width: 0; height: 100%; flex-direction: column; align-items: flex-start; } .tez-builder-step h3, .step h3 { margin: var(--tz-space-5) 0 var(--tz-space-2); color: var(--tz-color-ink); font-size: var(--tz-text-lg); } .tez-builder-step p, .step p { margin: 0; color: var(--tz-color-muted); font-size: var(--tz-text-sm); } .tez-builder-step-visual { position: relative; z-index: 1; margin: var(--tz-space-5) 0 0; overflow: hidden; border-radius: 14px; background: var(--tz-color-mist); } .tez-builder-step-visual img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .step-icon { display: flex; align-items: center; justify-content: space-between; color: var(--tz-color-brand); } .tez-builder-step-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--tz-radius-pill); background: var(--tz-color-brand); color: var(--tz-color-paper); font-weight: 900; } .uni-strip { background: var(--tz-color-paper); border-block: 1px solid var(--tz-color-border); } .uni-kicker { margin: 0 0 .4rem; text-align: center; color: var(--tz-color-brand); font-size: var(--tz-text-xs); font-weight: 800; } .uni-strip h2 { margin: 0 0 var(--tz-space-8); text-align: center; font-size: clamp(1.5rem, 2.7vw, 2.15rem); } .uni-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tz-space-3); padding: 0; margin: 0; list-style: none; } .tz-uni-card { min-height: 150px; margin: 0; padding: var(--tz-space-4); display: grid; place-items: center; gap: .65rem; text-align: center; border: 1px solid var(--tz-color-border); border-radius: 18px; background: var(--tz-color-mist); } .tz-uni-card img { width: 72px; height: 72px; object-fit: contain; } .tz-uni-card figcaption { color: var(--tz-color-quiet); font-size: var(--tz-text-xs); font-weight: 750; } .post-card { overflow: hidden; display: flex; flex-direction: column; } .post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--tz-color-mist); } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tz-duration-layout) var(--tz-ease-standard); } .post-card:hover .post-card__media img { transform: scale(1.035); } .post-card__body { display: flex; flex: 1; flex-direction: column; gap: .75rem; padding: var(--tz-space-5); } .post-card__meta { display: flex; flex-wrap: wrap; gap: .7rem; color: var(--tz-color-muted); font-size: var(--tz-text-xs); } .post-card__body h2, .post-card__body h3, .post-card__body h4 { margin: 0; font-size: var(--tz-text-lg); line-height: 1.5; } .post-card__body h2 a, .post-card__body h3 a, .post-card__body h4 a { color: var(--tz-color-ink); } .post-card__body > p { margin: 0; color: var(--tz-color-muted); font-size: var(--tz-text-sm); } .post-card .btn-readmore { margin-block-start: auto; align-self: flex-start; } .tz-faq-band { background: var(--tz-color-paper); } .faq-grid, .faq-list, .tz-faq-items { display: grid; gap: .75rem; max-width: 900px; padding: 0; margin-inline: auto; list-style: none; } .faq-grid > li::marker { content: ""; } .faq-item, .faq-card, .tz-faq-item { overflow: hidden; background: var(--tz-color-paper); border: 1px solid var(--tz-color-border); border-radius: 16px; } .faq-q, .faq-question, .tz-faq-question { width: 100%; min-height: 64px; display: flex; align-items: center; gap: var(--tz-space-3); padding: .9rem 1rem; border: 0; background: transparent; color: var(--tz-color-ink); font: inherit; font-weight: 800; text-align: start; } .faq-num { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: var(--tz-color-brand-softer); color: var(--tz-color-brand); font-size: var(--tz-text-xs); font-weight: 900; } .faq-q__text { flex: 1; min-width: 0; } .faq-q__mark { position: relative; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 8px; background: var(--tz-color-mist); } .faq-q__mark::before, .faq-q__mark::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 10px; height: 1.5px; background: var(--tz-color-brand); transform: translate(-50%, -50%); transition: transform var(--tz-duration-fast) var(--tz-ease-standard); } .faq-q__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item .faq-a { display: none; padding: 0 1rem 1rem; color: var(--tz-color-muted); } .faq-item.open .faq-a { display: block; } .faq-item.open .faq-q__mark::after { transform: translate(-50%, -50%) rotate(0deg); } .faq-a p, .faq-answer p, .tz-faq-answer p { margin: 0; } .faq-answer, .tz-faq-answer { padding: 0 1rem 1rem; color: var(--tz-color-muted); } .cta-band { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--tz-space-6); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--tz-radius-card); background: linear-gradient(120deg, var(--tz-color-brand), var(--tz-color-ink)); color: var(--tz-color-paper); box-shadow: var(--tz-shadow-float); } .cta-band h2 { margin: 0 0 .35rem; color: var(--tz-color-paper); font-size: clamp(1.45rem, 2.6vw, 2.2rem); } .cta-band p { margin: 0; color: color-mix(in srgb, var(--tz-color-paper) 78%, transparent); } .tz-form, .lead-card, .service-form-card { padding: var(--tz-space-6); background: var(--tz-color-paper); border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius-card); box-shadow: var(--tz-shadow-card); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tz-space-4); } .field.full { grid-column: 1 / -1; } .field label { display: block; margin-block-end: .4rem; color: var(--tz-color-ink); font-size: var(--tz-text-sm); font-weight: 800; } .field input, .field select, .field textarea, .tz-form input, .tz-form select, .tz-form textarea { width: 100%; padding: .75rem .85rem; border: 1px solid var(--tz-color-border); border-radius: 12px; background: var(--tz-color-mist); color: var(--tz-color-ink); font: inherit; } .field input:focus, .field select:focus, .field textarea:focus, .tz-form input:focus, .tz-form select:focus, .tz-form textarea:focus { outline: 2px solid var(--tz-color-focus); border-color: var(--tz-color-brand); background: var(--tz-color-paper); } .longcopy, .article-content, .entry-content { max-width: var(--tz-content-reading); margin-inline: auto; color: var(--tz-color-text); font-size: 1.02rem; line-height: 1.95; } .site-footer, .tz-footer { margin-block-start: var(--tz-space-16); padding-block: clamp(3rem, 7vw, 5rem) 1.5rem; background: var(--tz-color-ink); color: color-mix(in srgb, var(--tz-color-paper) 78%, transparent); } .footer-grid, .tz-footer__grid { display: grid; grid-template-columns: minmax(250px, 1.3fr) repeat(3, minmax(150px, .75fr)); gap: var(--tz-space-8); align-items: start; } .footer-brand, .tz-footer__brand { display: flex; flex-direction: column; gap: var(--tz-space-4); } .footer-logo, .tz-footer__logo { width: fit-content; height: auto; min-height: 0; padding: 0; border-radius: 0; background: transparent; align-self: flex-start; } .footer-logo img, .tz-footer__logo img { display: block; width: auto; height: 52px; max-height: 52px; object-fit: contain; filter: brightness(0) invert(1); } .footer-brand p, .tz-footer__brand p { max-width: 42ch; margin: 0; color: color-mix(in srgb, var(--tz-color-paper) 68%, transparent); } .footer-social, .tz-footer__socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .5rem; } .footer-social a, .tz-footer__socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--tz-color-paper) 10%, transparent); color: var(--tz-color-paper); } .footer-col, .tz-footer__col { display: flex; flex-direction: column; gap: .55rem; } .footer-heading { margin: 0 0 .55rem; color: var(--tz-color-paper); font-weight: 850; } .footer-col a, .footer-col p, .tz-footer__col a, .tz-footer__col p { color: color-mix(in srgb, var(--tz-color-paper) 70%, transparent); font-size: var(--tz-text-sm); } .footer-col a:hover, .tz-footer__col a:hover { color: var(--tz-color-paper); } .footer-utility { margin-block-start: var(--tz-space-8); padding-block: var(--tz-space-5); border-block: 1px solid color-mix(in srgb, var(--tz-color-paper) 12%, transparent); } .footer-menu-list, .footer-legal { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 0; margin: .5rem 0; list-style: none; } .footer-utility a { color: color-mix(in srgb, var(--tz-color-paper) 65%, transparent); font-size: var(--tz-text-xs); } .footer-certs { padding-block: var(--tz-space-5); } .footer-certs__enamad img { max-width: 125px; height: auto; } .footer-bottom, .tz-footer__bottom { margin-block-start: var(--tz-space-5); padding-block-start: var(--tz-space-4); border-block-start: 1px solid color-mix(in srgb, var(--tz-color-paper) 10%, transparent); color: color-mix(in srgb, var(--tz-color-paper) 55%, transparent); font-size: var(--tz-text-xs); } .bottom-nav, .tz-bottom-nav { display: none; } .tz-fab-wrap.tz-fab { position: fixed; right: auto; left: 20px; bottom: 20px; z-index: var(--tz-z-fab); display: flex; flex-direction: column; align-items: flex-start; gap: var(--tz-space-3); } .tz-fab-toggle, .tz-fab__button { width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(145deg, var(--tz-color-brand), var(--tz-color-ink)); color: var(--tz-color-paper); box-shadow: var(--tz-shadow-float); } .tz-fab-menu, .tz-fab__menu { position: absolute; left: 0; bottom: 66px; display: grid; gap: .5rem; } .tz-fab-menu[hidden], .tz-fab__menu[hidden] { display: none; } .tz-fab-item, .tz-fab__item { min-width: 138px; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border: 1px solid var(--tz-color-border); border-radius: 14px; background: var(--tz-color-paper); box-shadow: var(--tz-shadow-card); color: var(--tz-color-ink); font-size: var(--tz-text-sm); font-weight: 750; } .tz-livechat { position: fixed; right: 20px; bottom: 20px; z-index: var(--tz-z-livechat); } .tz-livechat__fab { min-width: 56px; min-height: 56px; border-radius: 18px; box-shadow: var(--tz-shadow-float); } @media (max-width: 1180px) { .main-nav, .container { width: min(var(--tz-content-wide), calc(100% - 2rem)); } .nav-link { padding-inline: .5rem; font-size: 12.5px; } .desktop-cta-group .nav-cta { padding-inline: .75rem; } } @media (max-width: 1024px) { .nav-links, .desktop-cta-group { display: none; } .menu-btn { display: grid; place-items: center; } .main-nav { justify-content: space-between; } .brand { margin-inline-end: auto; } .hero-grid, .tz-hero-split__grid, .reason-wrap { grid-template-columns: 1fr; } .hero-copy h1, .tz-hero-split__copy h1 { max-width: 18ch; } .hero-aside, .tz-hero-split__form { min-height: 390px; } .tez-builder-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid, .tz-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand, .tz-footer__brand { grid-column: 1 / -1; } } @media (max-width: 900px) { .announcement { display: none; } .tez-builder-cols-3, .services-grid, .article-grid, .steps, .tez-builder-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uni-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bottom-nav, .tz-bottom-nav { display: grid; grid-template-columns: repeat(var(--tz-bottom-nav-cols, 4), minmax(0, 1fr)); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--tz-z-bottom-nav); padding: .35rem .3rem calc(.45rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--tz-color-paper) 95%, transparent); border-block-start: 1px solid var(--tz-color-border); box-shadow: 0 -8px 28px color-mix(in srgb, var(--tz-color-ink) 8%, transparent); backdrop-filter: blur(18px); } .bottom-nav-item, .tz-bottom-nav__link { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: var(--tz-color-muted); font-size: 10px; font-weight: 750; } .bottom-nav-item i, .tz-bottom-nav__link i { color: var(--tz-color-brand); font-size: 17px; } .tz-fab-wrap.tz-fab, .tz-livechat { bottom: calc(var(--tz-bottom-nav-height) + 14px + env(safe-area-inset-bottom)); } body.tz-react-shell { padding-block-end: var(--tz-bottom-nav-height); } } @media (max-width: 680px) { .container, .main-nav { width: min(var(--tz-content-wide), calc(100% - 1.5rem)); } .hero-new, .page-hero-new, .tez-builder-section-hero { padding-block: 2.75rem 3.25rem; } .hero-copy h1, .tz-hero-split__copy h1 { font-size: clamp(2rem, 10vw, 3.2rem); } .hero-actions, .tez-builder-actions { display: grid; } .hero-actions .btn-tz, .tez-builder-actions .btn-tz { width: 100%; } .hero-aside, .tz-hero-split__form { min-height: 330px; } .tz-hero-orbit { width: min(330px, 100%); } .tz-hero-orbit .hero-order-button { width: 128px; height: 128px; } .tz-hero-orbit .orbit-tag { min-height: 34px; padding: .35rem .65rem; font-size: 11px; } .tez-builder-cols-2, .tez-builder-cols-3, .tez-builder-cols-4, .services-grid, .article-grid, .reason-list, .reason-list.tez-builder-grid, .steps, .tez-builder-steps, .footer-grid, .tz-footer__grid { grid-template-columns: 1fr; } .reason-item, .tez-builder-feature { grid-template-columns: auto minmax(0, 1fr); } .form-grid { grid-template-columns: 1fr; } .search-overlay-form { grid-template-columns: minmax(0, 1fr) auto; } .search-overlay-form .btn-primary-tz { grid-column: 1 / -1; } .cta-band { align-items: flex-start; flex-direction: column; } .footer-brand, .tz-footer__brand { grid-column: auto; text-align: center; align-items: center; } .footer-logo, .tz-footer__logo { align-self: center; } .footer-brand p, .tz-footer__brand p { margin-inline: auto; } .footer-social, .tz-footer__socials { justify-content: center; } } @media (max-width: 420px) { .uni-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .tz-uni-card { min-height: 128px; padding: .75rem; } .nav-account, .nav-search-btn, .menu-btn { width: 38px; height: 38px; } .brand img { height: 40px; } .tz-livechat { right: 12px; } .tz-fab-wrap.tz-fab { left: 12px; } }
/* assets/css/v2-responsive.css */
.mobile-nav-links .menu-item { position: relative; } .mobile-nav-links .menu-item.has-dropdown > .nav-link { padding-inline-end: 3.15rem; } .mobile-nav-links .nav-dropdown-toggle { position: absolute; inset-block-start: .42rem; inset-inline-end: .35rem; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--tz-color-brand-softer); color: var(--tz-color-brand); } .mobile-nav-links .nav-dropdown-toggle .nav-chevron { transition: transform var(--tz-duration-fast) var(--tz-ease-standard); } .mobile-nav-links .menu-item.has-dropdown.is-open > .nav-dropdown-toggle .nav-chevron { transform: rotate(180deg); } .mobile-nav-links .menu-item.has-dropdown > .sub-menu { position: static; display: none; min-width: 0; max-width: none; max-height: none; overflow: visible; padding: .25rem var(--tz-space-3) .5rem 0; margin: 0; border: 0; border-inline-start: 2px solid var(--tz-color-brand-soft); border-radius: 0; box-shadow: none; background: transparent; opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .mobile-nav-links .menu-item.has-dropdown.is-open > .sub-menu { display: block; } .mobile-nav-links .sub-menu .sub-menu { padding-block-start: .15rem; } .mobile-nav-links .sub-menu .nav-link { padding-block: .58rem; font-size: 12.5px; color: var(--tz-color-muted); } .tz-fab-wrap { position: fixed; right: auto; left: 20px; bottom: 20px; z-index: var(--tz-z-fab); display: flex; flex-direction: column; align-items: flex-start; gap: var(--tz-space-3); } @media (max-width: 1024px) { .main-nav { justify-content: space-between; gap: .65rem; } .brand { position: absolute; left: 50%; transform: translateX(-50%); min-width: 0; margin-inline-end: 0; } .nav-actions { margin-inline-start: 0; gap: .45rem; } .mobile-nav-panel { max-width: 100%; overscroll-behavior: contain; padding-block-start: max(var(--tz-space-5), env(safe-area-inset-top)); padding-block-end: max(var(--tz-space-5), env(safe-area-inset-bottom)); } } @media (max-width: 900px) { .bottom-nav, .tz-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } .bottom-nav[data-nav-count="1"] { grid-template-columns: 1fr; } .bottom-nav[data-nav-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bottom-nav[data-nav-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bottom-nav[data-nav-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bottom-nav[data-nav-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tz-fab-wrap, .tz-livechat { bottom: calc(var(--tz-bottom-nav-height) + 14px + env(safe-area-inset-bottom)); } } @media (max-width: 680px) { .main-nav { height: 68px; gap: .4rem; } .nav-actions { gap: .3rem; } .nav-credits { display: none; } .section, .tez-builder-section, .uni-strip { padding-block: 3rem; } .service-card, .tez-builder-card, .step, .tez-builder-step, .reason-item, .tez-builder-feature { padding: var(--tz-space-5); } .step, .tez-builder-step { min-height: 0; } .faq-q, .faq-question, .tz-faq-question { min-height: 0; align-items: flex-start; padding: .85rem; line-height: 1.65; } .faq-item .faq-a, .faq-answer, .tz-faq-answer { padding-inline: .85rem; } .tez-builder-section-service_cards .tez-builder-grid, .tez-builder-section-process_steps .tez-builder-steps, .article-grid { display: flex; overflow-x: auto; overflow-y: hidden; gap: .8rem; padding-block-end: .65rem; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tez-builder-section-service_cards .tez-builder-grid::-webkit-scrollbar, .tez-builder-section-process_steps .tez-builder-steps::-webkit-scrollbar, .article-grid::-webkit-scrollbar { display: none; } .tez-builder-section-service_cards .tez-builder-card { flex: 0 0 min(82vw, 310px); min-height: 205px; scroll-snap-align: start; } .tez-builder-section-process_steps .tez-builder-step { flex: 0 0 min(80vw, 300px); min-height: 185px; scroll-snap-align: start; } .article-grid .post-card { flex: 0 0 min(84vw, 320px); scroll-snap-align: start; } .footer-grid, .tz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 1.75rem; } .footer-brand, .tz-footer__brand { grid-column: 1 / -1; text-align: center; align-items: center; } .footer-grid > .footer-col:last-child, .tz-footer__grid > .tz-footer__col:last-child { grid-column: 1 / -1; align-items: center; text-align: center; } .footer-col, .tz-footer__col { align-items: flex-start; text-align: start; } .footer-grid > .footer-col:last-child, .tz-footer__grid > .tz-footer__col:last-child { align-items: center; text-align: center; } .footer-menu-list, .footer-legal { justify-content: center; } .footer-certs { text-align: center; } } @media (max-width: 420px) { .hero-actions, .tez-builder-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-actions .btn-tz, .tez-builder-actions .btn-tz { min-width: 0; padding-inline: .55rem; font-size: 12px; } .hero-aside, .tz-hero-split__form { min-height: 270px; } .tz-hero-orbit { width: min(270px, 78vw); } .tz-hero-orbit .hero-order-button { width: 104px; height: 104px; font-size: 11px; } .tz-hero-orbit .orbit-tag { max-width: 118px; min-height: 30px; padding: .3rem .5rem; white-space: normal; text-align: center; line-height: 1.35; font-size: 10px; } .mobile-nav-panel { width: min(360px, 94vw); padding-inline: 1rem; } .tz-fab-wrap { left: 12px; } }