/* ═══════════════════════════════════════════════════════════ آرسس — صفحهٔ اصول اخلاق حرفه‌ای استایل مشترک همهٔ بیست زیربخش. هر فایل بخش، فقط CSS مخصوص «عنصر امضا»ی خودش را اضافه می‌کند. ═══════════════════════════════════════════════════════════ */ @font-face{font-family:"AbarMid";font-weight:800;font-style:normal;font-display:swap; src: url("../_ds/aress-design-system-b80fd97d-76a0-4cd1-bbdf-ec4547399064/fonts/AbarMid-ExtraBold.ttf") format("truetype")} @font-face{font-family:"AbarMid";font-weight:700;font-style:normal;font-display:swap; src: url("../_ds/aress-design-system-b80fd97d-76a0-4cd1-bbdf-ec4547399064/fonts/AbarMid-Bold.ttf") format("truetype")} @font-face{font-family:"AbarMid";font-weight:600;font-style:normal;font-display:swap; src: url("../_ds/aress-design-system-b80fd97d-76a0-4cd1-bbdf-ec4547399064/fonts/AbarMid-SemiBold.ttf") format("truetype")} :root{ --bg:#F9F8FC; --brand:#6532FF; --brand-light:#7A4FE0; --brand-deep:#4612BE; --cyan:#0C7C93; --safe:#15803D; --warn:#B45309; --breach:#BE123C; --ink:#150C33; --ink-2:rgba(22,11,51,.70); --ink-3:rgba(22,11,51,.48); --ink-4:rgba(22,11,51,.28); --line:rgba(22,11,51,.10); --glass:rgba(255,255,255,.64); --display:"AbarMid","Vazirmatn",system-ui,sans-serif; --body:"Vazirmatn",system-ui,sans-serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} body{background:var(--bg);color:var(--ink);font-family:var(--body);direction:rtl; overflow-x:clip;line-height:1.85;-webkit-font-smoothing:antialiased} ::selection{background:rgba(101,50,255,.45)} ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-thumb{background:rgba(101,50,255,.35);border-radius:99px} :focus-visible{outline:2px solid var(--brand-light);outline-offset:3px;border-radius:6px} /* ── قاب بخش ── */ .std{position:relative;max-width:940px;margin:0 auto;padding:120px 24px 140px} .std::before{ /* هالهٔ محیطی */ content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%); width:min(900px,100%);height:620px;pointer-events:none;z-index:0; background:radial-gradient(20% 20% at 20% 20%,rgba(101,50,255,.16),transparent 90%); filter:blur(30px); } .std > *{position:relative;z-index:1} .numeral{ position:absolute;top:50%;left:-6px;transform:translateY(-50%);z-index:0;pointer-events:none; font-family:Georgia,"Times New Roman",serif;font-size:280px;line-height:.7; font-weight:700;letter-spacing:-.02em; color:transparent;-webkit-text-stroke:1px rgba(22,11,51,.065);user-select:none} /* ── سربرگ ── */ .head{margin-bottom:52px} .head-main{position:relative;margin-bottom:38px} .eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px; color:var(--ink-3);margin-bottom:22px} .eyebrow .pill{font-weight:600;font-size:11.5px;color:var(--brand-light); border:1px solid rgba(135,97,245,.34);border-radius:99px;padding:3px 11px; background:rgba(101,50,255,.10);letter-spacing:.06em} .eyebrow .new{font-weight:600;font-size:11.5px;color:var(--cyan); border:1px solid rgba(60,220,255,.30);border-radius:99px;padding:3px 11px; background:rgba(60,220,255,.08);letter-spacing:.04em} .title{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,52px); line-height:1.35;letter-spacing:-.01em;margin-bottom:20px} .lead{font-size:clamp(17px,2.1vw,21px);color:var(--ink-2);max-width:54ch; font-weight:300;line-height:1.9} .lead b{color:var(--ink);font-weight:600} .rule{margin-top:38px;padding:26px 28px;border-radius:16px; background:linear-gradient(180deg,rgba(101,50,255,.02),rgba(101,50,255,.10)); border:1px solid rgba(101,50,255,.20);border-right:2px solid var(--brand)} .rule h3{font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--brand-light);margin-bottom:12px} .rule p{font-size:16px;color:var(--ink-2);line-height:2} .rule b{color:var(--ink);font-weight:600} .change{margin-top:16px;padding:20px 24px;border-radius:16px; background:rgba(60,220,255,.045);border:1px solid rgba(60,220,255,.18)} .change h3{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--cyan);margin-bottom:10px} .change p{font-size:15px;color:var(--ink-2);line-height:1.95} .change b{color:var(--ink);font-weight:600} .change .old{color:var(--ink-4);text-decoration:line-through;text-decoration-color:rgba(255,77,109,.6)} /* ── پنل شیشه‌ای (پایهٔ همهٔ عناصر تعاملی) ── */ .panel{margin-top:64px;border-radius:24px;background:var(--glass);border:1px solid var(--line); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);overflow:hidden} .panel-head{padding:30px 32px 22px;display:flex;gap:20px;align-items:flex-start} .panel-head .txt{flex:1} .panel-head h3{font-family:var(--display);font-weight:700;font-size:24px;margin-bottom:8px} .panel-head p{font-size:14.5px;color:var(--ink-3)} .panel-pad{padding:0 32px 30px} /* راهنما (مسکات کوچک) */ .guide{position:relative;width:110px;flex-shrink:0} .guide img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px rgba(101,50,255,.34))} .guide .say{position:absolute;top:8px;left:calc(100% + 12px);width:212px; background:rgba(20,16,44,.94);border:1px solid rgba(135,97,245,.28); border-radius:14px 14px 14px 4px;padding:11px 14px;font-size:13px;line-height:1.75; color:rgba(255,255,255,.86);backdrop-filter:blur(12px); opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none} .guide .say.on{opacity:1;transform:none} /* برچسب گام */ .step-lbl{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600; letter-spacing:.06em;color:var(--ink-3);margin-bottom:14px} .step-lbl i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center; font-style:normal;font-size:11px;background:rgba(22,11,51,.08);color:var(--ink-2)} /* دکمهٔ گزینه‌ای عمومی */ .tile{text-align:right;padding:14px 16px;border-radius:13px;cursor:pointer; background:rgba(22,11,51,.030);border:1px solid var(--line);color:var(--ink-2); font-family:var(--body);font-size:14.5px;line-height:1.7; transition:background .25s,border-color .25s,transform .16s,color .25s} .tile:hover{background:rgba(22,11,51,.058);border-color:rgba(22,11,51,.16)} .tile:active{transform:scale(.985)} .tile[aria-pressed="true"]{background:rgba(101,50,255,.14);border-color:rgba(135,97,245,.46); color:var(--ink);box-shadow:0 6px 22px -8px rgba(101,50,255,.55)} /* پیام نتیجه */ .out{margin:18px 32px 0;padding:0 20px;border-radius:14px;max-height:0;overflow:hidden; background:rgba(22,11,51,.028);border:1px solid transparent; transition:max-height .5s ease,padding .45s ease,border-color .45s} .out.on{max-height:380px;padding:18px 20px;border-color:var(--line)} .out p{font-size:15px;color:var(--ink-2);line-height:1.95} .out p b{color:var(--ink);font-weight:600} .out[data-k="ok"]{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.34)!important} .out[data-k="warn"]{background:rgba(245,165,36,.06);border-color:rgba(245,165,36,.32)!important} .out[data-k="no"]{background:rgba(255,77,109,.06);border-color:rgba(255,77,109,.32)!important} .reset{display:block;margin:22px 32px 30px;padding:0;background:none;border:none; color:var(--ink-3);font-family:var(--body);font-size:13.5px;cursor:pointer; text-decoration:underline;text-underline-offset:4px;transition:color .2s} .reset:hover{color:var(--ink)} /* ── کارت‌های «کجا پیش می‌آید» ── */ .where{margin-top:104px} .where h3{font-family:var(--display);font-weight:700;font-size:21px;margin-bottom:8px} .where > p{font-size:14.5px;color:var(--ink-3);margin-bottom:20px} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px} .card{padding:18px 20px;border-radius:14px;background:rgba(22,11,51,.028);border:1px solid var(--line)} .card h4{font-size:15px;font-weight:600;margin-bottom:7px;color:var(--ink)} .card p{font-size:13.5px;color:var(--ink-3);line-height:1.85} /* ── محک ── */ .probe{margin-top:64px;border-radius:24px;padding:34px 32px;background:var(--glass); border:1px solid var(--line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} .probe .tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.08em; color:var(--cyan);border:1px solid rgba(60,220,255,.26);background:rgba(60,220,255,.07); border-radius:99px;padding:3px 12px;margin-bottom:18px} .probe h3{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:14px} .probe .scen{font-size:16px;color:var(--ink-2);line-height:2;margin-bottom:24px} .opts{display:flex;flex-direction:column;gap:10px} .opt{text-align:right;padding:16px 18px;border-radius:13px;cursor:pointer; background:rgba(22,11,51,.030);border:1px solid var(--line);color:var(--ink-2); font-family:var(--body);font-size:15px;line-height:1.8; transition:background .22s,border-color .22s,transform .16s} .opt:hover:not([disabled]){background:rgba(22,11,51,.06);border-color:rgba(22,11,51,.17)} .opt:active:not([disabled]){transform:scale(.99)} .opt[disabled]{cursor:default} .opt .mark{display:none;font-weight:700;margin-left:8px} .opt[data-state]{color:var(--ink)} .opt[data-state] .mark{display:inline} .opt[data-state="ok"]{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.42)} .opt[data-state="ok"] .mark{color:var(--safe)} .opt[data-state="mid"]{background:rgba(245,165,36,.09);border-color:rgba(245,165,36,.38)} .opt[data-state="mid"] .mark{color:var(--warn)} .opt[data-state="no"]{background:rgba(255,77,109,.09);border-color:rgba(255,77,109,.38)} .opt[data-state="no"] .mark{color:var(--breach)} .fb{margin-top:16px;padding:0 20px;border-radius:13px;max-height:0;overflow:hidden; background:rgba(22,11,51,.028);border:1px solid transparent; transition:max-height .45s ease,padding .45s ease,border-color .45s} .fb.on{max-height:340px;padding:18px 20px;border-color:var(--line)} .fb p{font-size:15px;color:var(--ink-2);line-height:1.95} .fb p b{color:var(--ink);font-weight:600} /* ── CTA ── */ .cta{margin-top:60px;display:flex;gap:12px;flex-wrap:wrap;align-items:center} .btn{position:relative;border:none;border-radius:12px;padding:15px 34px;font-family:var(--body); font-size:15px;cursor:pointer;text-decoration:none;display:inline-block;isolation:isolate; overflow:hidden;z-index:0;transition:transform .2s ease} .btn:hover{transform:translateY(-3px)} .btn:active{transform:scale(.97)} .btn-p{font-weight:700;color:#fff;background:rgba(80,30,200,.92)} .btn-p::before{content:'';position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1; border-radius:50%;filter:blur(3px);z-index:-1;transform:translate(-50%,-50%); animation:spin 6s linear infinite; background:conic-gradient(rgba(60,220,255,.15) 0deg,rgba(101,50,255,.9) 60deg, rgba(60,220,255,.95) 120deg,rgba(101,50,255,.9) 180deg, rgba(60,220,255,.55) 240deg,rgba(60,220,255,.15) 360deg)} .btn-p::after{content:'';position:absolute;inset:1.5px;border-radius:11px; background:rgba(70,25,185,.94);z-index:-1} @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}} .btn-s{font-weight:500;color:var(--ink-2);background:rgba(22,11,51,.045);border:1px solid var(--line)} .btn-s:hover{color:var(--ink);background:rgba(22,11,51,.08)} .disclaimer{margin-top:76px;padding-top:26px;border-top:1px solid var(--line); font-size:12.5px;color:var(--ink-2);line-height:2;max-width:70ch} /* ── ظهور با اسکرول ── */ .rv{opacity:0;transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .rv.in{opacity:1;transform:none} /* ── موبایل ── */ @media(max-width:860px){ .std{padding:88px 18px 100px} .numeral{font-size:150px;top:50%;left:-10px} .panel-head{padding:26px 18px 20px;flex-direction:row-reverse;align-items:center} .guide{width:86px} .guide .say{display:none} .panel-pad{padding-left:18px;padding-right:18px} .out,.reset{margin-left:18px;margin-right:18px} .probe{padding:26px 20px} .cta .btn{flex:1;text-align:center} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} .rv{opacity:1;transform:none} } /* ═══════════════════════════════════════════════════════════ پوستهٔ مشترک — هدر سایت، بردکرامب، ناوبری قبلی/بعدی (توسط assets/ethics-chrome.js تزریق می‌شود) ═══════════════════════════════════════════════════════════ */ /* هدر سایت از assets/site-nav.css می‌آید — قوانین .eth-nav-* حذف شدند تا کل سایت یک سیستم هدر داشته باشد. ethics-chrome.js حالا همان مارک‌آپ .nav-outer > nav را تولید می‌کند. */ body.has-chrome .std{padding-top:132px} /* بردکرامب */ .eth-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px; margin-bottom:30px;font-size:13px;line-height:2} .eth-crumb a{color:var(--ink-3);text-decoration:none;transition:color .2s} .eth-crumb a:hover{color:var(--brand-deep)} .eth-crumb .sep{color:var(--ink-4)} .eth-crumb .here{color:var(--ink-2)} .eth-crumb .here b{font-family:Georgia,serif;color:var(--brand);font-weight:700} /* قاعدهٔ قبلی و بعدی */ .eth-pn-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:12px; align-items:stretch;margin-top:64px;padding-top:34px;border-top:1px solid var(--line)} .eth-pn{display:flex;flex-direction:column;justify-content:center;gap:5px; padding:18px 20px;border-radius:16px;text-decoration:none; background:rgba(255,255,255,.6);border:1px solid var(--line); transition:transform .24s cubic-bezier(.16,1,.3,1),border-color .24s,box-shadow .24s} .eth-pn:hover{border-color:rgba(101,50,255,.32); box-shadow:0 18px 40px -24px rgba(101,50,255,.5)} .eth-pn.next{text-align:left} .eth-pn.next:hover{transform:translateX(-4px)} .eth-pn.prev:hover{transform:translateX(4px)} .eth-pn .k{font-size:12px;color:var(--ink-3)} .eth-pn .t{font-size:15px;font-weight:600;color:var(--ink);line-height:1.6} .eth-pn .t b{font-family:Georgia,serif;color:var(--brand);font-weight:700;margin-left:5px} .eth-pn em{font-style:normal;font-size:11.5px;color:var(--ink-4)} .eth-pn-empty{display:block} /* کارت آزمون جامع — جایگزین کارت «قاعدهٔ بعدی» در آخرین قاعده */ .eth-pn-final{background:linear-gradient(155deg,rgba(101,50,255,.10),rgba(180,83,9,.09) 130%); border:1px solid rgba(180,83,9,.30)} .eth-pn-final:hover{border-color:rgba(180,83,9,.46); box-shadow:0 18px 40px -22px rgba(180,83,9,.55)} .eth-pn-final .k{display:flex;align-items:center;gap:6px;color:var(--warn);font-weight:700} .eth-pn-final .t{color:var(--ink)} .eth-pn-final-badge{font-style:normal;font-size:13px;line-height:1} .eth-pn-all{display:flex;align-items:center;justify-content:center;padding:0 22px; border-radius:16px;text-decoration:none;font-size:13.5px;font-weight:600; color:var(--brand-deep);background:rgba(101,50,255,.08); border:1px solid rgba(101,50,255,.20);white-space:nowrap;transition:background .22s} .eth-pn-all:hover{background:rgba(101,50,255,.18)} /* ═══════════════════════════════════════════════════════════ دستور زبان بخش‌ها — هر بخش می‌گوید چیست و کاربر چه کند ═══════════════════════════════════════════════════════════ */ .sec-head{margin-bottom:20px} .sec-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px} .sec-kind{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600; letter-spacing:.05em;border-radius:99px;padding:4px 12px} .sec-kind.do{color:var(--brand-deep);background:rgba(101,50,255,.11); border:1px solid rgba(101,50,255,.22)} .sec-kind.read{color:var(--brand-deep);background:rgba(101,50,255,.11); border:1px solid rgba(101,50,255,.22)} .sec-kind.test{color:var(--cyan);background:rgba(12,124,147,.09); border:1px solid rgba(12,124,147,.22)} .sec-time{font-size:12px;color:var(--ink-4)} .sec-head h3{font-family:var(--display);font-weight:700;font-size:23px; margin-bottom:9px;line-height:1.45} .sec-head > p{font-size:14.5px;color:var(--ink-3);line-height:1.9;max-width:62ch} .sec-do{display:flex;gap:9px;margin-top:14px;padding:12px 15px;border-radius:12px; background:rgba(101,50,255,.055);border:1px solid rgba(101,50,255,.16); font-size:14px;color:var(--ink-2);line-height:1.8;max-width:62ch} .sec-do b{color:var(--ink);font-weight:600} .sec-do::before{content:'◆';flex-shrink:0;color:var(--brand);font-size:10px;line-height:2.2} @media(max-width:900px){ body.has-chrome .std{padding-top:96px} .eth-pn-wrap{grid-template-columns:1fr;gap:9px} .eth-pn-all{order:3;padding:14px} .eth-pn.next{text-align:right} .eth-pn-empty{display:none} } /* ═══════════════════════════════════════════════════════════ الگوی «آموزش با تمرین» — عنوان و راهنما بیرون از باکس، خودِ تمرین داخل باکس. الهام‌گرفته از الگوی نمونه‌محور w3schools. ═══════════════════════════════════════════════════════════ */ .lesson{margin-top:104px} .lesson-head{margin-bottom:18px} .lesson-head h2{font-family:var(--display);font-weight:800; font-size:clamp(23px,3.2vw,31px);line-height:1.45;margin-bottom:12px} .lesson-head > p{font-size:15.5px;color:var(--ink-2);line-height:2;max-width:64ch} .lesson-head > p b{color:var(--ink);font-weight:600} /* باکس تمرین — سربرگ و بدنه یک‌رنگ، بدون مرز رنگی بین‌شان نام کلاس عمداً .ex-box است نه .box، چون .box در همین فایل برای دایرهٔ چک‌باکس‌ها (.chk .box, .g .box, ...) هم استفاده شده. */ .ex-box{border-radius:16px;overflow:hidden;margin-top:18px; background:rgba(255,255,255,.7);border:1px solid var(--line)} .box-label{display:flex;align-items:center;gap:9px;padding:20px 26px 6px; font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)} .box-label i{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.05em; color:var(--brand-deep);background:rgba(101,50,255,.12); border:1px solid rgba(101,50,255,.22);border-radius:99px;padding:3px 11px} .box-intro{padding:0 26px;margin-top:8px;font-size:14.5px;color:var(--ink-2); line-height:1.95} .box-intro b{color:var(--ink);font-weight:600} .box-body{padding:22px 26px 26px} /* اجزای موجود وقتی داخل باکس می‌روند، پوستهٔ خودشان را کنار می‌گذارند */ .box-body > .scale-card, .box-body > .panel, .box-body > .probe{background:none!important;border:none!important; box-shadow:none!important;backdrop-filter:none!important; -webkit-backdrop-filter:none!important;border-radius:0!important; margin-top:0!important;padding:0!important;overflow:visible} .box-body .panel-pad, .box-body .scale-head, .box-body .panel-head{padding-left:0;padding-right:0} .box-body .out, .box-body .reset{margin-left:0;margin-right:0} .box-body .reset{margin-bottom:0} @media(max-width:860px){ .box-label{padding:12px 16px;font-size:15px} .box-body{padding:18px 16px 20px} .lesson{margin-top:52px} } /* ═══ ردیف کنترل بالا: بعدی / قبلی / خواندم — کنار بردکرامب ═══ */ .eth-crumb-row{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-bottom:30px} .eth-crumb-row .eth-crumb{margin-bottom:0} .eth-topctrls{display:flex;align-items:center;gap:10px;flex-shrink:0} .ec-next,.ec-prev{display:inline-flex;align-items:center;justify-content:center;gap:7px; text-decoration:none;height:38px;line-height:1; font-family:var(--body);font-size:13.5px;font-weight:700;white-space:nowrap; border-radius:11px;transition:all .22s} .ec-next{color:#fff;background:var(--brand);padding:0 18px; box-shadow:0 10px 24px -10px rgba(101,50,255,.55)} .ec-next:hover{background:var(--brand-deep);transform:translateY(-1px)} .ec-prev{color:var(--ink-3);background:rgba(255,255,255,.7);border:1px solid var(--line); padding:0 14px;font-size:16px;font-weight:700} .ec-prev:hover{color:var(--brand-deep);border-color:rgba(101,50,255,.30)} /* اندازهٔ آیکون‌های جایگزین‌شونده. اگر SVG اینلاین گذاشتی به‌جای img، می‌توانی currentColor بدهی تا رنگش خودکار با حالت هاور/غیرفعال هماهنگ شود. */ .ec-icon{width:14px;height:14px;object-fit:contain;flex-shrink:0} .ec-next.off,.ec-prev.off{opacity:.35;pointer-events:none} /* دکمهٔ آزمون جامع — جایگزین «بعدی» در آخرین قاعده، عمداً متفاوت */ .ec-final{background:linear-gradient(120deg,var(--brand) 0%,var(--warn) 145%); box-shadow:0 10px 26px -8px rgba(180,83,9,.5),0 0 0 1px rgba(255,255,255,.16) inset; animation:ecglow 2.6s ease-in-out infinite} .ec-final:hover{background:linear-gradient(120deg,var(--brand-deep) 0%,#8a5a06 145%); transform:translateY(-1px)} .ec-final-badge{font-style:normal;font-size:13px;line-height:1} @keyframes ecglow{ 0%,100%{box-shadow:0 10px 26px -8px rgba(180,83,9,.5),0 0 0 1px rgba(255,255,255,.16) inset} 50%{box-shadow:0 10px 30px -6px rgba(180,83,9,.72),0 0 0 1px rgba(255,255,255,.24) inset} } .ec-read{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer; height:38px;line-height:1;padding:0 16px;border-radius:11px; font-family:var(--body);font-size:13.5px; font-weight:700;color:var(--ink-3);background:rgba(255,255,255,.7); border:1px solid var(--line);transition:all .22s} .ec-read:hover{border-color:rgba(21,128,61,.32)} .ec-read .ec-tick{width:17px;height:17px;border-radius:5px;flex-shrink:0; display:grid;place-items:center;font-size:10.5px;color:transparent; border:1.5px solid rgba(22,11,51,.26);transition:all .2s} .ec-read[aria-pressed="true"]{color:var(--ink);background:rgba(21,128,61,.10); border-color:rgba(21,128,61,.36)} .ec-read[aria-pressed="true"] .ec-tick{background:var(--safe);border-color:var(--safe);color:#fff} @media(max-width:640px){ .ec-next span,.ec-read span:last-child{display:none} .ec-next,.ec-prev,.ec-read{padding:0 12px} .eth-crumb-row{flex-direction:column;align-items:stretch} .eth-topctrls{order:-1;justify-content:flex-end} } /* ═══════════════════════════════════════════════════════════ بنر کوییز — جایگزین دکمهٔ خام «کوییز کامل»، پایین هر قاعده ═══════════════════════════════════════════════════════════ */ .quiz-banner{margin-top:104px;padding:30px 32px;border-radius:20px; display:flex;align-items:center;gap:24px;flex-wrap:wrap; background:linear-gradient(135deg,rgba(101,50,255,.10),rgba(101,50,255,.03)); border:1px solid rgba(101,50,255,.20)} .quiz-banner .qb-icon{flex-shrink:0;width:52px;height:52px;border-radius:14px; display:grid;place-items:center;font-size:22px; background:linear-gradient(140deg,var(--brand-light),var(--brand-deep)); box-shadow:0 10px 24px -10px rgba(101,50,255,.6)} .quiz-banner .qb-txt{flex:1;min-width:220px} .quiz-banner .qb-txt h4{font-family:var(--display);font-weight:700;font-size:17px; color:var(--ink);margin-bottom:6px} .quiz-banner .qb-txt p{font-size:14px;color:var(--ink-3);line-height:1.85} .quiz-banner .qb-facts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px} .quiz-banner .qb-facts span{font-size:12px;color:var(--ink-3); background:rgba(255,255,255,.6);border:1px solid var(--line); border-radius:99px;padding:4px 11px} .quiz-banner .qb-go{flex-shrink:0} @media(max-width:640px){ .quiz-banner{padding:22px 20px} .quiz-banner .qb-go{width:100%;text-align:center} } /* ═══════════════════════════════════════════════════════════ حالت خاموش تمرین — پیش از کلیک، تمرین کم‌رنگ و غیرفعال است با یک دکمهٔ «شروع تمرین» رویش، تا کاربر بداند وارد چه چیزی می‌شود ═══════════════════════════════════════════════════════════ */ .ex-box{position:relative} .ex-box.dormant > *:not(.dormant-gate){filter:blur(2.5px) saturate(.65) brightness(.94);opacity:.42; pointer-events:none;user-select:none;transition:filter .5s,opacity .5s} .dormant-gate{position:absolute;inset:0;z-index:5;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:12px; border:none;cursor:pointer;border-radius:16px;transition:background .3s; /* دو لایهٔ رنگ روی هم: بنفش برند ۳٪ + خاکستری خنثی ۶٪ */ background: linear-gradient(rgba(101,50,255,.03),rgba(101,50,255,.03)), linear-gradient(rgba(116,119,124,.06),rgba(116,119,124,.06)); background-blend-mode:normal;} .dormant-gate:hover{ background: linear-gradient(rgba(101,50,255,.05),rgba(101,50,255,.05)), linear-gradient(rgba(116,119,124,.08),rgba(116,119,124,.08));} .dormant-gate .dg-btn{display:inline-flex;align-items:center;gap:8px; padding:13px 26px;border-radius:12px;font-family:var(--body); font-size:14.5px;font-weight:700;color:#fff;background:var(--brand); box-shadow:0 14px 32px -12px rgba(101,50,255,.6); transition:transform .22s,background .22s} .dormant-gate:hover .dg-btn{background:var(--brand-deep);transform:translateY(-2px)} .dg-icon{width:13px;height:13px;object-fit:contain;flex-shrink:0} .dormant-gate .dg-note{font-family:var(--body);font-size:14.5px;color:var(--ink-2); max-width:34ch;text-align:center;line-height:1.85} /* ═══ بلوک هیرو: ردیف بالا + عنوان، هم‌قد یک صفحهٔ نمایش ═══ */ .eth-hero-block{min-height:min(calc(100vh - 110px),620px);display:flex;flex-direction:column} .eth-hero-block .eth-crumb-row{margin-bottom:0} .eth-hero-block .head{flex:1;display:flex;flex-direction:column;justify-content:center} .eth-hero-block + .lesson, .eth-hero-block + .where, .eth-hero-block + .panel{margin-top:16px} @media(max-width:900px){ .eth-hero-block{min-height:calc(100vh - 80px)} } /* ═══════════════════════════════════════════════════════════ لایهٔ صفحات قاعده (۲۳ زیربخش) دامنه: هر چیزی زیر body.has-chrome — این کلاس را ethics-chrome.js فقط روی صفحاتی می‌گذارد که .std دارند و data-rule شان در RULES هست. هاب، fdp، index و صفحات کوییز دست‌نخورده می‌مانند. ═══════════════════════════════════════════════════════════ */ /* ── ۱) شست‌وشوی رنگی بالای صفحه (بدون دارک‌شدن) ── full-bleed است، برخلاف .std::before که داخل قاب ۹۴۰px می‌ماند. */ body.has-chrome { position: relative } body.has-chrome::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 460px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(101, 50, 255, .075), rgba(101, 50, 255, 0) 78%), linear-gradient(180deg, rgba(12, 124, 147, .022), rgba(12, 124, 147, 0) 60%) } body.has-chrome .numeral { -webkit-text-stroke-color: rgba(22, 11, 51, .11) } /* ── ۲) کارت «چه می‌گوید» — تنها بلوک تیرهٔ صفحه ── تیرگی اینجا کارکرد دارد: این بخش نقلِ متن خودِ استاندارد است، بقیهٔ صفحه توضیح و تمرینِ آرسس. یک کارت است نه نوار تمام‌عرض، چون روی صفحهٔ کوتاه نوارِ تیره یعنی «فصل جدید». */ body.has-chrome .rule { background: linear-gradient(160deg, #1F0D57, #150C33) !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-right: 2px solid var(--brand-light) !important; box-shadow: 0 22px 48px -28px rgba(21, 12, 51, .55) } body.has-chrome .rule h3 { color: #A98CFF } body.has-chrome .rule p { color: rgba(255, 255, 255, .78) } body.has-chrome .rule b { color: #fff } /* ── ۳) فوتر سبک ── خط بالای فوتر سر جایش می‌ماند؛ فقط بلوک برند و canvas حذف می‌شوند تا ارتفاعش با صفحهٔ کوتاه بخواند. */ body.has-chrome #footer { background: var(--bg) !important; color: var(--ink-2); padding: 0 !important; border-top: 1px solid var(--line) } body.has-chrome #footer-canvas, body.has-chrome #footer .foot-wm, body.has-chrome #footer .foot-main { display: none !important } body.has-chrome #footer .foot-bottom { max-width: 940px; margin: 0 auto; padding: 18px 24px 26px !important; border-top: 0 !important } body.has-chrome #footer .foot-copy { color: var(--ink-2) !important } body.has-chrome #footer .foot-legal { color: var(--ink-2) !important } body.has-chrome #footer .foot-legal:hover { color: var(--brand) !important } @media (max-width: 640px) { body.has-chrome #footer .foot-bottom { padding: 16px 18px 22px !important } } /* ── متن سلب مسئولیت ── در .std می‌ماند (نه در فوتر). تمام‌عرض، بدون زمینه و بدون قاب، و بدون خط بالا — آن خط همان دیوایدرِ بین متن و دکمه‌های قبلی/بعدی بود. */ body.has-chrome .disclaimer { display: flex; align-items: flex-start; gap: 8px; max-width: none; /* از 70ch به تمام عرض ستون */ margin-top: 40px; padding-top: 0; border-top: 0; font-size: 12.5px; line-height: 1.85; color: var(--ink-2) /* --ink-4 کنتراست ۱.۸۸ داشت؛ عملاً ناخوانا */ } /* آیکون info — background-image، نه mask. هم‌اندازهٔ متن (em) و هم‌رنگ آن: رنگ خطِ SVG همان --ink-4 است. نکته: خصوصیت‌ها جداگانه نوشته شده‌اند نه shorthand، چون shorthandِ mask در بعضی موتورها روی data-URI پارس نمی‌شد. */ body.has-chrome .disclaimer::before { content: ''; flex-shrink: 0; width: 1.15em; height: 1.15em; margin-top: .34em; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(22,11,51,0.45)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5'/%3E%3Cpath d='M12 7.7v.01'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain } /* ── ردیف پایین صفحه ── قبلی: اوتلاین | همهٔ قواعد: اوتلاین | بعدی: فیل عرض هر دکمه به اندازهٔ محتوایش است؛ ردیف تمام‌عرض و با space-between پخش می‌شود، پس فاصلهٔ خالی بین دکمه‌ها می‌افتد. */ body.has-chrome .eth-pn-wrap { --eth-btn-h: 44px; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 30px } /* زیر ۹۰۰ پیکسل یک قاعدهٔ قدیمی `.eth-pn-all{order:3}` هست. آن قاعده برای حالتی نوشته شده بود که ردیف به یک ستون عمودی تبدیل می‌شد و «همهٔ قواعد» باید می‌رفت ته ستون. ولی has-chrome چیدمان را با display:flex !important دوباره افقی می‌کند، پس order:3 آن را به انتهای ردیف — یعنی سمت چپ در RTL — می‌برد و ترتیب می‌شود «قبلی | بعدی | همهٔ قواعد». ترتیب درست «قبلی | همهٔ قواعد | بعدی» است: دو سرِ ردیف حرکت، وسط برگشت به فهرست. */ body.has-chrome .eth-pn-all { order: 0 } body.has-chrome .eth-pn, body.has-chrome .eth-pn-all { flex: 0 0 auto; height: var(--eth-btn-h); min-height: var(--eth-btn-h); padding-block: 0 !important; padding-inline: 18px !important; border-radius: 10px; line-height: 1; font-size: 14px; font-weight: 700; transition: color .22s, background .22s, border-color .22s, transform .22s } body.has-chrome .eth-pn { flex-direction: row !important; align-items: center; justify-content: center; gap: 9px; min-width: 0; box-shadow: none !important; transform: none !important } /* برچسب، یادداشت ستون و شمارهٔ رومی حذف — فقط عنوان */ body.has-chrome .eth-pn .k, body.has-chrome .eth-pn em, body.has-chrome .eth-pn .t b { display: none !important } /* عنوان قاعده هم حذف می‌شود: روی دکمه فقط «قبلی» / «بعدی». نام قاعده در attribute title انکر می‌ماند، پس با هاور دیده می‌شود. */ body.has-chrome .eth-pn .t { display: none !important } /* برچسب متنی با pseudo-element ساخته می‌شود. ترتیب در RTL: ::before سمت راست، ::after سمت چپ. قبلی → شورون(راست) + برچسب | بعدی → برچسب + شورون(چپ) */ body.has-chrome .eth-pn.prev::after, body.has-chrome .eth-pn.next::before, body.has-chrome .eth-pn-final::before { font-family: var(--body); font-size: 14px; font-weight: 700; line-height: 1 } body.has-chrome .eth-pn.prev::after { content: 'قبلی' } body.has-chrome .eth-pn.next::before { content: 'بعدی' } body.has-chrome .eth-pn-final::before { content: 'آزمون جامع' } /* ── قبلی: اوتلاین ── */ body.has-chrome .eth-pn.prev { color: var(--ink-2); background: rgba(255, 255, 255, .7); border: 1px solid rgba(22, 11, 51, .26) } body.has-chrome .eth-pn.prev:hover { color: var(--ink); border-color: rgba(22, 11, 51, .30) } /* ── همهٔ قواعد: هم‌خانوادهٔ «قبلی»، فقط یک پله کم‌رنگ‌تر ── زمینه یکسان است؛ تفاوت فقط در شدت لیبل و بوردر: قبلی → لیبل --ink-2، بوردر rgba(22,11,51,.18) همه → لیبل --ink-3، بوردر --line (=rgba(22,11,51,.10)) */ body.has-chrome .eth-pn-all { color: var(--ink-2); /* --ink-3 روی --bg کنتراست ۳.۳۱ بود؛ زیر حد AA */ background: rgba(255, 255, 255, .7); border: 1px solid var(--line); box-shadow: none } body.has-chrome .eth-pn-all:hover { color: var(--ink); background: rgba(255, 255, 255, .9); border-color: rgba(22, 11, 51, .18); transform: none } /* ── بعدی: اوتلاین بنفش ── اقدام اصلی صفحه «شروع کوییز» است، پس آن فیل می‌ماند و «بعدی» با همان بنفش ولی اوتلاین می‌آید: متن و بوردر var(--brand). شورونش هم currentColor است، پس خودکار بنفش می‌شود. */ body.has-chrome .eth-pn.next { color: var(--brand); background: rgba(101, 50, 255, .05); border: 1px solid var(--brand) } body.has-chrome .eth-pn.next:hover { color: var(--brand-deep); background: rgba(101, 50, 255, .11); border-color: var(--brand-deep) } /* آزمون جامع (جای «بعدی» در آخرین قاعده) — فیل، با لحن خودش */ body.has-chrome .eth-pn-final { color: #fff; background: linear-gradient(120deg, var(--brand) 0%, var(--warn) 145%) !important; border: 1px solid transparent !important } /* ── شورون‌ها ── با mask کشیده می‌شوند نه background-image، چون رنگ داخل فایل SVG با CSS عوض نمی‌شود و روی دکمهٔ فیل دیده نمی‌شد. currentColor یعنی سفید روی «بعدی» و خاکستری روی «قبلی»، خودکار. قبلی → شورون سمت راست (inline-start در RTL) با ::before بعدی → شورون سمت چپ (inline-end در RTL) با ::after */ body.has-chrome .eth-pn.prev::before, body.has-chrome .eth-pn.next::after, body.has-chrome .eth-pn-final::after { content: ''; flex-shrink: 0; width: 13px; height: 13px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain } body.has-chrome .eth-pn.prev::before { -webkit-mask-image: var(--eth-chev-r); mask-image: var(--eth-chev-r) } body.has-chrome .eth-pn.next::after, body.has-chrome .eth-pn-final::after { -webkit-mask-image: var(--eth-chev-l); mask-image: var(--eth-chev-l) } body.has-chrome { --eth-chev-r: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); --eth-chev-l: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") } /* در I(A) دکمهٔ «قبلی» وجود ندارد؛ جای خالی نگه نمی‌داریم */ body.has-chrome .eth-pn-empty { display: none !important } @media (max-width: 640px) { body.has-chrome .eth-pn-wrap { gap: 8px } body.has-chrome .eth-pn, body.has-chrome .eth-pn-all { padding-inline: 13px !important; font-size: 13px } body.has-chrome .eth-pn { flex: 0 1 auto } body.has-chrome .eth-pn .t { font-size: 13px } } /* ── بنر کوییز — کارت شیشه‌ای، هم‌زبان با .panel های صفحه ── بدون آکسان رنگی. شیشه‌بودن از دو چیزی می‌آید که خودِ شیشه می‌کند: هایلایت مویی سفید در لبهٔ بالا (نور را لبه می‌گیرد) و یک سایهٔ نرم پایین که کارت را کمی از صفحه بلند می‌کند. */ body.has-chrome .quiz-banner { margin-top: 72px; padding: 20px 26px !important; gap: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52)) !important; backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid var(--line) !important; border-radius: 18px; /* تنها کارت ارتفاع‌گرفتهٔ صفحه: تمایز از عمق می‌آید نه از رنگ. پنل‌های بالای صفحه سایه ندارند، پس این یکی جلو می‌زند. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 26px 50px -34px rgba(21, 12, 51, .45) } /* آیکون 🎯 و زیرعنوان حذف */ body.has-chrome .quiz-banner .qb-icon, body.has-chrome .quiz-banner .qb-txt > p { display: none !important } /* عدد رومی ستون، جای آیکون. مقدارش از data-rule بدنه می‌آید، پس هیچ HTML ای دست نمی‌خورد. ترتیب سلکتورها از کوتاه به بلند است تا V روی VI و VII بازنویسی شود. */ body.has-chrome .quiz-banner::before { content: 'I'; flex-shrink: 0; align-self: center; margin-inline-start: 4px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 68px; line-height: .72; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px rgba(22, 11, 51, .20); user-select: none } body[data-rule^="II"] .quiz-banner::before { content: 'II' } body[data-rule^="III"] .quiz-banner::before { content: 'III' } body[data-rule^="IV"] .quiz-banner::before { content: 'IV' } body[data-rule^="V"] .quiz-banner::before { content: 'V' } body[data-rule^="VI"] .quiz-banner::before { content: 'VI' } body[data-rule^="VII"] .quiz-banner::before { content: 'VII' } body.has-chrome .quiz-banner .qb-txt h4 { font-size: 16px !important; margin-bottom: 0 !important } body.has-chrome .quiz-banner .qb-facts { margin-top: 9px !important } /* «شروع کوییز» فیل می‌ماند — اقدام اصلی صفحه است، ولی ساده: چرخش رنگ از .btn-p::before می‌آمد (conic-gradient با animation: spin 6s). هر دو لایه خاموش می‌شوند تا بنفش تخت بماند. */ body.has-chrome .quiz-banner .qb-go { padding: 12px 26px !important; border-radius: 10px !important; font-size: 14px !important; background: var(--brand) !important; overflow: visible; transition: background .22s, transform .22s } body.has-chrome .quiz-banner .qb-go::before, body.has-chrome .quiz-banner .qb-go::after { content: none !important; display: none !important; animation: none !important } body.has-chrome .quiz-banner .qb-go:hover { background: var(--brand-deep) !important; transform: translateY(-2px) } @media (max-width: 640px) { body.has-chrome .quiz-banner::before { font-size: 34px } body.has-chrome .card::after { font-size: 74px; inset-block-end: -20px } } /* ── بخش «شش شکلی که به خودش می‌گیرد» ── این کارت‌ها مصادیق نقض‌اند، ولی از نظر بصری با هر کارت اطلاعاتی دیگری یکسان بودند. دو نشانه اضافه می‌شود: ۱) علامت × در --breach قبل از عنوان — می‌گوید این‌ها تخلف‌اند ۲) شمارهٔ ۱ تا ۶ با counter — به کاملیت فهرست اشاره می‌کند هاور عمداً ندارند: لینک نیستند و افکت هاور کلیک‌پذیری کاذب القا می‌کند. */ body.has-chrome .cards { counter-reset: card } /* سطح کارت: مشکل اصلی همین بود. rgba(22,11,51,.028) تقریباً هم‌رنگ --bg است، پس کارت‌ها به‌عنوان سطح خوانده نمی‌شدند و هر چیزی داخلشان بی‌اثر می‌ماند. سفیدِ نیمه‌شفاف مثل بقیهٔ سطوح صفحه، به‌علاوهٔ هایلایت لبهٔ بالا. */ body.has-chrome .card { position: relative; overflow: hidden; counter-increment: card; padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(101, 50, 255, .22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) } body.has-chrome .cards { gap: 16px } /* شمارهٔ فارسی توخالی، به‌شکل واترمارک در گوشهٔ پایین-چپ کارت. counter(card, persian) شماره‌گذاری فارسی استاندارد CSS است. فونت --display با وزن ۸۰۰ (AbarMid ExtraBold): قلم ضخیم لازم است وگرنه text-stroke روی رقم فارسی گِل می‌شود — همان مشکلی که در ۲۱px داشتیم و با ۴۴px حل می‌شود. لبهٔ کارت overflow:hidden است، پس رقم کمی بیرون می‌زند و بریده می‌شود؛ همان رفتار عدد رومی در هدر. */ body.has-chrome .card::after { content: counter(card, persian); position: absolute; inset-block-end: -26px; inset-inline-end: 6px; /* در RTL یعنی گوشهٔ چپ */ z-index: 0; font-family: var(--display); font-weight: 800; font-size: 96px; line-height: .78; color: transparent; -webkit-text-stroke: 1.4px rgba(101, 50, 255, .08); user-select: none; pointer-events: none } /* متن بالای واترمارک */ body.has-chrome .card h4, body.has-chrome .card p { position: relative; z-index: 1 } /* حداقل ۱۴px — از 13.5px در ethics-base.css */ body.has-chrome .card p { font-size: 14px; line-height: 1.8 } /* نشانگر نقض، پیش از عنوان */ body.has-chrome .card h4 { display: flex; align-items: baseline; gap: 7px } body.has-chrome .card h4::before { content: '×'; flex-shrink: 0; font-size: 15px; font-weight: 700; line-height: 1; color: var(--breach) } /* ── تمرین از ابتدا فعال: گیت حذف ── اسکریپت inline هر صفحه یک دکمهٔ «شروع تمرین» می‌سازد و کلاس dormant را می‌گذارد. آن اسکریپت دست‌نخورده می‌ماند؛ فقط اثرش اینجا خنثی می‌شود: دکمه display:none (پس از accessibility tree هم حذف می‌شود) و محتوا به حالت عادی برمی‌گردد. دلیل: اگر تمرین ارزش اصلی صفحه است، یک کلیک بین کاربر و آن فقط اصطکاک است. blur هم پیام غلط می‌داد — در وب یعنی «قفل». با این، تمرین تعاملی از همان ابتدا پیدا و قابل استفاده است. */ body.has-chrome .dormant-gate { display: none !important } body.has-chrome .ex-box.dormant > *:not(.dormant-gate) { filter: none !important; opacity: 1 !important; pointer-events: auto !important; user-select: auto !important } /* ── ۴) کف ارتفاع ── .eth-hero-block از قبل تقریباً یک صفحهٔ نمایش ارتفاع می‌گیرد، پس این فقط بیمهٔ کوتاه‌ترین قاعده‌هاست (I(C) و I(D)). */ body.has-chrome .std { min-height: calc(100vh - 60px) } /* ═══════════════════════════════════════════════════════════ تمرین تعاملی (.box-body) — چیدمان و ظاهر قواعد .hud/.ad/.spot در