/* ZamaniAuto compact public pages, 20260906-1. Load ONLY on about, contact and certifications. All selectors stay inside main-content. No content removal, global resets, new JavaScript or DB changes. Existing brand, fonts, navigation, footer and form behavior are preserved. */ #main-content{--compact-section:clamp(28px,4vw,48px);--compact-gutter:var(--za-gutter, 24px)} #main-content :is(.za-section,.zc-section,.svc-section,.svc-contact,.za-cms-custom){padding-block:var(--compact-section)} #main-content :is(.za-container,.zc-container,.svc-section,.svc-contact,.svc-author,.svc-cta-ribbon,.za-cms-custom){padding-inline:var(--compact-gutter)} #main-content :is(.za-section-header,.zc-section-header,.svc-section-header){margin-bottom:24px} #main-content :is(.za-eyebrow,.zc-eyebrow,.svc-section-tag){margin-bottom:8px} #main-content :is(h1,h2,h3,h4){overflow-wrap:anywhere;text-wrap:balance} #main-content :is(.za-body,.za-lead,.zc-body,.zc-lead,.za-section-desc,.zc-section-desc,.za-card__body,.za-card__highlight,.za-timeline__card p,.za-step__content p,.za-blockquote p,.za-alert-box__body p,.zc-blockquote p,.zc-step__body p,.zc-audience-card p,.zc-alert__body p,.svc-card-desc,.svc-card-quote p,.svc-roadmap-content p,.svc-contact-lead,.za-cms-custom p){font-size:1rem;line-height:1.7;overflow-wrap:anywhere;text-wrap:pretty} #main-content :is(.za-body,.za-lead,.zc-body,.zc-lead,.svc-card-desc,.svc-contact-lead,.za-cms-custom p){margin-bottom:12px} #main-content :is(.za-split,.zc-contact-grid){gap:24px} #main-content :is(.za-split,.za-cards,.za-split__stats,.za-scenarios,.zc-contact-grid,.zc-audience-grid,.zc-form__row,.svc-cards-grid,.svc-hero-grid)>*{min-width:0} #main-content :is(.za-cards,.zc-audience-grid,.svc-cards-grid){gap:16px} #main-content :is(.za-card,.zc-audience-card,.svc-card){padding:20px} #main-content :is(.za-card__icon,.svc-card-icon){width:40px;height:40px;margin-bottom:12px} #main-content .za-card__highlight{border:0;padding:8px 0 0;background:none} /* This selector only matches the truly empty decorative grid spacer. */ #main-content .za-card--spacer:empty{padding:0;min-height:0} #main-content :is(.za-stat,.za-deliv){padding:14px 12px} #main-content .za-timeline{margin-bottom:20px} #main-content .za-timeline__item:not(:last-child){padding-bottom:16px} #main-content :is(.za-timeline__card,.svc-roadmap-content){padding:16px} #main-content :is(.za-blockquote,.zc-blockquote){padding:16px 20px;margin-top:20px} #main-content :is(.za-alert-box,.zc-alert,.za-ribbon__inner,.svc-cta-ribbon-inner,.svc-contact-card){padding:20px;gap:16px} #main-content .za-steps{gap:16px;margin-bottom:24px} #main-content .za-step{gap:12px} #main-content .za-deliverables{padding-top:24px} #main-content :is(.za-step__num,.zc-step__num){width:40px;height:40px} #main-content .za-ribbon{padding-bottom:24px} #main-content .za-ribbon__text{min-width:0} #main-content .za-scenario{padding:16px;gap:8px} #main-content :is(.za-cta-final__urgency,.za-cta-final__buttons,.za-cta-final__social){margin-bottom:20px} #main-content .za-cta-pill{min-width:0;max-width:100%;padding:14px 16px;gap:12px} #main-content .zc-steps{gap:12px;max-width:100%} #main-content .zc-step{padding:16px;gap:12px} #main-content .zc-step__body{min-width:0} #main-content .zc-audience-card__icon{font-size:1.75rem;margin-bottom:8px} #main-content .zc-contact-pill{padding:16px 20px;gap:12px;max-width:100%} #main-content :is(.zc-contact-pill__info,.zc-method__info,.za-cta-pill__info){min-width:0;overflow-wrap:anywhere} #main-content .zc-method{padding:12px;gap:12px} #main-content .zc-form-wrapper{min-width:0;padding:20px} #main-content .zc-form-title{margin-bottom:16px} #main-content .zc-form__row{gap:12px;margin-bottom:12px} #main-content .zc-form__group{min-width:0} /* 16px inputs prevent iOS focus zoom; do not shrink touch targets. */ #main-content .zc-form__group :is(input,select,textarea){width:100%;min-width:0;max-width:100%;min-height:44px;font-size:1rem;padding:10px 12px} #main-content .zc-form__group select{padding-inline-end:36px} #main-content .zc-form__group textarea{min-height:112px;resize:vertical} #main-content .zc-signature{padding-top:0} #main-content :is(.za-btn,.zc-btn,.svc-btn-primary,.svc-btn-ghost,.svc-btn-whatsapp,.svc-btn-telegram){min-height:44px;max-width:100%;padding:10px 16px;white-space:normal;overflow-wrap:anywhere;justify-content:center;text-align:center;line-height:1.5} #main-content :is(a,button,input,select,textarea):focus-visible{outline:3px solid oklch(87% .12 180);outline-offset:3px} #main-content :is(.svc-hero-badge,.svc-contact-badge,.zc-outcome){max-width:100%;white-space:normal} #main-content .svc-card-tags span{max-width:100%;white-space:normal;overflow-wrap:anywhere} #main-content .svc-cta-ribbon{margin-bottom:24px} #main-content .svc-contact-badge{margin-bottom:16px} #main-content .svc-roadmap-step:not(:last-child){padding-bottom:16px} #main-content .svc-compare-table-wrap{max-width:100%} #main-content .svc-compare-table{table-layout:fixed} #main-content .svc-compare-table :is(th,td){padding:10px 12px;overflow-wrap:anywhere} #main-content .svc-compare-table .svc-compare-divider{width:24px;padding-inline:4px} #main-content .svc-author{padding-bottom:28px} /* Tablet: use columns when text has enough space. */ @media(min-width:640px) and (max-width:1099px){ #main-content :is(.za-cards--3col,.svc-cards-grid,.zc-audience-grid){grid-template-columns:repeat(2,minmax(0,1fr))} } @media(min-width:640px){ #main-content .zc-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} } @media(min-width:768px) and (max-width:1024px){ #main-content .zc-contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px} #main-content .zc-form__row{grid-template-columns:1fr} } /* No scale/zoom, content line-clamp, fixed text heights or extra JavaScript. */ @media(max-width:767px){ #main-content{--compact-section:24px;background-attachment:scroll} #main-content :is(.za-section-header,.zc-section-header,.svc-section-header){margin-bottom:16px} #main-content :is(.za-card,.zc-audience-card,.svc-card,.zc-form-wrapper){padding:16px} #main-content :is(.za-alert-box,.zc-alert){padding:16px;gap:12px} #main-content .za-alert-box__stat{font-size:2.5rem} #main-content .zc-alert__icon{font-size:2rem} #main-content :is(.za-ribbon__inner,.svc-cta-ribbon-inner){padding:16px;gap:12px} #main-content .svc-contact-actions a{width:auto;max-width:100%;flex:1 1 140px} #main-content .zc-contact-pill{flex-direction:row;text-align:start;padding:16px} #main-content .zc-contact-grid{gap:16px} #main-content .zc-audience-grid{grid-template-columns:1fr;gap:12px} #main-content .zc-audience-card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;text-align:start} #main-content .zc-audience-card__icon{grid-row:1/3;margin:0} #main-content .zc-audience-card h3{margin:0} #main-content .zc-audience-card p{grid-column:2} #main-content .svc-compare-table :is(th,td){padding:10px 6px} } @media(min-width:520px) and (max-width:767px){ #main-content .svc-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #main-content .svc-fcard{grid-column:auto} #main-content .svc-fcard-d{grid-column:1/-1} #main-content .zc-form__row{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:639px){ #main-content :is(.za-cards--3col,.svc-cards-grid){grid-template-columns:minmax(0,1fr)} #main-content .za-scenario{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:12px} #main-content .za-scenario span{flex-basis:100%} } /* Visual QA: keep feature headings legible and SVGs inside their own boxes. */ #main-content .svc-feature-group-title{font-size:1rem;line-height:1.5;color:var(--za-text,oklch(95% .01 220));margin:0 0 4px} @media(max-width:519px){ #main-content .svc-fcard-a .svc-fcard-inner{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 12px;text-align:start} #main-content .svc-fcard-a :is(h2,h3){grid-column:2;margin:0} #main-content .svc-fcard-b{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px} #main-content .svc-fcard-b .svc-fcard-ring{margin:0} #main-content .svc-fcard-b .svc-fcard-ring svg{width:56px} #main-content .svc-fcard-b .svc-fcard-text{text-align:start} #main-content .svc-fcard-c{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 12px;align-items:center} #main-content .svc-fcard-c :is(h3,p){grid-column:2;margin:0} } /* Reflow at 200% text size without clipping the phone link. */ #main-content .svc-contact-phone{flex-wrap:wrap} #main-content .svc-contact-phone>*{min-width:0;max-width:100%} #main-content .svc-contact-number{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere} /* Exact refinements requested for mobile & tablet (<= 1024px) */ @media (max-width: 1024px) { /* 1. Halve the margin/padding gap between hero eyebrow and breadcrumb */ #main-content .za-hero { padding-top: clamp(24px, 4.5vh, 36px) !important; } /* 2. Heading "مهندسی که تئوری را به کف کارخانه می‌آورد" in single line */ #bridge .za-h2 { white-space: normal !important; text-wrap: balance; font-size: clamp(0.88rem, 4.2vw, 1.85rem) !important; line-height: 1.4 !important; } /* 3. Technical expertise cards: title written opposite/beside its icon */ #expertise .za-card { display: grid !important; grid-template-areas: "icon title" "body body" "highlight highlight" "cta cta"; grid-template-columns: auto 1fr !important; align-items: center !important; column-gap: 14px !important; } #expertise .za-card__icon { grid-area: icon !important; margin-bottom: 0 !important; flex-shrink: 0 !important; } #expertise .za-card__title { grid-area: title !important; margin: 0 !important; display: flex !important; align-items: center !important; font-size: 1.05rem !important; } #expertise .za-card__body { grid-area: body !important; margin-top: 14px !important; margin-bottom: 12px !important; } #expertise .za-card__highlight { grid-area: highlight !important; } #expertise .za-card--cta .za-btn { grid-area: cta !important; } /* 4. Heading "سه اصلی که هر پروژه را با آن پیش می‌برم" in single line */ #philosophy .za-h2 { white-space: normal !important; text-wrap: balance; font-size: clamp(0.88rem, 4.2vw, 1.85rem) !important; line-height: 1.4 !important; } /* 5. Scenarios (3 icons placed beside their text) */ #main-content .za-scenarios { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } #main-content .za-scenario { display: grid !important; grid-template-areas: "icon strong" "icon span"; grid-template-columns: 48px 1fr !important; align-items: center !important; text-align: start !important; column-gap: 14px !important; row-gap: 4px !important; padding: 16px 16px !important; } #main-content .za-scenario__icon { grid-area: icon !important; font-size: 2.2rem !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #main-content .za-scenario strong { grid-area: strong !important; font-size: 0.98rem !important; } #main-content .za-scenario span { grid-area: span !important; font-size: 0.85rem !important; line-height: 1.6 !important; } } /* ═══════════════════════════════════════════════════════════ PERMANENT DARK THEME ENFORCEMENT & HIGH CONTRAST AUDIT ═══════════════════════════════════════════════════════════ */ html[data-theme="dark"], html[data-theme="dark"] body:not(.shop-body) { color-scheme: dark !important; background-color: #0A1628 !important; color: #F1F5F9 !important; } /* Ensure all toggles across any subpages are completely removed from UI */ .nav-dm-btn, .dark-mode-toggle, .mobile-dark-toggle, #darkModeToggle, #mobileDarkToggle { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Base readability guarantees across dark backgrounds */ html[data-theme="dark"] body:not(.shop-body), #main-content { background-color: #0A1628 !important; color: #F1F5F9 !important; } /* Contrast enhancement for subheadings, lead texts, and descriptions */ #main-content h1, #main-content h2, #main-content h3, #main-content h4 { color: #FFFFFF !important; } #main-content :is(.za-lead, .zc-lead) { color: #E2E8F0 !important; } #main-content :is(.za-body, .zc-body, .za-section-desc, .zc-section-desc) { color: #CBD5E1 !important; } #main-content :is(.za-card__body, .zc-audience-card p, .svc-card-desc) { color: #CBD5E1 !important; } #main-content strong { color: #5EEAD4 !important; } /* Card surfaces & borders in deep dark navy */ #main-content :is(.za-card, .zc-step, .zc-audience-card, .svc-card, .zc-method, .zc-form-wrapper) { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(94, 234, 212, 0.14) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important; } #main-content :is(.za-card:hover, .zc-step:hover, .zc-audience-card:hover, .svc-card:hover, .zc-method:hover) { border-color: rgba(94, 234, 212, 0.35) !important; background: rgba(15, 23, 42, 0.90) !important; } /* Form input readability in permanent dark mode */ #main-content .zc-form__group :is(input, select, textarea) { background: rgba(10, 22, 40, 0.85) !important; border: 1.5px solid rgba(94, 234, 212, 0.25) !important; color: #FFFFFF !important; } #main-content .zc-form__group :is(input, select, textarea):focus { border-color: #5EEAD4 !important; box-shadow: 0 0 12px rgba(94, 234, 212, 0.3) !important; background: rgba(13, 31, 60, 0.95) !important; } #main-content .zc-form__group label { color: #94A3B8 !important; } /* ═══════════════════════════════════════════════════════════ PREMIUM STOREFRONT LIGHT THEME — CLEAN & STANDARD ═══════════════════════════════════════════════════════════ */ html[data-theme="light"], html[data-theme="light"] body, body:has(.shop-page-wrap), .shop-page-wrap { color-scheme: light !important; background-color: #F8FAFC !important; /* Soft, glare-free clean canvas */ color: #0A1628 !important; } html[data-theme="light"] .shop-page-wrap { background: #F8FAFC !important; color: #0A1628 !important; } html[data-theme="light"] .shopbar { background: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; } html[data-theme="light"] .product-card, html[data-theme="light"] .shop-catgrid, html[data-theme="light"] .shop-cattile, html[data-theme="light"] .product-rail, html[data-theme="light"] .shop-procurement, html[data-theme="light"] .za-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #0A1628 !important; } html[data-theme="light"] .product-card:hover { box-shadow: 0 10px 25px rgba(10, 22, 40, 0.08) !important; border-color: #5EEAD4 !important; } html[data-theme="light"] .product-card-title, html[data-theme="light"] .product-card-title a, html[data-theme="light"] .shop-section-head h2, html[data-theme="light"] .shop-procurement-copy h2 { color: #0A1628 !important; } html[data-theme="light"] .product-card-brand, html[data-theme="light"] .product-card-sku, html[data-theme="light"] .shop-section-head p { color: #64748B !important; } /* About page research summary banner */ .za-research-banner{margin:28px 0 8px;padding:22px 24px;border:1px solid rgba(94,234,212,.35);border-radius:16px;background:linear-gradient(105deg,rgba(13,115,119,.24),rgba(10,22,40,.78));box-shadow:0 12px 28px rgba(0,0,0,.18)} .za-research-banner__head{max-width:820px}.za-research-banner__head h3{margin:8px 0 6px;color:#fff;font-size:1.35rem}.za-research-banner__head p{margin:0;color:#cbd5e1;line-height:1.9;font-size:.96rem}.za-research-banner__points{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}.za-research-banner__points span{flex:1 1 29%;min-width:210px;padding:10px 12px;border:1px solid rgba(94,234,212,.22);border-radius:10px;background:rgba(10,22,40,.45);color:#dbeafe;font-size:.83rem;line-height:1.8}.za-research-banner__points b{color:#5eead4;margin-left:4px}.za-research-banner__result{margin-top:15px;padding:10px 14px;border-right:3px solid #e6c200;background:rgba(230,194,0,.08);color:#e2e8f0;line-height:1.9;font-size:.82rem}.za-research-banner__result strong{color:#f4d84b}@media(max-width:700px){.za-research-banner{padding:18px 16px}.za-research-banner__points{display:grid;grid-template-columns:1fr;gap:7px}.za-research-banner__points span{min-width:0}.za-research-banner__head h3{font-size:1.15rem}} /* Research banner: consistent centered alignment */ .za-research-banner, .za-research-banner__head, .za-research-banner__head h3, .za-research-banner__head p, .za-research-banner__points, .za-research-banner__points span, .za-research-banner__result{text-align:center} .za-research-banner__head{margin-left:auto;margin-right:auto} .za-research-banner__points{justify-content:center} .za-research-banner__points span{display:flex;align-items:center;justify-content:center;gap:5px} .za-research-banner__result{border-right:0;border-top:3px solid #e6c200} @media(max-width:700px){.za-research-banner__points span{display:block}.za-research-banner__points b{display:block;margin:0 0 3px}} /* Final research banner typography and line integrity */ .za-research-banner__head, .za-research-banner__head h3, .za-research-banner__head p, .za-research-banner__points, .za-research-banner__points span, .za-research-banner__result{text-align:center !important} .za-research-banner__head{max-width:none !important;margin-left:auto;margin-right:auto} .za-research-banner__head p{white-space:nowrap;display:block;width:100%;font-size:.92rem} .za-research-banner__points span{display:block !important;flex:1 1 29%;white-space:normal;word-break:normal;overflow-wrap:normal} .za-research-banner__points b{display:inline-block !important;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;margin-left:5px} @media(max-width:700px){.za-research-banner__head p{white-space:normal}.za-research-banner__points b{display:block !important;margin:0 0 4px}} /* Academic research subtitle: centered alignment */ #academic .za-section-header .za-section-desc{text-align:center !important;margin-left:auto;margin-right:auto} /* About page typography alignment and Persian word integrity */ #main-content :is(.za-body,.za-lead,.za-card__body,.za-card__highlight,.za-timeline__card p,.za-step__content p,.za-cms-custom p){ text-align:right !important; direction:rtl; word-break:normal !important; overflow-wrap:break-word !important; hyphens:none !important; } #main-content :is(.za-section-header,.za-section-header .za-eyebrow,.za-section-header .za-h2,.za-section-header .za-section-desc){ text-align:center !important; margin-left:auto; margin-right:auto; } #main-content :is(.za-bridge-text,.za-timeline__card,.za-card,.za-step__content){text-align:right} #main-content :is(.za-timeline__date,.za-card__icon){margin-right:0} #main-content :is(.za-card__title,.za-timeline__card h3,.za-step__content h3){text-align:right;overflow-wrap:normal;word-break:normal} #main-content :is(.za-stat,.za-deliv,.za-scenario,.za-cta-final,.za-ribbon__inner){text-align:center} #main-content .za-research-banner :is(.za-research-banner__head,.za-research-banner__head h3,.za-research-banner__head p,.za-research-banner__points,.za-research-banner__points span,.za-research-banner__result){text-align:center !important} #main-content :is(.za-section-desc,.za-research-banner__head p){overflow-wrap:normal !important;word-break:normal !important} @media(max-width:700px){ #main-content :is(.za-body,.za-lead,.za-card__body,.za-card__highlight,.za-timeline__card p,.za-step__content p){text-align:right !important} #main-content :is(.za-section-header,.za-section-header .za-h2,.za-section-header .za-section-desc){text-align:center !important} } .za-journal-name{display:inline-block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;direction:ltr} .za-journal-name,.za-journal-name-parent{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;display:inline-block!important;direction:ltr}