/* ============================================================ Sormuus.mn — дизайны систем Өнгө, зай, фонт бүгд token-оор удирдагдана. Тухайн утгыг өөрчлөхөд сайт даяар нэг мөр тусна. ============================================================ */ /* ============================================================ ӨНГӨНИЙ СИСТЕМ Дөрвөн палитр × гэрэл/харанхуй. Бүх өнгө token-оор явна — компонентын кодод хатуу өнгө бичигдээгүй. HTML дээр: (data-theme байхгүй = систем дагана) Графикийн өнгө (--c1..--c5, --c-line) нь dataviz шалгагчаар баталгаажсан: нэг өнгийн ordinal ramp, гэрэл/харанхуй тус бүрдээ алхам нь монотон, хамгийн цайвар алхам дэвсгэрээс ≥2:1, шугам ≥3:1. ============================================================ */ :root, :root[data-palette="rose"] { color-scheme: light; --on-accent: #FFFFFF; --footer-bg: var(--ink); --footer-ink: var(--cream); --cream: #FDFAF7; --surface: #FFFFFF; --sand: #F7F1EA; --linen: #EFE4D8; --line: #E7DACE; --line-soft: #F0E7DD; --ink: #2B2320; --ink-2: #6E605A; --ink-3: #A2938B; --accent: #B5715A; --accent-d: #955944; --accent-l: #F8EAE3; --gold: #B18A3E; --c1: #DCA894; --c2: #C98B72; --c3: #B5715A; --c4: #955944; --c5: #74422F; --c-line: #B5715A; --ok: #0CA30C; --ok-bg: color-mix(in srgb, #0CA30C 12%, var(--surface)); --warn: #B8802A; --warn-bg: color-mix(in srgb, #FAB219 16%, var(--surface)); --danger: #C4403F; --danger-bg: color-mix(in srgb, #D03B3B 12%, var(--surface)); } :root[data-palette="blush"] { color-scheme: light; --on-accent: #FFFFFF; --footer-bg: var(--ink); --footer-ink: var(--cream); --cream: #FEF8FA; --surface: #FFFFFF; --sand: #FBEFF3; --linen: #F6E2E9; --line: #EFD6DF; --line-soft: #F7E8ED; --ink: #2C2126; --ink-2: #6D5C63; --ink-3: #A38F97; --accent: #B85C7E; --accent-d: #994A68; --accent-l: #FCE7EE; --gold: #B08748; --c1: #E4A6BC; --c2: #D183A0; --c3: #B85C7E; --c4: #994A68; --c5: #743650; --c-line: #B85C7E; } :root[data-palette="sage"] { color-scheme: light; --on-accent: #FFFFFF; --footer-bg: var(--ink); --footer-ink: var(--cream); --cream: #F7FBF8; --surface: #FFFFFF; --sand: #EDF5EF; --linen: #DFECE3; --line: #D3E3D8; --line-soft: #E8F1EB; --ink: #1F2722; --ink-2: #576259; --ink-3: #8B978F; --accent: #4F7F60; --accent-d: #3E684C; --accent-l: #E2F0E7; --gold: #9A7F35; --c1: #9EC4AB; --c2: #76A487; --c3: #4F7F60; --c4: #3E684C; --c5: #2A4D36; --c-line: #4F7F60; } :root[data-palette="lilac"] { color-scheme: light; --on-accent: #FFFFFF; --footer-bg: var(--ink); --footer-ink: var(--cream); --cream: #FAF8FE; --surface: #FFFFFF; --sand: #F1EEFA; --linen: #E6E1F5; --line: #DCD6F0; --line-soft: #EDE9F8; --ink: #241F2E; --ink-2: #5B5470; --ink-3: #948CAA; --accent: #6F5C9E; --accent-d: #5A4A84; --accent-l: #EBE6F9; --gold: #9A7F35; --c1: #B3A6DA; --c2: #9384C4; --c3: #6F5C9E; --c4: #5A4A84; --c5: #413363; --c-line: #6F5C9E; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"])[data-palette="rose"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --footer-bg: #000; --footer-ink: var(--ink-2); --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #16120F; --surface: #221C18; --sand: #2B241F; --linen: #352C26; --line: #3D332C; --line-soft: #2E2721; --ink: #F5EFE9; --ink-2: #BDAEA3; --ink-3: #8A7C72; --accent: #D09070; --accent-d: #E0A88A; --accent-l: #3A2A22; --gold: #D4B06A; --c1: #74422F; --c2: #955944; --c3: #B5715A; --c4: #C98B72; --c5: #DCA894; --c-line: #D09070; } :root:not([data-theme="light"])[data-palette="blush"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --footer-bg: #000; --footer-ink: var(--ink-2); --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #171013; --surface: #241A1F; --sand: #2E2127; --linen: #382930; --line: #413037; --line-soft: #302329; --ink: #F7EDF1; --ink-2: #C0AAB3; --ink-3: #8D7A82; --accent: #E08CAC; --accent-d: #EDA6C0; --accent-l: #3C2730; --gold: #D4AC66; --c1: #743650; --c2: #994A68; --c3: #B85C7E; --c4: #D183A0; --c5: #E4A6BC; --c-line: #E08CAC; } :root:not([data-theme="light"])[data-palette="sage"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --footer-bg: #000; --footer-ink: var(--ink-2); --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #0F1511; --surface: #18211B; --sand: #1F2A23; --linen: #26332A; --line: #2D3B31; --line-soft: #1D2721; --ink: #EBF3EE; --ink-2: #A8B8AE; --ink-3: #7B8A80; --accent: #7FB894; --accent-d: #9BCCAD; --accent-l: #22301F; --gold: #C4A85E; --c1: #2A4D36; --c2: #3E684C; --c3: #4F7F60; --c4: #76A487; --c5: #9EC4AB; --c-line: #7FB894; } :root:not([data-theme="light"])[data-palette="lilac"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --footer-bg: #000; --footer-ink: var(--ink-2); --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #121019; --surface: #1D1B26; --sand: #26232F; --linen: #2E2B3A; --line: #372F45; --line-soft: #252231; --ink: #F0EDF8; --ink-2: #B3ABC6; --ink-3: #847C99; --accent: #A794D8; --accent-d: #BCADE6; --accent-l: #2C2640; --gold: #C9AE6A; --c1: #413363; --c2: #5A4A84; --c3: #6F5C9E; --c4: #9384C4; --c5: #B3A6DA; --c-line: #A794D8; } } :root[data-theme="dark"], :root[data-theme="dark"][data-palette="rose"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #16120F; --surface: #221C18; --sand: #2B241F; --linen: #352C26; --line: #3D332C; --line-soft: #2E2721; --ink: #F5EFE9; --ink-2: #BDAEA3; --ink-3: #8A7C72; --accent: #D09070; --accent-d: #E0A88A; --accent-l: #3A2A22; --gold: #D4B06A; --c1: #74422F; --c2: #955944; --c3: #B5715A; --c4: #C98B72; --c5: #DCA894; --c-line: #D09070; } :root[data-theme="dark"][data-palette="blush"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #171013; --surface: #241A1F; --sand: #2E2127; --linen: #382930; --line: #413037; --line-soft: #302329; --ink: #F7EDF1; --ink-2: #C0AAB3; --ink-3: #8D7A82; --accent: #E08CAC; --accent-d: #EDA6C0; --accent-l: #3C2730; --gold: #D4AC66; --c1: #743650; --c2: #994A68; --c3: #B85C7E; --c4: #D183A0; --c5: #E4A6BC; --c-line: #E08CAC; } :root[data-theme="dark"][data-palette="sage"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #0F1511; --surface: #18211B; --sand: #1F2A23; --linen: #26332A; --line: #2D3B31; --line-soft: #1D2721; --ink: #EBF3EE; --ink-2: #A8B8AE; --ink-3: #7B8A80; --accent: #7FB894; --accent-d: #9BCCAD; --accent-l: #22301F; --gold: #C4A85E; --c1: #2A4D36; --c2: #3E684C; --c3: #4F7F60; --c4: #76A487; --c5: #9EC4AB; --c-line: #7FB894; } :root[data-theme="dark"][data-palette="lilac"] { color-scheme: dark; --on-accent: #16120F; --footer-bg: #000; --footer-ink: var(--ink-2); --cream: #121019; --surface: #1D1B26; --sand: #26232F; --linen: #2E2B3A; --line: #372F45; --line-soft: #252231; --ink: #F0EDF8; --ink-2: #B3ABC6; --ink-3: #847C99; --accent: #A794D8; --accent-d: #BCADE6; --accent-l: #2C2640; --gold: #C9AE6A; --c1: #413363; --c2: #5A4A84; --c3: #6F5C9E; --c4: #9384C4; --c5: #B3A6DA; --c-line: #A794D8; } /* Горим солиход өнгө зөөлөн шилжинэ — гэхдээ хөдөлгөөн багасгахыг хүссэн хэрэглэгчид хүндэтгэлтэй хандана. */ @media (prefers-reduced-motion: no-preference) { body, .card, .site-header, .table, .btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } } /* ---- Хэмжээ, хэлбэр, фонт (палитраас хамаарахгүй) ---- */ :root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-full: 999px; --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04); --shadow-2: 0 4px 14px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04); --shadow-3: 0 12px 34px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05); /* Кирилл бүрэн дэмжсэн гурвал. Playfair-ийн serif нь монгол үсгийн «ү», «ө», «н»-ийг нарийсгаж уншихад хүндрүүлдэг тул Inter Tight болгов. */ --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace; --wrap: 1140px; } /* ============================================================ Суурь ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-d); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--s4); } h1 { font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -.02em; } h2 { font-size: clamp(22px, 3.2vw, 30px); margin-top: var(--s7); letter-spacing: -.015em; } h3 { font-size: 19px; margin-top: var(--s5); } h4 { font-size: 16px; } p { margin: 0 0 var(--s4); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); } main { padding-block: var(--s6) var(--s9); min-height: 55vh; } .muted { color: var(--ink-2); } .center { text-align: center; } .spaced { margin-top: var(--s4); } .block { display: block; } /* ---- Зөвхөн дэлгэц уншигчид ---- Нүдэнд харагдахгүй, гэхдээ дэлгэц уншигч болон хайлтын систем уншина. `display: none` нь тэдгээрээс ч нуудаг тул тохирохгүй. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================ Дүрс (SVG sprite) ============================================================ */ .ico { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; } .ico-lg { width: 1.9em; height: 1.9em; } .ico-xl { width: 2.6em; height: 2.6em; stroke-width: 1.3; } .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r); background: var(--accent-l); color: var(--accent); flex: none; } .icon-tile .ico { width: 26px; height: 26px; } /* ============================================================ Толгой ба цэс ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line-soft); } /* Wrap нээлттэй: менежерийн цэс 7 холбоостой тул 768px орчимд багтахгүй бөгөөд тэр үед хоёр дахь мөрөнд буух нь дэлгэцээс халихаас дээр. Гол нь brand нь мөр таслуулахгүй байх — түүнийг flex-basis:0-оор шийдсэн (доор). Эс бөгөөс урт нэр товчнуудыг доош буулгана. */ .site-header .row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); min-height: 68px; } /* flex-basis:0 — brand-ийн "хүсэсэн" өргөн 0 болсноор ХЭЗЭЭ Ч мөр таслуулахгүй, үлдсэн зайг эзэлж, багтахгүй бол нэр нь цэгтэй товчлогдоно. min-width:0 нь ellipsis ажиллахад шаардлагатай. */ .brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); flex: 1 1 0; min-width: 0; } .brand:hover { color: var(--ink); } .brand .logo { width: 36px; height: 36px; border-radius: var(--r-full); object-fit: cover; } .brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; flex-shrink: 0; } .nav a { padding: var(--s2) var(--s3); border-radius: var(--r-full); color: var(--ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .15s ease, color .15s ease; } .nav a:hover { background: var(--sand); color: var(--ink); } .nav a.active { background: var(--accent-l); color: var(--accent-d); } /* .nav a (0,2,0) нь .btn (0,1,0)-г дардаг тул товчийг тусад нь зааж өгнө */ .nav a.btn { color: var(--on-accent); } .nav a.btn:hover { background: var(--accent-d); color: var(--on-accent); } .user-corner { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--sand); color: var(--ink-2); order: 3; flex-shrink: 0; } .user-corner:hover { background: var(--linen); color: var(--ink); } /* Сагсны товч — тоон тэмдэглэгээ булан дээр */ .cart-corner { position: relative; } .cart-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .nav-toggle { display: none; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--sand); color: var(--ink); cursor: pointer; } /* ============================================================ Толгойн цэс — 900px хүртэл хумигдсан (hamburger) ============================================================ Менежерийн цэс 7 холбоостой: Үйлчилгээ, Багц, Бүтээгдэхүүн, Сургалт, Удирдлага, Гарах, «Цаг авах». 768px дээр эдгээр нь brand-тайгаа нэг мөрийг дүүргээд, өнгө/хэрэглэгчийн товчийг хоёр дахь мөр рүү шахаж байв. Тиймээс цэсний хумилтыг 720 биш 900px-ээс эхлүүлнэ. ============================================================ */ @media (max-width: 900px) { .site-header .row { flex-wrap: wrap; gap: var(--s3); row-gap: 0; } .nav-toggle { display: grid; place-items: center; order: 1; } /* flex-basis:0 — brand-ийн "хүсэлт" 0 болсноор толгойн мөр хэзээ ч таслагдахгүй, үлдсэн зайг эзэлж, багтахгүй бол нэр нь товчлогдоно */ .brand { order: 2; margin-left: var(--s2); } .brand-name { font-size: 19px; } .theme-menu { order: 3; } .user-corner { order: 3; } .nav { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s3) 0 var(--s4); margin-left: 0; border-top: 1px solid var(--line-soft); /* Урт цэс дэлгэцээс хэтрэхгүй — дотроо гүйнэ */ max-height: calc(100vh - 68px); overflow-y: auto; } body.nav-open .nav { display: flex; } .nav a { padding: var(--s3) var(--s4); border-radius: var(--r); } .nav a.btn { margin-left: 0 !important; margin-top: var(--s2); justify-content: center; } } /* ============================================================ Товч ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 11px 22px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s ease, box-shadow .15s ease, transform .1s ease; box-shadow: var(--shadow-1); } .btn:hover { background: var(--accent-d); color: var(--on-accent); box-shadow: var(--shadow-2); } .btn:active { transform: translateY(1px); } .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; } .btn.ghost:hover { background: var(--sand); color: var(--ink); border-color: var(--line); } .btn.outline { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; } .btn.outline:hover { background: var(--accent-l); color: var(--accent-d); } .btn.danger { background: var(--danger); color: #fff; } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 82%, #000); color: #fff; } .btn.sm { padding: 7px 14px; font-size: 13px; } .btn.lg { padding: 15px 32px; font-size: 16px; } .btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; } .page-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); } /* Каталогийн «сагсанд нэмэх» мөр */ .cart-add { display: flex; gap: var(--s2); margin-top: var(--s3); } .cart-add input[type="number"] { width: 68px; padding: 7px var(--s2); text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; -moz-appearance: textfield; } .cart-add input::-webkit-outer-spin-button, .cart-add input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cart-add .btn { flex: 1; } /* ============================================================ Карт ба сүлжээ ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); } .card + .card { margin-top: var(--s4); } .grid { display: grid; gap: var(--s4); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); } /* ============================================================ Хүснэгт ============================================================ */ .table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .table th, .table td { padding: var(--s3) var(--s3); text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .table th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--sand); white-space: nowrap; } .table tr:last-child td { border-bottom: 0; } /* Үйлдлийн багана. Хүснэгтийн автомат өргөнөөс болж «Засах/Устгах» товчнууд хүснэгт бүрт өөр өөр байрлалд үсэрдэг байсныг зогсооно: товчтой нүд агуулгадаа багтаж, үлдсэн зай нэрийн баганад очно. */ .table td:has(> .btn) { width: 1%; white-space: nowrap; text-align: right; } .table td:has(> .btn) .btn + .btn { margin-left: var(--s2); } .table tbody tr { transition: background .12s ease; } .table tbody tr:hover { background: var(--cream); } /* Хүснэгтийг картанд байрлуулахад ирмэг цэвэрхэн байх */ .card > .table:first-child { margin-top: calc(var(--s5) * -1); } .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--surface); } .table-wrap .table th:first-child, .table-wrap .table td:first-child { padding-left: var(--s5); } .table-wrap .table th:last-child, .table-wrap .table td:last-child { padding-right: var(--s5); } /* ============================================================ Тэмдэг (badge) ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-full); background: var(--sand); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad, .badge.danger { background: var(--danger-bg); color: var(--danger); } .badge.gold { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--gold); } .pill { display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--r-full); font-size: 12.5px; color: var(--ink-2); } /* ============================================================ Форм ============================================================ */ .form-group { margin-bottom: var(--s4); } .form-group > label, label.block { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], input[type="search"], select, textarea { width: 100%; padding: 11px var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.5; transition: border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); } textarea { resize: vertical; min-height: 82px; } select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E605A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s3) center; padding-right: var(--s6); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: -3px; margin-right: 6px; cursor: pointer; } .help, .helptext, .form-group .help { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; } .errorlist { list-style: none; margin: 6px 0 0; padding: var(--s2) var(--s3); background: var(--danger-bg); border-radius: var(--r-sm); color: var(--danger); font-size: 13px; } fieldset { border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s4); margin: 0 0 var(--s4); } legend { padding: 0 var(--s2); font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; } /* Чекбоксын хүрээ — эрх сонгох мэт газарт */ .check-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); } .check-row + .check-row { margin-top: var(--s2); } .check-row:has(input:checked) { border-color: var(--accent); background: var(--accent-l); } /* ============================================================ Мессеж ============================================================ */ .messages { list-style: none; margin: 0 0 var(--s5); padding: 0; } .messages li { padding: var(--s3) var(--s4); border-radius: var(--r); border-left: 3px solid var(--ink-3); background: var(--sand); font-size: 14.5px; } .messages li + li { margin-top: var(--s2); } .messages .success { background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); } .messages .info { background: var(--accent-l); border-left-color: var(--accent); color: var(--accent-d); } .messages .warning { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); } .messages .danger, .messages .error { background: var(--danger-bg); border-left-color: var(--danger); color: var(--danger); } /* ============================================================ Нүүр хуудас — hero ============================================================ */ .hero { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--linen) 0%, var(--sand) 55%, var(--accent-l) 100%); margin-bottom: var(--s7); } .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s6); padding: var(--s8) var(--s7); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-d); margin-bottom: var(--s3); } .hero h1 { font-size: clamp(34px, 5.4vw, 56px); letter-spacing: -.025em; line-height: 1.08; margin-bottom: var(--s4); } .hero h1 em { font-style: normal; font-weight: 700; color: var(--accent-d); } .hero p { font-size: 17px; color: var(--ink-2); max-width: 46ch; margin-bottom: var(--s5); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); } .hero-visual { aspect-ratio: 4 / 3.4; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-3); } .hero-visual img { width: 100%; height: 100%; object-fit: cover; } .hero-visual.placeholder { display: grid; place-items: center; color: var(--accent); background: var(--surface); } .hero-stats { display: flex; flex-wrap: wrap; gap: var(--s6); padding: var(--s5) var(--s7) var(--s7); border-top: 1px solid rgba(255,255,255,.5); } .hero-stat .n { font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--ink); } .hero-stat .l { font-size: 12.5px; color: var(--ink-2); letter-spacing: .04em; } /* Хэсгийн толгой */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); } /* Жагсаалтын хуудсуудын толгой: гарчиг + үйлдлийн товч. Өмнө нь inline style-аар бичигдэж, доод зайгүй байсан тул гарчиг дараагийн хүснэгт/ангилалдаа наалддаг байв. */ .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); } .page-head h1, .page-head h2 { margin: 0; } .page-head .row-flex { gap: var(--s2); } .section-head h2 { margin: 0; } .section-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; } .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } /* ============================================================ Үйлчилгээ / ангилал ============================================================ */ /* ---- Хайлтын мөр ---- */ .search-bar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); } .search-field { display: flex; align-items: center; gap: var(--s2); flex: 1 1 260px; min-width: 0; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); } .search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); } .search-field .ico { flex: none; color: var(--ink-3); } .search-field input { flex: 1; min-width: 0; padding: 11px 0; border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; } .search-field input:focus { outline: none; box-shadow: none; } .search-field input::-webkit-search-cancel-button { cursor: pointer; } .cat-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); } /* Шүүлтийн үр дүнгийн мөр чипсийнхээ доор наалдана */ .cat-chips:has(+ .filter-summary) { margin-bottom: var(--s2); } .filter-summary { margin: 0 0 var(--s5); font-size: 13.5px; color: var(--ink-3); } /* Ангилал доторх тоо */ .chip-n { min-width: 18px; padding: 1px 6px; border-radius: var(--r-full); background: var(--sand); color: var(--ink-3); font-size: 11.5px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; } .cat-chips a.on .chip-n { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); } .cat-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 500; } .cat-chips a:hover { border-color: var(--accent); color: var(--accent-d); background: var(--accent-l); } /* Идэвхтэй шүүлтүүр. Өмнө нь загварт inline `color:#fff` бичигддэг байсан — харанхуй горимд --accent цайвар болдог тул цагаан үсэг уншигдахаа больдог. */ .cat-chips a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .cat-chips a.on:hover { background: var(--accent-d); border-color: var(--accent-d); color: var(--on-accent); } .cat-section { margin-bottom: var(--s7); scroll-margin-top: 90px; } .cat-title, .category-header { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); } .cat-title h2, .category-header h2 { margin: 0; font-size: 22px; } .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: var(--s4); } .svc-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.svc-card:hover, .svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line); } .svc-card .name { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; } .svc-card .desc { font-size: 13.5px; color: var(--ink-2); flex: 1; margin-bottom: var(--s4); } .svc-card .meta, .svc-card .bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line-soft); } /* Хоёулаа min-width:auto тул багтахгүй үед агшихын оронд халидаг байв */ .svc-card .meta > *, .svc-card .bottom > * { min-width: 0; } .svc-card .price, .svc-card .meta .price { white-space: nowrap; } /* Бүтээгдэхүүн, сургалтын карт нь .top/.bottom/.arrow ашигладаг байсан ч эдгээрт CSS бичигдээгүй байсан тул үнэ, хугацаа эгнээндээ ороогүй, тусгаарлах зураас гардаггүй байв. */ .svc-card .top { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: 5px; } .svc-card .top .name { margin-bottom: 0; } .svc-card .arrow { margin-left: 6px; color: var(--accent); font-weight: 600; } .price { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .price .old { font-size: 14px; color: var(--ink-3); text-decoration: line-through; margin-right: 6px; font-family: var(--font-body); } .duration { font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; } /* ============================================================ Багц ============================================================ */ .bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s4); } .bndl-card { position: relative; background: linear-gradient(160deg, var(--surface) 0%, var(--sand) 100%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); } .bndl-card .items { list-style: none; margin: var(--s3) 0; padding: 0; font-size: 13.5px; color: var(--ink-2); } .bndl-card .items li { display: flex; align-items: center; gap: 7px; padding: 3px 0; } .bndl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); } .bndl-head h3 { margin: 0; } .save-badge { flex: none; padding: 4px 11px; border-radius: var(--r-full); background: var(--gold); color: var(--surface); font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-top: var(--s3); } /* Үнэ, хугацаа нь дундуураа тасрахгүй. «60,000₮-өөс» мэт урт утга орвол бүхэл бүтнээрээ дараагийн мөрт бууна. */ .price-line .old, .price-line .new, .price-line .duration { white-space: nowrap; } /* Багцын дэлгэрэнгүй — артист тус бүрийн бодит үнэ нэрийн хажууд */ .offer-row { display: flex; width: 100%; align-items: center; gap: var(--s3); justify-content: flex-start; text-align: left; } .offer-row .offer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .offer-row .offer-price { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .offer-row .offer-price s { font-size: 12.5px; font-weight: 400; } .price-line .new { font-family: var(--font-display); font-size: 23px; font-weight: 600; } /* ============================================================ Баг / артист ============================================================ */ .team-grid, .artist-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--s4); } .team-card, .artist-pick-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; } a.artist-pick-card:hover, a.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--ink); } .team-avatar, .artist-pick-avatar, .trainee-avatar { width: 92px; height: 92px; border-radius: var(--r-full); object-fit: cover; margin-bottom: var(--s3); background: var(--linen); display: grid; place-items: center; color: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); } .team-card .name, .artist-pick-name, .tname { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 3px; } .tbio, .artist-pick-bio { font-size: 13px; color: var(--ink-2); } .artist-pick-info { font-size: 12.5px; color: var(--ink-3); margin-top: var(--s2); } .artist-pick-arrow { margin-top: var(--s3); color: var(--accent); } /* ============================================================ Алхмын заагч ============================================================ */ .steps { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); } .step { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); } .step-circle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--sand); color: var(--ink-3); font-size: 12.5px; font-weight: 700; } .step.active { color: var(--ink); font-weight: 600; } .step.active .step-circle { background: var(--accent); color: var(--on-accent); } .step.done { color: var(--ink-2); } .step.done .step-circle { background: var(--ok-bg); color: var(--ok); } .steps .sep { color: var(--ink-3); } /* ============================================================ Өдөр / цаг сонгох ============================================================ */ .day-strip { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s3); margin-bottom: var(--s5); scrollbar-width: thin; } .day-strip a { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: var(--s3) var(--s2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); transition: all .15s ease; } .day-strip a:hover { border-color: var(--accent); background: var(--accent-l); } .day-strip a.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .day-strip .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; } .day-strip .dnum { font-family: var(--font-display); font-size: 20px; font-weight: 600; } /* Тухайн өдрийн захиалгын тоо */ .day-count { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .day-strip a.active .day-count { background: var(--surface); color: var(--accent); } /* Өнөөдрийг заах цэг */ .day-today { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: var(--r-full); background: var(--accent); } .day-strip a.active .day-today { background: var(--on-accent); } .time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s2); } .time-grid a, .time-grid .time-slot-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 15.5px; font-weight: 600; transition: all .15s ease; } .time-grid a:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-2); transform: translateY(-2px); } .time-grid .time-slot-pending { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 32%, var(--surface)); color: var(--warn); cursor: not-allowed; } .pend-timer { font-size: 11px; font-weight: 500; opacity: .85; } /* Ажилтны өдрийн сүлжээ */ .day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); } .day-cell { border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s3); background: var(--surface); } .day-cell.open { border-color: var(--ok); background: var(--ok-bg); } .day-cell-head { text-align: center; margin-bottom: var(--s2); } .day-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; } .day-dow, .day-month { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; } .day-times { font-size: 12.5px; color: var(--ok); font-weight: 600; text-align: center; padding: 2px 0; } /* Өдрийн хувийн цагийн тохиргоо */ .day-custom { margin-top: var(--s1); } .day-custom summary { cursor: pointer; text-align: center; padding: 4px; font-size: 12px; color: var(--ink-3); } .day-custom-form { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s1); font-size: 12px; } .day-custom-form label { display: flex; flex-direction: column; gap: 2px; color: var(--ink-3); } .day-custom-form input { padding: 6px var(--s2); font-size: 13px; } /* ============================================================ Төлбөр ============================================================ */ .pay-qr-wrap { max-width: 420px; margin: 0 auto; } .qr { width: 100%; max-width: 280px; margin: var(--s4) auto; border-radius: var(--r); display: block; } .pay-countdown { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: var(--r-full); background: var(--sand); color: var(--ink-2); font-size: 14px; font-weight: 500; } .pay-countdown .pc-value { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .pay-countdown.warning { background: var(--warn-bg); color: var(--warn); } .pay-countdown.warning .pc-value { color: var(--warn); } .pay-countdown.expired { background: var(--danger-bg); color: var(--danger); } .deeplinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: var(--s2); } .deeplinks a { display: grid; place-items: center; aspect-ratio: 1; padding: var(--s2); border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface); transition: all .15s ease; } .deeplinks a:hover { border-color: var(--accent); box-shadow: var(--shadow-2); } .deeplinks img { width: 100%; height: auto; border-radius: 6px; } /* ============================================================ Статистикийн хайрцаг ============================================================ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); } /* min-width:0 — "10,150,000₮" гэх урт тоо баганаа тэлж, хуудсыг хэвтээгээр гүйлгэхээс сэргийлнэ */ .stat { min-width: 0; } .stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s4); } .stat .l { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .stat .n { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.15; } .stat.accent { background: var(--accent-l); border-color: transparent; } .stat.accent .n { color: var(--accent-d); } /* Хоосон төлөв */ .empty { text-align: center; padding: var(--s7) var(--s5); color: var(--ink-2); } .empty .ico { color: var(--ink-3); margin-bottom: var(--s3); } .empty h3 { margin: 0 0 var(--s2); } /* ============================================================ Хөл ============================================================ */ .site-footer { margin-top: var(--s9); padding: var(--s8) 0 var(--s6); background: var(--footer-bg); color: var(--footer-ink); text-align: center; } .site-footer a { color: var(--footer-ink); opacity: .78; } .site-footer a:hover { opacity: 1; } .social-row { display: flex; justify-content: center; gap: var(--s3); margin-bottom: var(--s4); } .social-row a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-full); background: rgba(255,255,255,.08); transition: background .15s ease; } .social-row a:hover { background: var(--accent); color: var(--on-accent); } .site-footer .muted { color: var(--footer-ink); opacity: .55; } /* ============================================================ Туслах ============================================================ */ .dot-line { display: flex; align-items: baseline; gap: var(--s2); } .dot-line::after { content: ""; flex: 1; border-bottom: 1px dotted var(--line); } .mobile-only { display: none; } .emoji { font-size: 22px; } .sub { font-size: 13px; color: var(--ink-2); } /* ============================================================ Адаптив ============================================================ */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; padding: var(--s6) var(--s5); } .hero-visual { order: -1; aspect-ratio: 16/10; } .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .container { padding: 0 var(--s4); } main { padding-block: var(--s5) var(--s7); } .brand-name { font-size: 19px; } /* Алхмын заагч — 4 алхам 360px дээр багтана */ .steps { gap: 6px; margin-bottom: var(--s5); } .step { font-size: 12px; } .step-circle { width: 22px; height: 22px; font-size: 11.5px; } .steps .sep .ico { width: 14px; height: 14px; } .mobile-only { display: block; } .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } /* Нэг багана болоход хураангуй нь формын ДООР унадаг байв. Төлөхийн өмнө юунд төлж байгаагаа хардаг байх нь зөв дараалал тул дээш нь. */ .pay-summary { order: -1; } .hero-stats { gap: var(--s5); padding: var(--s4) var(--s5) var(--s6); } .section-head { flex-direction: column; align-items: flex-start; } .card { padding: var(--s4); } .table th, .table td { padding: var(--s2) var(--s2); font-size: 13.5px; } /* .table-wrap-гүй хүснэгтүүд 390px дэлгэцээс халиад хуудсыг хэвтээгээр гүйлгэдэг байв. Хүснэгт өөрөө дотроо гүйнэ. */ .table { display: block; overflow-x: auto; } .table-wrap .table { display: table; overflow: visible; } .time-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .time-grid a, .time-grid .time-slot-pending { min-height: 60px; } } @media print { .site-header, .site-footer, .page-actions, .btn { display: none !important; } body { background: #fff; } .card { box-shadow: none; border-color: #ddd; } } /* ============================================================ Сонголтын доод тавцан (multi-service) ============================================================ */ .sumbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: saturate(140%) blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0,0,0,.10); animation: sumbar-up .22s ease; } @keyframes sumbar-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .sumbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); } /* Багцын карт — товч доод талд жигдэрнэ */ .bndl-card { display: flex; flex-direction: column; } .bndl-card h3 { font-size: 18px; } .bndl-card .sub { margin-bottom: var(--s2); } .bndl-card .items { flex: 1; } .bndl-foot { margin-top: auto; } .bndl-foot .btn { width: 100%; margin-top: var(--s3); } /* Сонгогдсон чекбоксын мөр — том хүрэх талбай */ .check-row { cursor: pointer; } .check-row input { margin-top: 3px; } /* ---- Хэсгүүдийн хоорондын зай ---- */ main section { margin-top: var(--s8); } /* Хуудсын ХАМГИЙН ЭХНИЙ элемент л дээд зайгаа алдана. Өмнө нь `:first-of-type` байсан тул өмнөө
(жишээ нь артистын сүлжээ) байсан ч «эхний section» гэж тооцогдож, гарчиг нь дээрх картуудад наалдаж байв. */ main > .container > section:first-child, main > .container > .messages:first-child + section { margin-top: 0; } /* Сүлжээн доторх хэсгүүд нь баганын элемент — мөрийн зайг сүлжээний gap өгнө. Эс бөгөөс зэрэгцээ хоёр картын эхнийх нь `:first-of-type`-аар 0, хоёр дахь нь өөрийн margin-аа авч, дээд ирмэг нь зөрдөг байв. */ .grid > section, .bundle-grid > section, .stat-grid > section { margin-top: 0; } /* Grid элементийн min-width нь анхдагчаар auto — доторх хүснэгт өргөн бол мөрийг өөрөө тэлж, эцэг нь дэлгэцээс халина. 0 болгосноор багтана. */ .grid > * { min-width: 0; } main > .container > h1:first-child { margin-bottom: var(--s5); } /* ---- Hero-гийн орлуулагч зураг ---- */ .hero-visual.placeholder { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 55%), radial-gradient(circle at 72% 70%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--surface); } .hero-visual.placeholder .ico { opacity: .55; } /* ---- Хөлний цэс ---- */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-bottom: var(--s5); font-size: 14px; } .footer-nav a { color: var(--footer-ink); opacity: .72; } .footer-nav a:hover { opacity: 1; } /* ============================================================ Өнгө солих цэс ============================================================ */ /* ---- Баталгаажуулах хуудасны дэлгэрэнгүй ---- Өмнө нь зөвхөн нэр харагддаг байсан тул хэрэглэгч юунд төлж байгаагаа шалгахын тулд буцах шаардлагатай болдог байв. */ .item-detail { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s3) 0; } .item-detail + .item-detail { border-top: 1px solid var(--line); } .item-detail-img { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); background: var(--sand); } .item-detail-ph { display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .item-detail-ph .ico { width: 26px; height: 26px; } .item-detail-body { min-width: 0; flex: 1 1 0; } .item-detail-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; } .item-detail-meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; } .item-detail-desc { margin: var(--s2) 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); } /* Багц юунаас бүрдэж байгаа */ .item-parts { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .item-parts-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3); } .item-parts ul { list-style: none; margin: 0; padding: 0; } .item-parts li { display: flex; justify-content: space-between; gap: var(--s4); padding: 5px 0; font-size: 14px; } .item-parts li .muted { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; } @media (max-width: 420px) { .item-detail-img { width: 56px; height: 56px; } .item-parts li { flex-direction: column; gap: 0; } } /* ---- Удирдлагын хажуугийн цэс ---- Нэг хуудас руу орчихоод нөгөө рүү шилжихийн тулд дашбоард руу буцах шаардлагагүй болгоно. Гар утсанд хөндлөн гүйдэг мөр болно. */ .admin-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: var(--s6); align-items: start; } .admin-main { min-width: 0; } .admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--s4); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .admin-nav a { display: flex; align-items: center; gap: var(--s3); padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; text-decoration: none; white-space: nowrap; } .admin-nav a:hover { background: var(--sand); color: var(--ink); } .admin-nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); font-weight: 600; } .admin-nav a[aria-current="page"] .ico { color: var(--on-accent); } .admin-nav .sep { margin-top: var(--s3); padding-top: calc(var(--s3) + 2px); border-top: 1px solid var(--line); } @media (max-width: 900px) { /* Хажуугийн багана нарийн дэлгэцэд багтахгүй — дээд талд хөндлөн мөр. */ .admin-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .admin-nav { position: static; flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .admin-nav::-webkit-scrollbar { display: none; } .admin-nav a { flex: none; } .admin-nav .sep { margin-top: 0; padding-top: 8px; margin-left: var(--s3); padding-left: calc(var(--s3) + 2px); border-top: 0; border-left: 1px solid var(--line); } } /* ---- Хэрэглэгчийн цэс ---- Профайлын товч нь өмнө нь шууд дашбоард/хуанли руу үсэрдэг байсан тул давхар эрхтэй хүн нөгөө талдаа хэрхэн орохоо олдоггүй байв. Одоо цэс. */ .user-menu { position: relative; order: 3; flex-shrink: 0; } .user-menu .user-corner { position: relative; } .mode-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent); border: 1.5px solid var(--surface); } .user-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 212px; max-width: calc(100vw - var(--s4) * 2); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); display: none; z-index: 60; } .user-menu.open .user-pop { display: block; } .user-pop-name { font-weight: 600; font-size: 14px; color: var(--ink); padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-pop-role { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; } .user-pop-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; } .mode-switch { display: flex; gap: 4px; margin-bottom: var(--s4); } .mode-switch button { flex: 1; padding: 7px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; } .mode-switch button:hover { background: var(--sand); } .mode-switch button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .user-pop-links { display: flex; flex-direction: column; } .user-pop-links a { padding: 7px 6px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; text-decoration: none; } .user-pop-links a:hover { background: var(--sand); color: var(--ink); } .user-pop-out { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); } .user-pop-out button { width: 100%; padding: 7px 6px; text-align: left; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14px; cursor: pointer; border-radius: var(--r-sm); } .user-pop-out button:hover { background: var(--sand); color: var(--ink); } .theme-menu { position: relative; order: 3; flex-shrink: 0; } .theme-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 212px; max-width: calc(100vw - var(--s4) * 2); padding: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); display: none; z-index: 60; } .theme-menu.open .theme-pop { display: block; } .theme-pop-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; } .theme-pop-label + * + .theme-pop-label { margin-top: var(--s4); } .theme-modes { display: flex; gap: 4px; } .theme-modes button { flex: 1; padding: 7px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; } .theme-modes button:hover { background: var(--sand); } .theme-modes button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .theme-swatches { display: flex; gap: var(--s2); } .theme-swatches .sw { width: 34px; height: 34px; padding: 0; cursor: pointer; border: 2px solid transparent; border-radius: var(--r-full); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .theme-swatches .sw.on { border-color: var(--ink); } .sw-rose { background: linear-gradient(135deg, #B5715A 50%, #F8EAE3 50%); } .sw-blush { background: linear-gradient(135deg, #B85C7E 50%, #FCE7EE 50%); } .sw-sage { background: linear-gradient(135deg, #4F7F60 50%, #E2F0E7 50%); } .sw-lilac { background: linear-gradient(135deg, #6F5C9E 50%, #EBE6F9 50%); } /* 320px — сагсны товч нэмэгдэхэд толгой дүүрч, нэр нь "K…" болтлоо таслагдаад өнгөний цонх зүүн тийшээ халж байв. Зайг чангалж, лого байгаа бол нэрийг нь нууна (логогүй бол нэр үлдэнэ). */ @media (max-width: 380px) { .site-header .row { gap: var(--s2); } .nav-toggle, .user-corner { width: 36px; height: 36px; } .brand:has(.logo) .brand-name { display: none; } .theme-pop { min-width: 0; width: 196px; padding: var(--s2); } .theme-swatches .sw { width: 30px; height: 30px; } } /* ============================================================ ДАШБОАРД Графикийн өнгө --c1..--c5 / --c-line нь палитр бүрт тусад нь тодорхойлогдсон, dataviz шалгагчаар баталгаажсан ramp. ============================================================ */ .dash-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s5); } .dash-head h1 { margin: 0; } /* Хугацааны сонголт */ .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; max-width: 100%; } .seg a { flex: 1 1 auto; min-width: 0; padding: 8px 15px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--surface); text-align: center; white-space: nowrap; } .seg a + a { border-left: 1px solid var(--line); } .seg a:hover { background: var(--sand); } .seg a.on { background: var(--accent); color: var(--on-accent); } /* ---- Тэргүүн тоо ---- */ .hero-figure { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding: var(--s6); background: var(--sand); border-radius: var(--r-lg); } .hf-label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .hf-value { font-family: var(--font-body); /* тоо — sans, хэмжихэд тод */ font-size: clamp(40px, 6vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin: 4px 0 var(--s2); } .hf-unit { font-size: .45em; font-weight: 600; color: var(--ink-3); margin-left: 4px; } .hf-delta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; } .hf-delta.up { color: #0CA30C; } .hf-delta.down { color: var(--danger); } .hf-split { display: flex; gap: var(--s5); } .hf-split > a { display: flex; flex-direction: column; color: inherit; padding: var(--s2) var(--s3); margin: calc(var(--s2) * -1) calc(var(--s3) * -1); border-radius: var(--r-sm); } .hf-split > a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: inherit; } .hf-split .l { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; } .hf-split .v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } .stat .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; } .stat.alert { border-color: var(--warn); background: var(--warn-bg); } .stat.alert .n { color: var(--warn); } .stat .n { font-variant-numeric: tabular-nums; } /* ---- График ---- */ .chart-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1); margin-top: var(--s6); } .chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); } .chart-head h2 { margin: 0; font-size: 19px; } .chart-wrap { position: relative; height: 180px; } .chart { display: block; width: 100%; height: 180px; overflow: visible; } .chart .grid { stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; } .chart .area { fill: var(--c-line); opacity: .12; } .chart .line { fill: none; stroke: var(--c-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .chart-hit { position: absolute; inset: 0; } .chart-hit .hit { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); cursor: crosshair; } .crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); opacity: .45; pointer-events: none; } .dot { position: absolute; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--c-line); box-shadow: 0 0 0 2px var(--surface); transform: translate(-50%, -50%); pointer-events: none; } .tip { position: absolute; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface); font-size: 12.5px; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-2); } .tip b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; } .tip span { opacity: .7; } .chart-axis { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 12px; color: var(--ink-3); } .data-table { margin-top: var(--s4); } .data-table summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 6px 0; list-style: none; } .data-table summary::marker { content: ""; } .data-table summary::before { content: "▸ "; color: var(--ink-3); } .data-table[open] summary::before { content: "▾ "; } /* ---- Хэвтээ баганан график (хүснэгт хэлбэрээр) ---- */ /* table-layout: fixed — auto үед `.bar-cell { width: 100% }` нь бүх зайг шаардаж, нэрийн багана нь min-content хүртэл хураагддаг. overflow-wrap нэмэгдсэнээр min-content = НЭГ ТЭМДЭГТ болж, нэрс босоогоор бичигдэж байв. Fixed үед доорх өргөнүүд нь баталгаатай биелнэ. */ .bars { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; } .bars th[scope="row"] { width: 190px; text-align: left; font-weight: 600; padding: var(--s2) var(--s3) var(--s2) 0; } .bars th[scope="row"] > span { display: block; /* break-word нь зөвхөн үг нь багтахгүй үед таслана — `anywhere` шиг тэмдэгт бүрээр таслахгүй */ overflow-wrap: break-word; } .bars .bar-val { width: 108px; } /* Media query нь specificity нэмдэггүй тул эдгээр нь дээрх дүрмүүдийн ДАРАА байх ёстой — эс бөгөөс дэлгэцийн өргөнүүд гар утсанд ч үлдэж, хүснэгт 320px дээр картаас халина. */ @media (max-width: 720px) { .bars th[scope="row"] { width: 104px; font-size: 13px; } .bars .bar-val { width: 76px; font-size: 13px; } } @media (max-width: 380px) { .bars th[scope="row"] { width: 88px; } .bars .bar-val { width: 66px; } } .bar-cell { width: 100%; padding: var(--s2) 0; } .bar { display: block; height: 20px; min-width: 3px; border-radius: 0 4px 4px 0; /* өгөгдлийн төгсгөл бөөрөнхий */ background: var(--c3); } /* Нэг өнгө: урт нь хэмжээг илэрхийлнэ. Эрэмбээр өнгө онооход шүүлтүүр өөрчлөгдөхөд өнгө нь үсэрч, өгөгдлийг андуурахад хүргэдэг. */ .bar.r3 { background: var(--c3); } /* үйлчилгээ */ .bar.r1 { background: var(--c1); } /* бараа */ .bar.r2 { background: var(--c2); } /* сургалт */ .bar-val { padding: var(--s2) 0 var(--s2) var(--s3); text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-meta td { padding: 0 0 var(--s3); font-size: 12.5px; color: var(--ink-3); } /* ---- Үйл ажиллагааны хайрцаг ---- */ .ops-card { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink); } .ops-card:hover { border-color: var(--accent); color: var(--ink); box-shadow: var(--shadow-2); } .ops-card .ico { color: var(--ink-3); margin-bottom: var(--s2); } .ops-card .n { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .ops-card .l { font-size: 12.5px; color: var(--ink-2); } .ops-card.hot { border-color: var(--warn); background: var(--warn-bg); } .ops-card.hot .ico, .ops-card.hot .n { color: var(--warn); } /* ---- Удирдлагын холбоосууд ---- */ .link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--s2); } .link-grid a { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-soft); color: var(--ink-2); font-size: 14px; font-weight: 500; } .link-grid a:hover { border-color: var(--accent); color: var(--accent-d); background: var(--accent-l); } .link-grid .ico { color: var(--ink-3); } .link-grid a:hover .ico { color: var(--accent); } @media (max-width: 720px) { .hero-figure { flex-direction: column; align-items: stretch; padding: var(--s5); } .hf-split { flex-wrap: wrap; gap: var(--s4); } .bars th[scope="row"] { font-size: 13px; } /* Нарийн дэлгэцэнд том тоо багтахгүй — фонтыг нь жижигрүүлнэ */ .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .stat .n { font-size: 21px; } .bars th[scope="row"] > span { max-width: 108px; } /* Хугацааны сонголт бүтэн өргөнөөр — 360px дээр ч халихгүй */ .dash-head { gap: var(--s3); } .dash-head .row-flex { width: 100%; } .seg { display: flex; width: 100%; } .seg a { padding: 9px 6px; font-size: 13px; } } /* ---- Тохиргооны хуудас ---- */ .settings-form { max-width: 980px; } .set-group { display: grid; grid-template-columns: 260px 1fr; gap: var(--s6); padding: var(--s6) 0; border-top: 1px solid var(--line-soft); } .set-group:first-of-type { border-top: 0; padding-top: 0; } .set-side h3 { margin: 0 0 var(--s2); font-size: 17px; } .set-side p { font-size: 13.5px; color: var(--ink-2); margin: 0; } .set-fields { min-width: 0; } .weekdays { display: flex; flex-wrap: wrap; gap: var(--s2); } .wd { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); font-size: 13.5px; cursor: pointer; } .wd:has(input:checked) { border-color: var(--accent); background: var(--accent-l); color: var(--accent-d); } .wd input { margin: 0; } .settings-save { position: sticky; bottom: 0; padding: var(--s4) 0; background: linear-gradient(to top, var(--cream) 62%, transparent); } @media (max-width: 860px) { .set-group { grid-template-columns: 1fr; gap: var(--s4); } } /* ---- Үлдэгдэл хурдан засах ---- */ .stock-row { display: flex; align-items: center; gap: var(--s3); } .stock-n { min-width: 34px; font-size: 19px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } .stock-n.low { color: var(--warn); } .stock-n.zero { color: var(--danger); } .stock-form { display: inline-flex; align-items: stretch; } .stock-form button { width: 30px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; } .stock-form button:first-of-type { border-radius: var(--r-sm) 0 0 var(--r-sm); } .stock-form button:last-of-type { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .stock-form button:hover { background: var(--sand); color: var(--ink); } .stock-form input { width: 52px; padding: 5px; border-radius: 0; border-left: 0; border-right: 0; text-align: center; font-size: 14px; -moz-appearance: textfield; } .stock-form input::-webkit-outer-spin-button, .stock-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ============================================================ Эрх зүйн хуудас ба зөвшөөрлийн талбар ============================================================ */ /* Урт бичвэр — мөрийн урт 70ch орчимд байвал нүд мөр алдахгүй */ .legal-doc { max-width: 72ch; } .legal-doc h2 { font-size: 19px; margin: var(--s6) 0 var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line-soft); } .legal-doc h2:first-of-type { margin-top: var(--s2); padding-top: 0; border-top: 0; } .legal-doc p { margin: 0 0 var(--s3); line-height: 1.7; } .legal-doc ul { margin: 0 0 var(--s3); padding-left: var(--s5); } .legal-doc li { margin-bottom: var(--s2); line-height: 1.65; } .legal-doc .table { margin: var(--s3) 0 var(--s4); font-size: 14px; } /* Checkbox нь бусад талбар шиг доогуураа биш, бичвэрийнхээ хажууд зогсоно */ .consent-row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--sand); border-radius: var(--r-sm); margin-bottom: var(--s4); } .consent-row input[type="checkbox"] { /* flex-shrink:0 — урт бичвэр нь дөрвөлжинг нарийсгахаас сэргийлнэ */ flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; } .consent-row label { margin: 0; font-size: 14px; line-height: 1.55; cursor: pointer; } .consent-row a { text-decoration: underline; } .consent-row .errorlist { margin: var(--s2) 0 0; } /* ============================================================ Дашбоард — гурван урсгалын хэсэг ============================================================ */ /* Таб — урсгал тус бүр тусдаа хуудас. Сервер талд шийдэгддэг тул JS-гүй, буцах товч ажиллана, холбоосыг хуваалцаж болно. */ .dash-tabs { display: flex; gap: var(--s2); margin: var(--s5) 0 var(--s6); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); /* Нарийн дэлгэцэнд дөрвөн таб багтахгүй — дотроо хэвтээ гүйнэ */ overflow-x: auto; scrollbar-width: none; } .dash-tabs::-webkit-scrollbar { display: none; } .dash-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px var(--s4); border-radius: var(--r-full); background: var(--sand); color: var(--ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .dash-tabs a:hover { background: var(--linen); color: var(--ink); } .dash-tabs a.on { background: var(--accent); color: var(--on-accent); } .dash-tabs .ico { width: 16px; height: 16px; } /* Удирдлагын цэс — араа товчны доор */ .admin-menu { position: relative; } .admin-menu > .btn .caret { width: 14px; height: 14px; opacity: .6; } .admin-menu.open > .btn .caret { transform: rotate(180deg); } .admin-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; max-width: calc(100vw - var(--s4) * 2); padding: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); display: none; z-index: 60; } .admin-menu.open .admin-pop { display: block; } .admin-pop a { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s3); border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; white-space: nowrap; } .admin-pop a:hover { background: var(--sand); color: var(--ink); } .admin-pop a.sep { margin-top: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line-soft); } .admin-pop .ico { width: 16px; height: 16px; opacity: .75; } @media (max-width: 720px) { /* Товчны хажууд 210px зай байхгүй тул цэс зүүн тийшээ халина. Толгойн блокт бэхэлж, бүтэн өргөнөөр нээвэл ямар ч дэлгэцэнд багтана. */ .dash-head { position: relative; } .admin-menu { position: static; } .admin-menu > .btn { width: 100%; justify-content: center; } .admin-pop { left: 0; right: 0; min-width: 0; max-width: none; } } /* Таб болсон тул нэг хуудсанд нэг л stream байна */ .stream { margin-top: var(--s2); } .stream-head { display: flex; align-items: center; gap: var(--s4); padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 2px solid var(--line-soft); } .stream-head h2 { margin: 0; font-size: 23px; } .stream-head p { margin: 2px 0 0; font-size: 13.5px; } /* min-width:0 — урт тайлбар нь дүнг мөрнөөс шахаж гаргахаас сэргийлнэ */ .stream-head > div:nth-child(2) { min-width: 0; } .stream-sum { margin-left: auto; flex-shrink: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Дарж болдог үзүүлэлт — тоо нь хаашаа хөтөлж байгаа нь ойлгомжтой байх */ a.stat.ops { color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } a.stat.ops:hover { border-color: var(--accent); box-shadow: var(--shadow-2); color: inherit; } a.stat.ops .sub { color: var(--accent-d); } a.stat.ops.hot { border-color: var(--accent); background: var(--accent-l); } a.stat.ops.hot .n { color: var(--accent-d); } .warn-card { border-color: var(--warn); } .chart-card h3 { margin: 0; font-size: 16px; } @media (max-width: 720px) { .stream { margin-top: var(--s7); } .stream-head { gap: var(--s3); } .stream-head h2 { font-size: 20px; } /* Дүн нь доошоо буухдаа дүрс, гарчигтайгаа нэг мөрөнд багтахгүй тул гарчгийн доор бүтэн мөр эзэлнэ */ .stream-head { flex-wrap: wrap; } .stream-sum { margin-left: 0; width: 100%; font-size: 20px; } } @media (max-width: 400px) { /* 360px дээр «Гэрээний дүн» долоон оронтой байхад 21px ч багтахгүй */ .stat .n { font-size: 19px; } } /* ============================================================ Нүүр хуудас — бүтэн өргөнтэй зураг, төвлөрсөн толгой, замын карт ============================================================ */ /* Контейнерийн ГАДНА байрлана (base.html доторх `hero` блок), тиймээс 100vw шаардахгүй — босоо гүйлгэгчээс болсон хэвтээ халилт үүсэхгүй. main-ийн дээд padding-ийг сөрөг margin-аар таглаж, дэлгэцийн дээд ирмэгт наана. */ .page-hero { /* Загвар нь энэ утгыг inline-аар дарж, зургийн замыг өгнө. Анхдагчийг энд заахгүй бол `var(--hero)` тодорхойлогдоогүй үлдэж, доорх `background` товчлол БҮХЭЛДЭЭ хүчингүй болно. */ --hero: none; margin-top: calc(var(--s6) * -1); margin-bottom: var(--s7); background: var(--sand); /* ТОГТМОЛ өндөр. Ингэснээр салон ямар ч харьцаатай зураг оруулсан хуудасны хэлбэр өөрчлөгдөхгүй — босоо зураг оруулахад тууз гэнэт хоёр дахин өндөр болохгүй, мөр шилжих (layout shift) ч үгүй. */ height: clamp(200px, 30vw, 420px); overflow: hidden; position: relative; } /* Хоосон зайг зургийнхаа бүдгэрүүлсэн хуулбараар дүүргэнэ. 3:2 харьцаатай зураг 1280px өргөнтэй туузанд 576px л эзэлдэг — хоёр талын 352px нь хоосон дэвсгэр болж, зураг нь "унасан" мэт харагддаг. Ийнхүү дүүргэхэд тууз бүтэн, зураг нь бүтнээрээ хэвээр. */ .page-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero) center / cover no-repeat; filter: blur(26px) saturate(1.15); /* Бүдгэрүүлэлт ирмэг дээр тунгалаг хүрээ үлдээдэг тул бага зэрэг томсгоно */ transform: scale(1.12); opacity: .6; } /* `contain` нь зургийг туузанд БАГТААХ хүртэл жижигрүүлнэ — харьцааг нь хадгалж, ирмэгийг нь огтлохгүй. `cover` байсан бол багтаахын тулд ирмэгийг тайрдаг: дөрвөлжин, босоо зургийн гол хэсэг алга болно. */ /* Үнэмлэхүй байрлал — эцгийн ӨНДӨР тодорхой тул `height: 100%` найдвартай тооцогдоно. `display: grid` дээр мөр нь агуулгаараа тэлдэг тул 100% нь туузны өндөр биш, зургийн бүтэн өндөрт тооцогдож, зураг нь туузнаас халиад `overflow: hidden`-д тайрагдаж байв. */ .page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .home-intro { text-align: center; margin-bottom: var(--s7); } .home-intro h1 { /* Амьд сайт дээрх шиг том, сийрэг үсэгтэй нэр */ font-size: clamp(26px, 4.4vw, 40px); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s3); } .ornament { color: var(--accent); font-size: 18px; letter-spacing: .5em; margin-bottom: var(--s3); } .home-intro p { color: var(--ink-2); font-size: 16px; margin: 0 0 var(--s4); } .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } /* Цэгэн тусгаарлагч — HTML-д нэмэлт элемент оруулахгүй */ .trust-row span + span::before { content: "●"; color: var(--accent); margin-right: var(--s5); font-size: 9px; vertical-align: middle; } .home-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-bottom: var(--s8); } .home-card.wide { grid-column: 1 / -1; } .home-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .home-card:hover { color: var(--ink); border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); } .hc-icon { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-full); background: var(--accent-l); color: var(--accent-d); } .hc-icon .ico { width: 24px; height: 24px; } /* min-width:0 — урт тайлбар картыг тэлж, grid мөрийг халиулахаас сэргийлнэ */ .hc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hc-text strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .hc-text em { font-style: normal; font-size: 14px; color: var(--ink-2); line-height: 1.5; } @media (max-width: 720px) { .page-hero { margin-top: calc(var(--s5) * -1); margin-bottom: var(--s6); } .home-cards { grid-template-columns: 1fr; gap: var(--s3); } .home-card { padding: var(--s4); gap: var(--s3); } .hc-icon { width: 44px; height: 44px; } .hc-icon .ico { width: 21px; height: 21px; } .trust-row { gap: var(--s2) var(--s4); font-size: 11.5px; } .trust-row span + span::before { margin-right: var(--s4); } } @media (max-width: 520px) { /* Мөр таслахад цэг дараагийн мөрийн ЭХЭНД үлдэж, тусгаарлах биш чимэглэл шиг харагддаг. Нарийн дэлгэцэнд зайгаар нь салгана. */ .trust-row span + span::before { content: none; } .trust-row { gap: 6px var(--s4); } }