Spaces:
Running
Running
| /* ============================================================ | |
| DFO Wiki — styles | |
| Light theme by default, dark via [data-theme="dark"]. | |
| ============================================================ */ | |
| :root { | |
| --bg: #fbf7f1; | |
| --bg-alt: #f4ece1; | |
| --panel: #ffffff; | |
| --ink: #17130f; | |
| --ink-soft: #3a332b; | |
| --muted: #77695a; | |
| --line: #ece1d2; | |
| --line-strong: #dcc9b2; | |
| --accent: #d8452c; | |
| --accent-soft: #ef7247; | |
| --accent-bg: #fde9e1; | |
| --gold: #c08a2e; | |
| --code-bg: #f7efe4; | |
| --shadow: 0 1px 2px rgba(70, 40, 20, .06), 0 12px 32px rgba(70, 40, 20, .08); | |
| --radius: 12px; | |
| --sidebar-w: 300px; | |
| --header-h: 62px; | |
| --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; | |
| --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; | |
| } | |
| [data-theme="dark"] { | |
| --bg: #0f0d0b; | |
| --bg-alt: #171310; | |
| --panel: #1c1814; | |
| --ink: #f5eee2; | |
| --ink-soft: #dbd0bf; | |
| --muted: #a99a87; | |
| --line: #2c251f; | |
| --line-strong: #463a2f; | |
| --accent: #ff7f52; | |
| --accent-soft: #ffa079; | |
| --accent-bg: #2e1a12; | |
| --gold: #e5b75e; | |
| --code-bg: #241e18; | |
| --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .4); | |
| } | |
| * { box-sizing: border-box; } | |
| .visually-hidden { | |
| position: absolute ; width: 1px; height: 1px; | |
| padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; | |
| } | |
| html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--ink); | |
| font-family: var(--font-sans); | |
| font-size: 17px; | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { text-decoration: underline; text-underline-offset: 2px; } | |
| /* ---------- header ---------- */ | |
| .site-header { | |
| position: sticky; top: 0; z-index: 40; | |
| height: var(--header-h); | |
| display: flex; align-items: center; gap: 14px; | |
| padding: 0 20px; | |
| background: color-mix(in srgb, var(--bg) 88%, transparent); | |
| backdrop-filter: saturate(140%) blur(10px); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); } | |
| .brand a { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: .2px; } | |
| .brand .rev { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } | |
| .header-spacer { flex: 1; } | |
| .icon-btn { | |
| display: inline-flex; align-items: center; justify-content: center; gap: 8px; | |
| height: 38px; min-width: 38px; padding: 0 12px; | |
| background: var(--panel); color: var(--ink-soft); | |
| border: 1px solid var(--line); border-radius: 8px; | |
| font: inherit; font-size: 14px; cursor: pointer; | |
| transition: border-color .15s, color .15s, background .15s; | |
| } | |
| .icon-btn:hover { border-color: var(--line-strong); color: var(--ink); } | |
| .icon-btn svg { width: 17px; height: 17px; } | |
| .search-trigger { min-width: 220px; justify-content: flex-start; color: var(--muted); } | |
| .search-trigger kbd { | |
| margin-left: auto; font: inherit; font-size: 11px; padding: 2px 6px; | |
| border: 1px solid var(--line); border-radius: 5px; color: var(--muted); | |
| } | |
| .burger { display: none; } | |
| /* ---------- layout ---------- */ | |
| .layout { display: flex; align-items: flex-start; } | |
| .sidebar { | |
| position: sticky; top: var(--header-h); | |
| width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); | |
| height: calc(100vh - var(--header-h)); | |
| overflow-y: auto; overscroll-behavior: contain; | |
| padding: 22px 14px 60px 20px; | |
| border-right: 1px solid var(--line); | |
| font-size: 14.5px; | |
| scrollbar-width: thin; | |
| } | |
| .sidebar::-webkit-scrollbar { width: 8px; } | |
| .sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } | |
| .side-group { margin-bottom: 6px; } | |
| .side-group > summary { | |
| cursor: pointer; list-style: none; | |
| display: flex; align-items: center; gap: 9px; | |
| padding: 9px 8px; border-radius: 7px; | |
| color: var(--ink-soft); font-weight: 600; font-size: 14px; | |
| } | |
| .side-group > summary::-webkit-details-marker { display: none; } | |
| .side-group > summary:hover { background: var(--bg-alt); } | |
| .side-group[open] > summary { color: var(--ink); } | |
| .side-num { | |
| flex: 0 0 auto; width: 26px; text-align: center; | |
| font-family: var(--font-serif); font-size: 12px; color: var(--muted); | |
| border: 1px solid var(--line); border-radius: 5px; padding: 1px 0; line-height: 1.5; | |
| } | |
| .side-chapters { margin: 2px 0 10px; padding: 0 0 0 10px; list-style: none; border-left: 1px solid var(--line); } | |
| .side-chapters li { margin: 0; } | |
| .side-chapters a { | |
| display: block; padding: 5px 8px; border-radius: 6px; | |
| color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; | |
| } | |
| .side-chapters a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); } | |
| .side-chapters a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } | |
| .side-chapters .cn { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 12px; } | |
| /* ---------- main ---------- */ | |
| .main { flex: 1 1 auto; min-width: 0; padding: 34px 40px 90px; } | |
| .wrap { max-width: 860px; margin: 0 auto; } | |
| .wrap--wide { max-width: 1080px; } | |
| .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; } | |
| .crumbs a { color: var(--muted); } | |
| .crumbs a:hover { color: var(--accent); } | |
| h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.25; color: var(--ink); } | |
| h1 { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 12px; letter-spacing: -.01em; } | |
| h2 { font-size: 26px; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } | |
| h3 { font-size: 20px; margin: 30px 0 10px; color: var(--ink-soft); } | |
| .ch-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--muted); font-size: 13.5px; margin-bottom: 26px; } | |
| .ch-meta .dot { opacity: .45; } | |
| .badge { | |
| display: inline-block; padding: 2px 8px; border-radius: 999px; | |
| font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; | |
| background: var(--accent-bg); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); | |
| vertical-align: middle; | |
| } | |
| .lead { font-size: 18.5px; color: var(--ink-soft); } | |
| p { margin: 0 0 16px; } | |
| ul, ol { margin: 0 0 18px; padding-left: 24px; } | |
| li { margin: 0 0 8px; } | |
| li::marker { color: var(--accent-soft); } | |
| strong { color: var(--ink); } | |
| /* ---------- table of contents (in page) ---------- */ | |
| .toc { | |
| background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); | |
| padding: 16px 20px; margin: 0 0 30px; font-size: 14.5px; | |
| } | |
| .toc h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: var(--font-sans); } | |
| .toc ol { margin: 0; padding-left: 18px; } | |
| .toc li { margin: 0 0 5px; } | |
| .toc a { color: var(--ink-soft); } | |
| .toc a:hover { color: var(--accent); } | |
| /* ---------- tables ---------- */ | |
| .table-wrap { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } | |
| table { | |
| border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5; | |
| } | |
| th, td { text-align: left; vertical-align: top; padding: 9px 13px; border-bottom: 1px solid var(--line); } | |
| tr:last-child td { border-bottom: none; } | |
| thead th { background: var(--bg-alt); font-weight: 700; color: var(--ink); white-space: nowrap; } | |
| tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-alt) 45%, transparent); } | |
| tbody tr:hover { background: var(--accent-bg); } | |
| td:first-child { font-weight: 600; color: var(--ink); } | |
| table .rowhead td { background: var(--bg-alt); font-weight: 700; color: var(--accent); } | |
| /* ---------- callouts ---------- */ | |
| .callout { | |
| margin: 0 0 24px; padding: 14px 18px; | |
| background: var(--panel); | |
| border: 1px solid var(--line); | |
| border-left: 3px solid var(--accent); | |
| border-radius: 0 var(--radius) var(--radius) 0; | |
| font-size: 15.5px; | |
| } | |
| .callout h4 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } | |
| .callout p:last-child { margin-bottom: 0; } | |
| .note { font-size: 15px; color: var(--ink-soft); background: var(--bg-alt); border-radius: 8px; padding: 12px 16px; } | |
| .src { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); margin: 0 0 10px; word-break: break-word; } | |
| .src::before { content: "↳ "; opacity: .6; } | |
| code, .formula { font-family: var(--font-mono); font-size: .92em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; } | |
| /* ---------- prev / next ---------- */ | |
| .pager { display: flex; gap: 14px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); } | |
| .pager a { | |
| flex: 1 1 0; display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); | |
| background: var(--panel); color: var(--ink); transition: border-color .15s, transform .1s; | |
| } | |
| .pager a:hover { border-color: var(--line-strong); text-decoration: none; } | |
| .pager .dir { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } | |
| .pager .next { text-align: right; } | |
| .pager .lbl { font-family: var(--font-serif); font-size: 16px; } | |
| /* ---------- home ---------- */ | |
| .hero { padding: 26px 0 10px; } | |
| .hero h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 10px; } | |
| .hero .lead { max-width: 640px; } | |
| .stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; } | |
| .stat { | |
| padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; | |
| background: var(--panel); font-size: 13.5px; color: var(--ink-soft); | |
| } | |
| .stat b { color: var(--accent); font-family: var(--font-serif); font-size: 15px; } | |
| .quick { margin: 26px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; } | |
| .quick a { | |
| padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; | |
| background: var(--panel); font-size: 14px; color: var(--ink-soft); | |
| } | |
| .quick a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } | |
| .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 22px 0 10px; } | |
| .card { | |
| display: flex; flex-direction: column; height: 100%; box-sizing: border-box; | |
| padding: 20px 20px 16px; background: var(--panel); | |
| border: 1px solid var(--line); border-radius: 12px; color: var(--ink); | |
| box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease; | |
| } | |
| .card:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-2px); } | |
| .card .num { font-family: var(--font-serif); font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } | |
| .card h3 { margin: 6px 0 8px; font-size: 21px; } | |
| .card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; } | |
| .card .count { font-size: 12.5px; color: var(--accent); font-weight: 600; } | |
| .part-intro { font-size: 17px; color: var(--ink-soft); max-width: 720px; margin-bottom: 26px; } | |
| .ch-list { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--line); } | |
| .ch-list li { border-bottom: 1px solid var(--line); margin: 0; } | |
| .ch-list a { display: flex; gap: 14px; padding: 14px 6px; color: var(--ink); } | |
| .ch-list a:hover { background: var(--bg-alt); text-decoration: none; } | |
| .ch-list .n { flex: 0 0 34px; color: var(--muted); font-variant-numeric: tabular-nums; font-family: var(--font-serif); } | |
| .ch-list .t { flex: 1 1 auto; } | |
| .ch-list .t small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; } | |
| /* ---------- search overlay ---------- */ | |
| .search-overlay { | |
| position: fixed; inset: 0; z-index: 100; | |
| background: color-mix(in srgb, var(--bg) 70%, transparent); | |
| backdrop-filter: blur(6px); | |
| display: none; padding: 8vh 18px 18px; | |
| } | |
| .search-overlay.open { display: block; } | |
| .search-box { | |
| max-width: 720px; margin: 0 auto; background: var(--panel); | |
| border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .search-box input { | |
| width: 100%; padding: 18px 20px; font: inherit; font-size: 18px; | |
| background: transparent; border: none; outline: none; color: var(--ink); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .search-results { max-height: 62vh; overflow-y: auto; } | |
| .search-results a { display: block; padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--ink); } | |
| .search-results a:hover, .search-results a.sel { background: var(--bg-alt); text-decoration: none; } | |
| .search-results .st { font-weight: 600; } | |
| .search-results .sp { font-size: 12.5px; color: var(--muted); } | |
| .search-results .sx { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; } | |
| .search-results mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; } | |
| .search-empty { padding: 18px 20px; color: var(--muted); font-size: 14px; } | |
| /* ---------- footer ---------- */ | |
| .site-footer { | |
| grid-column: 1 / -1; margin-top: 60px; padding: 26px 40px; | |
| border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; | |
| } | |
| .site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } | |
| .site-footer a:hover { color: var(--accent); } | |
| .backdrop { display: none; } | |
| /* ---------- responsive ---------- */ | |
| @media (max-width: 980px) { | |
| :root { --sidebar-w: 270px; } | |
| .main { padding: 26px 22px 80px; } | |
| .search-trigger { min-width: 44px; } | |
| .search-trigger span, .search-trigger kbd { display: none; } | |
| } | |
| @media (max-width: 820px) { | |
| .burger { display: inline-flex; } | |
| .layout { display: block; } | |
| .sidebar { | |
| position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 60; | |
| width: min(86vw, 340px); height: auto; | |
| background: var(--panel); border-right: 1px solid var(--line); | |
| transform: translateX(-102%); transition: transform .22s ease; | |
| box-shadow: var(--shadow); | |
| } | |
| body.nav-open .sidebar { transform: none; } | |
| .backdrop { | |
| display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 50; | |
| background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .2s; | |
| } | |
| body.nav-open .backdrop { opacity: 1; pointer-events: auto; } | |
| .main { padding: 22px 18px 70px; } | |
| h2 { font-size: 23px; } | |
| .pager { flex-direction: column; } | |
| .pager .next { text-align: left; } | |
| } | |
| @media print { | |
| .site-header, .sidebar, .pager, .toc, .site-footer { display: none; } | |
| .main { padding: 0; } | |
| a { color: inherit; } | |
| } | |
| /* ============================================================ | |
| v2 — верхнее меню, нижняя панель, калькуляторы, карта, события | |
| ============================================================ */ | |
| :root { | |
| --map-sea-1: #cfdcd8; | |
| --map-sea-2: #a9c0bd; | |
| --map-land: #e8ddc6; | |
| --map-land2: #ded2bb; | |
| --map-coast: #8f7f63; | |
| --map-wave: #8fa8a4; | |
| } | |
| [data-theme="dark"] { | |
| --map-sea-1: #16262a; | |
| --map-sea-2: #0e1a1d; | |
| --map-land: #2a241c; | |
| --map-land2: #241f18; | |
| --map-coast: #6a5a44; | |
| --map-wave: #2c4448; | |
| } | |
| .brand { text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; } | |
| .brand-mark { color: var(--accent); font-size: 18px; } | |
| .brand .rev { font-size: 11px; } | |
| .topnav { display: flex; gap: 4px; margin-left: 18px; } | |
| .topnav a { | |
| padding: 7px 12px; border-radius: 8px; color: var(--ink-soft); | |
| font-size: 14.5px; font-weight: 500; | |
| } | |
| .topnav a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); } | |
| .topnav a.on { background: var(--accent-bg); color: var(--accent); } | |
| /* нижняя панель */ | |
| body { padding-bottom: 64px; } | |
| .bottom-bar { | |
| position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; | |
| height: 56px; display: flex; align-items: center; gap: 10px; | |
| padding: 0 16px; | |
| background: color-mix(in srgb, var(--bg) 92%, transparent); | |
| backdrop-filter: saturate(140%) blur(10px); | |
| border-top: 1px solid var(--line); | |
| } | |
| .bb-side { | |
| display: inline-flex; align-items: center; gap: 8px; min-width: 0; | |
| color: var(--ink-soft); font-size: 13.5px; padding: 6px 10px; border-radius: 8px; | |
| max-width: 40%; | |
| } | |
| .bb-side svg { width: 16px; height: 16px; flex: 0 0 auto; } | |
| .bb-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| .bb-side:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); } | |
| .bb-right { margin-left: auto; justify-content: flex-end; } | |
| .bb-empty { flex: 1 1 auto; } | |
| .bb-center { | |
| flex: 0 0 auto; font-size: 13px; color: var(--muted); | |
| padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; | |
| margin: 0 auto; | |
| } | |
| .bb-center:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; } | |
| /* подвал */ | |
| .foot-grid { | |
| display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; | |
| max-width: 1080px; margin: 0 auto 26px; | |
| } | |
| .foot-col h4 { | |
| font-family: var(--font-sans); font-size: 11.5px; letter-spacing: .12em; | |
| text-transform: uppercase; color: var(--muted); margin: 0 0 10px; | |
| } | |
| .foot-col ul { list-style: none; margin: 0; padding: 0; } | |
| .foot-col li { margin: 0 0 6px; } | |
| .foot-col a { color: var(--ink-soft); font-size: 13.5px; } | |
| .foot-col a:hover { color: var(--accent); } | |
| .foot-col p { font-size: 13px; color: var(--muted); margin: 0 0 8px; } | |
| .foot-bottom { | |
| max-width: 1080px; margin: 0 auto; padding-top: 16px; border-top: 1px solid var(--line); | |
| display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; | |
| font-size: 12.5px; color: var(--muted); | |
| } | |
| /* карточки инструментов */ | |
| .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 18px 0 10px; } | |
| .tool-card { | |
| display: flex; flex-direction: column; height: 100%; box-sizing: border-box; | |
| padding: 18px 18px 14px; background: var(--panel); | |
| border: 1px solid var(--line); border-radius: 12px; color: var(--ink); | |
| box-shadow: var(--shadow); transition: transform .12s, border-color .12s; | |
| } | |
| .tool-card:hover { transform: translateY(-2px); border-color: var(--line-strong); text-decoration: none; } | |
| .tool-card h3 { margin: 0 0 6px; font-size: 19px; } | |
| .tool-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; } | |
| /* калькуляторы */ | |
| .anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; } | |
| .anchor-nav a { | |
| padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; | |
| background: var(--panel); font-size: 13.5px; color: var(--ink-soft); | |
| } | |
| .anchor-nav a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } | |
| .tool { | |
| background: var(--panel); border: 1px solid var(--line); border-radius: 14px; | |
| padding: 22px 22px 18px; margin: 18px 0 26px; box-shadow: var(--shadow); | |
| scroll-margin-top: 80px; | |
| } | |
| .tool h2 { margin: 0 0 6px; border: 0; padding: 0; font-size: 24px; } | |
| .tool-note { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; } | |
| .tool-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; } | |
| .tool-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } | |
| .tool-inputs label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); } | |
| .tool-inputs input, .tool-inputs select { | |
| font: inherit; font-size: 14.5px; padding: 8px 10px; color: var(--ink); | |
| background: var(--bg); border: 1px solid var(--line); border-radius: 8px; | |
| } | |
| .tool-inputs input:focus, .tool-inputs select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; } | |
| .tool-inputs .check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; } | |
| .tool-inputs .check input { width: 16px; height: 16px; } | |
| .tool-out { position: sticky; top: 76px; } | |
| .result { | |
| display: flex; flex-direction: column; gap: 2px; padding: 18px; | |
| background: var(--accent-bg); border-radius: 12px; text-align: center; | |
| } | |
| .result b { font-family: var(--font-serif); font-size: 34px; color: var(--accent); line-height: 1.1; } | |
| .result span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } | |
| .breakdown { margin-top: 12px; font-size: 13px; color: var(--ink-soft); } | |
| .breakdown div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); } | |
| .breakdown div:last-child { border-bottom: 0; } | |
| .breakdown .neg { color: #b0452c; } | |
| .breakdown .pos { color: #2f7a4f; } | |
| /* карта */ | |
| .map-layout { display: grid; grid-template-columns: 1.5fr .9fr; gap: 24px; align-items: start; margin: 10px 0 20px; } | |
| .map-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); } | |
| .map-svg { display: block; width: 100%; height: auto; } | |
| .map-labels text { font-family: var(--font-sans); fill: var(--map-coast); } | |
| .map-labels .lbl-big { font-size: 13px; letter-spacing: .18em; opacity: .85; font-weight: 600; } | |
| .map-labels .lbl-sea { font-size: 13px; letter-spacing: .22em; font-style: italic; fill: var(--muted); } | |
| .lbl-compass { font-family: var(--font-serif); font-size: 12px; fill: var(--map-coast); } | |
| .mk circle { fill: var(--accent); stroke: var(--panel); stroke-width: 2; } | |
| .mk text { font-family: var(--font-sans); font-size: 11.5px; fill: var(--ink); } | |
| .mk-region circle { fill: var(--map-coast); } | |
| .mk-region text { fill: var(--ink-soft); font-size: 11px; } | |
| .mk-dungeon circle { fill: var(--gold); } | |
| .mk-sea circle { fill: var(--map-wave); } | |
| .mk:hover circle, .mk:focus circle { r: 9; } | |
| .mk { cursor: pointer; } | |
| .map-side h2 { margin-top: 4px; font-size: 19px; border: 0; padding: 0; } | |
| .map-legend { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13.5px; } | |
| .map-legend li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ink-soft); } | |
| .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--accent); } | |
| .dot.dungeon { background: var(--gold); } | |
| .dot.region { background: var(--map-coast); } | |
| .dot.sea { background: var(--map-wave); } | |
| .linklist { list-style: none; padding: 0; margin: 0; font-size: 14px; } | |
| .linklist li { margin-bottom: 6px; } | |
| /* события */ | |
| .events-status { font-size: 13.5px; color: var(--muted); margin: 6px 0 16px; } | |
| .events-status.err { color: var(--accent); } | |
| .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } | |
| .event-card { | |
| background: var(--panel); border: 1px solid var(--line); border-radius: 14px; | |
| padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; | |
| } | |
| .event-card h3 { margin: 0; font-size: 19px; } | |
| .event-card .cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } | |
| .event-card .loc { font-size: 13px; color: var(--muted); } | |
| .event-card .timer { font-family: var(--font-mono); font-size: 15px; color: var(--ink); } | |
| .event-card .timer b { color: var(--accent); font-size: 17px; } | |
| .event-card .note { font-size: 12.5px; margin: 0; } | |
| .event-card .gilded { font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 8px; } | |
| .howto { max-width: 760px; } | |
| .howto pre { | |
| background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; | |
| padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; | |
| } | |
| .howto code { background: none; padding: 0; } | |
| @media (max-width: 980px) { | |
| .tool-body { grid-template-columns: 1fr; } | |
| .tool-out { position: static; } | |
| .map-layout { grid-template-columns: 1fr; } | |
| .foot-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| @media (max-width: 820px) { | |
| .site-header { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 8px; } | |
| .topnav { order: 3; width: 100%; margin: 0; overflow-x: auto; padding-bottom: 2px; } | |
| .topnav a { white-space: nowrap; } | |
| .bb-side span { max-width: 32vw; } | |
| .foot-grid { grid-template-columns: 1fr; gap: 18px; } | |
| .main--wide { padding: 20px 16px 80px; } | |
| } | |
| @media print { | |
| .bottom-bar, .topnav { display: none; } | |
| } | |
| .main--wide { max-width: 1180px; margin: 0 auto; padding: 34px 40px 90px; } | |
| .bb-links { display: flex; gap: 6px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } | |
| .bb-links a { font-size: 13px; padding: 6px 12px; border-radius: 999px; color: var(--muted); } | |
| .bb-links a:hover { background: var(--bg-alt); color: var(--ink); text-decoration: none; } | |
| .bb-links a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; } | |
| /* вкладки карты */ | |
| .map-tabs { display: flex; gap: 6px; margin: 16px 0 14px; padding: 4px; background: var(--bg-alt); border-radius: 12px; width: fit-content; } | |
| .map-tab { | |
| font: inherit; font-size: 14px; padding: 8px 16px; border: 0; border-radius: 9px; | |
| background: transparent; color: var(--muted); cursor: pointer; | |
| } | |
| .map-tab:hover { color: var(--ink); } | |
| .map-tab.on { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: var(--shadow); } | |
| .map-embed { | |
| border: 1px solid var(--line); border-radius: 14px; overflow: hidden; | |
| box-shadow: var(--shadow); background: var(--panel); | |
| } | |
| .map-embed iframe { display: block; width: 100%; height: min(80vh, 860px); border: 0; } | |
| .map-credit { font-size: 13px; color: var(--muted); margin: 10px 0 12px; line-height: 1.55; } | |
| /* изображения */ | |
| .hero--split { display: grid; grid-template-columns: 1.4fr .6fr; gap: 32px; align-items: center; } | |
| .hero-text h1 { margin-top: 0; } | |
| .hero-fig { margin: 0; } | |
| .hero-fig img { | |
| width: 100%; height: auto; border-radius: 12px; | |
| border: 1px solid var(--line); box-shadow: var(--shadow); display: block; | |
| } | |
| .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 18px 0 10px; } | |
| .gallery figure { margin: 0; } | |
| .gallery img { | |
| width: 100%; height: 180px; object-fit: cover; display: block; | |
| border-radius: 10px; border: 1px solid var(--line); background: var(--bg-alt); | |
| } | |
| .gallery figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; } | |
| .img-credit { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; } | |
| .ch-img { margin: 0 0 26px; } | |
| .ch-img img { | |
| max-width: 100%; max-height: 420px; width: auto; height: auto; display: block; | |
| border-radius: 10px; border: 1px solid var(--line); | |
| } | |
| .ch-img figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; } | |
| @media (max-width: 820px) { | |
| .hero--split { grid-template-columns: 1fr; } | |
| .hero-media { max-width: 260px; } | |
| } | |
| /* ============================================================ | |
| v3 — палитра и полировка | |
| ============================================================ */ | |
| body { | |
| background: | |
| radial-gradient(1100px 520px at 50% -12%, #fff7ec 0%, rgba(255, 247, 236, 0) 70%), | |
| var(--bg); | |
| background-attachment: fixed; | |
| } | |
| [data-theme="dark"] body { | |
| background: | |
| radial-gradient(1100px 520px at 50% -12%, #241711 0%, rgba(36, 23, 17, 0) 70%), | |
| var(--bg); | |
| } | |
| h1 { letter-spacing: -.02em; } | |
| @supports ((-webkit-background-clip: text) or (background-clip: text)) { | |
| .hero h1 { | |
| background: linear-gradient(94deg, var(--accent) 8%, var(--gold) 96%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| } | |
| h2 { | |
| border-bottom: 0; | |
| padding-bottom: 14px; | |
| position: relative; | |
| margin-top: 46px; | |
| } | |
| h2::after { | |
| content: ""; | |
| position: absolute; left: 0; bottom: 0; | |
| width: 54px; height: 3px; border-radius: 3px; | |
| background: linear-gradient(90deg, var(--accent), var(--gold)); | |
| } | |
| a { text-decoration-thickness: 1px; text-underline-offset: 3px; } | |
| a:hover { text-decoration-color: var(--accent); } | |
| .icon-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .topnav a.on { background: var(--accent); color: #fff; } | |
| [data-theme="dark"] .topnav a.on { color: #1a120e; } | |
| .card { | |
| border-radius: 14px; | |
| background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 90%, var(--accent-bg))); | |
| } | |
| .card:hover { | |
| border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); | |
| box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 16%, transparent); | |
| transform: translateY(-3px); | |
| } | |
| .card .num { color: var(--accent); font-weight: 700; letter-spacing: .14em; } | |
| .card .count { color: var(--accent); } | |
| .tool-card { border-radius: 14px; } | |
| .tool-card:hover { | |
| border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); | |
| box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 14%, transparent); | |
| } | |
| .stat { | |
| border: 0; | |
| background: var(--panel); | |
| box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(70, 40, 20, .05); | |
| } | |
| .stat b { color: var(--accent); font-size: 16px; } | |
| .side-chapters a.active { | |
| background: linear-gradient(90deg, var(--accent-bg), transparent 85%); | |
| box-shadow: inset 3px 0 0 var(--accent); | |
| border-radius: 0 8px 8px 0; | |
| color: var(--accent); | |
| } | |
| .side-group > summary:hover { color: var(--accent); } | |
| .ch-meta { font-size: 13px; color: var(--muted); letter-spacing: .01em; } | |
| .toc { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line)); } | |
| .toc a:hover { color: var(--accent); } | |
| .src { font-family: var(--font-mono); opacity: .75; } | |
| .src::before { content: none; } | |
| .callout { | |
| border-left: 3px solid var(--accent); | |
| background: color-mix(in srgb, var(--accent-bg) 45%, var(--panel)); | |
| } | |
| th { background: color-mix(in srgb, var(--accent-bg) 55%, var(--bg-alt)); } | |
| tbody tr:hover { background: color-mix(in srgb, var(--accent-bg) 35%, transparent); } | |
| .bottom-bar { border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); } | |
| .bb-center:hover { border-color: var(--accent); color: var(--accent); } | |
| .bb-links a.on { background: var(--accent); color: #fff; } | |
| [data-theme="dark"] .bb-links a.on { color: #1a120e; } | |
| .foot-col a:hover { color: var(--accent); } | |
| ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } | |
| .sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); } | |
| .sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); } | |
| /* рынок */ | |
| .market-controls { | |
| display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(4, minmax(130px, .7fr)); | |
| gap: 10px; margin: 18px 0 10px; | |
| } | |
| .market-controls input, .market-controls select { | |
| width: 100%; height: 42px; font: inherit; font-size: 14px; line-height: 1.4; padding: 10px 12px; color: var(--ink); | |
| background: var(--panel); border: 1px solid var(--line); border-radius: 10px; | |
| } | |
| .market-controls input:focus, .market-controls select:focus { | |
| outline: 2px solid var(--accent-soft); outline-offset: 1px; | |
| } | |
| .market-note { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| .market-note a { color: var(--accent); } | |
| .mk-refresh { | |
| font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 999px; | |
| border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); cursor: pointer; | |
| } | |
| .mk-refresh:hover { border-color: var(--accent); color: var(--accent); } | |
| .market-stats { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; } | |
| .market-stats b { color: var(--ink); } | |
| .market-list { display: flex; flex-direction: column; gap: 8px; } | |
| .lot { | |
| display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px 190px; | |
| gap: 16px; align-items: start; | |
| padding: 14px 16px; background: var(--panel); | |
| border: 1px solid var(--line); border-radius: 12px; cursor: pointer; | |
| transition: border-color .12s, box-shadow .12s; | |
| } | |
| .lot:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 6px 20px rgba(70,40,20,.06); } | |
| .lot-item { min-width: 0; overflow: hidden; } | |
| .lot-main { min-width: 0; } | |
| .lot-name { font-weight: 600; font-size: 15.5px; line-height: 1.35; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; } | |
| .lot-meta { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; } | |
| .lot-kind { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; } | |
| .lot-set { font-size: 12.5px; line-height: 1.4; color: var(--accent); margin-top: 4px; overflow-wrap: anywhere; } | |
| .lot-cond { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin-top: 6px; } | |
| .lot-stats { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); } | |
| .lot-stats span { background: var(--bg-alt); border-radius: 6px; padding: 2px 8px; white-space: nowrap; } | |
| .lot-full { display: none; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); } | |
| .lot-full span { background: var(--bg-alt); border-radius: 6px; padding: 2px 8px; white-space: nowrap; } | |
| .lot.open .lot-full { display: flex; } | |
| .lot-price { text-align: right; font-family: var(--font-serif); font-size: 19px; line-height: 1.2; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 1px; } | |
| .lot-qty { text-align: center; font-size: 14px; line-height: 1.4; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 3px; white-space: nowrap; } | |
| .lot-seller { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; min-width: 0; padding-top: 1px; } | |
| .lot-seller small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } | |
| .lot-price small { display: block; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; } | |
| .rar { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-weight: 600; } | |
| .rar-common { background: #eee9e0; color: #6b6153; } | |
| .rar-magic { background: #e4ecfb; color: #2f5aa8; } | |
| .rar-rare { background: #f3e6fb; color: #7a3fa8; } | |
| .rar-legendary { background: #fdf0d8; color: #a86a10; } | |
| .rar-aetheric { background: #e0f4f4; color: #1f7a7a; } | |
| .rar-artifact { background: #fde3e0; color: #b23b2a; } | |
| [data-theme="dark"] .rar-common { background: #2a251f; color: #b7a892; } | |
| [data-theme="dark"] .rar-magic { background: #1d2740; color: #8fb4ff; } | |
| [data-theme="dark"] .rar-rare { background: #2a1c38; color: #c89bf0; } | |
| [data-theme="dark"] .rar-legendary { background: #33260f; color: #f0c36a; } | |
| [data-theme="dark"] .rar-aetheric { background: #123030; color: #7fd8d8; } | |
| [data-theme="dark"] .rar-artifact { background: #3a1a14; color: #ff9a86; } | |
| .btn-more { | |
| display: block; width: 100%; margin: 16px 0 0; padding: 12px; | |
| font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); | |
| background: var(--panel); border: 1px solid var(--line); border-radius: 12px; | |
| } | |
| .btn-more:hover { border-color: var(--accent); color: var(--accent); } | |
| @media (max-width: 980px) { | |
| .market-controls { grid-template-columns: 1fr 1fr; } | |
| .market-controls input { grid-column: 1 / -1; } | |
| } | |
| @media (max-width: 560px) { | |
| .lot { grid-template-columns: 1fr auto; } | |
| .lot-price { text-align: right; } | |
| } | |
| /* провинция на странице событий */ | |
| .ev-region-wrap { display: flex; gap: 10px; margin: 6px 0 14px; } | |
| .ev-region-wrap label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } | |
| .ev-region-wrap select { | |
| font: inherit; font-size: 14px; padding: 8px 12px; color: var(--ink); | |
| background: var(--panel); border: 1px solid var(--line); border-radius: 10px; | |
| } | |
| .event-card .timer { font-family: var(--font-sans); font-size: 14px; } | |
| .event-card.next { border-left: 3px solid var(--accent); } | |
| .event-card.live { border-left: 3px solid #2f9e63; } | |
| .event-card.live .timer b { color: #2f9e63; } | |
| .event-card.unknown { border-left: 3px solid var(--line-strong); } | |
| .event-card .loc { font-size: 13.5px; color: var(--ink-soft); } | |
| /* события — карточки с региональными таймерами */ | |
| .events-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; } | |
| .event-card { padding: 0; overflow: hidden; gap: 0; } | |
| .ev-head { display: flex; align-items: center; padding: 14px 16px 0; } | |
| .ev-cat { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } | |
| .ev-star { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; color: var(--gold); cursor: pointer; } | |
| .ev-title { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .07em; font-size: 19px; margin: 10px 16px 4px; } | |
| .ev-cadence { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 16px 12px; } | |
| .ev-rows { display: flex; flex-direction: column; } | |
| .ev-row { padding: 10px 16px 12px; border-top: 1px solid var(--line); border-left: 3px solid transparent; } | |
| .ev-row.is-live { background: #eef6ec; border-left-color: #3f9a5f; } | |
| .ev-row.is-soon { background: #fdf4e3; border-left-color: #c8952f; } | |
| .ev-row.is-none { opacity: .55; } | |
| .ev-row-head { display: flex; align-items: baseline; gap: 10px; } | |
| .ev-region { font-weight: 600; font-size: 14.5px; } | |
| .ev-time { margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; } | |
| .ev-row.is-live .ev-time { color: #2f7a4f; } | |
| .ev-tags { display: flex; align-items: center; gap: 8px; margin-top: 7px; } | |
| .ev-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink-soft); background: var(--panel); } | |
| .ev-caption { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } | |
| .ev-sub { font-size: 12px; color: var(--muted); margin-top: 5px; } | |
| .ev-more { width: 100%; text-align: left; padding: 11px 16px; background: none; border: 0; border-top: 1px solid var(--line); font: inherit; font-size: 12.5px; color: var(--accent); cursor: pointer; } | |
| .ev-more:hover { background: var(--bg-alt); } | |
| .ev-gilded { padding: 12px 16px 14px; border-top: 1px solid var(--line); } | |
| .ev-gilded-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } | |
| .ev-gilded-name { font-size: 14px; font-weight: 600; margin-top: 3px; } | |
| .ev-gilded-chance { font-size: 12px; color: var(--muted); margin-top: 2px; } | |
| .ev-link { display: block; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-align: right; color: var(--accent); } | |
| .ev-link:hover { background: var(--bg-alt); text-decoration: none; } | |
| .ev-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; } | |
| .ev-filter { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; } | |
| .ev-filter:hover { border-color: var(--gold); color: var(--gold); } | |
| .ev-filter.on { background: var(--gold); border-color: var(--gold); color: #fff; } | |
| .ev-hint { font-size: 12.5px; color: var(--muted); } | |
| [data-theme="dark"] .ev-row.is-live { background: #16241a; } | |
| [data-theme="dark"] .ev-row.is-soon { background: #2a2113; } | |
| [data-theme="dark"] .ev-row.is-live .ev-time { color: #6fd39a; } | |
| /* рынок — шапка таблицы на той же сетке, что и строки */ | |
| .market-head-row { | |
| display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px 190px; | |
| gap: 16px; padding: 10px 16px; margin-top: 6px; | |
| background: var(--bg-alt); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; | |
| font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); | |
| } | |
| .market-head-row span:nth-child(2) { text-align: right; } | |
| .market-head-row span:nth-child(3) { text-align: center; } | |
| .market-head-row + .market-list { gap: 0; } | |
| .market-head-row + .market-list .lot:first-child { border-radius: 0; } | |
| .market-head-row + .market-list .lot:last-child { border-radius: 0 0 12px 12px; } | |
| .market-head-row + .market-list .lot + .lot { border-top: 0; border-radius: 0; } | |
| .market-head-row + .market-list .lot { border-radius: 0; } | |
| @media (max-width: 820px) { | |
| .market-head-row { display: none; } | |
| .market-head-row + .market-list { gap: 8px; } | |
| .market-head-row + .market-list .lot:first-child { border-radius: 12px; } | |
| .market-head-row + .market-list .lot:last-child { border-radius: 12px; } | |
| .market-head-row + .market-list .lot + .lot { border-top: 1px solid var(--line); } | |
| .market-head-row + .market-list .lot { border-radius: 12px; } | |
| .lot { grid-template-columns: 1fr auto; grid-template-areas: "item price" "qty seller"; row-gap: 10px; } | |
| .lot-item { grid-area: item; } | |
| .lot-price { grid-area: price; text-align: right; } | |
| .lot-qty { grid-area: qty; text-align: left; } | |
| .lot-seller { grid-area: seller; text-align: right; } | |
| } | |