/* SLR calm layer n3 — 2026-10-12 (calm.py). Loaded LAST on every page. Goal: same black/white template, fewer things competing for attention, one type scale, quieter motion. Nothing here hides indexable text; it only re-sizes, re-spaces and removes decoration (watermarks, English eyebrows, section numbers, custom cursor). */ /* ── one type scale for the whole site (Vazirmatn) ────────────────────────────── 14 · 16 · 18 · 20 · 28 · 40 · 56 (desktop) — body never under 15px on a phone */ :root{ --t-xs:.875rem; /* 14 — captions, meta */ --t-sm:.9375rem; /* 15 */ --t-body:1rem; /* 16 */ --t-lead:clamp(1.0625rem,1.2vw,1.1875rem); /* 17–19 */ --t-h3:clamp(1.125rem,1.5vw,1.3125rem); /* 18–21 */ --t-h2:clamp(1.75rem,3.4vw,2.625rem); /* 28–42 */ --t-h1:clamp(2.125rem,5vw,3.75rem); /* 34–60 */ --t-num:clamp(2.5rem,5vw,4rem); --calm-ease:cubic-bezier(.22,1,.36,1); } /* ══════════ every page ══════════ */ html{scroll-padding-top:84px} :where(a,button,summary,.btn){-webkit-tap-highlight-color:transparent} .btn,.btn-gold,.snav-cta,.sticky-btn,.path-btn,.sq-send{transition:transform .16s var(--calm-ease),opacity .2s,background .25s,border-color .25s} .btn:active,.btn-gold:active,.snav-cta:active,.sticky-btn:active,.path-btn:active,.sq-send:active{transform:scale(.97)} /* FAQ / objections: answers open with a short height + fade (progressive: Chrome 131+, others just open) */ @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .38s var(--calm-ease),opacity .3s,content-visibility .38s allow-discrete} details[open]::details-content{block-size:auto;opacity:1} } /* floating chat button: one quiet circle, never a second big pill on top of the sticky bar */ .sq-btn{background:#f5f5f7!important;color:#000!important;box-shadow:0 6px 20px rgba(0,0,0,.35)!important;font-size:14px!important} @media (max-width:860px){ .sq-btn{width:52px;height:52px;padding:0!important;justify-content:center;font-size:0!important;gap:0!important;border-radius:50%!important} .sq-btn svg{width:22px;height:22px} } .sticky-cta{background:rgba(10,10,11,.9)!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)} .sticky-price{font-size:13px!important} .sticky-price b{font-size:16px!important} .sticky-btn{background:#f5f5f7!important;color:#000!important;padding:13px 24px!important;font-size:15px!important} .sq-head p,.sq-alt a{font-size:13.5px!important} .sq-f input,.sq-f textarea{font-size:16px!important} /* 16px: iOS does not zoom the page on focus */ /* ══════════ inner pages (course, article, info) ══════════ */ [data-calm] .page-wm,[data-calm] .topbar{display:none!important} [data-calm] .section-num{display:none!important} [data-calm] .section-title span,[data-calm] .syl-head span{display:none!important} [data-calm] .page-photo{opacity:.55} [data-calm] .page-title{font-size:var(--t-h1)!important;font-weight:800!important;line-height:1.3!important;letter-spacing:-.02em} [data-calm] .page-sub{font-size:var(--t-lead)!important;line-height:1.95!important;max-width:34em} [data-calm] .hero-label{font-size:var(--t-xs)!important} [data-calm] .section{padding:14px 20px!important} [data-calm] .section-card{padding:28px 22px!important;border-radius:20px!important;background:rgba(255,255,255,.035)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} [data-calm] .section-head{margin-bottom:18px!important} [data-calm] .section-title{font-size:var(--t-h3)!important;font-weight:800!important;line-height:1.5!important} [data-calm] .desc-text,[data-calm] .who-item p,[data-calm] .vs-lead,[data-calm] .consult-text, [data-calm] .section-card .ans,[data-calm] details .ans,[data-calm] .syl li,[data-calm] .syl-method li, [data-calm] .who-note,[data-calm] .read-more li,[data-calm] .obj p{font-size:var(--t-sm)!important;line-height:2!important} [data-calm] .who-item h3,[data-calm] .syl-head h3,[data-calm] .syl-method h3,[data-calm] .obj h3{font-size:var(--t-body)!important;font-weight:800!important} [data-calm] summary,[data-calm] summary h3,[data-calm] .q6{font-size:var(--t-sm)!important;line-height:1.8!important} [data-calm] .cf-label{font-family:'Vazirmatn',sans-serif!important;font-size:var(--t-xs)!important;letter-spacing:0!important;text-transform:none!important} [data-calm] .cf-value{font-size:22px!important} [data-calm] .cf-note,[data-calm] .facts-box small{font-size:13px!important} [data-calm] .facts-box dt,[data-calm] .facts-box dd{font-size:var(--t-sm)!important} [data-calm] .breadcrumb{font-size:13px!important} /* the consultation form sits right under the course facts now: give it the room of a primary action */ [data-calm] #register-section .section-card{background:#f5f5f7!important;color:#1d1d1f;border-color:#f5f5f7!important} [data-calm] #register-section .section-title,[data-calm] #register-section .consult-title{color:#000!important} [data-calm] #register-section .consult-text,[data-calm] #register-section label{color:#3a3a3c!important} [data-calm] #register-section .consult-icon{display:none} [data-calm] #register-section input,[data-calm] #register-section select,[data-calm] #register-section textarea{background:#fff!important;color:#000!important;border:1px solid rgba(0,0,0,.16)!important;font-size:16px!important} [data-calm] #register-section input::placeholder{color:#8e8e93!important} [data-calm] #register-section .btn-gold{background:#000!important;color:#fff!important} [data-calm] #register-section .form-msg{color:#1d1d1f} /* ══════════ homepage ══════════ */ [data-calm=home] .sec{padding-block:clamp(72px,10vw,140px)} [data-calm=home] .works,[data-calm=home] .final{padding-block:clamp(72px,9vw,128px)} [data-calm=home] .hero h1{font-size:var(--t-h1);line-height:1.15} [data-calm=home] .h2{font-size:var(--t-h2);line-height:1.25;letter-spacing:-.02em} [data-calm=home] .h3{font-size:var(--t-h3)} [data-calm=home] .lede{font-size:var(--t-lead)} [data-calm=home] .display,[data-calm=home] .cta .display{font-size:clamp(2.25rem,5.4vw,4.25rem);line-height:1.15} [data-calm=home] .quote{font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:1.7} [data-calm=home] .stat b{font-size:var(--t-num)} [data-calm=home] .stat{padding:clamp(26px,4vw,44px) 10px} [data-calm=home] .guard-num{font-size:clamp(5rem,11vw,9rem)} [data-calm=home] .price{font-size:clamp(1.45rem,2vw,1.75rem)} [data-calm=home] .faq summary{font-size:var(--t-body)} [data-calm=home] .facts-row li,[data-calm=home] .meta,[data-calm=home] .shot figcaption,[data-calm=home] .facts dt{font-size:var(--t-xs)} /* section eyebrows («۰۴ — دوره‌ها») were numbering things that are not a sequence; the headings carry it */ [data-calm=home] main>section:not(.hero) .label:not(.step .label), [data-calm=home] main>div>section .label,[data-calm=home] .cta .label{display:none} /* decoration that competed with the content */ [data-calm=home] .band{display:none} [data-calm=home] .cur{display:none!important} [data-calm=home] .work{transform:none!important} [data-calm=home] .prog{display:none} /* one calm reveal: short fade, small lift */ [data-calm=home] .fx .rv{transform:translateY(12px);transition:opacity .6s var(--calm-ease),transform .7s var(--calm-ease)} /* hero: the three paths are the only choice on the first screen */ [data-calm=home] .hero{min-height:100svh} [data-calm=home] .alt-ways{margin:16px 0 0;font-size:var(--t-sm);color:var(--ink-2);text-shadow:0 1px 14px rgba(0,0,0,.95)} [data-calm=home] .alt-ways a{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-2)} [data-calm=home] .alt-ways a:hover{text-decoration-color:currentColor} [data-calm=home] .fx .paths{animation:fadeUp .8s var(--ease-out) 1s backwards} [data-calm=home].intro-hold .paths{animation-play-state:paused} /* courses: extra links read as links, not three more buttons */ [data-calm=home] .more-courses{gap:6px 22px} [data-calm=home] .more-courses .btn{padding:6px 0;box-shadow:none;background:none;border-radius:0;font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--line-2)} [data-calm=home] .more-courses .btn:hover{color:var(--ink);text-decoration-color:currentColor} /* Instagram / YouTube: kept, but as a compact pair near the end instead of a full section after the hero */ [data-calm=home] .social{padding-block:clamp(56px,7vw,96px) 0} [data-calm=home] .social .h2{font-size:clamp(1.5rem,2.6vw,2rem)} [data-calm=home] .soc{min-height:0;padding:22px 24px;grid-template-rows:auto auto auto} [data-calm=home] .soc b{font-size:clamp(1.25rem,1.8vw,1.5rem)} [data-calm=home] .soc-ic{width:52px;height:52px;border-radius:15px} [data-calm=home] .soc-ic svg{width:28px;height:28px} [data-calm=home] .soc-d{margin-top:12px;font-size:var(--t-sm)} [data-calm=home] .soc-go{margin-top:14px;padding-top:12px;font-size:var(--t-sm)} /* last call: one primary button, one quiet alternative */ [data-calm=home] .cta .row .btn-pri{padding:17px 36px} @media (max-width:760px){ [data-calm=home] .hero{padding-top:96px} [data-calm=home] .grad-wall{grid-auto-rows:110px} } @media (prefers-reduced-motion:reduce){ details::details-content{transition:none!important} [data-calm=home] .fx .rv{transform:none} } /* home: snap the leftover in-between sizes (13.1, 13.4, 14.1, 14.4, 14.7, 15.2, 16.8, 18.4 px …) onto the scale */ [data-calm=home] .hero-sub{font-size:var(--t-lead)!important;line-height:1.9} [data-calm=home] :is(.price small,.work figcaption,.f-bottom,.label,.path-btn small,.reel-ctrl output,.facts-row li,.meta,.facts dt,.shot figcaption,.guard p,.kmeta){font-size:var(--t-xs)} [data-calm=home] :is(.stat span,.course p,.course ul,.cite,.facts dd,.soc-h,.soc-d,.faq .ans,.f-grid ul,.f-grid address,.pillars li,.nav .btn,.nav ul a){font-size:var(--t-sm)} [data-calm=home] :is(.step p,.more,.cta .row .btn,.course .go){font-size:var(--t-body)} [data-calm=home] :is(.paths-q,.path-btn b){font-size:var(--t-lead)} [data-calm=home] .glance .def{font-size:var(--t-lead)} [data-calm=home] .pillars li b{font-size:1.375rem} [data-calm=home] .cta .row .btn-pri{font-size:var(--t-lead)} /* shorter scroll: the path steps and course cards were spaced for a desktop screen */ [data-calm=home] .step{padding:clamp(24px,4vh,48px) 0} [data-calm=home] .course{padding:26px 22px 22px} [data-calm=home] .course ul{margin:16px 0 18px;padding-top:14px} [data-calm=home] .courses{margin-top:32px} [data-calm=home] .glance{gap:28px} [data-calm=home] .cta{margin-top:clamp(56px,8vw,110px)} /* inner pages: nothing a visitor has to read stays under 13px */ [data-calm] #register-section label,[data-calm] .field label{font-size:var(--t-xs)!important} [data-calm] :is(.cert-note,.quick-cta-tel,.ws-more,.read-more-all,.vs-x,.syl-note,.syl-support){font-size:var(--t-xs)!important} [data-calm] :is(.vs-tag,.syl-n,.sl-count,.upd6,.upd6 time){font-size:12.5px!important;letter-spacing:0!important} [data-calm] footer.site-footer{font-size:14.5px!important} [data-calm] footer.site-footer :is(.footer-head,.footer-copy){font-size:13px!important;letter-spacing:.02em!important} /* FIX: an old homepage stylesheet still in sets .stat{opacity:0} until a class the new page never adds — «۷۰۰+ هنرجو / ۸+ سال / ۱–۵ نفر» were invisible on the live site */ [data-calm=home] .stat{opacity:1!important;transform:none!important;animation:none!important} /* the three pillars are not a sequence: no 01/02/03 */ [data-calm=home] .pillars li b{display:none} [data-calm=home] .pillars li{font-weight:700;color:var(--ink)} @media (max-width:760px){ [data-calm=home] .hero{min-height:0;padding-bottom:40px} [data-calm=home] .facts-row li{border:0;padding-inline:0 16px} } @media (max-width:820px){[data-calm=home] .guard-num,[data-calm=home] .guard-bar{display:none}[data-calm=home] .guard p{margin:0 0 6px}} /* cards inside cards were the main source of visual noise on course pages: inner items become plain rows */ [data-calm] .section-card :is(.who-item,.syl-stage){background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.1)!important;border-radius:0!important;padding:18px 2px!important;box-shadow:none!important} [data-calm] .section-card .who-grid,[data-calm] .section-card .syl{gap:0!important} /* Persian is cursive: letter-spacing pulls the letters apart */ [data-calm] footer.site-footer :not(.footer-name){letter-spacing:normal!important} /* FIX: the old homepage stylesheet caps every