Spaces:
Running
Running
fix: ровные боксы рынка + живые обновления
#1
by Iosteps - opened
- assets/style.css +867 -856
assets/style.css
CHANGED
|
@@ -1,859 +1,870 @@
|
|
| 1 |
-
/* ============================================================
|
| 2 |
-
DFO Wiki — styles
|
| 3 |
-
Light theme by default, dark via [data-theme="dark"].
|
| 4 |
-
============================================================ */
|
| 5 |
-
|
| 6 |
-
:root {
|
| 7 |
-
--bg: #fbf7f1;
|
| 8 |
-
--bg-alt: #f4ece1;
|
| 9 |
-
--panel: #ffffff;
|
| 10 |
-
--ink: #17130f;
|
| 11 |
-
--ink-soft: #3a332b;
|
| 12 |
-
--muted: #77695a;
|
| 13 |
-
--line: #ece1d2;
|
| 14 |
-
--line-strong: #dcc9b2;
|
| 15 |
-
--accent: #d8452c;
|
| 16 |
-
--accent-soft: #ef7247;
|
| 17 |
-
--accent-bg: #fde9e1;
|
| 18 |
-
--gold: #c08a2e;
|
| 19 |
-
--code-bg: #f7efe4;
|
| 20 |
-
--shadow: 0 1px 2px rgba(70, 40, 20, .06), 0 12px 32px rgba(70, 40, 20, .08);
|
| 21 |
-
--radius: 12px;
|
| 22 |
-
--sidebar-w: 300px;
|
| 23 |
-
--header-h: 62px;
|
| 24 |
-
--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
| 25 |
-
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
| 26 |
-
--font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
|
| 27 |
-
}
|
| 28 |
-
|
| 29 |
-
[data-theme="dark"] {
|
| 30 |
-
--bg: #0f0d0b;
|
| 31 |
-
--bg-alt: #171310;
|
| 32 |
-
--panel: #1c1814;
|
| 33 |
-
--ink: #f5eee2;
|
| 34 |
-
--ink-soft: #dbd0bf;
|
| 35 |
-
--muted: #a99a87;
|
| 36 |
-
--line: #2c251f;
|
| 37 |
-
--line-strong: #463a2f;
|
| 38 |
-
--accent: #ff7f52;
|
| 39 |
-
--accent-soft: #ffa079;
|
| 40 |
-
--accent-bg: #2e1a12;
|
| 41 |
-
--gold: #e5b75e;
|
| 42 |
-
--code-bg: #241e18;
|
| 43 |
-
--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .4);
|
| 44 |
-
}
|
| 45 |
-
|
| 46 |
-
* { box-sizing: border-box; }
|
| 47 |
-
|
| 48 |
-
.visually-hidden {
|
| 49 |
-
position: absolute !important; width: 1px; height: 1px;
|
| 50 |
-
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
| 51 |
-
}
|
| 52 |
-
|
| 53 |
-
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
|
| 54 |
-
|
| 55 |
-
body {
|
| 56 |
-
margin: 0;
|
| 57 |
-
background: var(--bg);
|
| 58 |
-
color: var(--ink);
|
| 59 |
-
font-family: var(--font-sans);
|
| 60 |
-
font-size: 17px;
|
| 61 |
-
line-height: 1.65;
|
| 62 |
-
-webkit-font-smoothing: antialiased;
|
| 63 |
-
text-rendering: optimizeLegibility;
|
| 64 |
-
}
|
| 65 |
-
|
| 66 |
-
a { color: var(--accent); text-decoration: none; }
|
| 67 |
-
a:hover { text-decoration: underline; text-underline-offset: 2px; }
|
| 68 |
-
|
| 69 |
-
/* ---------- header ---------- */
|
| 70 |
-
.site-header {
|
| 71 |
-
position: sticky; top: 0; z-index: 40;
|
| 72 |
-
height: var(--header-h);
|
| 73 |
-
display: flex; align-items: center; gap: 14px;
|
| 74 |
-
padding: 0 20px;
|
| 75 |
-
background: color-mix(in srgb, var(--bg) 88%, transparent);
|
| 76 |
-
backdrop-filter: saturate(140%) blur(10px);
|
| 77 |
-
border-bottom: 1px solid var(--line);
|
| 78 |
-
}
|
| 79 |
-
|
| 80 |
-
.brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); }
|
| 81 |
-
.brand a { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: .2px; }
|
| 82 |
-
.brand .rev { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
|
| 83 |
-
|
| 84 |
-
.header-spacer { flex: 1; }
|
| 85 |
-
|
| 86 |
-
.icon-btn {
|
| 87 |
-
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
| 88 |
-
height: 38px; min-width: 38px; padding: 0 12px;
|
| 89 |
-
background: var(--panel); color: var(--ink-soft);
|
| 90 |
-
border: 1px solid var(--line); border-radius: 8px;
|
| 91 |
-
font: inherit; font-size: 14px; cursor: pointer;
|
| 92 |
-
transition: border-color .15s, color .15s, background .15s;
|
| 93 |
-
}
|
| 94 |
-
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
|
| 95 |
-
.icon-btn svg { width: 17px; height: 17px; }
|
| 96 |
-
|
| 97 |
-
.search-trigger { min-width: 220px; justify-content: flex-start; color: var(--muted); }
|
| 98 |
-
.search-trigger kbd {
|
| 99 |
-
margin-left: auto; font: inherit; font-size: 11px; padding: 2px 6px;
|
| 100 |
-
border: 1px solid var(--line); border-radius: 5px; color: var(--muted);
|
| 101 |
-
}
|
| 102 |
-
|
| 103 |
-
.burger { display: none; }
|
| 104 |
-
|
| 105 |
-
/* ---------- layout ---------- */
|
| 106 |
-
.layout { display: flex; align-items: flex-start; }
|
| 107 |
-
|
| 108 |
-
.sidebar {
|
| 109 |
-
position: sticky; top: var(--header-h);
|
| 110 |
-
width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
|
| 111 |
-
height: calc(100vh - var(--header-h));
|
| 112 |
-
overflow-y: auto; overscroll-behavior: contain;
|
| 113 |
-
padding: 22px 14px 60px 20px;
|
| 114 |
-
border-right: 1px solid var(--line);
|
| 115 |
-
font-size: 14.5px;
|
| 116 |
-
scrollbar-width: thin;
|
| 117 |
-
}
|
| 118 |
-
|
| 119 |
-
.sidebar::-webkit-scrollbar { width: 8px; }
|
| 120 |
-
.sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
|
| 121 |
-
|
| 122 |
-
.side-group { margin-bottom: 6px; }
|
| 123 |
-
.side-group > summary {
|
| 124 |
-
cursor: pointer; list-style: none;
|
| 125 |
-
display: flex; align-items: center; gap: 9px;
|
| 126 |
-
padding: 9px 8px; border-radius: 7px;
|
| 127 |
-
color: var(--ink-soft); font-weight: 600; font-size: 14px;
|
| 128 |
-
}
|
| 129 |
-
.side-group > summary::-webkit-details-marker { display: none; }
|
| 130 |
-
.side-group > summary:hover { background: var(--bg-alt); }
|
| 131 |
-
.side-group[open] > summary { color: var(--ink); }
|
| 132 |
-
|
| 133 |
-
.side-num {
|
| 134 |
-
flex: 0 0 auto; width: 26px; text-align: center;
|
| 135 |
-
font-family: var(--font-serif); font-size: 12px; color: var(--muted);
|
| 136 |
-
border: 1px solid var(--line); border-radius: 5px; padding: 1px 0; line-height: 1.5;
|
| 137 |
-
}
|
| 138 |
-
|
| 139 |
-
.side-chapters { margin: 2px 0 10px; padding: 0 0 0 10px; list-style: none; border-left: 1px solid var(--line); }
|
| 140 |
-
.side-chapters li { margin: 0; }
|
| 141 |
-
.side-chapters a {
|
| 142 |
-
display: block; padding: 5px 8px; border-radius: 6px;
|
| 143 |
-
color: var(--ink-soft); font-size: 13.5px; line-height: 1.4;
|
| 144 |
-
}
|
| 145 |
-
.side-chapters a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
|
| 146 |
-
.side-chapters a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
|
| 147 |
-
.side-chapters .cn { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 12px; }
|
| 148 |
-
|
| 149 |
-
/* ---------- main ---------- */
|
| 150 |
-
.main { flex: 1 1 auto; min-width: 0; padding: 34px 40px 90px; }
|
| 151 |
-
.wrap { max-width: 860px; margin: 0 auto; }
|
| 152 |
-
.wrap--wide { max-width: 1080px; }
|
| 153 |
-
|
| 154 |
-
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
|
| 155 |
-
.crumbs a { color: var(--muted); }
|
| 156 |
-
.crumbs a:hover { color: var(--accent); }
|
| 157 |
-
|
| 158 |
-
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.25; color: var(--ink); }
|
| 159 |
-
|
| 160 |
-
h1 { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 12px; letter-spacing: -.01em; }
|
| 161 |
-
h2 { font-size: 26px; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
|
| 162 |
-
h3 { font-size: 20px; margin: 30px 0 10px; color: var(--ink-soft); }
|
| 163 |
-
|
| 164 |
-
.ch-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
|
| 165 |
-
.ch-meta .dot { opacity: .45; }
|
| 166 |
-
|
| 167 |
-
.badge {
|
| 168 |
-
display: inline-block; padding: 2px 8px; border-radius: 999px;
|
| 169 |
-
font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
|
| 170 |
-
background: var(--accent-bg); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
| 171 |
-
vertical-align: middle;
|
| 172 |
-
}
|
| 173 |
-
|
| 174 |
-
.lead { font-size: 18.5px; color: var(--ink-soft); }
|
| 175 |
-
|
| 176 |
-
p { margin: 0 0 16px; }
|
| 177 |
-
ul, ol { margin: 0 0 18px; padding-left: 24px; }
|
| 178 |
-
li { margin: 0 0 8px; }
|
| 179 |
-
li::marker { color: var(--accent-soft); }
|
| 180 |
-
|
| 181 |
-
strong { color: var(--ink); }
|
| 182 |
-
|
| 183 |
-
/* ---------- table of contents (in page) ---------- */
|
| 184 |
-
.toc {
|
| 185 |
-
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
|
| 186 |
-
padding: 16px 20px; margin: 0 0 30px; font-size: 14.5px;
|
| 187 |
-
}
|
| 188 |
-
.toc h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: var(--font-sans); }
|
| 189 |
-
.toc ol { margin: 0; padding-left: 18px; }
|
| 190 |
-
.toc li { margin: 0 0 5px; }
|
| 191 |
-
.toc a { color: var(--ink-soft); }
|
| 192 |
-
.toc a:hover { color: var(--accent); }
|
| 193 |
-
|
| 194 |
-
/* ---------- tables ---------- */
|
| 195 |
-
.table-wrap { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
|
| 196 |
-
table {
|
| 197 |
-
border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5;
|
| 198 |
-
}
|
| 199 |
-
th, td { text-align: left; vertical-align: top; padding: 9px 13px; border-bottom: 1px solid var(--line); }
|
| 200 |
-
tr:last-child td { border-bottom: none; }
|
| 201 |
-
thead th { background: var(--bg-alt); font-weight: 700; color: var(--ink); white-space: nowrap; }
|
| 202 |
-
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-alt) 45%, transparent); }
|
| 203 |
-
tbody tr:hover { background: var(--accent-bg); }
|
| 204 |
-
td:first-child { font-weight: 600; color: var(--ink); }
|
| 205 |
-
table .rowhead td { background: var(--bg-alt); font-weight: 700; color: var(--accent); }
|
| 206 |
-
|
| 207 |
-
/* ---------- callouts ---------- */
|
| 208 |
-
.callout {
|
| 209 |
-
margin: 0 0 24px; padding: 14px 18px;
|
| 210 |
-
background: var(--panel);
|
| 211 |
-
border: 1px solid var(--line);
|
| 212 |
-
border-left: 3px solid var(--accent);
|
| 213 |
-
border-radius: 0 var(--radius) var(--radius) 0;
|
| 214 |
-
font-size: 15.5px;
|
| 215 |
-
}
|
| 216 |
-
.callout h4 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
|
| 217 |
-
.callout p:last-child { margin-bottom: 0; }
|
| 218 |
-
|
| 219 |
-
.note { font-size: 15px; color: var(--ink-soft); background: var(--bg-alt); border-radius: 8px; padding: 12px 16px; }
|
| 220 |
-
|
| 221 |
-
.src { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); margin: 0 0 10px; word-break: break-word; }
|
| 222 |
-
.src::before { content: "↳ "; opacity: .6; }
|
| 223 |
-
|
| 224 |
-
code, .formula { font-family: var(--font-mono); font-size: .92em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
|
| 225 |
-
|
| 226 |
-
/* ---------- prev / next ---------- */
|
| 227 |
-
.pager { display: flex; gap: 14px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
|
| 228 |
-
.pager a {
|
| 229 |
-
flex: 1 1 0; display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
|
| 230 |
-
background: var(--panel); color: var(--ink); transition: border-color .15s, transform .1s;
|
| 231 |
-
}
|
| 232 |
-
.pager a:hover { border-color: var(--line-strong); text-decoration: none; }
|
| 233 |
-
.pager .dir { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
|
| 234 |
-
.pager .next { text-align: right; }
|
| 235 |
-
.pager .lbl { font-family: var(--font-serif); font-size: 16px; }
|
| 236 |
-
|
| 237 |
-
/* ---------- home ---------- */
|
| 238 |
-
.hero { padding: 26px 0 10px; }
|
| 239 |
-
.hero h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 10px; }
|
| 240 |
-
.hero .lead { max-width: 640px; }
|
| 241 |
-
|
| 242 |
-
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
|
| 243 |
-
.stat {
|
| 244 |
-
padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
|
| 245 |
-
background: var(--panel); font-size: 13.5px; color: var(--ink-soft);
|
| 246 |
-
}
|
| 247 |
-
.stat b { color: var(--accent); font-family: var(--font-serif); font-size: 15px; }
|
| 248 |
-
|
| 249 |
-
.quick { margin: 26px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
|
| 250 |
-
.quick a {
|
| 251 |
-
padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px;
|
| 252 |
-
background: var(--panel); font-size: 14px; color: var(--ink-soft);
|
| 253 |
-
}
|
| 254 |
-
.quick a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
|
| 255 |
-
|
| 256 |
-
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 22px 0 10px; }
|
| 257 |
-
|
| 258 |
-
.card {
|
| 259 |
-
display:
|
| 260 |
-
|
| 261 |
-
|
| 262 |
-
|
| 263 |
-
|
| 264 |
-
.card
|
| 265 |
-
.card
|
| 266 |
-
.card
|
| 267 |
-
.card
|
| 268 |
-
|
| 269 |
-
|
| 270 |
-
|
| 271 |
-
|
| 272 |
-
.ch-list
|
| 273 |
-
.ch-list
|
| 274 |
-
.ch-list a
|
| 275 |
-
.ch-list
|
| 276 |
-
.ch-list .
|
| 277 |
-
.ch-list .t
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
|
| 287 |
-
.search-
|
| 288 |
-
|
| 289 |
-
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
border
|
| 296 |
-
|
| 297 |
-
|
| 298 |
-
.search-results
|
| 299 |
-
.search-results a:
|
| 300 |
-
.search-results .
|
| 301 |
-
.search-results .
|
| 302 |
-
.search-results .
|
| 303 |
-
.search-results
|
| 304 |
-
.search-
|
| 305 |
-
|
| 306 |
-
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
.site-footer a
|
| 313 |
-
|
| 314 |
-
|
| 315 |
-
|
| 316 |
-
|
| 317 |
-
|
| 318 |
-
|
| 319 |
-
|
| 320 |
-
.
|
| 321 |
-
.search-trigger
|
| 322 |
-
}
|
| 323 |
-
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
.
|
| 327 |
-
.
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
.
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
.
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
.pager
|
| 344 |
-
}
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
.
|
| 349 |
-
|
| 350 |
-
}
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
|
| 356 |
-
|
| 357 |
-
|
| 358 |
-
|
| 359 |
-
--map-sea-
|
| 360 |
-
--map-
|
| 361 |
-
--map-
|
| 362 |
-
--map-
|
| 363 |
-
--map-
|
| 364 |
-
|
| 365 |
-
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
--map-sea-
|
| 369 |
-
--map-
|
| 370 |
-
--map-
|
| 371 |
-
--map-
|
| 372 |
-
--map-
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
.brand
|
| 377 |
-
.brand
|
| 378 |
-
|
| 379 |
-
|
| 380 |
-
.topnav
|
| 381 |
-
|
| 382 |
-
|
| 383 |
-
|
| 384 |
-
|
| 385 |
-
.topnav a
|
| 386 |
-
|
| 387 |
-
|
| 388 |
-
|
| 389 |
-
|
| 390 |
-
|
| 391 |
-
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
| 397 |
-
|
| 398 |
-
|
| 399 |
-
|
| 400 |
-
|
| 401 |
-
|
| 402 |
-
|
| 403 |
-
.bb-side
|
| 404 |
-
.bb-side
|
| 405 |
-
.bb-
|
| 406 |
-
.bb-
|
| 407 |
-
.bb-
|
| 408 |
-
|
| 409 |
-
|
| 410 |
-
|
| 411 |
-
|
| 412 |
-
|
| 413 |
-
|
| 414 |
-
|
| 415 |
-
|
| 416 |
-
|
| 417 |
-
|
| 418 |
-
|
| 419 |
-
|
| 420 |
-
|
| 421 |
-
|
| 422 |
-
|
| 423 |
-
|
| 424 |
-
.foot-col
|
| 425 |
-
.foot-col
|
| 426 |
-
.foot-col a
|
| 427 |
-
.foot-col
|
| 428 |
-
.foot-
|
| 429 |
-
|
| 430 |
-
|
| 431 |
-
|
| 432 |
-
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
|
| 436 |
-
.tool-
|
| 437 |
-
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
|
| 442 |
-
|
| 443 |
-
.tool-card
|
| 444 |
-
|
| 445 |
-
|
| 446 |
-
|
| 447 |
-
|
| 448 |
-
|
| 449 |
-
|
| 450 |
-
|
| 451 |
-
|
| 452 |
-
|
| 453 |
-
.
|
| 454 |
-
|
| 455 |
-
|
| 456 |
-
|
| 457 |
-
|
| 458 |
-
|
| 459 |
-
|
| 460 |
-
.tool
|
| 461 |
-
.tool-
|
| 462 |
-
.tool-
|
| 463 |
-
.tool-inputs
|
| 464 |
-
|
| 465 |
-
|
| 466 |
-
|
| 467 |
-
|
| 468 |
-
|
| 469 |
-
.tool-inputs .
|
| 470 |
-
|
| 471 |
-
.tool-
|
| 472 |
-
|
| 473 |
-
|
| 474 |
-
|
| 475 |
-
|
| 476 |
-
|
| 477 |
-
|
| 478 |
-
.
|
| 479 |
-
.
|
| 480 |
-
.breakdown
|
| 481 |
-
.breakdown
|
| 482 |
-
.breakdown
|
| 483 |
-
|
| 484 |
-
|
| 485 |
-
|
| 486 |
-
|
| 487 |
-
.map-
|
| 488 |
-
.map-
|
| 489 |
-
.map-
|
| 490 |
-
.map-labels
|
| 491 |
-
.lbl-
|
| 492 |
-
.
|
| 493 |
-
.
|
| 494 |
-
.mk
|
| 495 |
-
.mk
|
| 496 |
-
.mk-
|
| 497 |
-
.mk-
|
| 498 |
-
.mk
|
| 499 |
-
.mk {
|
| 500 |
-
.
|
| 501 |
-
.
|
| 502 |
-
.map-
|
| 503 |
-
.
|
| 504 |
-
.
|
| 505 |
-
.dot
|
| 506 |
-
.dot.
|
| 507 |
-
.
|
| 508 |
-
.
|
| 509 |
-
|
| 510 |
-
|
| 511 |
-
|
| 512 |
-
|
| 513 |
-
.events-
|
| 514 |
-
.
|
| 515 |
-
|
| 516 |
-
|
| 517 |
-
|
| 518 |
-
|
| 519 |
-
|
| 520 |
-
.event-card
|
| 521 |
-
.event-card .
|
| 522 |
-
.event-card .
|
| 523 |
-
.event-card .
|
| 524 |
-
.event-card .
|
| 525 |
-
|
| 526 |
-
.
|
| 527 |
-
|
| 528 |
-
|
| 529 |
-
|
| 530 |
-
|
| 531 |
-
|
| 532 |
-
|
| 533 |
-
|
| 534 |
-
|
| 535 |
-
|
| 536 |
-
.
|
| 537 |
-
.
|
| 538 |
-
}
|
| 539 |
-
|
| 540 |
-
|
| 541 |
-
|
| 542 |
-
|
| 543 |
-
.
|
| 544 |
-
.
|
| 545 |
-
.
|
| 546 |
-
.
|
| 547 |
-
}
|
| 548 |
-
|
| 549 |
-
|
| 550 |
-
|
| 551 |
-
|
| 552 |
-
|
| 553 |
-
|
| 554 |
-
|
| 555 |
-
.
|
| 556 |
-
.bb-links
|
| 557 |
-
.bb-links a
|
| 558 |
-
|
| 559 |
-
|
| 560 |
-
|
| 561 |
-
|
| 562 |
-
|
| 563 |
-
|
| 564 |
-
|
| 565 |
-
|
| 566 |
-
|
| 567 |
-
.map-
|
| 568 |
-
|
| 569 |
-
|
| 570 |
-
|
| 571 |
-
|
| 572 |
-
|
| 573 |
-
|
| 574 |
-
|
| 575 |
-
|
| 576 |
-
|
| 577 |
-
.hero-
|
| 578 |
-
.hero-
|
| 579 |
-
|
| 580 |
-
|
| 581 |
-
|
| 582 |
-
|
| 583 |
-
|
| 584 |
-
.gallery
|
| 585 |
-
|
| 586 |
-
|
| 587 |
-
|
| 588 |
-
|
| 589 |
-
|
| 590 |
-
.
|
| 591 |
-
.
|
| 592 |
-
|
| 593 |
-
|
| 594 |
-
|
| 595 |
-
|
| 596 |
-
|
| 597 |
-
|
| 598 |
-
|
| 599 |
-
|
| 600 |
-
}
|
| 601 |
-
|
| 602 |
-
|
| 603 |
-
|
| 604 |
-
|
| 605 |
-
|
| 606 |
-
|
| 607 |
-
|
| 608 |
-
|
| 609 |
-
|
| 610 |
-
|
| 611 |
-
|
| 612 |
-
|
| 613 |
-
|
| 614 |
-
|
| 615 |
-
|
| 616 |
-
|
| 617 |
-
|
| 618 |
-
|
| 619 |
-
|
| 620 |
-
|
| 621 |
-
|
| 622 |
-
|
| 623 |
-
|
| 624 |
-
background
|
| 625 |
-
|
| 626 |
-
|
| 627 |
-
|
| 628 |
-
|
| 629 |
-
|
| 630 |
-
|
| 631 |
-
|
| 632 |
-
|
| 633 |
-
|
| 634 |
-
|
| 635 |
-
|
| 636 |
-
|
| 637 |
-
|
| 638 |
-
|
| 639 |
-
|
| 640 |
-
|
| 641 |
-
|
| 642 |
-
|
| 643 |
-
|
| 644 |
-
|
| 645 |
-
|
| 646 |
-
|
| 647 |
-
|
| 648 |
-
|
| 649 |
-
.
|
| 650 |
-
|
| 651 |
-
|
| 652 |
-
|
| 653 |
-
|
| 654 |
-
|
| 655 |
-
|
| 656 |
-
|
| 657 |
-
|
| 658 |
-
|
| 659 |
-
|
| 660 |
-
|
| 661 |
-
.
|
| 662 |
-
|
| 663 |
-
|
| 664 |
-
|
| 665 |
-
|
| 666 |
-
|
| 667 |
-
|
| 668 |
-
|
| 669 |
-
|
| 670 |
-
|
| 671 |
-
|
| 672 |
-
|
| 673 |
-
|
| 674 |
-
.
|
| 675 |
-
|
| 676 |
-
|
| 677 |
-
|
| 678 |
-
|
| 679 |
-
|
| 680 |
-
|
| 681 |
-
|
| 682 |
-
.
|
| 683 |
-
|
| 684 |
-
.
|
| 685 |
-
|
| 686 |
-
|
| 687 |
-
.
|
| 688 |
-
|
| 689 |
-
|
| 690 |
-
.
|
| 691 |
-
|
| 692 |
-
|
| 693 |
-
|
| 694 |
-
|
| 695 |
-
|
| 696 |
-
|
| 697 |
-
|
| 698 |
-
|
| 699 |
-
|
| 700 |
-
.
|
| 701 |
-
|
| 702 |
-
|
| 703 |
-
.
|
| 704 |
-
|
| 705 |
-
:
|
| 706 |
-
|
| 707 |
-
|
| 708 |
-
|
| 709 |
-
|
| 710 |
-
|
| 711 |
-
|
| 712 |
-
|
| 713 |
-
|
| 714 |
-
|
| 715 |
-
|
| 716 |
-
|
| 717 |
-
|
| 718 |
-
|
| 719 |
-
|
| 720 |
-
|
| 721 |
-
|
| 722 |
-
|
| 723 |
-
|
| 724 |
-
.market-
|
| 725 |
-
.market-
|
| 726 |
-
.
|
| 727 |
-
|
| 728 |
-
|
| 729 |
-
|
| 730 |
-
|
| 731 |
-
|
| 732 |
-
|
| 733 |
-
}
|
| 734 |
-
|
| 735 |
-
.lot
|
| 736 |
-
|
| 737 |
-
|
| 738 |
-
|
| 739 |
-
|
| 740 |
-
|
| 741 |
-
|
| 742 |
-
.lot
|
| 743 |
-
.lot-
|
| 744 |
-
.lot-
|
| 745 |
-
|
| 746 |
-
.
|
| 747 |
-
.
|
| 748 |
-
.
|
| 749 |
-
.
|
| 750 |
-
.
|
| 751 |
-
.
|
| 752 |
-
.
|
| 753 |
-
|
| 754 |
-
|
| 755 |
-
|
| 756 |
-
|
| 757 |
-
|
| 758 |
-
|
| 759 |
-
|
| 760 |
-
|
| 761 |
-
|
| 762 |
-
|
| 763 |
-
|
| 764 |
-
}
|
| 765 |
-
.
|
| 766 |
-
|
| 767 |
-
|
| 768 |
-
|
| 769 |
-
|
| 770 |
-
}
|
| 771 |
-
|
| 772 |
-
|
| 773 |
-
|
| 774 |
-
|
| 775 |
-
|
| 776 |
-
|
| 777 |
-
|
| 778 |
-
|
| 779 |
-
|
| 780 |
-
|
| 781 |
-
|
| 782 |
-
|
| 783 |
-
.
|
| 784 |
-
.
|
| 785 |
-
|
| 786 |
-
|
| 787 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 788 |
.event-card .loc { font-size: 13.5px; color: var(--ink-soft); }
|
| 789 |
-
|
| 790 |
-
/* события — карточки с региональными таймерами */
|
| 791 |
-
.events-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
|
| 792 |
-
.event-card { padding: 0; overflow: hidden; gap: 0; }
|
| 793 |
-
.ev-head { display: flex; align-items: center; padding: 14px 16px 0; }
|
| 794 |
-
.ev-cat { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
|
| 795 |
-
.ev-star { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; color: var(--gold); cursor: pointer; }
|
| 796 |
-
.ev-title { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .07em; font-size: 19px; margin: 10px 16px 4px; }
|
| 797 |
-
.ev-cadence { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 16px 12px; }
|
| 798 |
-
.ev-rows { display: flex; flex-direction: column; }
|
| 799 |
-
.ev-row { padding: 10px 16px 12px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
|
| 800 |
-
.ev-row.is-live { background: #eef6ec; border-left-color: #3f9a5f; }
|
| 801 |
-
.ev-row.is-soon { background: #fdf4e3; border-left-color: #c8952f; }
|
| 802 |
-
.ev-row.is-none { opacity: .55; }
|
| 803 |
-
.ev-row-head { display: flex; align-items: baseline; gap: 10px; }
|
| 804 |
-
.ev-region { font-weight: 600; font-size: 14.5px; }
|
| 805 |
-
.ev-time { margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
|
| 806 |
-
.ev-row.is-live .ev-time { color: #2f7a4f; }
|
| 807 |
-
.ev-tags { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
|
| 808 |
-
.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); }
|
| 809 |
-
.ev-caption { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
|
| 810 |
-
.ev-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }
|
| 811 |
-
.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; }
|
| 812 |
-
.ev-more:hover { background: var(--bg-alt); }
|
| 813 |
-
.ev-gilded { padding: 12px 16px 14px; border-top: 1px solid var(--line); }
|
| 814 |
-
.ev-gilded-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
|
| 815 |
-
.ev-gilded-name { font-size: 14px; font-weight: 600; margin-top: 3px; }
|
| 816 |
-
.ev-gilded-chance { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
| 817 |
-
.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); }
|
| 818 |
-
.ev-link:hover { background: var(--bg-alt); text-decoration: none; }
|
| 819 |
-
.ev-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
|
| 820 |
-
.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; }
|
| 821 |
-
.ev-filter:hover { border-color: var(--gold); color: var(--gold); }
|
| 822 |
-
.ev-filter.on { background: var(--gold); border-color: var(--gold); color: #fff; }
|
| 823 |
-
.ev-hint { font-size: 12.5px; color: var(--muted); }
|
| 824 |
-
[data-theme="dark"] .ev-row.is-live { background: #16241a; }
|
| 825 |
-
[data-theme="dark"] .ev-row.is-soon { background: #2a2113; }
|
| 826 |
[data-theme="dark"] .ev-row.is-live .ev-time { color: #6fd39a; }
|
| 827 |
-
|
| 828 |
-
/* рынок — табли
|
| 829 |
-
.market-head-row {
|
| 830 |
-
display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px 190px;
|
| 831 |
-
gap: 16px; padding: 10px 16px; margin-top: 6px;
|
| 832 |
-
background: var(--bg-alt); border: 1px solid var(--line); border-radius:
|
| 833 |
-
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
|
| 834 |
-
}
|
| 835 |
-
.market-head-row
|
| 836 |
-
.
|
| 837 |
-
|
| 838 |
-
|
| 839 |
-
|
| 840 |
-
}
|
| 841 |
-
.
|
| 842 |
-
|
| 843 |
-
|
| 844 |
-
.
|
| 845 |
-
.
|
| 846 |
-
.
|
| 847 |
-
.
|
| 848 |
-
.
|
| 849 |
-
.
|
| 850 |
-
.lot
|
| 851 |
-
|
| 852 |
-
|
| 853 |
-
.
|
| 854 |
-
.lot { grid-
|
| 855 |
-
.lot-item { grid-area: item; }
|
| 856 |
-
.lot-price { grid-area: price; text-align: right; }
|
| 857 |
-
.lot-qty { grid-area: qty; }
|
| 858 |
-
.lot-seller { grid-area: seller; text-align: right; }
|
| 859 |
}
|
|
|
|
| 1 |
+
/* ============================================================
|
| 2 |
+
DFO Wiki — styles
|
| 3 |
+
Light theme by default, dark via [data-theme="dark"].
|
| 4 |
+
============================================================ */
|
| 5 |
+
|
| 6 |
+
:root {
|
| 7 |
+
--bg: #fbf7f1;
|
| 8 |
+
--bg-alt: #f4ece1;
|
| 9 |
+
--panel: #ffffff;
|
| 10 |
+
--ink: #17130f;
|
| 11 |
+
--ink-soft: #3a332b;
|
| 12 |
+
--muted: #77695a;
|
| 13 |
+
--line: #ece1d2;
|
| 14 |
+
--line-strong: #dcc9b2;
|
| 15 |
+
--accent: #d8452c;
|
| 16 |
+
--accent-soft: #ef7247;
|
| 17 |
+
--accent-bg: #fde9e1;
|
| 18 |
+
--gold: #c08a2e;
|
| 19 |
+
--code-bg: #f7efe4;
|
| 20 |
+
--shadow: 0 1px 2px rgba(70, 40, 20, .06), 0 12px 32px rgba(70, 40, 20, .08);
|
| 21 |
+
--radius: 12px;
|
| 22 |
+
--sidebar-w: 300px;
|
| 23 |
+
--header-h: 62px;
|
| 24 |
+
--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
|
| 25 |
+
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
| 26 |
+
--font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
[data-theme="dark"] {
|
| 30 |
+
--bg: #0f0d0b;
|
| 31 |
+
--bg-alt: #171310;
|
| 32 |
+
--panel: #1c1814;
|
| 33 |
+
--ink: #f5eee2;
|
| 34 |
+
--ink-soft: #dbd0bf;
|
| 35 |
+
--muted: #a99a87;
|
| 36 |
+
--line: #2c251f;
|
| 37 |
+
--line-strong: #463a2f;
|
| 38 |
+
--accent: #ff7f52;
|
| 39 |
+
--accent-soft: #ffa079;
|
| 40 |
+
--accent-bg: #2e1a12;
|
| 41 |
+
--gold: #e5b75e;
|
| 42 |
+
--code-bg: #241e18;
|
| 43 |
+
--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 36px rgba(0, 0, 0, .4);
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
* { box-sizing: border-box; }
|
| 47 |
+
|
| 48 |
+
.visually-hidden {
|
| 49 |
+
position: absolute !important; width: 1px; height: 1px;
|
| 50 |
+
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
|
| 54 |
+
|
| 55 |
+
body {
|
| 56 |
+
margin: 0;
|
| 57 |
+
background: var(--bg);
|
| 58 |
+
color: var(--ink);
|
| 59 |
+
font-family: var(--font-sans);
|
| 60 |
+
font-size: 17px;
|
| 61 |
+
line-height: 1.65;
|
| 62 |
+
-webkit-font-smoothing: antialiased;
|
| 63 |
+
text-rendering: optimizeLegibility;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
a { color: var(--accent); text-decoration: none; }
|
| 67 |
+
a:hover { text-decoration: underline; text-underline-offset: 2px; }
|
| 68 |
+
|
| 69 |
+
/* ---------- header ---------- */
|
| 70 |
+
.site-header {
|
| 71 |
+
position: sticky; top: 0; z-index: 40;
|
| 72 |
+
height: var(--header-h);
|
| 73 |
+
display: flex; align-items: center; gap: 14px;
|
| 74 |
+
padding: 0 20px;
|
| 75 |
+
background: color-mix(in srgb, var(--bg) 88%, transparent);
|
| 76 |
+
backdrop-filter: saturate(140%) blur(10px);
|
| 77 |
+
border-bottom: 1px solid var(--line);
|
| 78 |
+
}
|
| 79 |
+
|
| 80 |
+
.brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); }
|
| 81 |
+
.brand a { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: .2px; }
|
| 82 |
+
.brand .rev { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
|
| 83 |
+
|
| 84 |
+
.header-spacer { flex: 1; }
|
| 85 |
+
|
| 86 |
+
.icon-btn {
|
| 87 |
+
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
| 88 |
+
height: 38px; min-width: 38px; padding: 0 12px;
|
| 89 |
+
background: var(--panel); color: var(--ink-soft);
|
| 90 |
+
border: 1px solid var(--line); border-radius: 8px;
|
| 91 |
+
font: inherit; font-size: 14px; cursor: pointer;
|
| 92 |
+
transition: border-color .15s, color .15s, background .15s;
|
| 93 |
+
}
|
| 94 |
+
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
|
| 95 |
+
.icon-btn svg { width: 17px; height: 17px; }
|
| 96 |
+
|
| 97 |
+
.search-trigger { min-width: 220px; justify-content: flex-start; color: var(--muted); }
|
| 98 |
+
.search-trigger kbd {
|
| 99 |
+
margin-left: auto; font: inherit; font-size: 11px; padding: 2px 6px;
|
| 100 |
+
border: 1px solid var(--line); border-radius: 5px; color: var(--muted);
|
| 101 |
+
}
|
| 102 |
+
|
| 103 |
+
.burger { display: none; }
|
| 104 |
+
|
| 105 |
+
/* ---------- layout ---------- */
|
| 106 |
+
.layout { display: flex; align-items: flex-start; }
|
| 107 |
+
|
| 108 |
+
.sidebar {
|
| 109 |
+
position: sticky; top: var(--header-h);
|
| 110 |
+
width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
|
| 111 |
+
height: calc(100vh - var(--header-h));
|
| 112 |
+
overflow-y: auto; overscroll-behavior: contain;
|
| 113 |
+
padding: 22px 14px 60px 20px;
|
| 114 |
+
border-right: 1px solid var(--line);
|
| 115 |
+
font-size: 14.5px;
|
| 116 |
+
scrollbar-width: thin;
|
| 117 |
+
}
|
| 118 |
+
|
| 119 |
+
.sidebar::-webkit-scrollbar { width: 8px; }
|
| 120 |
+
.sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
|
| 121 |
+
|
| 122 |
+
.side-group { margin-bottom: 6px; }
|
| 123 |
+
.side-group > summary {
|
| 124 |
+
cursor: pointer; list-style: none;
|
| 125 |
+
display: flex; align-items: center; gap: 9px;
|
| 126 |
+
padding: 9px 8px; border-radius: 7px;
|
| 127 |
+
color: var(--ink-soft); font-weight: 600; font-size: 14px;
|
| 128 |
+
}
|
| 129 |
+
.side-group > summary::-webkit-details-marker { display: none; }
|
| 130 |
+
.side-group > summary:hover { background: var(--bg-alt); }
|
| 131 |
+
.side-group[open] > summary { color: var(--ink); }
|
| 132 |
+
|
| 133 |
+
.side-num {
|
| 134 |
+
flex: 0 0 auto; width: 26px; text-align: center;
|
| 135 |
+
font-family: var(--font-serif); font-size: 12px; color: var(--muted);
|
| 136 |
+
border: 1px solid var(--line); border-radius: 5px; padding: 1px 0; line-height: 1.5;
|
| 137 |
+
}
|
| 138 |
+
|
| 139 |
+
.side-chapters { margin: 2px 0 10px; padding: 0 0 0 10px; list-style: none; border-left: 1px solid var(--line); }
|
| 140 |
+
.side-chapters li { margin: 0; }
|
| 141 |
+
.side-chapters a {
|
| 142 |
+
display: block; padding: 5px 8px; border-radius: 6px;
|
| 143 |
+
color: var(--ink-soft); font-size: 13.5px; line-height: 1.4;
|
| 144 |
+
}
|
| 145 |
+
.side-chapters a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
|
| 146 |
+
.side-chapters a.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
|
| 147 |
+
.side-chapters .cn { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; font-size: 12px; }
|
| 148 |
+
|
| 149 |
+
/* ---------- main ---------- */
|
| 150 |
+
.main { flex: 1 1 auto; min-width: 0; padding: 34px 40px 90px; }
|
| 151 |
+
.wrap { max-width: 860px; margin: 0 auto; }
|
| 152 |
+
.wrap--wide { max-width: 1080px; }
|
| 153 |
+
|
| 154 |
+
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
|
| 155 |
+
.crumbs a { color: var(--muted); }
|
| 156 |
+
.crumbs a:hover { color: var(--accent); }
|
| 157 |
+
|
| 158 |
+
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.25; color: var(--ink); }
|
| 159 |
+
|
| 160 |
+
h1 { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 12px; letter-spacing: -.01em; }
|
| 161 |
+
h2 { font-size: 26px; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
|
| 162 |
+
h3 { font-size: 20px; margin: 30px 0 10px; color: var(--ink-soft); }
|
| 163 |
+
|
| 164 |
+
.ch-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
|
| 165 |
+
.ch-meta .dot { opacity: .45; }
|
| 166 |
+
|
| 167 |
+
.badge {
|
| 168 |
+
display: inline-block; padding: 2px 8px; border-radius: 999px;
|
| 169 |
+
font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
|
| 170 |
+
background: var(--accent-bg); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
|
| 171 |
+
vertical-align: middle;
|
| 172 |
+
}
|
| 173 |
+
|
| 174 |
+
.lead { font-size: 18.5px; color: var(--ink-soft); }
|
| 175 |
+
|
| 176 |
+
p { margin: 0 0 16px; }
|
| 177 |
+
ul, ol { margin: 0 0 18px; padding-left: 24px; }
|
| 178 |
+
li { margin: 0 0 8px; }
|
| 179 |
+
li::marker { color: var(--accent-soft); }
|
| 180 |
+
|
| 181 |
+
strong { color: var(--ink); }
|
| 182 |
+
|
| 183 |
+
/* ---------- table of contents (in page) ---------- */
|
| 184 |
+
.toc {
|
| 185 |
+
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
|
| 186 |
+
padding: 16px 20px; margin: 0 0 30px; font-size: 14.5px;
|
| 187 |
+
}
|
| 188 |
+
.toc h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-family: var(--font-sans); }
|
| 189 |
+
.toc ol { margin: 0; padding-left: 18px; }
|
| 190 |
+
.toc li { margin: 0 0 5px; }
|
| 191 |
+
.toc a { color: var(--ink-soft); }
|
| 192 |
+
.toc a:hover { color: var(--accent); }
|
| 193 |
+
|
| 194 |
+
/* ---------- tables ---------- */
|
| 195 |
+
.table-wrap { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
|
| 196 |
+
table {
|
| 197 |
+
border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5;
|
| 198 |
+
}
|
| 199 |
+
th, td { text-align: left; vertical-align: top; padding: 9px 13px; border-bottom: 1px solid var(--line); }
|
| 200 |
+
tr:last-child td { border-bottom: none; }
|
| 201 |
+
thead th { background: var(--bg-alt); font-weight: 700; color: var(--ink); white-space: nowrap; }
|
| 202 |
+
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-alt) 45%, transparent); }
|
| 203 |
+
tbody tr:hover { background: var(--accent-bg); }
|
| 204 |
+
td:first-child { font-weight: 600; color: var(--ink); }
|
| 205 |
+
table .rowhead td { background: var(--bg-alt); font-weight: 700; color: var(--accent); }
|
| 206 |
+
|
| 207 |
+
/* ---------- callouts ---------- */
|
| 208 |
+
.callout {
|
| 209 |
+
margin: 0 0 24px; padding: 14px 18px;
|
| 210 |
+
background: var(--panel);
|
| 211 |
+
border: 1px solid var(--line);
|
| 212 |
+
border-left: 3px solid var(--accent);
|
| 213 |
+
border-radius: 0 var(--radius) var(--radius) 0;
|
| 214 |
+
font-size: 15.5px;
|
| 215 |
+
}
|
| 216 |
+
.callout h4 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
|
| 217 |
+
.callout p:last-child { margin-bottom: 0; }
|
| 218 |
+
|
| 219 |
+
.note { font-size: 15px; color: var(--ink-soft); background: var(--bg-alt); border-radius: 8px; padding: 12px 16px; }
|
| 220 |
+
|
| 221 |
+
.src { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); margin: 0 0 10px; word-break: break-word; }
|
| 222 |
+
.src::before { content: "↳ "; opacity: .6; }
|
| 223 |
+
|
| 224 |
+
code, .formula { font-family: var(--font-mono); font-size: .92em; background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
|
| 225 |
+
|
| 226 |
+
/* ---------- prev / next ---------- */
|
| 227 |
+
.pager { display: flex; gap: 14px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
|
| 228 |
+
.pager a {
|
| 229 |
+
flex: 1 1 0; display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
|
| 230 |
+
background: var(--panel); color: var(--ink); transition: border-color .15s, transform .1s;
|
| 231 |
+
}
|
| 232 |
+
.pager a:hover { border-color: var(--line-strong); text-decoration: none; }
|
| 233 |
+
.pager .dir { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
|
| 234 |
+
.pager .next { text-align: right; }
|
| 235 |
+
.pager .lbl { font-family: var(--font-serif); font-size: 16px; }
|
| 236 |
+
|
| 237 |
+
/* ---------- home ---------- */
|
| 238 |
+
.hero { padding: 26px 0 10px; }
|
| 239 |
+
.hero h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 10px; }
|
| 240 |
+
.hero .lead { max-width: 640px; }
|
| 241 |
+
|
| 242 |
+
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
|
| 243 |
+
.stat {
|
| 244 |
+
padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
|
| 245 |
+
background: var(--panel); font-size: 13.5px; color: var(--ink-soft);
|
| 246 |
+
}
|
| 247 |
+
.stat b { color: var(--accent); font-family: var(--font-serif); font-size: 15px; }
|
| 248 |
+
|
| 249 |
+
.quick { margin: 26px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
|
| 250 |
+
.quick a {
|
| 251 |
+
padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px;
|
| 252 |
+
background: var(--panel); font-size: 14px; color: var(--ink-soft);
|
| 253 |
+
}
|
| 254 |
+
.quick a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
|
| 255 |
+
|
| 256 |
+
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 22px 0 10px; }
|
| 257 |
+
|
| 258 |
+
.card {
|
| 259 |
+
display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
|
| 260 |
+
padding: 20px 20px 16px; background: var(--panel);
|
| 261 |
+
border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
|
| 262 |
+
box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;
|
| 263 |
+
}
|
| 264 |
+
.card:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-2px); }
|
| 265 |
+
.card .num { font-family: var(--font-serif); font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
|
| 266 |
+
.card h3 { margin: 6px 0 8px; font-size: 21px; }
|
| 267 |
+
.card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
|
| 268 |
+
.card .count { font-size: 12.5px; color: var(--accent); font-weight: 600; }
|
| 269 |
+
|
| 270 |
+
.part-intro { font-size: 17px; color: var(--ink-soft); max-width: 720px; margin-bottom: 26px; }
|
| 271 |
+
|
| 272 |
+
.ch-list { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--line); }
|
| 273 |
+
.ch-list li { border-bottom: 1px solid var(--line); margin: 0; }
|
| 274 |
+
.ch-list a { display: flex; gap: 14px; padding: 14px 6px; color: var(--ink); }
|
| 275 |
+
.ch-list a:hover { background: var(--bg-alt); text-decoration: none; }
|
| 276 |
+
.ch-list .n { flex: 0 0 34px; color: var(--muted); font-variant-numeric: tabular-nums; font-family: var(--font-serif); }
|
| 277 |
+
.ch-list .t { flex: 1 1 auto; }
|
| 278 |
+
.ch-list .t small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
|
| 279 |
+
|
| 280 |
+
/* ---------- search overlay ---------- */
|
| 281 |
+
.search-overlay {
|
| 282 |
+
position: fixed; inset: 0; z-index: 100;
|
| 283 |
+
background: color-mix(in srgb, var(--bg) 70%, transparent);
|
| 284 |
+
backdrop-filter: blur(6px);
|
| 285 |
+
display: none; padding: 8vh 18px 18px;
|
| 286 |
+
}
|
| 287 |
+
.search-overlay.open { display: block; }
|
| 288 |
+
.search-box {
|
| 289 |
+
max-width: 720px; margin: 0 auto; background: var(--panel);
|
| 290 |
+
border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow);
|
| 291 |
+
overflow: hidden;
|
| 292 |
+
}
|
| 293 |
+
.search-box input {
|
| 294 |
+
width: 100%; padding: 18px 20px; font: inherit; font-size: 18px;
|
| 295 |
+
background: transparent; border: none; outline: none; color: var(--ink);
|
| 296 |
+
border-bottom: 1px solid var(--line);
|
| 297 |
+
}
|
| 298 |
+
.search-results { max-height: 62vh; overflow-y: auto; }
|
| 299 |
+
.search-results a { display: block; padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--ink); }
|
| 300 |
+
.search-results a:hover, .search-results a.sel { background: var(--bg-alt); text-decoration: none; }
|
| 301 |
+
.search-results .st { font-weight: 600; }
|
| 302 |
+
.search-results .sp { font-size: 12.5px; color: var(--muted); }
|
| 303 |
+
.search-results .sx { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
|
| 304 |
+
.search-results mark { background: color-mix(in srgb, var(--gold) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
|
| 305 |
+
.search-empty { padding: 18px 20px; color: var(--muted); font-size: 14px; }
|
| 306 |
+
|
| 307 |
+
/* ---------- footer ---------- */
|
| 308 |
+
.site-footer {
|
| 309 |
+
grid-column: 1 / -1; margin-top: 60px; padding: 26px 40px;
|
| 310 |
+
border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
|
| 311 |
+
}
|
| 312 |
+
.site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
|
| 313 |
+
.site-footer a:hover { color: var(--accent); }
|
| 314 |
+
|
| 315 |
+
.backdrop { display: none; }
|
| 316 |
+
|
| 317 |
+
/* ---------- responsive ---------- */
|
| 318 |
+
@media (max-width: 980px) {
|
| 319 |
+
:root { --sidebar-w: 270px; }
|
| 320 |
+
.main { padding: 26px 22px 80px; }
|
| 321 |
+
.search-trigger { min-width: 44px; }
|
| 322 |
+
.search-trigger span, .search-trigger kbd { display: none; }
|
| 323 |
+
}
|
| 324 |
+
|
| 325 |
+
@media (max-width: 820px) {
|
| 326 |
+
.burger { display: inline-flex; }
|
| 327 |
+
.layout { display: block; }
|
| 328 |
+
.sidebar {
|
| 329 |
+
position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 60;
|
| 330 |
+
width: min(86vw, 340px); height: auto;
|
| 331 |
+
background: var(--panel); border-right: 1px solid var(--line);
|
| 332 |
+
transform: translateX(-102%); transition: transform .22s ease;
|
| 333 |
+
box-shadow: var(--shadow);
|
| 334 |
+
}
|
| 335 |
+
body.nav-open .sidebar { transform: none; }
|
| 336 |
+
.backdrop {
|
| 337 |
+
display: block; position: fixed; inset: var(--header-h) 0 0 0; z-index: 50;
|
| 338 |
+
background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .2s;
|
| 339 |
+
}
|
| 340 |
+
body.nav-open .backdrop { opacity: 1; pointer-events: auto; }
|
| 341 |
+
.main { padding: 22px 18px 70px; }
|
| 342 |
+
h2 { font-size: 23px; }
|
| 343 |
+
.pager { flex-direction: column; }
|
| 344 |
+
.pager .next { text-align: left; }
|
| 345 |
+
}
|
| 346 |
+
|
| 347 |
+
@media print {
|
| 348 |
+
.site-header, .sidebar, .pager, .toc, .site-footer { display: none; }
|
| 349 |
+
.main { padding: 0; }
|
| 350 |
+
a { color: inherit; }
|
| 351 |
+
}
|
| 352 |
+
|
| 353 |
+
|
| 354 |
+
/* ============================================================
|
| 355 |
+
v2 — верхнее меню, нижняя панель, калькуляторы, карта, события
|
| 356 |
+
============================================================ */
|
| 357 |
+
|
| 358 |
+
:root {
|
| 359 |
+
--map-sea-1: #cfdcd8;
|
| 360 |
+
--map-sea-2: #a9c0bd;
|
| 361 |
+
--map-land: #e8ddc6;
|
| 362 |
+
--map-land2: #ded2bb;
|
| 363 |
+
--map-coast: #8f7f63;
|
| 364 |
+
--map-wave: #8fa8a4;
|
| 365 |
+
}
|
| 366 |
+
|
| 367 |
+
[data-theme="dark"] {
|
| 368 |
+
--map-sea-1: #16262a;
|
| 369 |
+
--map-sea-2: #0e1a1d;
|
| 370 |
+
--map-land: #2a241c;
|
| 371 |
+
--map-land2: #241f18;
|
| 372 |
+
--map-coast: #6a5a44;
|
| 373 |
+
--map-wave: #2c4448;
|
| 374 |
+
}
|
| 375 |
+
|
| 376 |
+
.brand { text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; }
|
| 377 |
+
.brand-mark { color: var(--accent); font-size: 18px; }
|
| 378 |
+
.brand .rev { font-size: 11px; }
|
| 379 |
+
|
| 380 |
+
.topnav { display: flex; gap: 4px; margin-left: 18px; }
|
| 381 |
+
.topnav a {
|
| 382 |
+
padding: 7px 12px; border-radius: 8px; color: var(--ink-soft);
|
| 383 |
+
font-size: 14.5px; font-weight: 500;
|
| 384 |
+
}
|
| 385 |
+
.topnav a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
|
| 386 |
+
.topnav a.on { background: var(--accent-bg); color: var(--accent); }
|
| 387 |
+
|
| 388 |
+
/* нижняя панель */
|
| 389 |
+
body { padding-bottom: 64px; }
|
| 390 |
+
.bottom-bar {
|
| 391 |
+
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
|
| 392 |
+
height: 56px; display: flex; align-items: center; gap: 10px;
|
| 393 |
+
padding: 0 16px;
|
| 394 |
+
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
| 395 |
+
backdrop-filter: saturate(140%) blur(10px);
|
| 396 |
+
border-top: 1px solid var(--line);
|
| 397 |
+
}
|
| 398 |
+
.bb-side {
|
| 399 |
+
display: inline-flex; align-items: center; gap: 8px; min-width: 0;
|
| 400 |
+
color: var(--ink-soft); font-size: 13.5px; padding: 6px 10px; border-radius: 8px;
|
| 401 |
+
max-width: 40%;
|
| 402 |
+
}
|
| 403 |
+
.bb-side svg { width: 16px; height: 16px; flex: 0 0 auto; }
|
| 404 |
+
.bb-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
| 405 |
+
.bb-side:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
|
| 406 |
+
.bb-right { margin-left: auto; justify-content: flex-end; }
|
| 407 |
+
.bb-empty { flex: 1 1 auto; }
|
| 408 |
+
.bb-center {
|
| 409 |
+
flex: 0 0 auto; font-size: 13px; color: var(--muted);
|
| 410 |
+
padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
|
| 411 |
+
margin: 0 auto;
|
| 412 |
+
}
|
| 413 |
+
.bb-center:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
|
| 414 |
+
|
| 415 |
+
/* подвал */
|
| 416 |
+
.foot-grid {
|
| 417 |
+
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px;
|
| 418 |
+
max-width: 1080px; margin: 0 auto 26px;
|
| 419 |
+
}
|
| 420 |
+
.foot-col h4 {
|
| 421 |
+
font-family: var(--font-sans); font-size: 11.5px; letter-spacing: .12em;
|
| 422 |
+
text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
|
| 423 |
+
}
|
| 424 |
+
.foot-col ul { list-style: none; margin: 0; padding: 0; }
|
| 425 |
+
.foot-col li { margin: 0 0 6px; }
|
| 426 |
+
.foot-col a { color: var(--ink-soft); font-size: 13.5px; }
|
| 427 |
+
.foot-col a:hover { color: var(--accent); }
|
| 428 |
+
.foot-col p { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
|
| 429 |
+
.foot-bottom {
|
| 430 |
+
max-width: 1080px; margin: 0 auto; padding-top: 16px; border-top: 1px solid var(--line);
|
| 431 |
+
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
|
| 432 |
+
font-size: 12.5px; color: var(--muted);
|
| 433 |
+
}
|
| 434 |
+
|
| 435 |
+
/* карточки инструментов */
|
| 436 |
+
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 18px 0 10px; }
|
| 437 |
+
.tool-card {
|
| 438 |
+
display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
|
| 439 |
+
padding: 18px 18px 14px; background: var(--panel);
|
| 440 |
+
border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
|
| 441 |
+
box-shadow: var(--shadow); transition: transform .12s, border-color .12s;
|
| 442 |
+
}
|
| 443 |
+
.tool-card:hover { transform: translateY(-2px); border-color: var(--line-strong); text-decoration: none; }
|
| 444 |
+
.tool-card h3 { margin: 0 0 6px; font-size: 19px; }
|
| 445 |
+
.tool-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: 1 1 auto; }
|
| 446 |
+
|
| 447 |
+
/* калькуляторы */
|
| 448 |
+
.anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
|
| 449 |
+
.anchor-nav a {
|
| 450 |
+
padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
|
| 451 |
+
background: var(--panel); font-size: 13.5px; color: var(--ink-soft);
|
| 452 |
+
}
|
| 453 |
+
.anchor-nav a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
|
| 454 |
+
|
| 455 |
+
.tool {
|
| 456 |
+
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
|
| 457 |
+
padding: 22px 22px 18px; margin: 18px 0 26px; box-shadow: var(--shadow);
|
| 458 |
+
scroll-margin-top: 80px;
|
| 459 |
+
}
|
| 460 |
+
.tool h2 { margin: 0 0 6px; border: 0; padding: 0; font-size: 24px; }
|
| 461 |
+
.tool-note { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
|
| 462 |
+
.tool-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
|
| 463 |
+
.tool-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
|
| 464 |
+
.tool-inputs label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
|
| 465 |
+
.tool-inputs input, .tool-inputs select {
|
| 466 |
+
font: inherit; font-size: 14.5px; padding: 8px 10px; color: var(--ink);
|
| 467 |
+
background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
|
| 468 |
+
}
|
| 469 |
+
.tool-inputs input:focus, .tool-inputs select:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
|
| 470 |
+
.tool-inputs .check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
|
| 471 |
+
.tool-inputs .check input { width: 16px; height: 16px; }
|
| 472 |
+
|
| 473 |
+
.tool-out { position: sticky; top: 76px; }
|
| 474 |
+
.result {
|
| 475 |
+
display: flex; flex-direction: column; gap: 2px; padding: 18px;
|
| 476 |
+
background: var(--accent-bg); border-radius: 12px; text-align: center;
|
| 477 |
+
}
|
| 478 |
+
.result b { font-family: var(--font-serif); font-size: 34px; color: var(--accent); line-height: 1.1; }
|
| 479 |
+
.result span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
|
| 480 |
+
.breakdown { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
|
| 481 |
+
.breakdown div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
|
| 482 |
+
.breakdown div:last-child { border-bottom: 0; }
|
| 483 |
+
.breakdown .neg { color: #b0452c; }
|
| 484 |
+
.breakdown .pos { color: #2f7a4f; }
|
| 485 |
+
|
| 486 |
+
/* карта */
|
| 487 |
+
.map-layout { display: grid; grid-template-columns: 1.5fr .9fr; gap: 24px; align-items: start; margin: 10px 0 20px; }
|
| 488 |
+
.map-frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
|
| 489 |
+
.map-svg { display: block; width: 100%; height: auto; }
|
| 490 |
+
.map-labels text { font-family: var(--font-sans); fill: var(--map-coast); }
|
| 491 |
+
.map-labels .lbl-big { font-size: 13px; letter-spacing: .18em; opacity: .85; font-weight: 600; }
|
| 492 |
+
.map-labels .lbl-sea { font-size: 13px; letter-spacing: .22em; font-style: italic; fill: var(--muted); }
|
| 493 |
+
.lbl-compass { font-family: var(--font-serif); font-size: 12px; fill: var(--map-coast); }
|
| 494 |
+
.mk circle { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
|
| 495 |
+
.mk text { font-family: var(--font-sans); font-size: 11.5px; fill: var(--ink); }
|
| 496 |
+
.mk-region circle { fill: var(--map-coast); }
|
| 497 |
+
.mk-region text { fill: var(--ink-soft); font-size: 11px; }
|
| 498 |
+
.mk-dungeon circle { fill: var(--gold); }
|
| 499 |
+
.mk-sea circle { fill: var(--map-wave); }
|
| 500 |
+
.mk:hover circle, .mk:focus circle { r: 9; }
|
| 501 |
+
.mk { cursor: pointer; }
|
| 502 |
+
.map-side h2 { margin-top: 4px; font-size: 19px; border: 0; padding: 0; }
|
| 503 |
+
.map-legend { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13.5px; }
|
| 504 |
+
.map-legend li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ink-soft); }
|
| 505 |
+
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--accent); }
|
| 506 |
+
.dot.dungeon { background: var(--gold); }
|
| 507 |
+
.dot.region { background: var(--map-coast); }
|
| 508 |
+
.dot.sea { background: var(--map-wave); }
|
| 509 |
+
.linklist { list-style: none; padding: 0; margin: 0; font-size: 14px; }
|
| 510 |
+
.linklist li { margin-bottom: 6px; }
|
| 511 |
+
|
| 512 |
+
/* события */
|
| 513 |
+
.events-status { font-size: 13.5px; color: var(--muted); margin: 6px 0 16px; }
|
| 514 |
+
.events-status.err { color: var(--accent); }
|
| 515 |
+
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
|
| 516 |
+
.event-card {
|
| 517 |
+
background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
|
| 518 |
+
padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box;
|
| 519 |
+
}
|
| 520 |
+
.event-card h3 { margin: 0; font-size: 19px; }
|
| 521 |
+
.event-card .cat { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
|
| 522 |
+
.event-card .loc { font-size: 13px; color: var(--muted); }
|
| 523 |
+
.event-card .timer { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
|
| 524 |
+
.event-card .timer b { color: var(--accent); font-size: 17px; }
|
| 525 |
+
.event-card .note { font-size: 12.5px; margin: 0; }
|
| 526 |
+
.event-card .gilded { font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 8px; }
|
| 527 |
+
|
| 528 |
+
.howto { max-width: 760px; }
|
| 529 |
+
.howto pre {
|
| 530 |
+
background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px;
|
| 531 |
+
padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.55;
|
| 532 |
+
}
|
| 533 |
+
.howto code { background: none; padding: 0; }
|
| 534 |
+
|
| 535 |
+
@media (max-width: 980px) {
|
| 536 |
+
.tool-body { grid-template-columns: 1fr; }
|
| 537 |
+
.tool-out { position: static; }
|
| 538 |
+
.map-layout { grid-template-columns: 1fr; }
|
| 539 |
+
.foot-grid { grid-template-columns: 1fr 1fr; }
|
| 540 |
+
}
|
| 541 |
+
|
| 542 |
+
@media (max-width: 820px) {
|
| 543 |
+
.site-header { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 8px; }
|
| 544 |
+
.topnav { order: 3; width: 100%; margin: 0; overflow-x: auto; padding-bottom: 2px; }
|
| 545 |
+
.topnav a { white-space: nowrap; }
|
| 546 |
+
.bb-side span { max-width: 32vw; }
|
| 547 |
+
.foot-grid { grid-template-columns: 1fr; gap: 18px; }
|
| 548 |
+
.main--wide { padding: 20px 16px 80px; }
|
| 549 |
+
}
|
| 550 |
+
|
| 551 |
+
@media print {
|
| 552 |
+
.bottom-bar, .topnav { display: none; }
|
| 553 |
+
}
|
| 554 |
+
|
| 555 |
+
.main--wide { max-width: 1180px; margin: 0 auto; padding: 34px 40px 90px; }
|
| 556 |
+
.bb-links { display: flex; gap: 6px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
|
| 557 |
+
.bb-links a { font-size: 13px; padding: 6px 12px; border-radius: 999px; color: var(--muted); }
|
| 558 |
+
.bb-links a:hover { background: var(--bg-alt); color: var(--ink); text-decoration: none; }
|
| 559 |
+
.bb-links a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
|
| 560 |
+
|
| 561 |
+
/* вкладки карты */
|
| 562 |
+
.map-tabs { display: flex; gap: 6px; margin: 16px 0 14px; padding: 4px; background: var(--bg-alt); border-radius: 12px; width: fit-content; }
|
| 563 |
+
.map-tab {
|
| 564 |
+
font: inherit; font-size: 14px; padding: 8px 16px; border: 0; border-radius: 9px;
|
| 565 |
+
background: transparent; color: var(--muted); cursor: pointer;
|
| 566 |
+
}
|
| 567 |
+
.map-tab:hover { color: var(--ink); }
|
| 568 |
+
.map-tab.on { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: var(--shadow); }
|
| 569 |
+
.map-embed {
|
| 570 |
+
border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
|
| 571 |
+
box-shadow: var(--shadow); background: var(--panel);
|
| 572 |
+
}
|
| 573 |
+
.map-embed iframe { display: block; width: 100%; height: min(80vh, 860px); border: 0; }
|
| 574 |
+
.map-credit { font-size: 13px; color: var(--muted); margin: 10px 0 12px; line-height: 1.55; }
|
| 575 |
+
|
| 576 |
+
/* изображения */
|
| 577 |
+
.hero--split { display: grid; grid-template-columns: 1.4fr .6fr; gap: 32px; align-items: center; }
|
| 578 |
+
.hero-text h1 { margin-top: 0; }
|
| 579 |
+
.hero-fig { margin: 0; }
|
| 580 |
+
.hero-fig img {
|
| 581 |
+
width: 100%; height: auto; border-radius: 12px;
|
| 582 |
+
border: 1px solid var(--line); box-shadow: var(--shadow); display: block;
|
| 583 |
+
}
|
| 584 |
+
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 18px 0 10px; }
|
| 585 |
+
.gallery figure { margin: 0; }
|
| 586 |
+
.gallery img {
|
| 587 |
+
width: 100%; height: 180px; object-fit: cover; display: block;
|
| 588 |
+
border-radius: 10px; border: 1px solid var(--line); background: var(--bg-alt);
|
| 589 |
+
}
|
| 590 |
+
.gallery figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
|
| 591 |
+
.img-credit { font-size: 12.5px; color: var(--muted); margin: 6px 0 10px; }
|
| 592 |
+
.ch-img { margin: 0 0 26px; }
|
| 593 |
+
.ch-img img {
|
| 594 |
+
max-width: 100%; max-height: 420px; width: auto; height: auto; display: block;
|
| 595 |
+
border-radius: 10px; border: 1px solid var(--line);
|
| 596 |
+
}
|
| 597 |
+
.ch-img figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
|
| 598 |
+
|
| 599 |
+
@media (max-width: 820px) {
|
| 600 |
+
.hero--split { grid-template-columns: 1fr; }
|
| 601 |
+
.hero-media { max-width: 260px; }
|
| 602 |
+
}
|
| 603 |
+
|
| 604 |
+
|
| 605 |
+
/* ============================================================
|
| 606 |
+
v3 — палитра и полировка
|
| 607 |
+
============================================================ */
|
| 608 |
+
|
| 609 |
+
body {
|
| 610 |
+
background:
|
| 611 |
+
radial-gradient(1100px 520px at 50% -12%, #fff7ec 0%, rgba(255, 247, 236, 0) 70%),
|
| 612 |
+
var(--bg);
|
| 613 |
+
background-attachment: fixed;
|
| 614 |
+
}
|
| 615 |
+
[data-theme="dark"] body {
|
| 616 |
+
background:
|
| 617 |
+
radial-gradient(1100px 520px at 50% -12%, #241711 0%, rgba(36, 23, 17, 0) 70%),
|
| 618 |
+
var(--bg);
|
| 619 |
+
}
|
| 620 |
+
|
| 621 |
+
h1 { letter-spacing: -.02em; }
|
| 622 |
+
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
|
| 623 |
+
.hero h1 {
|
| 624 |
+
background: linear-gradient(94deg, var(--accent) 8%, var(--gold) 96%);
|
| 625 |
+
-webkit-background-clip: text;
|
| 626 |
+
background-clip: text;
|
| 627 |
+
color: transparent;
|
| 628 |
+
}
|
| 629 |
+
}
|
| 630 |
+
|
| 631 |
+
h2 {
|
| 632 |
+
border-bottom: 0;
|
| 633 |
+
padding-bottom: 14px;
|
| 634 |
+
position: relative;
|
| 635 |
+
margin-top: 46px;
|
| 636 |
+
}
|
| 637 |
+
h2::after {
|
| 638 |
+
content: "";
|
| 639 |
+
position: absolute; left: 0; bottom: 0;
|
| 640 |
+
width: 54px; height: 3px; border-radius: 3px;
|
| 641 |
+
background: linear-gradient(90deg, var(--accent), var(--gold));
|
| 642 |
+
}
|
| 643 |
+
|
| 644 |
+
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
|
| 645 |
+
a:hover { text-decoration-color: var(--accent); }
|
| 646 |
+
|
| 647 |
+
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
|
| 648 |
+
.topnav a.on { background: var(--accent); color: #fff; }
|
| 649 |
+
[data-theme="dark"] .topnav a.on { color: #1a120e; }
|
| 650 |
+
|
| 651 |
+
.card {
|
| 652 |
+
border-radius: 14px;
|
| 653 |
+
background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 90%, var(--accent-bg)));
|
| 654 |
+
}
|
| 655 |
+
.card:hover {
|
| 656 |
+
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
|
| 657 |
+
box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 16%, transparent);
|
| 658 |
+
transform: translateY(-3px);
|
| 659 |
+
}
|
| 660 |
+
.card .num { color: var(--accent); font-weight: 700; letter-spacing: .14em; }
|
| 661 |
+
.card .count { color: var(--accent); }
|
| 662 |
+
|
| 663 |
+
.tool-card { border-radius: 14px; }
|
| 664 |
+
.tool-card:hover {
|
| 665 |
+
border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
|
| 666 |
+
box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 14%, transparent);
|
| 667 |
+
}
|
| 668 |
+
|
| 669 |
+
.stat {
|
| 670 |
+
border: 0;
|
| 671 |
+
background: var(--panel);
|
| 672 |
+
box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(70, 40, 20, .05);
|
| 673 |
+
}
|
| 674 |
+
.stat b { color: var(--accent); font-size: 16px; }
|
| 675 |
+
|
| 676 |
+
.side-chapters a.active {
|
| 677 |
+
background: linear-gradient(90deg, var(--accent-bg), transparent 85%);
|
| 678 |
+
box-shadow: inset 3px 0 0 var(--accent);
|
| 679 |
+
border-radius: 0 8px 8px 0;
|
| 680 |
+
color: var(--accent);
|
| 681 |
+
}
|
| 682 |
+
.side-group > summary:hover { color: var(--accent); }
|
| 683 |
+
|
| 684 |
+
.ch-meta { font-size: 13px; color: var(--muted); letter-spacing: .01em; }
|
| 685 |
+
|
| 686 |
+
.toc { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line)); }
|
| 687 |
+
.toc a:hover { color: var(--accent); }
|
| 688 |
+
|
| 689 |
+
.src { font-family: var(--font-mono); opacity: .75; }
|
| 690 |
+
.src::before { content: none; }
|
| 691 |
+
|
| 692 |
+
.callout {
|
| 693 |
+
border-left: 3px solid var(--accent);
|
| 694 |
+
background: color-mix(in srgb, var(--accent-bg) 45%, var(--panel));
|
| 695 |
+
}
|
| 696 |
+
|
| 697 |
+
th { background: color-mix(in srgb, var(--accent-bg) 55%, var(--bg-alt)); }
|
| 698 |
+
tbody tr:hover { background: color-mix(in srgb, var(--accent-bg) 35%, transparent); }
|
| 699 |
+
|
| 700 |
+
.bottom-bar { border-top: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
|
| 701 |
+
.bb-center:hover { border-color: var(--accent); color: var(--accent); }
|
| 702 |
+
.bb-links a.on { background: var(--accent); color: #fff; }
|
| 703 |
+
[data-theme="dark"] .bb-links a.on { color: #1a120e; }
|
| 704 |
+
|
| 705 |
+
.foot-col a:hover { color: var(--accent); }
|
| 706 |
+
|
| 707 |
+
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
|
| 708 |
+
|
| 709 |
+
.sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); }
|
| 710 |
+
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); }
|
| 711 |
+
|
| 712 |
+
/* рынок */
|
| 713 |
+
.market-controls {
|
| 714 |
+
display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(4, minmax(130px, .7fr));
|
| 715 |
+
gap: 10px; margin: 18px 0 10px;
|
| 716 |
+
}
|
| 717 |
+
.market-controls input, .market-controls select {
|
| 718 |
+
width: 100%; height: 42px; font: inherit; font-size: 14px; line-height: 1.4; padding: 10px 12px; color: var(--ink);
|
| 719 |
+
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
|
| 720 |
+
}
|
| 721 |
+
.market-controls input:focus, .market-controls select:focus {
|
| 722 |
+
outline: 2px solid var(--accent-soft); outline-offset: 1px;
|
| 723 |
+
}
|
| 724 |
+
.market-note { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
| 725 |
+
.market-note a { color: var(--accent); }
|
| 726 |
+
.mk-refresh {
|
| 727 |
+
font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 999px;
|
| 728 |
+
border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); cursor: pointer;
|
| 729 |
+
}
|
| 730 |
+
.mk-refresh:hover { border-color: var(--accent); color: var(--accent); }
|
| 731 |
+
.market-stats { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
|
| 732 |
+
.market-stats b { color: var(--ink); }
|
| 733 |
+
.market-list { display: flex; flex-direction: column; gap: 8px; }
|
| 734 |
+
|
| 735 |
+
.lot {
|
| 736 |
+
display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px 190px;
|
| 737 |
+
gap: 16px; align-items: start;
|
| 738 |
+
padding: 14px 16px; background: var(--panel);
|
| 739 |
+
border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
|
| 740 |
+
transition: border-color .12s, box-shadow .12s;
|
| 741 |
+
}
|
| 742 |
+
.lot:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 6px 20px rgba(70,40,20,.06); }
|
| 743 |
+
.lot-item { min-width: 0; overflow: hidden; }
|
| 744 |
+
.lot-main { min-width: 0; }
|
| 745 |
+
.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; }
|
| 746 |
+
.lot-meta { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
|
| 747 |
+
.lot-kind { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
|
| 748 |
+
.lot-set { font-size: 12.5px; line-height: 1.4; color: var(--accent); margin-top: 4px; overflow-wrap: anywhere; }
|
| 749 |
+
.lot-cond { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin-top: 6px; }
|
| 750 |
+
.lot-stats { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
|
| 751 |
+
.lot-stats span { background: var(--bg-alt); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
|
| 752 |
+
.lot-full { display: none; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
|
| 753 |
+
.lot-full span { background: var(--bg-alt); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
|
| 754 |
+
.lot.open .lot-full { display: flex; }
|
| 755 |
+
.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; }
|
| 756 |
+
.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; }
|
| 757 |
+
.lot-seller { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; min-width: 0; padding-top: 1px; }
|
| 758 |
+
.lot-seller small { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
|
| 759 |
+
.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; }
|
| 760 |
+
|
| 761 |
+
.rar { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
|
| 762 |
+
.rar-common { background: #eee9e0; color: #6b6153; }
|
| 763 |
+
.rar-magic { background: #e4ecfb; color: #2f5aa8; }
|
| 764 |
+
.rar-rare { background: #f3e6fb; color: #7a3fa8; }
|
| 765 |
+
.rar-legendary { background: #fdf0d8; color: #a86a10; }
|
| 766 |
+
.rar-aetheric { background: #e0f4f4; color: #1f7a7a; }
|
| 767 |
+
.rar-artifact { background: #fde3e0; color: #b23b2a; }
|
| 768 |
+
[data-theme="dark"] .rar-common { background: #2a251f; color: #b7a892; }
|
| 769 |
+
[data-theme="dark"] .rar-magic { background: #1d2740; color: #8fb4ff; }
|
| 770 |
+
[data-theme="dark"] .rar-rare { background: #2a1c38; color: #c89bf0; }
|
| 771 |
+
[data-theme="dark"] .rar-legendary { background: #33260f; color: #f0c36a; }
|
| 772 |
+
[data-theme="dark"] .rar-aetheric { background: #123030; color: #7fd8d8; }
|
| 773 |
+
[data-theme="dark"] .rar-artifact { background: #3a1a14; color: #ff9a86; }
|
| 774 |
+
|
| 775 |
+
.btn-more {
|
| 776 |
+
display: block; width: 100%; margin: 16px 0 0; padding: 12px;
|
| 777 |
+
font: inherit; font-size: 14px; cursor: pointer; color: var(--ink);
|
| 778 |
+
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
|
| 779 |
+
}
|
| 780 |
+
.btn-more:hover { border-color: var(--accent); color: var(--accent); }
|
| 781 |
+
|
| 782 |
+
@media (max-width: 980px) {
|
| 783 |
+
.market-controls { grid-template-columns: 1fr 1fr; }
|
| 784 |
+
.market-controls input { grid-column: 1 / -1; }
|
| 785 |
+
}
|
| 786 |
+
@media (max-width: 560px) {
|
| 787 |
+
.lot { grid-template-columns: 1fr auto; }
|
| 788 |
+
.lot-price { text-align: right; }
|
| 789 |
+
}
|
| 790 |
+
|
| 791 |
+
/* провинция на странице событий */
|
| 792 |
+
.ev-region-wrap { display: flex; gap: 10px; margin: 6px 0 14px; }
|
| 793 |
+
.ev-region-wrap label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
|
| 794 |
+
.ev-region-wrap select {
|
| 795 |
+
font: inherit; font-size: 14px; padding: 8px 12px; color: var(--ink);
|
| 796 |
+
background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
|
| 797 |
+
}
|
| 798 |
+
.event-card .timer { font-family: var(--font-sans); font-size: 14px; }
|
| 799 |
+
.event-card.next { border-left: 3px solid var(--accent); }
|
| 800 |
+
.event-card.live { border-left: 3px solid #2f9e63; }
|
| 801 |
+
.event-card.live .timer b { color: #2f9e63; }
|
| 802 |
+
.event-card.unknown { border-left: 3px solid var(--line-strong); }
|
| 803 |
.event-card .loc { font-size: 13.5px; color: var(--ink-soft); }
|
| 804 |
+
|
| 805 |
+
/* события — карточки с региональными таймерами */
|
| 806 |
+
.events-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
|
| 807 |
+
.event-card { padding: 0; overflow: hidden; gap: 0; }
|
| 808 |
+
.ev-head { display: flex; align-items: center; padding: 14px 16px 0; }
|
| 809 |
+
.ev-cat { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
|
| 810 |
+
.ev-star { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; color: var(--gold); cursor: pointer; }
|
| 811 |
+
.ev-title { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: .07em; font-size: 19px; margin: 10px 16px 4px; }
|
| 812 |
+
.ev-cadence { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 16px 12px; }
|
| 813 |
+
.ev-rows { display: flex; flex-direction: column; }
|
| 814 |
+
.ev-row { padding: 10px 16px 12px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
|
| 815 |
+
.ev-row.is-live { background: #eef6ec; border-left-color: #3f9a5f; }
|
| 816 |
+
.ev-row.is-soon { background: #fdf4e3; border-left-color: #c8952f; }
|
| 817 |
+
.ev-row.is-none { opacity: .55; }
|
| 818 |
+
.ev-row-head { display: flex; align-items: baseline; gap: 10px; }
|
| 819 |
+
.ev-region { font-weight: 600; font-size: 14.5px; }
|
| 820 |
+
.ev-time { margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
|
| 821 |
+
.ev-row.is-live .ev-time { color: #2f7a4f; }
|
| 822 |
+
.ev-tags { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
|
| 823 |
+
.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); }
|
| 824 |
+
.ev-caption { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
|
| 825 |
+
.ev-sub { font-size: 12px; color: var(--muted); margin-top: 5px; }
|
| 826 |
+
.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; }
|
| 827 |
+
.ev-more:hover { background: var(--bg-alt); }
|
| 828 |
+
.ev-gilded { padding: 12px 16px 14px; border-top: 1px solid var(--line); }
|
| 829 |
+
.ev-gilded-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
|
| 830 |
+
.ev-gilded-name { font-size: 14px; font-weight: 600; margin-top: 3px; }
|
| 831 |
+
.ev-gilded-chance { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
| 832 |
+
.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); }
|
| 833 |
+
.ev-link:hover { background: var(--bg-alt); text-decoration: none; }
|
| 834 |
+
.ev-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
|
| 835 |
+
.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; }
|
| 836 |
+
.ev-filter:hover { border-color: var(--gold); color: var(--gold); }
|
| 837 |
+
.ev-filter.on { background: var(--gold); border-color: var(--gold); color: #fff; }
|
| 838 |
+
.ev-hint { font-size: 12.5px; color: var(--muted); }
|
| 839 |
+
[data-theme="dark"] .ev-row.is-live { background: #16241a; }
|
| 840 |
+
[data-theme="dark"] .ev-row.is-soon { background: #2a2113; }
|
| 841 |
[data-theme="dark"] .ev-row.is-live .ev-time { color: #6fd39a; }
|
| 842 |
+
|
| 843 |
+
/* рынок — шапка таблицы на той же сетке, что и строки */
|
| 844 |
+
.market-head-row {
|
| 845 |
+
display: grid; grid-template-columns: minmax(0, 1fr) 110px 70px 190px;
|
| 846 |
+
gap: 16px; padding: 10px 16px; margin-top: 6px;
|
| 847 |
+
background: var(--bg-alt); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
|
| 848 |
+
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
|
| 849 |
+
}
|
| 850 |
+
.market-head-row span:nth-child(2) { text-align: right; }
|
| 851 |
+
.market-head-row span:nth-child(3) { text-align: center; }
|
| 852 |
+
.market-head-row + .market-list { gap: 0; }
|
| 853 |
+
.market-head-row + .market-list .lot:first-child { border-radius: 0; }
|
| 854 |
+
.market-head-row + .market-list .lot:last-child { border-radius: 0 0 12px 12px; }
|
| 855 |
+
.market-head-row + .market-list .lot + .lot { border-top: 0; border-radius: 0; }
|
| 856 |
+
.market-head-row + .market-list .lot { border-radius: 0; }
|
| 857 |
+
|
| 858 |
+
@media (max-width: 820px) {
|
| 859 |
+
.market-head-row { display: none; }
|
| 860 |
+
.market-head-row + .market-list { gap: 8px; }
|
| 861 |
+
.market-head-row + .market-list .lot:first-child { border-radius: 12px; }
|
| 862 |
+
.market-head-row + .market-list .lot:last-child { border-radius: 12px; }
|
| 863 |
+
.market-head-row + .market-list .lot + .lot { border-top: 1px solid var(--line); }
|
| 864 |
+
.market-head-row + .market-list .lot { border-radius: 12px; }
|
| 865 |
+
.lot { grid-template-columns: 1fr auto; grid-template-areas: "item price" "qty seller"; row-gap: 10px; }
|
| 866 |
+
.lot-item { grid-area: item; }
|
| 867 |
+
.lot-price { grid-area: price; text-align: right; }
|
| 868 |
+
.lot-qty { grid-area: qty; text-align: left; }
|
| 869 |
+
.lot-seller { grid-area: seller; text-align: right; }
|
|
|
|
|
|
|
|
|
|
|
|
|
| 870 |
}
|