/* ═══════════════════════════════════════════════════════════════════════════
ریست + راستبهچپ + پوستهی مشترک
پوسته در سه بریکپوینت سه شکل دارد:
< 768 نوار بالا + تب پایین + منوی کشویی (برگر)
768-1023 همان — تبلت لمسی است و تب پایین در دسترس شست میماند
≥ 1024 سایدبار ثابت ۲۴۰ جای هر سه را میگیرد؛ نه برگر، نه کشو، نه تب پایین
همهی فاصلهها با logical properties نوشته شدهاند (inline-start/end)، پس
چیدمان RTL بدون هیچ override ای کار میکند.
═══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
direction: rtl;
font-family: var(--font-base);
font-size: var(--fs-md);
font-weight: var(--fw-reg);
line-height: var(--lh-body);
color: var(--color-text);
background: var(--color-bg);
display: flex;
min-height: 100vh;
min-height: 100dvh; /* روی موبایل ۱۰۰vh زیر نوار آدرس میرود و تب پایین دیده نمیشود */
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
}
button {
font-family: inherit;
cursor: pointer;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: inherit;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.skip-link {
position: absolute;
inset-inline-start: -9999px;
top: 0;
z-index: calc(var(--z-modal) + 1);
background: var(--color-surface);
padding: var(--space-xl) var(--space-2xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.skip-link:focus {
inset-inline-start: var(--space-xl);
top: var(--space-xl);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ═══════════════ اسکلت ═══════════════ */
.app-shell {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
/*
ویوها ارتفاعشان را با calc(100vh - var(--topbar-height) - var(--tabs-height))
حساب میکنند. در مسیرهایی که نوار بالا یا تب پایین وجود ندارد، صرفِ مخفیکردن
عنصر کافی نیست — خود توکن هم باید صفر شود وگرنه یک نوار خالی ته صفحه میماند.
تنها چیزی که باید در آن جهت رزرو بماند حاشیه امن دستگاه است.
*/
body:not(.has-topbar) {
--topbar-height: var(--safe-top);
}
body:not(.has-tabs) {
--tabs-height: var(--safe-bottom);
}
/* ═══════════════ نوار بالا (موبایل و تبلت) ═══════════════ */
.app-topbar {
flex: 0 0 auto;
min-height: var(--topbar-height);
/* بدون display اینجا — وگرنه ویژگی hidden بیاثر میشود */
align-items: center;
gap: var(--space-lg);
padding: calc(var(--safe-top) + var(--space-xl))
calc(var(--page-margin) + var(--safe-start))
var(--space-xl)
calc(var(--page-margin) + var(--safe-end));
background: var(--color-surface);
position: sticky;
top: 0;
z-index: var(--z-topbar);
}
.app-topbar:not([hidden]) {
display: flex;
}
.app-topbar__menu-btn {
flex: 0 0 32px;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: none;
color: var(--color-text);
display: grid;
place-items: center;
}
.app-topbar__menu-btn svg {
width: 32px;
height: 32px;
}
.app-topbar__who {
display: flex;
align-items: center;
gap: var(--space-md);
margin-inline-start: auto;
min-width: 0;
}
.app-topbar__greeting {
font-size: var(--fs-sm);
font-weight: var(--fw-med);
line-height: var(--lh-tight);
color: var(--color-text);
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.app-topbar__avatar {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
}
/* ═══════════════ محتوا ═══════════════ */
.view-root {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-xl)
calc(var(--page-margin) + var(--safe-start))
var(--space-3xl)
calc(var(--page-margin) + var(--safe-end));
}
/*
حاشیه امن عمودی: وقتی نوار بالا/تب پایین وجود دارد خودشان آن را جذب میکنند.
در مسیرهای بدون پوسته هیچکس جذبش نمیکرد و روی آیفون ناچدار محتوا زیر ناچ
(۵۹px) و زیر خط Home Indicator (۳۴px) میرفت.
*/
body:not(.has-topbar) .view-root {
padding-top: calc(var(--space-xl) + var(--safe-top));
}
body:not(.has-tabs) .view-root {
padding-bottom: calc(var(--space-3xl) + var(--safe-bottom));
}
/* ستون محتوا — همهی صفحات محتوایشان را داخل این میگذارند */
.container {
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
}
/* ستون باریک — فرمها و صفحات احراز هویت */
.container--narrow {
max-width: 420px;
}
/* ستون ابزار — ماشینحساب و مشابه؛ در دسکتاپ چیدمان افقی میگیرد */
.container--tool {
max-width: 640px;
}
/*
گرید کارت — تعداد ستون در طرح تأییدشده قطعی است: ۲ / ۳ / ۴.
نسخهی قبلی از `auto-fill` با کف `--card-min: 165px` استفاده میکرد و همین
شکننده بود: هر ظرفی باریکتر از ۳۴۲ (مثلاً گوشی ۳۷۵ پیکسلی، یا صفحهی
معلمیار که پدینگ خودش را هم دارد) بیصدا به یک ستون میافتاد. تعداد ستون
یک تصمیم طراحی است، نه نتیجهی جانبیِ عرض ظرف — پس صریح نوشته میشود و
--card-min فقط برای گریدهایی میماند که عمداً سیالاند.
*/
.grid-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--grid-row-gap) var(--grid-gutter);
}
@media (min-width: 768px) {
.grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ═══════════════ آیکون ناوبری ═══════════════
آیکونها SVG اکسپورتشده از همان آیکونپک فیگما هستند، ولی بهجای ![]()
بهصورت mask رندر میشوند تا رنگشان از currentColor بیاید. این تنها راهی است
که استیت فعال (تغییر رنگ) بدون ساختن نسخهی دوم هر آیکون کار میکند. */
/*
مسیر آیکونها باید همینجا در CSS تعریف شود، نه در style ای که در index.html
نوشته میشود: url() داخل یک custom property نسبت به فایلی که آن property را
اعلام کرده حل میشود. اگر در HTML بنویسیم، مرورگر آن را نسبت به css/base.css
حساب میکند و به css/assets/... میرسد که وجود ندارد.
*/
:root {
--icon-home: url("../assets/images/shell/nav/home.svg");
--icon-classroom: url("../assets/images/shell/nav/classroom.svg");
--icon-theater: url("../assets/images/shell/nav/theater.svg");
--icon-lab: url("../assets/images/shell/nav/lab.svg");
--icon-trip: url("../assets/images/shell/nav/trip.svg");
--icon-menu: url("../assets/images/shell/nav/menu.svg");
}
.nav-icon {
display: block;
width: 24px;
height: 24px;
flex: 0 0 24px;
background-color: currentColor;
-webkit-mask: var(--icon) center / contain no-repeat;
mask: var(--icon) center / contain no-repeat;
}
.nav-icon--menu {
width: 32px;
height: 32px;
flex-basis: 32px;
}
/* ═══════════════ تب پایین (موبایل و تبلت) ═══════════════ */
.app-tabs {
flex: 0 0 auto;
min-height: var(--tabs-height);
padding-bottom: var(--safe-bottom);
padding-inline: var(--safe-start) var(--safe-end);
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
background: var(--color-surface);
box-shadow: var(--shadow-xs-top);
position: sticky;
bottom: 0;
z-index: var(--z-tabs);
}
.app-tabs:not([hidden]) {
display: grid;
}
.app-tabs__btn {
background: none;
border: none;
padding: var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
border-radius: var(--radius-lg);
font-size: var(--fs-xs);
font-weight: var(--fw-med);
line-height: var(--lh-tight);
color: var(--color-text-muted);
min-width: 0;
overflow: hidden;
}
.app-tabs__btn svg {
width: 24px;
height: 24px;
flex: 0 0 24px;
}
.app-tabs__btn span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* استیت فعال: آیکون Bold + تغییر رنگ — یکسان برای هر پنج تب */
.app-tabs__btn.is-active {
color: var(--color-accent);
font-weight: var(--fw-bold);
}
.app-tabs__btn.is-active svg {
stroke-width: 2;
}
.app-tabs__btn[aria-disabled="true"] {
color: var(--color-text-subtle);
cursor: not-allowed;
pointer-events: none;
}
/* آیکونهای ناوبری با mask-image هستند، نه