@font-face{font-family:Vazirmatn;src:url('assets/fonts/Vazirmatn.woff2') format('woff2');font-weight:100 900;font-display:swap} :root{color-scheme:light;--ink:#0a1725;--navy:#10263a;--mineral:#31566c;--sky:#86adbd;--mist:#dce7ea;--pearl:#f3f6f7;--white:#fbfcfc;--champagne:#c7b07a;--text:#122333;--muted:#60717d;--surface:#fbfcfc;--line:rgba(16,38,58,.15);--glass:rgba(243,246,247,.88);--soft:0 16px 44px rgba(10,23,37,.08);--lift:0 30px 80px rgba(10,23,37,.14);--max:1280px;--article:790px;--r-control:14px;--r-small:18px;--r-card:28px;--r-feature:36px;--ease:cubic-bezier(.16,1,.3,1)} [data-theme=dark]{color-scheme:dark;--pearl:#0a1725;--white:#10263a;--text:#edf3f5;--muted:#9eb2bc;--surface:#11283c;--mist:#173249;--mineral:#8fb3c2;--line:rgba(220,231,234,.16);--glass:rgba(10,23,37,.9);--soft:0 16px 44px rgba(0,0,0,.2);--lift:0 30px 80px rgba(0,0,0,.3)} /* "Aster" - an alternate soft-violet palette for landing pages, opt-in via (class name kept as-is - only the token values changed - to avoid a wider rename across every rebuilt template). Every component below (article-hero, tool-card, guarantee-block, faq-list...) is built entirely on these design tokens, so swapping just the token *values* here re-skins the whole shared library into a genuinely different mood - no component CSS duplicated. Added 2026-09-04, REPLACED 2026-09-04 same day: the first attempt ("Ember", a dark terracotta/brown skin) was rejected by the owner outright ("اصلا رنگبندی صفحه ای که داری میسازی رو دوست ندارم") - too dark, the brown/amber hue itself unwanted, didn't match the rest of the site, and the whole idea of a heavy "challenge mood" wasn't wanted either. This replacement is deliberately lighter and closer to the main site's own feel: a light lavender surface (not a dark chocolate one) with a muted violet accent, picked by the owner from 4 live swatch options. Note: the old Ember dark-mode variant had a real bug independent of the color choice - its "light" mode background (`--pearl`) was `#1a0f0a`, an almost-black brown, so switching to light mode barely changed anything. Fixed here too: this palette's light --pearl is a real light color. */ html.theme-warm{--ink:#1e1b33;--navy:#2a2547;--mineral:#6b5ca8;--sky:#b7aee0;--mist:#eeecf8;--pearl:#f6f5fb;--white:#fcfbff;--champagne:#8577c9;--text:#1e1b33;--muted:#726a8f;--surface:#fcfbff;--line:rgba(30,27,51,.15);--glass:rgba(246,245,251,.88)} html.theme-warm[data-theme=dark]{--pearl:#17151f;--white:#211e33;--text:#ece9f7;--muted:#a89fc9;--surface:#1d1a2c;--mist:#2a2547;--mineral:#a89bdb;--champagne:#9d8fe0;--line:rgba(236,233,247,.16);--glass:rgba(23,21,31,.9)} /* "Yalda Night" - a one-off seasonal palette for page-yalda.php only (an archived 2020 Yalda-night flash-sale campaign for کارشناس جذب شوید, real dates/prices kept as-is per owner instruction 2026-09-04/05 - "با همون تاریخ و قیمت بساز، مهم نیست"). Not meant as a third general-purpose category skin like Aster/the default champagne - grounded specifically in real assets from that actual campaign: a low-poly pomegranate graphic (shab-e yalda's signature fruit) and a warm sunset-toned teaser video frame, both really used/produced for this promo. Light mode leans warm cream+pomegranate (a "dawn" mood); dark mode leans deep midnight plum+candlelight gold (the "longest night" mood Yalda itself is named for) - unlike Aster, this page's dark mode is arguably the *more* on-theme one, not just an accessibility fallback. */ html.theme-yalda{--ink:#3a0d1f;--navy:#4a1228;--mineral:#a8172f;--sky:#e8a0ae;--mist:#fbeaea;--pearl:#fdf6ee;--white:#fffdfa;--champagne:#c9a04a;--text:#3a0d1f;--muted:#8a5a63;--surface:#fffdfa;--line:rgba(58,13,31,.15);--glass:rgba(253,246,238,.88)} html.theme-yalda[data-theme=dark]{--pearl:#170a1a;--white:#241228;--text:#f3e4d9;--muted:#c9a3ab;--surface:#20101f;--mist:#2e1526;--mineral:#e0455f;--champagne:#e0b563;--line:rgba(243,228,217,.16);--glass:rgba(23,10,26,.9)} /* "Beacon" - trust-blue + achievement-gold, a 4th one-off palette for page-results.php only (a real proof/testimonial wall - dozens of real audio/video results students sent in, organized by goal category: car, income, house, wellbeing, relationships). Neither the default champagne/ navy (courses) nor Aster (challenges) nor Yalda's pomegranate/candlelight fit a page whose whole point is "look what real people already achieved" - deep trust-blue for credibility + a warm gold accent for the achievement/trophy feeling, picked via the ui-ux-pro-max skill's own color search ("achievement growth trust" -> "Trust blue + achievement gold") and re-mapped onto this project's existing token names, same swap-the-values-not-the-components pattern as every other palette here. */ html.theme-beacon{--ink:#063a4a;--navy:#0a4d61;--mineral:#0369a1;--sky:#7fc4e0;--mist:#e6f3f8;--pearl:#f7fbfd;--white:#ffffff;--champagne:#a16207;--text:#063a4a;--muted:#4d7a89;--surface:#ffffff;--line:rgba(6,58,74,.15);--glass:rgba(247,251,253,.88)} html.theme-beacon[data-theme=dark]{--pearl:#061a22;--white:#0d2b36;--text:#e3f2f7;--muted:#8fb4c0;--surface:#0a2530;--mist:#123544;--mineral:#4db8e8;--champagne:#e0b34a;--line:rgba(227,242,247,.16);--glass:rgba(6,26,34,.9)} *,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;min-width:320px;overflow-x:hidden;background:var(--pearl);color:var(--text);font:16px/1.9 Vazirmatn,Tahoma,sans-serif;transition:background .25s,color .25s}body.menu-lock{overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}img{display:block;max-width:100%}.shell{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:3px solid var(--champagne);outline-offset:4px}::selection{background:var(--champagne);color:var(--ink)} /* Shared SVG icon system (see pa_icon() in functions.php) - sized off the inherited font-size exactly like the old icon font was, so every existing "X i{font-size:...}" rule across this file keeps working unchanged. */ .icon{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex:none} /* Shared scroll-reveal utility - opt-in per element via class="reveal" (see blog.js). A subtle fade + small rise, nothing structural - added 2026-09-04 as a pure polish pass, no design-system/token change. Already covered by the site's one global prefers-reduced-motion rule below (transition-duration:0s), so a reduced-motion visitor just sees content appear instantly instead of animating - no separate override needed. */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .reveal.in{opacity:1;transform:none} .skip{position:fixed;z-index:1000;top:10px;right:16px;padding:9px 16px;border-radius:var(--r-control);background:var(--surface);transform:translateY(-160%)}.skip:focus{transform:none}.header{position:fixed;z-index:50;inset:0 0 auto;height:82px;border-bottom:1px solid transparent;transition:.25s}.header.scrolled{background:var(--glass);border-color:var(--line);border-radius:0 0 24px 24px;backdrop-filter:blur(20px);box-shadow:0 8px 30px rgba(10,23,37,.06)}.nav{height:100%;display:flex;align-items:center;gap:28px}.logo{display:flex;align-items:center;gap:11px;min-width:max-content}.logo-mark{width:42px;height:42px;border-radius:50%;object-fit:contain;flex:none}.logo strong,.logo small{display:block;line-height:1.3}.logo strong{font-size:14px}.logo small{margin-top:3px;color:var(--muted);font-size:10px}.desktop-menu{display:flex;gap:30px;margin-inline:auto;color:var(--muted);font-size:13px;font-weight:700}.desktop-menu a{position:relative;padding:12px 0}.desktop-menu a:after{content:"";position:absolute;right:0;bottom:5px;width:0;height:1px;background:var(--champagne);transition:.25s}.desktop-menu a:hover:after,.desktop-menu a[aria-current=page]:after{width:100%}.nav-actions{display:flex;align-items:center;gap:10px}.icon-btn,.nav-cta,.button{min-height:46px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}.icon-btn{width:46px;display:grid;place-items:center;font-size:20px}.icon-btn:hover{background:var(--mist);border-color:var(--sky)}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding-inline:19px;font-size:12px;font-weight:850}.nav-cta,.button.primary{border-color:var(--ink);background:var(--ink);color:#edf3f5}.button{min-height:52px}.button:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:var(--soft)}.button.secondary{background:var(--mist)}.button.ghost{background:transparent}.button:active,.icon-btn:active{transform:translateY(1px) scale(.985)}.menu-open{display:none} .drawer{width:min(100%,450px);height:100%;max-height:none;margin:0 0 0 auto;padding:24px;border:0;border-left:1px solid var(--line);border-radius:0 30px 30px 0;background:var(--pearl);color:var(--text)}.drawer::backdrop{background:rgba(5,13,22,.74);backdrop-filter:blur(7px)}.drawer-head{display:flex;align-items:center;justify-content:space-between;font-weight:850}.drawer nav{margin:50px 0}.drawer nav a{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--line);font-size:20px;font-weight:750}.drawer nav b{color:var(--muted);font-size:10px}.drawer-course{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;margin-top:18px;padding:10px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}.drawer-course img{width:72px;height:72px;border-radius:15px;object-fit:cover;filter:saturate(.35) sepia(.04) hue-rotate(160deg)}.drawer-course small,.drawer-course strong{display:block}.drawer-course small{color:var(--mineral);font-size:10px}.drawer-course strong{font-size:14px} /* Login modal CSS moved to its own login-modal.css 2026-09-06 - it must render on every real page including the homepage (own separate homepage.css), so it can't live inside this blog-only stylesheet anymore. See login-modal.css's own docblock for the full reasoning. */ .archive-hero{position:relative;min-height:650px;padding:160px 0 100px;overflow:hidden;background:var(--ink);color:#edf3f5}.archive-hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),rgba(134,173,189,.07) calc(12.5% - 1px) 12.5%);mask-image:linear-gradient(to bottom,#000,transparent 92%)}.archive-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--sky);font-size:11px;font-weight:850}.eyebrow:before{content:"";width:34px;height:1px;background:var(--champagne)}.archive-hero h1{max-width:800px;margin:0;font-size:clamp(38px,4.6vw,64px);line-height:1.15;letter-spacing:-.045em}.archive-hero h1 em{color:var(--sky);font-style:normal;font-weight:500}.archive-lead{max-width:500px;margin:0 0 10px;color:#9eb2bc;font-size:18px}.archive-index{display:flex;gap:18px;margin-top:48px;color:#8fa5af;font-size:11px}.archive-index b{color:var(--champagne);font-size:22px} /* .card-body h2 (archive/content-card grid title) reduced 2026-09-07 per owner report "عنوان روی کارت های سایت خیلی بزرگه" - was clamp(24px,2.4vw, 34px), a genuinely oversized title relative to its card (confirmed via a live screenshot before touching it, per the standing rule not to guess which "cards" without checking first - there are 2 unrelated components both called "content-card", see parvaresheafkar-project-status memory). Homepage.css's own separate .content-card h3 (fixed 23px) was checked too and was already reasonably sized - left untouched. New size roughly matches .related-card h3's existing 24px "smaller card" convention. */ .archive-main{padding:90px 0 140px}.filter-bar{position:sticky;z-index:15;top:96px;display:flex;align-items:center;justify-content:space-between;gap:26px;margin-bottom:50px;padding:13px 15px 13px 18px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--soft);backdrop-filter:blur(18px)}.filters{display:flex;flex-wrap:wrap;gap:8px}.filter{min-height:45px;padding:0 18px;border:0;border-radius:13px;background:transparent;font-size:12px;font-weight:850}.filter[aria-pressed=true]{background:var(--ink);color:#edf3f5}.filter-count{color:var(--muted);font-size:11px}.filter-count b{color:var(--text)}.content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.content-card{position:relative;grid-column:span 4;min-height:520px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--soft);transition:transform .3s var(--ease),box-shadow .3s}.content-card:nth-child(1),.content-card:nth-child(6){grid-column:span 8}.content-card[hidden]{display:none}.content-card:hover{transform:translateY(-6px);box-shadow:var(--lift)}.card-visual{position:relative;height:250px;overflow:hidden;background:var(--navy)}.content-card:nth-child(1) .card-visual,.content-card:nth-child(6) .card-visual{height:330px}.card-visual:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 47px,rgba(255,255,255,.05) 48px 49px),linear-gradient(145deg,rgba(134,173,189,.18),transparent 55%)}.card-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.35) sepia(.04) hue-rotate(160deg) contrast(1.04)}.card-kind{position:absolute;z-index:2;right:18px;top:18px;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:12px;background:rgba(10,23,37,.84);color:#edf3f5;font-size:10px;font-weight:850;backdrop-filter:blur(10px)}.card-kind i{color:var(--champagne)}.visual-icon{position:absolute;left:28px;bottom:25px;color:var(--champagne);font-size:66px}.wave{position:absolute;inset:auto 24px 30px 100px;height:60px;display:flex;align-items:center;gap:5px;direction:ltr}.wave i{width:3px;border-radius:9px;background:var(--sky);height:var(--h);opacity:.8}.play-orbit{position:absolute;left:30px;bottom:28px;width:74px;height:74px;display:grid;place-items:center;border:1px solid rgba(237,243,245,.3);border-radius:50%;color:#edf3f5;font-size:24px}.play-orbit:after{content:"";position:absolute;inset:-9px;border:1px solid rgba(199,176,122,.42);border-radius:50%}.card-body{flex:1;display:flex;flex-direction:column;padding:25px}.card-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px}.card-meta b{color:var(--mineral)}.card-body h2{margin:14px 0 12px;font-size:clamp(19px,1.9vw,26px);line-height:1.4;letter-spacing:-.03em}.card-body p{margin:0;color:var(--muted);font-size:13px}.card-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:12px;font-weight:850}.card-link i{color:var(--champagne)} /* Real UX bug fixed 2026-09-06 (owner: whole card should be clickable, not just this bottom link's small text) - stretched-link technique: the .card-link is still the one real, semantic, keyboard-focusable anchor (nothing new added), but its ::after covers the entire .content-card (the nearest position:relative ancestor), so a click ANYWHERE on the card - image, title, excerpt - activates that same link. */ .card-link:after{content:"";position:absolute;inset:0} .empty-state{display:none;grid-column:1/-1;padding:80px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-card)}.empty-state.show{display:block}.empty-state i{font-size:48px;color:var(--mineral)} .breadcrumb{padding-top:118px}.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0;padding:0;list-style:none;color:var(--muted);font-size:11px}.breadcrumb li{display:flex;align-items:center;gap:9px}.breadcrumb li:not(:last-child):after{content:"/";color:var(--champagne)}.article-hero{padding:45px 0 70px}.article-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(48px,8vw,110px);align-items:end}.article-hero h1{margin:12px 0 25px;font-size:clamp(32px,4vw,52px);line-height:1.22;letter-spacing:-.04em}.article-deck{max-width:720px;color:var(--muted);font-size:18px}.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.meta-chip{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 13px;border:1px solid var(--line);border-radius:13px;color:var(--muted);font-size:11px}.meta-chip b{color:var(--text)}.meta-chip[href]:hover{border-color:var(--champagne);color:var(--text)}.hero-panel{position:relative;min-height:450px;overflow:hidden;border-radius:var(--r-feature);background:var(--ink);box-shadow:var(--lift)}.hero-panel img{width:100%;height:100%;min-height:450px;object-fit:cover;filter:saturate(.34) sepia(.05) hue-rotate(160deg) contrast(1.04)}.hero-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,23,37,.76),transparent 58%)}.hero-panel-label{position:absolute;z-index:2;right:24px;bottom:24px;color:#edf3f5}.hero-panel-label small,.hero-panel-label strong{display:block}.hero-panel-label small{color:var(--champagne)}.hero-panel-label strong{font-size:22px}.article-layout{display:grid;grid-template-columns:220px minmax(0,var(--article));gap:60px;justify-content:center;padding:50px 0 120px}.article-rail{position:relative}.article-rail-inner{position:sticky;top:112px}.progress-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:var(--muted);font-size:10px}.progress-track{height:3px;background:var(--line)}.progress-bar{width:0;height:100%;background:var(--champagne)}.toc{margin-top:32px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.toc strong{display:block;margin-bottom:12px;font-size:12px}.toc a{display:block;padding:7px 0;color:var(--muted);font-size:11px}.toc a.active{color:var(--text);font-weight:800}.toc-discussion{margin-top:8px!important;padding-top:15px!important;border-top:1px solid var(--line);color:var(--text)!important;font-weight:850!important}.rail-share{display:flex;gap:8px;margin-top:18px}.rail-share button{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:18px}.article-body{min-width:0}.article-body>p,.article-body li{font-size:18px;line-height:1.9}.article-body span[style*="font-size"]{font-size:inherit!important}.article-body img{max-width:100%;height:auto;border-radius:var(--r-card)}.article-body>p{margin:0 0 20px}.article-body h2{scroll-margin-top:110px;margin:56px 0 22px;font-size:clamp(22px,2.6vw,30px);line-height:1.4;letter-spacing:-.02em}.article-body h3{margin:40px 0 16px;font-size:22px}.article-body blockquote{position:relative;margin:52px 0;padding:34px 38px 34px 90px;border:0;border-radius:var(--r-card);background:var(--ink);color:#edf3f5;font-size:25px;line-height:1.8}.article-body blockquote:after{content:'«';position:absolute;left:28px;top:9px;color:var(--champagne);font-size:82px;line-height:1}.article-body ul{padding-right:23px}.internal-link{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;margin:42px 0;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--soft);transition:.25s}.internal-link:hover{transform:translateX(-5px);border-color:var(--sky)}.internal-link>i{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:var(--mist);color:var(--mineral);font-size:23px}.internal-link small,.internal-link strong{display:block}.internal-link small{color:var(--muted);font-size:10px}.internal-link strong{font-size:15px}.internal-link>span:last-child{color:var(--champagne)} .media-hero{margin:10px 0 55px;padding:24px;border-radius:var(--r-feature);background:var(--ink);color:#edf3f5;box-shadow:var(--lift)}.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#07111c}.video-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.32) sepia(.04) hue-rotate(160deg)}.video-frame video{width:100%;height:100%;object-fit:cover}.video-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,17,28,.72),transparent)}.media-play{position:absolute;z-index:2;inset:50% auto auto 50%;width:82px;height:82px;display:grid;place-items:center;translate:-50% -50%;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(10,23,37,.55);color:#fff;font-size:28px;backdrop-filter:blur(9px)}.media-play.playing i:before{content:"\e99a"}.media-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 5px 0}.media-caption small{color:#91a7b2}.audio-player{padding:34px}.audio-cover{display:grid;grid-template-columns:110px 1fr;gap:25px;align-items:center}.audio-cover img{width:110px;height:110px;border-radius:24px;object-fit:cover;filter:saturate(.35) sepia(.04) hue-rotate(160deg)}.audio-cover small,.audio-cover strong{display:block}.audio-cover small{color:var(--champagne)}.audio-cover strong{font-size:24px}.audio-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:30px}.audio-controls .media-play{position:static;translate:0;flex:none;width:64px;height:64px}.seek{position:relative;flex:1 1 90px;height:5px;border-radius:9px;background:#294257;cursor:pointer}.seek span{display:block;width:0%;height:100%;border-radius:inherit;background:var(--champagne)}.audio-time{flex:none;color:#9eb2bc;font-size:11px;direction:ltr}.audio-speed{flex:none;min-width:42px;height:34px;padding:0 10px;border:1px solid rgba(237,243,245,.18);border-radius:10px;background:transparent;color:#dce7ea;font-size:11px;font-weight:850;direction:ltr;transition:.2s}.audio-speed:hover{background:rgba(237,243,245,.08);border-color:rgba(237,243,245,.3)}.audio-mute{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:#9eb2bc;font-size:19px;transition:.2s}.audio-mute:hover{color:#dce7ea} .post-tools{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:76px}.tool-card{padding:26px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}.tool-card h3{margin:0 0 8px;font-size:20px}.tool-card>p{margin:0 0 20px;color:var(--muted);font-size:12px}.share-list{display:flex;flex-wrap:wrap;gap:8px}.share-list button{min-width:46px;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:13px;background:var(--pearl);font-size:11px;font-weight:800}.share-list button:hover{background:var(--mist)}.rating{display:flex;direction:ltr;justify-content:flex-end}.rating button{padding:0 3px;border:0;background:none;color:#9fb0b8;font-size:27px}.rating button.active,.rating button:hover{color:var(--champagne)}.rating-result{margin-top:12px;color:var(--muted);font-size:11px}.author-box{display:grid;grid-template-columns:92px 1fr;gap:24px;align-items:center;margin-top:25px;padding:25px;border-radius:var(--r-card);background:var(--mist)}.author-avatar{width:92px;height:92px;overflow:hidden;border-radius:24px;background:var(--navy)}.author-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:saturate(.34) sepia(.05) hue-rotate(160deg)}.author-box h3{margin:0 0 7px;font-size:22px}.author-box p{margin:0;color:var(--muted);font-size:13px} .related-section{padding:95px 0;background:var(--mist)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.section-head h2{margin:0;font-size:clamp(34px,5vw,58px)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.related-card{min-height:280px;display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);transition:.25s}.related-card:hover{transform:translateY(-5px);box-shadow:var(--soft)}.related-card i{color:var(--champagne);font-size:27px}.related-card small{margin-top:35px;color:var(--mineral);font-weight:800}.related-card h3{margin:8px 0;font-size:24px;line-height:1.5}.related-card span{margin-top:auto;color:var(--muted);font-size:11px}.course-related{padding:95px 0}.course-banner{display:grid;grid-template-columns:.65fr 1.35fr;overflow:hidden;border-radius:var(--r-feature);background:var(--ink);color:#edf3f5;box-shadow:var(--lift)}.course-banner figure{margin:0;min-height:430px;background:var(--navy)}.course-banner img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.34) sepia(.05) hue-rotate(160deg)}.course-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(35px,6vw,80px)}.course-copy small{color:var(--champagne)}.course-copy h2{margin:12px 0 15px;font-size:clamp(38px,5vw,64px)}.course-copy p{max-width:580px;color:#9eb2bc}.course-copy .button{align-self:flex-start;margin-top:20px;background:#edf3f5;color:var(--ink)} /* .course-banner img's default filter tints toward navy/steel blue - close enough to this palette's own violet mood that it doesn't need fighting the way the old amber/terracotta Ember skin did, but nudged a bit further toward violet so photos read as intentionally tinted, not just "the default blue". */ html.theme-warm .course-banner img{filter:saturate(.36) sepia(.06) hue-rotate(200deg)} .discussion{padding:100px 0 135px;background:var(--white)}.discussion-shell{width:min(calc(100% - 48px),950px);margin-inline:auto}.discussion-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.discussion-head h2{margin:0;font-size:clamp(38px,5vw,62px)}.discussion-head p{margin:0;color:var(--muted)}.comment-form{padding:28px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--pearl)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field label{font-size:11px;font-weight:800}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface);outline:0}.field input{height:52px;padding-inline:15px}.field textarea{min-height:130px;padding:13px 15px;resize:vertical}.field input:focus,.field textarea:focus{border-color:var(--mineral);box-shadow:0 0 0 3px color-mix(in srgb,var(--mineral) 18%,transparent)}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:15px}.anonymous{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:11px}.anonymous input{width:18px;height:18px;accent-color:var(--mineral)}.form-status{min-height:26px;margin-top:10px;color:var(--mineral);font-size:11px}.comments-sort{display:flex;gap:8px;margin-top:28px}.comments-sort a{padding:8px 16px;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:11px;font-weight:800;text-decoration:none}.comments-sort a.active{border-color:var(--ink);background:var(--ink);color:#edf3f5}.comments{display:grid;gap:16px;margin-top:20px;transition:opacity .2s}.comment{padding:23px;border:1px solid var(--line);border-radius:24px;background:var(--surface);scroll-margin-top:110px;transition:border-color .3s,background .3s}.comment:target{border-color:var(--champagne);background:color-mix(in srgb,var(--champagne) 10%,var(--surface))}.comment.admin{margin-right:45px;border-color:color-mix(in srgb,var(--champagne) 48%,var(--line));background:color-mix(in srgb,var(--mist) 45%,var(--surface))}.comment.reply{margin-right:70px}.comment-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.comment-person{display:flex;align-items:center;gap:12px}.avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--mist);color:var(--mineral);font-weight:900}.comment-person strong,.comment-person small{display:block;line-height:1.5}.comment-person small{color:var(--muted);font-size:9px}.role{padding:5px 9px;border-radius:9px;background:var(--mist);color:var(--mineral);font-size:9px;font-weight:850}.admin .role{background:var(--champagne);color:var(--ink)}.comment>p{margin:18px 0 12px}.reply-btn{border:0;background:transparent;color:var(--mineral);font-size:11px;font-weight:800}.reply-box{display:none;margin-top:14px}.reply-box.open{display:grid;grid-template-columns:1fr auto;gap:9px}.reply-box input{height:46px;padding-inline:13px;border:1px solid var(--line);border-radius:12px;background:var(--pearl)} .mobile-course-trigger{display:none;position:fixed;z-index:30;left:16px;bottom:16px;min-height:52px;align-items:center;gap:9px;padding:0 16px;border:1px solid rgba(237,243,245,.18);border-radius:16px;background:var(--ink);color:#edf3f5;box-shadow:var(--lift);font-size:11px;font-weight:850}.course-sheet{width:min(100% - 24px,520px);max-height:82svh;margin:auto auto 12px;padding:22px;border:1px solid var(--line);border-radius:28px;background:var(--pearl);color:var(--text)}.course-sheet::backdrop{background:rgba(5,13,22,.72);backdrop-filter:blur(6px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.sheet-head h2{margin:0;font-size:22px}.sheet-courses{display:grid;gap:10px} .footer{position:relative;padding-top:95px;background:#07111c;color:#dce7ea}.footer-grid{display:grid;grid-template-columns:1.3fr .75fr .8fr .9fr;gap:44px;padding-bottom:70px}.footer p{color:#849ba6}.footer-title{display:block;margin-bottom:20px;color:#aebfc7;font-size:13px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}.footer-links a{color:#849ba6;font-size:12px}.footer-links a:hover{color:var(--champagne)}.contact-list{display:grid;gap:9px}.contact{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 10px;border:1px solid rgba(220,231,234,.1);border-radius:17px;color:#9eb2bc}.contact i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(143,179,194,.1);color:var(--champagne);font-size:21px}.footer-bottom{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #263a4b;color:#647b86;font-size:10px}.footer-badges{display:flex;align-items:center}.footer-badges img{display:block;width:74px;height:74px;border-radius:10px;background:#fff;padding:4px} .footer-bottom-text{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px} .footer-bottom .top{flex:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid rgba(220,231,234,.18);border-radius:12px;background:transparent;color:#dce7ea;font-size:10px;font-weight:850;cursor:pointer;transition:.2s} .footer-bottom .top:hover{border-color:var(--champagne);color:var(--champagne)}.footer .logo small{color:#849ba6} .toast{position:fixed;z-index:100;left:24px;bottom:24px;max-width:330px;padding:14px 18px;border-radius:15px;background:var(--ink);color:#edf3f5;box-shadow:var(--lift);font-size:12px;transform:translateY(130%);opacity:0;transition:.35s var(--ease)}.toast.show{transform:none;opacity:1} @media(max-width:1024px){.archive-hero-grid{gap:45px}.content-card,.content-card:nth-child(1),.content-card:nth-child(6){grid-column:span 6}.article-layout{grid-template-columns:190px minmax(0,1fr);gap:35px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.article-hero-grid{grid-template-columns:1fr 380px}} @media(max-width:768px){.shell,.discussion-shell{width:min(calc(100% - 32px),var(--max))}.header{height:68px}.desktop-menu,.nav-cta{display:none}.menu-open{display:grid}.nav-actions{margin-right:auto}.archive-hero{padding-top:130px}.archive-hero-grid,.article-hero-grid{grid-template-columns:1fr}.archive-lead{margin-top:25px}.filter-bar{top:78px;align-items:flex-start;flex-direction:column}.filter-count{display:none}.content-grid{display:grid}.content-card,.content-card:nth-child(1),.content-card:nth-child(6){grid-column:1/-1;min-height:500px}.card-visual,.content-card:nth-child(1) .card-visual,.content-card:nth-child(6) .card-visual{height:280px}.breadcrumb{padding-top:95px}.hero-panel{min-height:390px}.hero-panel img{min-height:390px}.article-layout{display:block;padding-top:20px}.article-rail{display:none}.article-body>p,.article-body li{font-size:17px}.post-tools{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.course-banner{grid-template-columns:1fr}.course-banner figure{min-height:360px}.discussion{padding-bottom:120px}.mobile-course-trigger{display:flex}.footer-grid{grid-template-columns:1fr}.footer-grid>div:last-child{grid-column:auto}.comment.admin,.comment.reply{margin-right:25px}} @media(max-width:520px){.archive-hero{min-height:610px}.archive-index{display:grid;grid-template-columns:1fr 1fr}.filter-bar{padding:10px;border-radius:18px}.filters{display:grid;grid-template-columns:1fr 1fr;width:100%}.filter{padding-inline:10px}.card-body h2{font-size:21px}.article-hero{padding-bottom:45px}.hero-panel,.hero-panel img{min-height:330px}.article-body blockquote{padding:28px;font-size:21px}.article-body blockquote:after{display:none}.internal-link{grid-template-columns:46px 1fr}.internal-link>span:last-child{display:none}.post-tools{margin-top:50px}.author-box{grid-template-columns:70px 1fr}.author-avatar{width:70px;height:70px}.media-hero{margin-inline:-8px;padding:10px;border-radius:26px}.audio-player{padding:20px}.audio-cover{grid-template-columns:80px 1fr}.audio-cover img{width:80px;height:80px;border-radius:18px}.audio-controls .media-play{width:54px;height:54px}.audio-time{display:none}.media-caption{align-items:flex-start;flex-direction:column}.form-row{grid-template-columns:1fr}.form-footer{align-items:stretch;flex-direction:column}.form-footer .button{width:100%}.discussion-head{align-items:flex-start;flex-direction:column}.comment{padding:18px}.comment.admin,.comment.reply{margin-right:12px}.comment-head{align-items:flex-start}.role{margin-top:4px}.footer-bottom{align-items:flex-start;justify-content:center;flex-direction:column;gap:2px}.footer-links{grid-template-columns:1fr 1fr}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:0s!important}} /* Archive-page fix: .archive-hero is *always* dark (var(--ink)), independent of the light/dark theme toggle, but the fixed header sitting on top of it before scrolling is transparent with theme-reactive (--text/--muted) text - in light theme that's near-black text on a permanently dark hero, unreadable. Force the un-scrolled header's bare text (no pill background of its own) to the same light palette the hero itself always uses. WordPress adds body.blog automatically for this page (see home.php / project memory). */ body.blog .header:not(.scrolled) .logo strong{color:#edf3f5} body.blog .header:not(.scrolled) .logo small{color:#9eb2bc} body.blog .header:not(.scrolled) .desktop-menu{color:#9eb2bc} body.blog .header:not(.scrolled) .desktop-menu a:hover:after, body.blog .header:not(.scrolled) .desktop-menu a[aria-current=page]:after{background:var(--champagne)} .nav-has-dropdown{position:relative;display:flex;align-items:center} .nav-dropdown{position:absolute;top:100%;right:-14px;z-index:20;min-width:160px;padding:8px;margin-top:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--lift);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s} .nav-has-dropdown:hover .nav-dropdown,.nav-has-dropdown:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:none} .nav-dropdown a{display:block!important;padding:9px 12px!important;border-radius:9px;color:var(--muted);font-size:12px;font-weight:600} .nav-dropdown a:after{display:none} .nav-dropdown a:hover{background:var(--mist);color:var(--text)} .drawer nav a.drawer-sub{padding-right:20px;font-size:13px;color:var(--muted)} .nav-dropdown .nav-sub-has-dropdown{position:relative} .nav-dropdown .nav-sub-has-dropdown>a{display:flex!important;align-items:center;justify-content:space-between;gap:8px} .nav-sub-caret{font-size:10px;color:var(--muted)} .nav-dropdown-sub{position:absolute;top:0;right:100%;z-index:21;min-width:170px;margin-right:6px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--lift);opacity:0;visibility:hidden;transform:translateX(6px);transition:.2s} .nav-sub-has-dropdown:hover .nav-dropdown-sub,.nav-sub-has-dropdown:focus-within .nav-dropdown-sub{opacity:1;visibility:visible;transform:none} .drawer nav a.drawer-sub-sub{padding-right:34px;font-size:12px;color:var(--mineral)} /* Real user comments are free-form text (long unbroken runs, no manual line breaks) - CSS Grid's default "auto" track never shrinks below a child's min-content size, so a long comment silently forced .comments (and with it the whole page) wider than the viewport on mobile. min-width:0 lets the grid track actually respect the container width, and overflow-wrap makes sure the comment text itself always wraps instead of overflowing. */ .comments{min-width:0} .comment{min-width:0;overflow-wrap:anywhere} .comment>p{overflow-wrap:anywhere;white-space:pre-line} .comment-head{flex-wrap:wrap;min-width:0} .comment-person{min-width:0} .comment-person strong,.comment-person small{overflow-wrap:anywhere} /* Same always-dark-surface pattern as the archive header above: .hero-panel and .media-hero (audio/video player chrome) are permanently var(--ink) regardless of theme, but .audio-cover strong / .media-caption strong had no color of their own and inherited the theme-reactive --text - dark navy on a permanently dark cover in light theme, unreadable. */ .audio-cover strong,.media-caption strong{color:#edf3f5} /* Course landing pages (page-{slug}.php rebuilds): a course photo that sticks beside the article body as you scroll, instead of leaving an empty column once the hero's image scrolls out of view. The sticky figure is scoped inside .course-layout's own grid, so it naturally stops sticking at the grid's bottom edge (end of the article body) - it can never drift into a later section's image, no JS needed. */ .course-layout{display:grid;grid-template-columns:minmax(0,var(--article)) minmax(260px,380px);grid-template-areas:"content figure";gap:clamp(30px,5vw,70px);justify-content:center;padding:50px 0 60px} .course-sticky-figure{grid-area:figure} .course-sticky-figure .hero-panel{position:sticky;top:112px;min-height:420px} .course-sticky-figure .hero-panel img{min-height:420px} .course-main-column{grid-area:content;min-width:0} .course-hero{padding:0 0 46px} .course-hero .article-meta{margin-top:24px} @media(max-width:1024px){.course-layout{grid-template-columns:minmax(220px,320px) minmax(0,1fr)}} @media(max-width:768px){.course-layout{grid-template-columns:1fr;grid-template-areas:"figure" "content";padding-top:20px}.course-sticky-figure .hero-panel{position:relative;top:auto;min-height:390px}.course-sticky-figure .hero-panel img{min-height:390px}.course-hero{padding-bottom:36px}} /* Course landing, richer variant (e.g. کارشناس جذب شوید): full-bleed video hero instead of the side-by-side sticky-figure layout used elsewhere - deliberately different composition per page, not one template stamped 27 times. */ .video-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);color:#edf3f5} .video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(.5) brightness(.7)} @media(max-width:768px){.video-hero video{object-position:center 20%}} .video-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,17,28,.92),rgba(7,17,28,.4) 55%,rgba(7,17,28,.72));z-index:1} .video-hero:after{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(to bottom,rgba(5,13,22,.85),transparent);z-index:1;pointer-events:none} .video-hero-inner{position:relative;z-index:2;width:min(calc(100% - 48px),var(--max));margin-inline:auto;padding-block:70px} .video-hero .eyebrow{color:var(--sky)} .video-hero h1{margin:14px 0 22px;font-size:clamp(38px,5vw,64px);line-height:1.3;max-width:920px} .video-hero p{max-width:680px;color:#c3d2d9;font-size:18px;line-height:1.9;margin:0 0 30px} @media(max-width:768px){.video-hero{min-height:auto;padding-top:90px}.video-hero-inner{padding-block:40px}} .stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:-1px} .stat-strip>div{background:var(--surface);padding:30px 20px;text-align:center} .stat-strip b{display:block;color:var(--champagne);font-size:clamp(26px,3.4vw,40px);font-weight:800} .stat-strip span{display:block;margin-top:8px;color:var(--muted);font-size:12px} @media(max-width:620px){.stat-strip{grid-template-columns:1fr}} .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0} .feature-list li{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);list-style:none;font-size:14px;line-height:1.9;color:var(--text)} .feature-list li i{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--mist);color:var(--mineral);font-size:17px} @media(max-width:768px){.feature-list{grid-template-columns:1fr}} .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0} .video-card{position:relative} .video-grid video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:20px;background:#07111c} /* Each grid card is itself a .proof-video gate (see the shared component above and mountVideoSource() in blog.js) - no