/* КАРТА — ОФОРМЛЕНИЯ НА ПОКАЗ (PO 27.09 21:1x «карта блёклая»; S45-108). Всё — под html[data-design="N"] (map.js ставит по ?d=N); без ?d этот файл ничего не меняет. Узлы оформления (map-design.js): .dz-unit (баннер юнита), .dz-fin (финиш юнита), .dz-ms (раздел), .dz-land (холмы раздела, 2), .dz-halo (пульс текущего шага); --sc — цвет раздела, --c — цвет шага (в 1 — типа шага, в 2 и 3 — раздела). Диагноз, от которого отталкиваемся (замеры bin/shot_map_diag.js): 7 % цветных пикселей на экране; будущие шаги — белые с бледной обводкой (контраст 1,9–2,1 при норме 3 — выглядят выключенными); тропа — бежевый пунктир на бежевом (1,35); подписи «впереди» — 3,3, мелкие — 2,3; нет объёма; нет ориентиров между юнитами и разделами; текущий шаг не главный. Общие правила всех трёх: будущее цветное (не контур), одно бесконечное движение на экране (пульс текущего шага — слоем transform/opacity, не тенью), при «уменьшить движение» в системе — без бесконечных анимаций. */ /* ---------- общее ---------- */ [data-design] .is-cur .c5 { animation: none; } [data-design] .dz-halo { position: absolute; inset: -10px; border-radius: 50%; border: 3px solid var(--c); pointer-events: none; opacity: 0; animation: dzHalo 1.8s cubic-bezier(.2,.6,.4,1) infinite; } @keyframes dzHalo { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.32); opacity: 0; } } [data-design] .dz-unit { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 26px 0 6px; } [data-design] .dz-unit-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } [data-design] .dz-unit-t small { font: 800 11px/1 var(--font-base); letter-spacing: .12em; text-transform: uppercase; } [data-design] .dz-unit-t b { font-size: 17px; line-height: 1.2; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-design] .dz-unit-p { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; font-weight: 700; } [data-design] .dz-unit-p > i { display: block; width: 64px; height: 6px; border-radius: 3px; overflow: hidden; } [data-design] .dz-unit-p > i > i { display: block; height: 100%; border-radius: 3px; } [data-design] .dz-unit small { color: inherit; } /* base.css красит small в серый */ [data-design] .dz-unit.is-done .dz-unit-n::before { content: '✓ '; } [data-design] .dz-fin { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0 4px; } [data-design] .dz-fin-m { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; } [data-design] .dz-fin-m svg { width: 28px; height: 28px; } [data-design] .dz-fin-m path, [data-design] .dz-fin-m circle { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } [data-design] .dz-fin small { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--color-text) 55%, var(--color-bg)); } [data-design] .dz-fin.is-done .dz-fin-m { border: 0; background: #E9A515; color: #fff; box-shadow: 0 5px 0 #B77C00; } [data-design] .dz-fin.is-done small { color: #B77C00; } @media (prefers-reduced-motion: reduce) { [data-design] .dz-halo { animation: none; opacity: .4; transform: scale(1.1); } [data-design] .is-cur .c5::before, [data-design] .is-cur .c5::after { animation: none !important; } } /* ===================================================================================================================================== 1 · «ОСЯЗАЕМАЯ ТРОПА» — объём и цвет: шаги — толстые кнопки, которые хочется нажать (нижняя «толщина», при нажатии проседают); цвет — ТИП шага (грамматика / упражнение / слова); будущее — тон своего цвета, прошлое — насыщенное; тропа сплошная; юнит начинается баннером, кончается медалью; раздел — насыщенная карточка с номером водяным знаком; текущий шаг крупнее, с подсказкой «Начать». ===================================================================================================================================== */ [data-design="1"] .n5 { --dk: color-mix(in srgb, var(--c) 68%, #000); --tint: color-mix(in srgb, var(--c) 17%, var(--color-bg)); --tint2: color-mix(in srgb, var(--c) 34%, var(--color-bg)); } [data-design="1"] .c5 { border: 0; background: var(--tint); color: var(--c); box-shadow: 0 6px 0 var(--tint2); transition: transform .09s ease-out, box-shadow .09s ease-out, background-color .9s cubic-bezier(.4,0,.2,1); } [data-design="1"] .is-done .c5 { background: var(--c); color: #fff; box-shadow: 0 6px 0 var(--dk); } [data-design="1"] .is-cur .c5 { background: var(--c); color: #fff; transform: scale(1.12); box-shadow: 0 6px 0 var(--dk); } [data-design="1"] .n5:active .c5 { transform: translateY(5px); box-shadow: 0 1px 0 var(--dk); } [data-design="1"] .n5.is-ahead:active .c5 { box-shadow: 0 1px 0 var(--tint2); } [data-design="1"] .n5.is-cur:active .c5 { transform: scale(1.12) translateY(5px); } [data-design="1"] .c5 .c5-ic { width: calc(var(--d) * .38); height: calc(var(--d) * .38); } [data-design="1"] .c5 .c5-ic path { stroke-width: 2.3; } [data-design="1"] .c5-ok { right: -4px; top: -4px; bottom: auto; width: 26px; height: 26px; background: #fff; border: 0; box-shadow: 0 2px 0 var(--dk); } [data-design="1"] .c5-ok .ic { color: var(--c); } /* подсказка «Начать» над текущим шагом — покачивается; «ты здесь» у подписи не нужна */ [data-design="1"] .is-cur .c5::after { content: 'Начать'; position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: var(--color-surface); color: var(--c); font: 800 13px/1 var(--font-base); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 0 var(--tint2), 0 6px 16px rgba(0,0,0,.14); animation: dz1bob 1.8s ease-in-out infinite; pointer-events: none; } [data-design="1"] .is-cur .c5::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 9px); width: 14px; height: 14px; margin-left: -7px; background: var(--color-surface); transform: rotate(45deg); animation: dz1bob2 1.8s ease-in-out infinite; pointer-events: none; } @keyframes dz1bob { 50% { transform: translate(-50%, -5px); } } @keyframes dz1bob2 { 50% { transform: translateY(-5px) rotate(45deg); } } [data-design="1"] .l5-you { display: none; } [data-design="1"] .is-ahead .l5 b { color: var(--color-text); font-weight: 600; } [data-design="1"] .l5 small { color: color-mix(in srgb, var(--color-text) 70%, var(--color-bg)); } [data-design="1"] .tr5-line path { stroke-dasharray: none; stroke-width: 8; stroke-linejoin: round; } [data-design="1"] .tr5-line .tr5-done { stroke: var(--color-primary); opacity: .75; } [data-design="1"] .tr5-line .tr5-ahead { stroke: color-mix(in srgb, var(--color-text) 13%, var(--color-bg)); } /* юнит — светлый тон цвета раздела (иерархия: раздел — насыщенная карточка, юнит — тон, ТЕКУЩИЙ юнит — насыщенный) */ [data-design="1"] .dz-unit { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--sc) 15%, var(--color-bg)); color: color-mix(in srgb, var(--sc) 55%, var(--color-text)); box-shadow: 0 5px 0 color-mix(in srgb, var(--sc) 30%, var(--color-bg)); } [data-design="1"] .dz-unit-t small { color: var(--sc); } [data-design="1"] .dz-unit-p > i { background: color-mix(in srgb, var(--sc) 25%, var(--color-bg)); } [data-design="1"] .dz-unit-p > i > i { background: var(--sc); } [data-design="1"] .dz-unit.is-cur { background: var(--sc); color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--sc) 66%, #000); } [data-design="1"] .dz-unit.is-cur .dz-unit-t small { color: rgba(255,255,255,.85); } [data-design="1"] .dz-unit.is-cur .dz-unit-p > i { background: rgba(255,255,255,.3); } [data-design="1"] .dz-unit.is-cur .dz-unit-p > i > i { background: #fff; } [data-design="1"] .dz-fin-m { background: var(--color-bg); border: 3px dashed color-mix(in srgb, var(--color-text) 22%, var(--color-bg)); color: color-mix(in srgb, var(--color-text) 38%, var(--color-bg)); } /* раздел — цветная карточка с номером водяным знаком вместо маленького ромба */ [data-design="1"] .ms5.dz-ms { justify-content: flex-start; gap: 14px; margin: 30px 0 8px; padding: 18px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 72%, #000)); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--sc) 55%, #000); } [data-design="1"] .ms5.dz-ms::after { content: attr(data-part); position: absolute; right: 12px; top: 50%; transform: translateY(-52%); font: 900 88px/1 var(--font-base); letter-spacing: -.05em; color: rgba(255,255,255,.16); pointer-events: none; } [data-design="1"] .ms5.dz-ms .ms5-mark { width: 46px; height: 46px; border: 0; background: rgba(255,255,255,.95); color: var(--sc); border-radius: 14px; } [data-design="1"] .ms5.dz-ms .ms5-text { position: relative; z-index: 1; } [data-design="1"] .ms5.dz-ms .ms5-text small { color: rgba(255,255,255,.82); font-weight: 800; } [data-design="1"] .ms5.dz-ms .ms5-text b { font-size: 17px; color: #fff; } [data-design="1"] .go5 { box-shadow: 0 5px 0 color-mix(in srgb, var(--color-primary) 64%, #000), 0 10px 22px rgba(72,120,177,.3); transition: transform .09s, box-shadow .09s; } [data-design="1"] .go5:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 64%, #000); } /* ===================================================================================================================================== 2 · «ПУТЕШЕСТВИЕ» — курс как дорога через края: у каждого раздела своя земля (фон тоном цвета раздела, на входе — холмы), шаги — камни-вехи цветом раздела (тип шага различают иконка и размер), дорога — широкая светлая полоса, пройденная — цветом раздела; над текущим шагом — булавка «ты здесь»; юнит — табличка-указатель с номером; конец юнита — медаль. ===================================================================================================================================== */ [data-design="2"] .tr5 { --land: color-mix(in srgb, var(--sc) 13%, var(--color-surface)); margin: 0 -16px; padding: 0 16px 48px; background: linear-gradient(to bottom, transparent 0, transparent 84px, var(--land) 84px, var(--land) calc(100% - 180px), var(--color-bg) 100%); } [data-design="2"] .dz-land { position: relative; height: 90px; margin: 0 -16px -30px; } [data-design="2"] .dz-land svg { display: block; width: 100%; height: 100%; } [data-design="2"] .dz-land .l1 { fill: color-mix(in srgb, var(--sc) 36%, var(--color-surface)); } [data-design="2"] .dz-land .l2 { fill: color-mix(in srgb, var(--sc) 23%, var(--color-surface)); } [data-design="2"] .dz-land .l3 { fill: var(--land); } /* раздел — знак края: круглая эмблема на холмах, название крупно под ней */ [data-design="2"] .ms5.dz-ms { flex-direction: column; gap: 8px; margin: 0 0 12px; text-align: center; } [data-design="2"] .ms5.dz-ms .ms5-mark { width: 60px; height: 60px; border-radius: 50%; transform: none; border: 4px solid var(--color-surface); background: var(--sc); color: #fff; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--sc) 70%, transparent); } [data-design="2"] .ms5.dz-ms .ms5-mark .ic { transform: none; width: 26px; height: 26px; } [data-design="2"] .ms5.dz-ms .ms5-text { align-items: center; max-width: 100%; padding: 2px 14px 6px; border-radius: 14px; background: var(--land); } /* дорога уходит под название, а не сквозь буквы */ [data-design="2"] .ms5.dz-ms .ms5-text small { color: color-mix(in srgb, var(--sc) 70%, var(--color-text)); font-weight: 800; letter-spacing: .12em; } [data-design="2"] .ms5.dz-ms .ms5-text b { font-size: 21px; font-weight: 800; line-height: 1.2; text-wrap: balance; } /* шаги — камни: светлый ободок, тонкое кольцо цвета раздела, мягкая цветная тень */ [data-design="2"] .c5 { border: 5px solid var(--color-surface); background: color-mix(in srgb, var(--c) 16%, var(--color-surface)); color: var(--c); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--c) 55%, var(--color-bg)), 0 8px 16px -6px color-mix(in srgb, var(--c) 50%, transparent); } [data-design="2"] .is-done .c5 { background: var(--c); color: #fff; } [data-design="2"] .is-cur .c5 { background: var(--c); color: #fff; box-shadow: 0 0 0 3px var(--c), 0 10px 22px -6px color-mix(in srgb, var(--c) 75%, transparent); } [data-design="2"] .c5 .c5-ic path { stroke-width: 2.2; } [data-design="2"] .c5-ok { right: -4px; top: -4px; bottom: auto; border-color: var(--color-surface); } /* булавка «ты здесь» над текущим шагом (голова — ::before, точка — ::after) */ [data-design="2"] .is-cur .c5::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 12px); width: 34px; height: 34px; margin-left: -17px; border-radius: 50% 50% 50% 0; background: #E5484D; transform: rotate(-45deg); box-shadow: -2px 3px 6px rgba(0,0,0,.22); animation: dz2pin 1.6s ease-in-out infinite; pointer-events: none; } [data-design="2"] .is-cur .c5::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 23px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; animation: dz2dot 1.6s ease-in-out infinite; pointer-events: none; } @keyframes dz2pin { 50% { transform: translateY(-6px) rotate(-45deg); } } @keyframes dz2dot { 50% { transform: translateY(-6px); } } [data-design="2"] .l5-you { display: none; } [data-design="2"] .is-ahead .l5 b { color: var(--color-text); } [data-design="2"] .l5 small { color: color-mix(in srgb, var(--color-text) 68%, var(--color-bg)); } /* дорога */ [data-design="2"] .tr5-line path { stroke-dasharray: none; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; } [data-design="2"] .tr5-line .tr5-ahead { stroke: var(--color-surface); } [data-design="2"] .tr5-line .tr5-done { stroke: color-mix(in srgb, var(--sc) 60%, var(--color-surface)); opacity: 1; } /* юнит — табличка-указатель: номер в круге цвета раздела, название, пройдено */ [data-design="2"] .dz-unit { padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--color-surface); color: var(--color-text); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--sc) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--sc) 18%, transparent); } [data-design="2"] .dz-unit::before { content: attr(data-n); flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sc) 16%, var(--color-surface)); color: var(--sc); font: 800 17px/1 var(--font-base); } [data-design="2"] .dz-unit.is-cur::before, [data-design="2"] .dz-unit.is-done::before { background: var(--sc); color: #fff; } [data-design="2"] .dz-unit.is-cur { box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--sc) 80%, transparent), 0 0 0 2px var(--sc); } [data-design="2"] .dz-unit-t small { color: color-mix(in srgb, var(--sc) 70%, var(--color-text)); } [data-design="2"] .dz-unit-p { color: color-mix(in srgb, var(--color-text) 65%, var(--color-surface)); } [data-design="2"] .dz-unit-p > i { background: color-mix(in srgb, var(--sc) 18%, var(--color-surface)); } [data-design="2"] .dz-unit-p > i > i { background: var(--sc); } [data-design="2"] .dz-fin-m { background: var(--color-surface); border: 3px dashed color-mix(in srgb, var(--sc) 45%, var(--color-bg)); color: color-mix(in srgb, var(--sc) 70%, var(--color-text)); } [data-design="2"] .go5 { background: var(--sc, var(--color-primary)); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sc, var(--color-primary)) 80%, transparent); } /* ===================================================================================================================================== 3 · «ЛИНИЯ МЕТРО» — наша «дорога» доведена до схемы метро: раздел = линия своего цвета со значком-номером, шаги = станции (белый диск в кольце цвета линии; пройденная — залита), пройденный путь — линия полным цветом, впереди — её светлый тон; юнит — тёмная табличка-указатель с номером; текущая станция — мишень с чёрным кольцом и капсулой «ты здесь». Строго, по-взрослому. ===================================================================================================================================== */ [data-design="3"] .tr5-line path { stroke-dasharray: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; } [data-design="3"] .tr5-line .tr5-done { stroke: var(--sc); opacity: 1; } [data-design="3"] .tr5-line .tr5-ahead { stroke: color-mix(in srgb, var(--sc) 42%, var(--color-bg)); } [data-design="3"] .c5 { border: 7px solid color-mix(in srgb, var(--c) 42%, var(--color-bg)); background: var(--color-surface); color: color-mix(in srgb, var(--c) 82%, var(--color-text)); box-shadow: none; } [data-design="3"] .is-done .c5 { border-color: var(--c); background: var(--c); color: #fff; } [data-design="3"] .is-cur .c5 { border-color: var(--c); background: var(--color-surface); color: var(--c); box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 7px var(--color-text); } [data-design="3"] .dz-halo { inset: -14px; border-color: var(--color-text); border-width: 2px; } [data-design="3"] .c5 .c5-ic path { stroke-width: 2.2; } [data-design="3"] .c5-ok { right: -4px; top: -4px; bottom: auto; background: var(--color-surface); border: 2px solid var(--c); } [data-design="3"] .c5-ok .ic { color: var(--c); } [data-design="3"] .l5-you { background: var(--color-text); color: var(--color-bg); border-radius: 6px; padding: 3px 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; } [data-design="3"] .l5 b { font-weight: 700; color: var(--color-text); letter-spacing: -.005em; } [data-design="3"] .l5 small { color: color-mix(in srgb, var(--color-text) 64%, var(--color-bg)); } /* раздел — значок линии с номером + название, под ним линейка */ [data-design="3"] .ms5.dz-ms { justify-content: flex-start; gap: 14px; margin: 30px 0 8px; padding: 0 0 14px; border-bottom: 2px solid var(--color-text); } [data-design="3"] .ms5.dz-ms .ms5-mark { width: 48px; height: 48px; border-radius: 12px; transform: none; border: 0; background: var(--sc); color: #fff; } [data-design="3"] .ms5.dz-ms .ms5-mark .ic { display: none; } [data-design="3"] .ms5.dz-ms .ms5-mark::after { content: attr(data-n); font: 800 24px/1 var(--font-base); letter-spacing: -.02em; } [data-design="3"] .ms5.dz-ms .ms5-text small { color: color-mix(in srgb, var(--sc) 65%, var(--color-text)); font-weight: 800; letter-spacing: .14em; } [data-design="3"] .ms5.dz-ms .ms5-text b { font-size: 20px; font-weight: 800; line-height: 1.2; } /* юнит — тёмная табличка-указатель */ [data-design="3"] .dz-unit { padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--color-text); color: var(--color-bg); } [data-design="3"] .dz-unit::before { content: attr(data-n); flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sc); color: #fff; font: 800 16px/1 var(--font-base); } [data-design="3"] .dz-unit-t small { opacity: .7; } [data-design="3"] .dz-unit-t b { font-size: 16px; } [data-design="3"] .dz-unit-p > i { background: color-mix(in srgb, var(--color-bg) 25%, transparent); } [data-design="3"] .dz-unit-p > i > i { background: var(--color-bg); } [data-design="3"] .dz-unit.is-cur .dz-unit-p > i > i { background: var(--sc); } /* финиш юнита — конечная: двойное кольцо */ [data-design="3"] .dz-fin-m { background: var(--color-surface); border: 6px solid color-mix(in srgb, var(--sc) 42%, var(--color-bg)); box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px color-mix(in srgb, var(--sc) 42%, var(--color-bg)); color: color-mix(in srgb, var(--sc) 75%, var(--color-text)); } [data-design="3"] .go5 { background: var(--color-text); color: var(--color-bg); border-radius: 14px; } [data-design="3"] .go5-ic { background: var(--sc, var(--color-primary)); color: #fff; } /* ---------- ночная тема: цветные тени на тёмном не видны, светлые тона тонут — свои поправки (исследование S45-108) ---------- */ [data-theme="dark"][data-design="2"] .tr5-line .tr5-ahead { stroke: color-mix(in srgb, var(--color-text) 16%, var(--color-bg)); } [data-theme="dark"][data-design="3"] .tr5-line .tr5-ahead { stroke: color-mix(in srgb, var(--sc) 60%, var(--color-bg)); } [data-theme="dark"][data-design="3"] .is-ahead .c5 { border-color: color-mix(in srgb, var(--c) 60%, var(--color-bg)); } [data-theme="dark"][data-design="3"] .dz-unit, [data-theme="dark"][data-design="3"] .go5 { background: color-mix(in srgb, var(--color-text) 14%, var(--color-surface)); color: var(--color-text); } [data-theme="dark"][data-design="3"] .dz-unit-p > i { background: color-mix(in srgb, var(--color-text) 20%, transparent); } [data-theme="dark"][data-design="3"] .dz-unit-p > i > i { background: var(--color-text); } [data-theme="dark"][data-design="3"] .dz-unit.is-cur .dz-unit-p > i > i { background: var(--sc); } /* ===================================================================================================================================== 4 · «ПЕЙЗАЖ» (html[data-scene="soft"]) и 5 — то же красочнее (data-scene="vivid"). Идея PO 23:06 по наброску GPT: «рисунок, неброский, но видимый» под всей тропой. Рисунок — SVG-слой .dz-scene (map-design.js: горы на входе в раздел, по свободной стороне строк — рощи, пруды, камни, луга, облака); цвет природы слегка тянется к цвету раздела (--sc), насыщенность — --mix (сколько цвета против фона), тон луга под тропой — --meadow. Дорога — широкая, с разметкой (.tr5-lane); подписи — на белых плашках, подсунутых под кружок; текущий — свечение и плашка «Текущий шаг»; будущее — светлый тон цвета раздела; карточка «ближе к цели». ===================================================================================================================================== */ [data-scene] .tr5 { --mix: 55%; --meadow: 40%; --meadow-c: #E2F0E0; --sky-c: #DCEAF6; --g1: color-mix(in srgb, #4E9A6B 84%, var(--sc)); --g2: color-mix(in srgb, #7DBB8F 84%, var(--sc)); --g3: #D3EBD6; --hill: color-mix(in srgb, #B9DCC1 86%, var(--sc)); --hill2: color-mix(in srgb, #D2EAC6 86%, var(--sc)); --mtn: color-mix(in srgb, #97B2D3 82%, var(--sc)); --mtn2: color-mix(in srgb, #B8CAE1 82%, var(--sc)); --snow: #F6F9FD; --rock: #B3BECA; --rock2: #D8DFE7; --trunk: #A7855F; --water: #93C6E6; --water2: #D6EDF9; --fl: color-mix(in srgb, var(--sc) 55%, #F0B64A); margin: 0 -16px; padding: 118px 16px 48px; background: linear-gradient(180deg, color-mix(in srgb, var(--sky-c) var(--meadow), var(--color-bg)) 0, color-mix(in srgb, var(--meadow-c) var(--meadow), var(--color-bg)) 170px, color-mix(in srgb, var(--meadow-c) var(--meadow), var(--color-bg)) calc(100% - 140px), var(--color-bg) 100%); } [data-scene="vivid"] .tr5 { --mix: 100%; --meadow: 90%; --meadow-c: #C6E6BE; --sky-c: #C4DDF5; --g1: color-mix(in srgb, #2F8A58 86%, var(--sc)); --g2: color-mix(in srgb, #5DAF74 86%, var(--sc)); --hill: color-mix(in srgb, #9FD3A4 88%, var(--sc)); --hill2: color-mix(in srgb, #BCE3AC 88%, var(--sc)); --mtn: color-mix(in srgb, #7C9FCB 84%, var(--sc)); --mtn2: color-mix(in srgb, #A5BEDD 84%, var(--sc)); --water: #6CB5E2; --water2: #CDEBFA; } [data-scene] .dz-scene { position: absolute; left: 0; top: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%); } /* рисунок гаснет к концу раздела, как и фон — без резкой кромки на стыке */ [data-scene] .dz-scene .k-g1 { fill: color-mix(in srgb, var(--g1) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-g2 { fill: color-mix(in srgb, var(--g2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-g3 { fill: color-mix(in srgb, var(--g3) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-hill { fill: color-mix(in srgb, var(--hill) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-hill2 { fill: color-mix(in srgb, var(--hill2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-mtn { fill: color-mix(in srgb, var(--mtn) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-mtn2 { fill: color-mix(in srgb, var(--mtn2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-snow { fill: color-mix(in srgb, var(--snow) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-rock { fill: color-mix(in srgb, var(--rock) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-rock2 { fill: color-mix(in srgb, var(--rock2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-trunk { fill: color-mix(in srgb, var(--trunk) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-water { fill: color-mix(in srgb, var(--water) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-water2 { fill: color-mix(in srgb, var(--water2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-fl { fill: color-mix(in srgb, var(--fl) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-grass { fill: none; stroke: color-mix(in srgb, var(--g1) var(--mix), var(--color-bg)); stroke-width: 1.6; stroke-linecap: round; } [data-scene] .dz-scene .k-cloud { fill: #fff; opacity: .75; } /* предметы миров (map-scenery.js): море, маяк, лодки, пальмы, грибы, кактусы, столовые горы, дома, мельница, стога, сад, берёзы, утки, тыквы, листва, снеговик, пирамидки камней, флажок */ [data-scene] .tr5 { --red: #D9594C; --white: #FFFFFF; --pink: #F0A3BE; --pink2: #F7C8D8; --orange: #E8892F; --orange2: #F3A64E; --roof: #C8644B; --wall: #F3E8D8; --hay: #E3C366; --sun: #F5C451; --mesa: #D8946A; --mesa2: #E9B58C; --sea: #86C6E8; --wave: #FFFFFF; --sand: #EFDDB5; --dark: #58606A; --fence: #B7966E; --ice: #CFE6F3; } [data-scene] .dz-scene .k-red { fill: color-mix(in srgb, var(--red) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-white { fill: color-mix(in srgb, var(--white) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-pink { fill: color-mix(in srgb, var(--pink) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-pink2 { fill: color-mix(in srgb, var(--pink2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-orange { fill: color-mix(in srgb, var(--orange) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-orange2 { fill: color-mix(in srgb, var(--orange2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-roof { fill: color-mix(in srgb, var(--roof) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-wall { fill: color-mix(in srgb, var(--wall) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-hay { fill: color-mix(in srgb, var(--hay) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-sun { fill: color-mix(in srgb, var(--sun) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-mesa { fill: color-mix(in srgb, var(--mesa) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-mesa2 { fill: color-mix(in srgb, var(--mesa2) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-sea { fill: color-mix(in srgb, var(--sea) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-sand { fill: color-mix(in srgb, var(--sand) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-dark { fill: color-mix(in srgb, var(--dark) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-ice { fill: color-mix(in srgb, var(--ice) var(--mix), var(--color-bg)); } [data-scene] .dz-scene .k-wave { fill: none; stroke: color-mix(in srgb, var(--wave) var(--mix), var(--color-bg)); stroke-width: 1.6; opacity: .85; } [data-scene] .dz-scene .k-fence { fill: none; stroke: color-mix(in srgb, var(--fence) var(--mix), var(--color-bg)); stroke-width: 2; stroke-linecap: round; } [data-scene] .dz-scene .k-rows { fill: none; stroke: color-mix(in srgb, var(--g2) var(--mix), var(--color-bg)); stroke-width: 1.2; opacity: .7; } [data-scene] .dz-scene .k-trunkline { fill: none; stroke: color-mix(in srgb, var(--trunk) var(--mix), var(--color-bg)); stroke-width: 3.5; stroke-linecap: round; } /* 10 миров: земля (--meadow-c), небо (--sky-c), холмы, зелень, камни — свои у каждого раздела (tr5[data-biome], map-scenery.js) */ [data-scene] .tr5[data-biome="coast"] { --meadow-c: #F4E7C9; --sky-c: #D3E9F7; --hill: #EAD7AE; --hill2: #F1E3C3; --g1: #3E9A76; --g2: #67BC8F; --rock: #B9C2C9; } [data-scene] .tr5[data-biome="forest"] { --meadow-c: #D6EAD2; --sky-c: #DCEDE4; --g1: #2E7A50; --g2: #4C9A68; --hill: #A9D0A9; --hill2: #BFDCB6; } [data-scene] .tr5[data-biome="desert"] { --meadow-c: #F3DEB7; --sky-c: #F6E9D2; --hill: #EACB94; --hill2: #F0D9AC; --g1: #5C9B63; --g2: #79B27B; --rock: #D2A07E; --rock2: #E3BB9C; } [data-scene] .tr5[data-biome="fields"] { --meadow-c: #E7F1CF; --sky-c: #DDEBF5; --hill: #C8E0A0; --hill2: #EADFA3; --g1: #4F9A5E; --g2: #7DB870; } [data-scene] .tr5[data-biome="garden"] { --meadow-c: #F2E5EC; --sky-c: #F1E6F2; --hill: #D7EAD0; --hill2: #EFD9E5; --g1: #5FA877; --g2: #86C495; } [data-scene] .tr5[data-biome="lakes"] { --meadow-c: #DDEFE8; --sky-c: #D8EAF5; --hill: #B8DAC6; --hill2: #CFE7D6; --g1: #4F9A6E; --g2: #9BCD85; --water: #7CBDE0; } [data-scene] .tr5[data-biome="autumn"] { --meadow-c: #F3E3CB; --sky-c: #F2E6D6; --hill: #E7C696; --hill2: #EFD5AC; --g1: #C9772E; --g2: #B55A3A; --orange: #E48A2B; --red: #C9493A; } [data-scene] .tr5[data-biome="winter"] { --meadow-c: #EEF3F8; --sky-c: #E2EBF5; --hill: #F7FAFD; --hill2: #E6EDF4; --g1: #3C7565; --g2: #5A9180; --rock: #BFCAD6; --rock2: #DDE4EC; --mtn: #9FB3CB; --mtn2: #C3D1E1; } [data-scene] .tr5[data-biome="summit"] { --meadow-c: #E5EAEE; --sky-c: #DAE6F2; --hill: #C8D3DD; --hill2: #DCE3E9; --mtn: #93A9C3; --mtn2: #B6C6D8; --g1: #4A8467; --g2: #6FA187; } /* дорога с разметкой */ [data-scene] .tr5-line path { stroke-dasharray: none; stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; } [data-scene] .tr5-line .tr5-ahead { stroke: color-mix(in srgb, var(--sc) 20%, var(--color-surface)); } [data-scene] .tr5-line .tr5-done { stroke: color-mix(in srgb, var(--sc) 50%, var(--color-surface)); opacity: 1; } [data-scene] .tr5-line .tr5-lane { stroke: var(--color-surface); stroke-width: 2.5; stroke-dasharray: 9 12; opacity: .95; } /* шаги: белый ободок, будущее — светлый тон цвета раздела, пройденное — цвет раздела, текущий — крупнее, со свечением */ [data-scene] .c5 { z-index: 1; border: 6px solid var(--color-surface); background: color-mix(in srgb, var(--c) 20%, var(--color-surface)); color: var(--c); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--c) 70%, transparent); } [data-scene] .is-done .c5 { background: var(--c); color: #fff; } /* смена состояния кружка (впереди ↔ текущий) — плавно, а не за кадр (ANIM-RULES-12.10; обход по кадрам 12.10); «пройден» — свой, медленнее (map.css .n5.is-done .c5) */ [data-scene] .c5 { transition: background-color var(--mo-move) var(--ease-move), color var(--mo-move) var(--ease-move), box-shadow var(--mo-move) var(--ease-move), transform var(--mo-move) var(--ease-move); } [data-scene] .is-cur .c5 { background: var(--c); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 40%, transparent), 0 0 30px 6px color-mix(in srgb, var(--c) 45%, transparent); } [data-scene] .c5 .c5-ic path { stroke-width: 2.2; } [data-scene] .c5-ok { right: -5px; top: -5px; bottom: auto; border-color: var(--color-surface); } /* плашка «Текущий шаг» над текущим — СВОЙ ЭЛЕМЕНТ, который переезжает (map-design.js tagPlace / tagFlight; ANIM-RULES-12.10 п. 2–3): была ::after кружка .is-cur — гасла и вспыхивала с классом и пряталась вместе с кружком под раскрытие. Вид прежний, с увеличением текущего кружка ×1.1 (плашка была внутри него): поля 7×12 / 28 → 7,7×13,2 / 30,8, шрифт 12,5 → 13,75, значок 14 → 15,4, уголок 10 → 11. Плашка — в узле текущего шага (рядом с кружком): место (left / top) и сдвиг уголка (--ax — центр кружка от левого края плашки; у кружка у края экрана плашка прижата к его внешнему краю) ставит скрипт; переезд к новому текущему — Motion.glide за --mo-move, цвет раздела — плавно */ [data-scene] .cur5-tag { position: absolute; left: 0; top: 0; z-index: 3; white-space: nowrap; padding: 7.7px 13.2px 7.7px 30.8px; border-radius: 999px; background: var(--c) url("data:image/svg+xml;utf8,") no-repeat 9.9px 50% / 15.4px 15.4px; color: #fff; font: 700 13.75px/1 var(--font-base); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c) 80%, transparent); pointer-events: none; transition: background-color var(--mo-move) var(--ease-move); } [data-scene] .cur5-tag::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5.5px; width: 11px; height: 11px; margin-left: -5.5px; background: var(--c); transform: rotate(45deg); transition: background-color var(--mo-move) var(--ease-move); } @starting-style { [data-scene] .cur5-tag { opacity: 0; } } [data-scene] .cur5-tag[hidden] { display: none; } [data-scene] .l5-you { display: none; } /* подписи — белые плашки, подсунутые под кружок */ [data-scene] .l5 { background: color-mix(in srgb, var(--color-surface) 96%, transparent); padding: 9px 14px; border-radius: 16px; box-shadow: 0 8px 20px -12px rgba(30,50,80,.35), 0 0 0 1px color-mix(in srgb, var(--c) 10%, transparent); } [data-scene] .n5.left .l5 { margin-left: -32px; padding-left: 38px; } [data-scene] .n5.right .l5 { margin-right: -32px; padding-right: 38px; } [data-scene] .t5-zig .l5 { max-width: calc(76% - var(--d) * .5); } /* плашка шире обычной подписи: её поля (~50 px) не должны съедать текст */ [data-scene] .is-ahead .l5 b { color: var(--color-text); } [data-scene] .l5 small { color: color-mix(in srgb, var(--color-text) 62%, var(--color-surface)); } /* раздел — КРУПНАЯ веха в цвете раздела; юнит — НЕБОЛЬШАЯ табличка у дороги; финиш — медаль (HOME-HEADER-V2-29.09: PO 15:39 «раздел более крупный, юнит — более мелкое разделение, а выглядят они одинаково»; макет №524 утверждён ~18:1x). Веха: полоса цвета раздела слева, тон раздела, название 19 px, «N юнитов · M пройдено» (map.js msPaint). Табличка: пилюля по содержимому, номер 32 px, название до 2 строк. */ [data-scene] .ms5.dz-ms { justify-content: flex-start; gap: 12px; margin: 0 0 14px; padding: 16px 16px 14px 14px; border-radius: 18px; background: color-mix(in srgb, var(--sc) 13%, var(--color-surface)); border-left: 6px solid var(--sc); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--sc) 55%, transparent); } [data-scene] .ms5.dz-ms .ms5-mark { width: 44px; height: 44px; border-radius: 50%; transform: none; border: 0; background: var(--sc); color: #fff; } [data-scene] .ms5.dz-ms .ms5-mark .ic { transform: none; } [data-scene] .ms5.dz-ms .ms5-text small { color: color-mix(in srgb, var(--sc) 80%, var(--color-text)); font-weight: 800; letter-spacing: .12em; } [data-scene] .ms5.dz-ms .ms5-text b { font-size: 19px; line-height: 1.25; font-weight: 800; } [data-scene] .ms5.dz-ms .ms5-units { display: block; margin-top: 4px; font-size: 12.5px; color: var(--color-text-muted); } [data-scene] .dz-unit { display: inline-flex; width: auto; max-width: 86%; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-surface) 94%, transparent); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); box-shadow: 0 3px 10px -6px rgba(0,0,0,.35); } [data-scene] .dz-unit::before { content: attr(data-n); flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sc) 16%, var(--color-surface)); color: var(--sc); font: 800 14px/1 var(--font-base); } [data-scene] .dz-unit.is-cur::before, [data-scene] .dz-unit.is-done::before { background: var(--sc); color: #fff; } [data-scene] .dz-unit.is-cur { border: 2px solid var(--sc); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sc) 70%, transparent); } [data-scene] .dz-unit-t { gap: 1px; } [data-scene] .dz-unit-t small { font-size: 10.5px; color: color-mix(in srgb, var(--sc) 80%, var(--color-text)); } [data-scene] .dz-unit-t b { font-size: 14.5px; line-height: 1.25; } [data-scene] .dz-unit-p { gap: 0; font-size: 11.5px; color: var(--color-text-muted); } [data-scene] .dz-unit-p > i { display: none; } /* полоса юнита — в самой тропе (пройденные кружки), в табличке — только «a из b» */ [data-scene] .dz-fin-m { background: var(--color-surface); border: 3px dashed color-mix(in srgb, var(--sc) 45%, var(--color-bg)); color: color-mix(in srgb, var(--sc) 70%, var(--color-text)); } [data-scene] .dz-fin small { background: color-mix(in srgb, var(--color-surface) 90%, transparent); padding: 2px 8px; border-radius: 8px; } /* карточка «ближе к цели» */ [data-scene] .dz-goal { position: relative; z-index: 2; display: flex; gap: 10px; align-items: flex-start; width: min(64%, 250px); margin: 2px 0 2px auto; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--color-surface) 96%, transparent); box-shadow: 0 10px 24px -14px rgba(30,50,80,.45); } [data-scene] .dz-goal-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); color: var(--color-primary); } [data-scene] .dz-goal-ic svg { width: 20px; height: 20px; } [data-scene] .dz-goal-ic path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } [data-scene] .dz-goal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } [data-scene] .dz-goal-t b { font-size: 15px; font-weight: 800; } [data-scene] .dz-goal-t small { font-size: 12.5px; line-height: 1.3; color: color-mix(in srgb, var(--color-text) 65%, var(--color-surface)); } [data-scene] .dz-goal-t > i { display: block; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); } [data-scene] .dz-goal-t > i > i { display: block; height: 100%; border-radius: 3px; background: var(--color-primary); } [data-scene] .go5 { background: var(--sc, var(--color-primary)); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sc, var(--color-primary)) 80%, transparent); } /* ночная тема: природа глуше, небо и луг — тёмные тона, облака почти прозрачные, дорога — чуть светлее фона */ [data-theme="dark"][data-scene] .tr5 { --mix: 30%; --meadow: 12%; } /* земля и небо — цвет своего мира, сильно приглушённый тёмным фоном */ [data-theme="dark"][data-scene="vivid"] .tr5 { --mix: 46%; --meadow: 18%; } [data-theme="dark"][data-scene] .dz-scene .k-cloud { opacity: .14; } [data-theme="dark"][data-scene] .tr5-line .tr5-ahead { stroke: color-mix(in srgb, var(--sc) 22%, #36322B); } [data-theme="dark"][data-scene] .tr5-line .tr5-lane { stroke: color-mix(in srgb, var(--color-text) 45%, var(--color-bg)); } /* ===================================================================================================================================== 6 · «КАЛИФОРНИЯ» (html[data-route="ca"], поверх data-scene="vivid") — идея PO 00:15: путешествие по Америке с реальными местами (map_journey.md). Раздел = место (map-scenery.js CA_ORDER); над карточкой раздела — высокое небо для памятника (230 px); небо и вода — градиенты из переменных времени суток html[data-daytime] (утро / день / вечер / ночь — проба до решения PO: реальное время или по пути). ===================================================================================================================================== */ [data-route] .tr5 { padding-top: 230px; } [data-route] .dz-scene { /* небо места проявляется из фона сверху (без жёсткого среза-«вклейки»), к концу раздела рисунок гаснет, как у 4/5 */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 180px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 44px, #000 calc(100% - 180px), transparent 100%); } [data-route][data-daytime="day"] .tr5 { --sky-top: #86C1EC; --sky-bot: #E4F1FA; --water-top: #3F8DC2; --water-bot: #8CC4E3; } [data-route][data-daytime="morning"] .tr5 { --sky-top: #9FC2E8; --sky-bot: #FDE2C2; --water-top: #5A92C0; --water-bot: #EFC9A8; } [data-route][data-daytime="evening"] .tr5 { --sky-top: #5E66AE; --sky-bot: #F7A57B; --water-top: #4A5B96; --water-bot: #E3977B; } [data-route][data-daytime="night"] .tr5 { --sky-top: #0D1838; --sky-bot: #2B3D6C; --water-top: #0F2349; --water-bot: #25406F; } [data-route] .dz-scene .k-star { fill: #FFFFFF; opacity: 0; } [data-route][data-daytime="night"] .dz-scene .k-star { opacity: .85; } [data-route] .dz-scene .k-sun { fill: #FFD36B; } [data-route] .dz-scene .k-sunglow { fill: #FFE7A8; opacity: .45; } [data-route] .dz-scene .k-moon { fill: #F4F1E4; opacity: 0; } [data-route][data-daytime="morning"] .dz-scene .k-sun { fill: #FFB866; } [data-route][data-daytime="evening"] .dz-scene .k-sun { fill: #FF8750; } [data-route][data-daytime="evening"] .dz-scene .k-sunglow { fill: #FFB38A; opacity: .5; } [data-route][data-daytime="night"] .dz-scene .k-sun, [data-route][data-daytime="night"] .dz-scene .k-sunglow { opacity: 0; } [data-route][data-daytime="night"] .dz-scene .k-moon { opacity: 1; } [data-route][data-daytime="night"] .dz-scene { filter: brightness(.62) saturate(.85); } [data-route][data-daytime="evening"] .dz-scene { filter: saturate(1.08) sepia(.12); } /* мост Золотые Ворота — «международный оранжевый»; тросы, подвески, туман, город */ [data-route] .dz-scene .k-bridge { fill: #C4402F; } [data-route] .dz-scene .k-bridge2 { fill: #8E2B20; } [data-route] .dz-scene .k-cable { fill: none; stroke: #B23A2B; stroke-width: 2.4; stroke-linecap: round; } [data-route] .dz-scene .k-hanger { fill: none; stroke: #B23A2B; stroke-width: .8; opacity: .85; } [data-route] .dz-scene .k-fog { fill: #FFFFFF; opacity: .55; } [data-route] .dz-scene .k-city { fill: #A9B7C6; } [data-route] .dz-scene .k-gull { fill: none; stroke: #4A5563; stroke-width: 1.3; stroke-linecap: round; } /* пирс Санта-Моники: сваи, настил, колесо обозрения, горки; пляж: спасательная вышка, зонт, полотенце, доска */ [data-route] .dz-scene .k-piling { fill: none; stroke: #7A5A3E; stroke-width: 2; } [data-route] .dz-scene .k-pier { fill: #8C6A4A; } [data-route] .dz-scene .k-wheel { fill: none; stroke: #E4E7EC; stroke-width: 1.2; } [data-route] .dz-scene .k-wheelrim { fill: none; stroke: #F4F6F8; stroke-width: 2.6; } [data-route] .dz-scene .k-gondola { fill: #E8594B; } [data-route] .dz-scene .k-gondola2 { fill: #F5C542; } [data-route] .dz-scene .k-coaster { fill: none; stroke: #F08A3C; stroke-width: 2.2; stroke-linejoin: round; } [data-route] .dz-scene .k-lifeguard { fill: #F6C24E; } [data-route] .dz-scene .k-umbrella { fill: #E8594B; } [data-route] .dz-scene .k-towel { fill: #4CA3DD; } [data-route] .dz-scene .k-surf { fill: #F28B4B; } /* Йосемити: гранит ближнего плана (освещённая стена, тень, трещины-потёки), дальний план светлее и голубее; дымка над лесом; водопад */ [data-route] .dz-scene .k-gran-lit { fill: #E0DACE; } [data-route] .dz-scene .k-gran { fill: #CBC5B9; } [data-route] .dz-scene .k-gran-sh { fill: #ACA599; } [data-route] .dz-scene .k-gran-far { fill: #C3CAD3; } [data-route] .dz-scene .k-gran-farlit { fill: #DEE2E7; } [data-route] .dz-scene .k-gran-far2 { fill: #BFCBD8; } [data-route] .dz-scene .k-streak { fill: none; stroke: #968E82; stroke-width: 1; opacity: .5; stroke-linecap: round; } [data-route] .dz-scene .k-haze { fill: #FFFFFF; opacity: .38; } [data-route] .dz-scene .k-fall { fill: #F4FAFF; opacity: .92; } /* Сан-Франциско: канатный трамвай, викторианские дома, пирамида, улица; секвойи; Биг-Сур: скалы, бетонная арка; Лос-Анджелес: обсерватория; Сан-Диего: морские львы; Джошуа-Три: деревья Джошуа; Мохаве: дорога, разметка, щит «66» */ [data-route] .dz-scene .k-carbody { fill: #C8372D; } [data-route] .dz-scene .k-cream { fill: #F4E9D0; } [data-route] .dz-scene .k-window { fill: #BFE0F2; } [data-route] .dz-scene .k-wire { fill: none; stroke: #3A3F46; stroke-width: 1; } [data-route] .dz-scene .k-house1 { fill: #F3B6C2; } [data-route] .dz-scene .k-house2 { fill: #B8DDE8; } [data-route] .dz-scene .k-house3 { fill: #F7E3A1; } [data-route] .dz-scene .k-house4 { fill: #C9E4B8; } [data-route] .dz-scene .k-roof2 { fill: #7D5C74; } [data-route] .dz-scene .k-pyramid { fill: #E9ECEF; } [data-route] .dz-scene .k-street { fill: #A3AAB2; } [data-route] .dz-scene .k-sequoia { fill: #A4522F; } [data-route] .dz-scene .k-sequoia2 { fill: #7E3B20; } [data-route] .dz-scene .k-cliff { fill: #8C7A63; } [data-route] .dz-scene .k-concrete { fill: #DAD6CD; } [data-route] .dz-scene .k-concretel { fill: none; stroke: #C9C4BA; stroke-width: 2.2; } [data-route] .dz-scene .k-dome { fill: #F2F2EE; } [data-route] .dz-scene .k-dome2 { fill: #D8D4CA; } [data-route] .dz-scene .k-sealion { fill: #7A5A43; } [data-route] .dz-scene .k-jt { fill: none; stroke: #8A6A4A; stroke-width: 3.2; stroke-linecap: round; } [data-route] .dz-scene .k-jtleaf { fill: #6E8F52; } [data-route] .dz-scene .k-road { fill: #5E5E62; } [data-route] .dz-scene .k-roadline { fill: #F2C94C; } /* итерация 2 (S45-137): Джошуа — колючие пучки; секвойи — дальний ряд, борозды коры, лучи, путник; Сан-Диего — дальний берег, мост Коронадо; Мохаве — телеграфные столбы */ [data-route] .dz-scene .k-jtspike { fill: none; stroke: #5F8246; stroke-width: 1.7; stroke-linecap: round; } [data-route] .dz-scene .k-jtcore { fill: #4F6E3A; } [data-route] .dz-scene .k-jtshag { fill: #7C6244; } [data-route] .dz-scene .k-seqfar { fill: #C79A83; } [data-route] .dz-scene .k-hazesoft { fill: #FFFFFF; opacity: .22; } [data-route] .dz-scene .k-bark { fill: none; stroke: #6E321A; stroke-width: 1.4; opacity: .45; stroke-linecap: round; } [data-route] .dz-scene .k-ray { fill: #FFF6D6; opacity: .28; } [data-route] .dz-scene .k-hikerbody { fill: #E8594B; } [data-route] .dz-scene .k-hikerlegs { fill: #3A4A5E; } [data-route] .dz-scene .k-hikerpack { fill: #F5C542; } [data-route] .dz-scene .k-hikerhead { fill: #F1C9A5; } [data-route] .dz-scene .k-farshore { fill: #9FB39A; } [data-route] .dz-scene .k-coronado { fill: none; stroke: #6F97BF; stroke-width: 2.6; stroke-linecap: round; } [data-route] .dz-scene .k-coropier { fill: none; stroke: #8EABC7; stroke-width: 1.1; } [data-route] .dz-scene .k-headfar { fill: #B4C6C6; } [data-route] .dz-scene .k-headmid { fill: #93AD9C; } [data-route] .dz-scene .k-dmtn2 { fill: #C7B3B8; } [data-route] .dz-scene .k-dmtn { fill: #BE9E8C; } [data-route] .dz-scene .k-chap { fill: #B7AD83; } [data-route] .dz-scene .k-chapdot { fill: #8E9A62; } [data-route] .dz-scene .k-obsv { fill: #F4F2EC; } [data-route] .dz-scene .k-obsdome { fill: #6F7F86; } [data-route] .dz-scene .k-window2 { fill: #A9B7C2; } [data-route] .dz-scene .k-polef { fill: #6B5A48; } [data-route] .dz-scene .k-wire2 { fill: none; stroke: #5B5048; stroke-width: .7; opacity: .7; } [data-route] .dz-scene .k-shield { fill: #FFFFFF; stroke: #222222; stroke-width: 1.4; } [data-route] .dz-scene .k-shieldtxt { fill: #111111; font: 800 11px/1 var(--font-base); } /* ===================================================================================================================================== 7 «ДОРОГА» (MAP-ROAD-TRIP-28.09, map-trip.js): юнит = локация — дорожный указатель (зелёный щит шоссе США) над названием юнита; раздел = район — подпись на карточке раздела; земля локаций — полосы под тропой (--gr-*, перетекают друг в друга); дорога — асфальт с белой разметкой (пройдено темнее); панорамы на входе в раздел нет — пейзаж идёт вдоль всей дороги ===================================================================================================================================== */ [data-trip] .tr5 { padding-top: 64px; --gr-sea: color-mix(in srgb, #CFE3EE var(--meadow), var(--color-bg)); --gr-dry: color-mix(in srgb, #EDE2C0 var(--meadow), var(--color-bg)); --gr-stone: color-mix(in srgb, #DDDBD5 var(--meadow), var(--color-bg)); --gr-lawn: color-mix(in srgb, #CDE5BC var(--meadow), var(--color-bg)); --gr-sand: color-mix(in srgb, #F3E3BD var(--meadow), var(--color-bg)); } /* место юнита — тихой подписью с булавкой под названием (было: зелёная плашка над ним — лишний цвет, №524 «пестро»; утверждено с макетом); место раздела — цветом раздела над номером */ [data-trip] .dz-loc { order: 3; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 1px 0 0; color: var(--color-text-muted); font: 600 11.5px/1.25 var(--font-base); } [data-trip] .dz-loc::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: currentColor; } /* булавка места */ [data-trip] .dz-region { display: block; margin-bottom: 2px; color: color-mix(in srgb, var(--sc) 85%, var(--color-text)); font: 800 12px/1.3 var(--font-base); letter-spacing: .02em; } [data-theme="dark"][data-trip] .dz-region { color: color-mix(in srgb, var(--sc) 60%, #fff); } [data-trip] .tr5-line .tr5-ahead { stroke: #B7BABF; } [data-trip] .tr5-line .tr5-done { stroke: #6C7179; } [data-trip] .tr5-line .tr5-lane { stroke: #FFFFFF; } [data-theme="dark"][data-trip] .tr5-line .tr5-ahead { stroke: #4A4D52; } [data-theme="dark"][data-trip] .tr5-line .tr5-done { stroke: #7C8189; } [data-theme="dark"][data-trip] .tr5-line .tr5-lane { stroke: rgba(255,255,255,.55); } /* приметы локаций раздела 1: мост (тонкие тросы, густой туман, контейнеровоз, велосипедист), Виста-Пойнт (бинокль, туристы, машина, кипарисы, маки, пеликаны), Форт Пойнт (кирпич, арка моста, пушка, брызги, сёрфер, цепь, краб), Президио (казармы, пикник, бегун, олень, флаг, эвкалипты), Бейкер-Бич (ведёрко, замок из песка, коряга, собака и мяч, следы) */ [data-trip] .dz-scene .k-cablethin { fill: none; stroke: #B23A2B; stroke-width: 1.2; } [data-trip] .dz-scene .k-fogthick { fill: #FFFFFF; opacity: .88; } [data-trip] .dz-scene .k-hull { fill: #2F3B4C; } [data-trip] .dz-scene .k-cont1 { fill: #D9594C; } [data-trip] .dz-scene .k-cont2 { fill: #3F7BDB; } [data-trip] .dz-scene .k-cont3 { fill: #F2B544; } [data-trip] .dz-scene .k-helmet { fill: #F2C94C; } [data-trip] .dz-scene .k-shirt2 { fill: #3F7BDB; } [data-trip] .dz-scene .k-shirt3 { fill: #26904F; } [data-trip] .dz-scene .k-car2 { fill: #2A86C4; } [data-trip] .dz-scene .k-luggage { fill: #8C6A4A; } [data-trip] .dz-scene .k-viewer { fill: #5E7F9A; } [data-trip] .dz-scene .k-cypress { fill: #3E6B4B; } [data-trip] .dz-scene .k-cypress2 { fill: #4F805B; } [data-trip] .dz-scene .k-stem { fill: none; stroke: #5E8A4A; stroke-width: 1.2; } [data-trip] .dz-scene .k-poppy { fill: #F08A24; } [data-trip] .dz-scene .k-pelican { fill: #8D949B; } [data-trip] .dz-scene .k-archsteel { fill: none; stroke: #C4402F; stroke-width: 5; stroke-linecap: round; } [data-trip] .dz-scene .k-brick { fill: #B5553C; } [data-trip] .dz-scene .k-brick2 { fill: #8F3F2C; } [data-trip] .dz-scene .k-arch { fill: #5A2E22; } [data-trip] .dz-scene .k-trunk2 { fill: #7A5A3E; } [data-trip] .dz-scene .k-spray { fill: #FFFFFF; opacity: .85; } [data-trip] .dz-scene .k-foam { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; } [data-trip] .dz-scene .k-wetsuit { fill: #2B2F36; } [data-trip] .dz-scene .k-chain { fill: none; stroke: #58606A; stroke-width: 1.4; } [data-trip] .dz-scene .k-crableg { fill: none; stroke: #D9594C; stroke-width: 1.3; stroke-linecap: round; } [data-trip] .dz-scene .k-white2 { fill: #E7E3DA; } [data-trip] .dz-scene .k-plaid { fill: none; stroke: #FFFFFF; stroke-width: 2; opacity: .8; } [data-trip] .dz-scene .k-basket { fill: #B0834F; } [data-trip] .dz-scene .k-trail { fill: none; stroke: #E6D5AB; stroke-width: 8; stroke-linecap: round; } [data-trip] .dz-scene .k-legs { fill: none; stroke: #3A4A5E; stroke-width: 2.4; stroke-linecap: round; } [data-trip] .dz-scene .k-deer { fill: #A8784F; } [data-trip] .dz-scene .k-deerleg { fill: none; stroke: #8C6240; stroke-width: 2.2; stroke-linecap: round; } [data-trip] .dz-scene .k-antler { fill: none; stroke: #7A5A3E; stroke-width: 1.4; stroke-linecap: round; } [data-trip] .dz-scene .k-stripes { fill: none; stroke: #D9594C; stroke-width: 2.2; } [data-trip] .dz-scene .k-navy { fill: #2F4A7A; } [data-trip] .dz-scene .k-euc { fill: #D9D3C4; } [data-trip] .dz-scene .k-euc2 { fill: #8FAE9A; } [data-trip] .dz-scene .k-euc3 { fill: #A9C2B0; } [data-trip] .dz-scene .k-bucket { fill: #3F7BDB; } [data-trip] .dz-scene .k-sandc { fill: #E2C48C; } [data-trip] .dz-scene .k-drift { fill: #A38B6D; } [data-trip] .dz-scene .k-driftline { fill: none; stroke: #A38B6D; stroke-width: 3; stroke-linecap: round; } [data-trip] .dz-scene .k-dog { fill: #C99655; } [data-trip] .dz-scene .k-dogear { fill: #A87840; } [data-trip] .dz-scene .k-dogleg, [data-trip] .dz-scene .k-dogtail { fill: none; stroke: #C99655; stroke-width: 2.6; stroke-linecap: round; } [data-trip] .dz-scene .k-ball { fill: #F25C54; } [data-trip] .dz-scene .k-print { fill: #D9C49A; } /* общий запас земли (map-trip.js): море — байдарки, паром, рыбацкая лодка, дельфины, маячок; холмы — люпин; парк — велосипеды; пляж — змей, волейбол */ [data-trip] .dz-scene .k-lupine { fill: #7C8BD9; } [data-trip] .dz-scene .k-dolphin { fill: #7E8E9E; } [data-trip] .dz-scene .k-kitetail { fill: none; stroke: #F2B544; stroke-width: 1.6; stroke-linecap: round; } [data-trip] .dz-scene .k-netband { fill: #FFFFFF; opacity: .35; } [data-trip] .dz-scene .k-net { fill: none; stroke: #58606A; stroke-width: .8; } [data-trip] .dz-scene .k-ballline { fill: none; stroke: #3F7BDB; stroke-width: 1.2; } [data-trip] .dz-scene .k-frame1, [data-trip] .dz-scene .k-frame2, [data-trip] .dz-scene .k-frame3 { fill: none; stroke-width: 1.8; stroke-linejoin: round; } [data-trip] .dz-scene .k-frame1 { stroke: #D9594C; } [data-trip] .dz-scene .k-frame2 { stroke: #2A86C4; } [data-trip] .dz-scene .k-frame3 { stroke: #26904F; } /* ===================================================================================================================================== 8 «ПЕЙЗАЖ» (MAP-LANDSCAPE-28.09, map-land.js): у нарисованных локаций земля — картина местности во всю ширину (вода с рябью, хребты со светом и тенью, туман), главная примета — крупно в разрыве .dz-vista после таблички юнита, сцены шагов — группами на свободной стороне; подписи шагов компактнее, между шагами больше места, чтобы пейзаж был виден. Остальное — как 7 ([data-trip]) ===================================================================================================================================== */ [data-land] .n5 { padding: 34px 0; } /* ПЕЙЗАЖ НА ВСЮ ШИРИНУ ОКНА (?w=1 → data-bleed; образец для PO 28.09 22:5x–23:1x, №504 вариант (а): «на ПК всё крупное, растянуто, по бокам белый фон, картинка только посередине и резко прерывается», «на ПК видно только два шага», «плашка на ПК тонкая по сравнению с кругом»). Колонка тропы не обрезает пейзаж (svg пейзажа шириной с окно, map-land.js), страница без горизонтальной прокрутки; на широких экранах — пропорции телефона: колонка 440 px (подписи переносятся, как на телефоне), круги 76/92/64, подписи 15/12 px */ html[data-bleed], html[data-bleed] body { overflow-x: clip; } [data-bleed] .pa { overflow-x: visible; } [data-bleed] .dz-land { max-width: none; } /* base.css: svg { max-width: 100% } ужимал холст шириной с окно до колонки — весь рисунок мельчал */ [data-bleed] .dz-land .dz-back { filter: blur(14px) saturate(.9); opacity: .85; } /* образец «фон» (?w=2) и запасной вариант ?w=1: копия места по бокам — мягкая, без деталей */ /* подложка боков — те же цвета, что фон участка [data-land] .tr5 (луг, к краям участка — цвет страницы) */ [data-bleed] .dz-land .q-bleed0 { stop-color: var(--color-bg); } [data-bleed] .dz-land .q-bleed1 { stop-color: color-mix(in srgb, var(--meadow-c) var(--meadow), var(--color-bg)); } @media (min-width: 760px) { :root[data-bleed] { --proto-w: 440px; } /* '1': дорога шире расходится на широком экране (PO 23:5x), но в меру — рисунки мест строят вид по ширине колонки; подписи — в пикселях, как на телефоне (иначе на широкой колонке плашка в одну строку — «тонкая по сравнению с кругом») */ :root[data-bleed="1"] { --proto-w: clamp(440px, 40vw, 720px); } :root[data-bleed] .t5-zig .l5 { max-width: 212px; } /* :root — вес выше правил [data-land] .t5-zig .l5 ниже по файлу */ [data-bleed] .n5 { --d: 76px; } [data-bleed] .n5.k-lesson { --d: 92px; } [data-bleed] .n5.k-words { --d: 64px; } [data-bleed] .l5 { font-size: 15px; } [data-bleed] .l5 small { font-size: 12px; } } [data-land] .t5-zig .l5 { max-width: calc(54% - var(--d) * .5); padding: 7px 12px; border-radius: 14px; } [data-land] .n5.left .l5 { padding-left: 38px; } [data-land] .n5.right .l5 { padding-right: 38px; } [data-land] .l5 b { font-size: 14.5px; } [data-land] .k-lesson .l5 b { font-size: 15px; } [data-land] .l5 small { font-size: 11.5px; } [data-land] .dz-vista { position: relative; height: 210px; pointer-events: none; } [data-land] .dz-land { position: absolute; left: 0; top: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%); } [data-land] .tr5 { --q-w1: #BFDDEB; --q-w2: #8DC1DE; --q-w3: #6AA6CF; --q-cur1: #A9D2E8; --q-cur2: #5F9CC6; --q-hill: #B7BF86; --q-hillsh: #8E9A63; --q-far: #A9BCC8; --q-dry: #D6C98F; --q-dry2: #CDBE80; --q-drysh: #A99A5E; --q-cliff: #A08566; --q-cliffsh: #7E664C; --q-shrub: #6F8A4E; --q-br: #C8432E; --q-brsh: #8E2A1D; --q-fog: #FFFFFF; } [data-theme="dark"][data-land] .tr5 { --q-w1: #22384A; --q-w2: #1B3246; --q-w3: #142A3D; --q-cur1: #294660; --q-cur2: #10233A; --q-hill: #4F5A3C; --q-hillsh: #3A432C; --q-far: #3A4854; --q-dry: #5A5236; --q-dry2: #544B30; --q-drysh: #3F3823; --q-cliff: #53463A; --q-cliffsh: #3E342A; --q-shrub: #3B4D2E; --q-br: #B2412F; --q-brsh: #7A2519; --q-fog: #C9D3DC; } [data-land] .dz-land .q-cur1 { fill: var(--q-cur1); opacity: .5; } [data-land] .dz-land .q-cur2 { fill: var(--q-cur2); opacity: .22; } [data-land] .dz-land .q-rip { fill: none; stroke: #FFFFFF; stroke-width: 1.3; stroke-linecap: round; opacity: .55; } [data-land] .dz-land .q-rip2 { fill: none; stroke: #3D7AA6; stroke-width: 1.2; stroke-linecap: round; opacity: .35; } [data-land] .dz-land .q-glint { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; opacity: .85; } [data-theme="dark"][data-land] .dz-land .q-rip { opacity: .16; } [data-theme="dark"][data-land] .dz-land .q-rip2 { stroke: #0A1A2A; opacity: .5; } [data-theme="dark"][data-land] .dz-land .q-glint { opacity: .3; } [data-land] .dz-land .q-foam { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; } [data-land] .dz-land .q-foam2 { fill: #FFFFFF; opacity: .75; } [data-land] .dz-land .q-refl { fill: #1F4D72; opacity: .16; } [data-theme="dark"][data-land] .dz-land .q-foam { opacity: .45; } [data-theme="dark"][data-land] .dz-land .q-foam2 { opacity: .35; } [data-theme="dark"][data-land] .dz-land .q-refl { fill: #000; opacity: .3; } [data-land] .dz-land .q-far { fill: var(--q-far); } [data-land] .dz-land .q-hill { fill: var(--q-hill); } [data-land] .dz-land .q-hillsh { fill: var(--q-hillsh); opacity: .75; } [data-land] .dz-land .q-dry { fill: var(--q-dry); } [data-land] .dz-land .q-dry2 { fill: var(--q-dry2); } [data-land] .dz-land .q-drysh { fill: var(--q-drysh); opacity: .6; } [data-land] .dz-land .q-cliff { fill: var(--q-cliff); } [data-land] .dz-land .q-cliffsh { fill: var(--q-cliffsh); } [data-land] .dz-land .q-shrub { fill: var(--q-shrub); } [data-land] .dz-land .q-shrubsh { fill: #2E3A22; opacity: .25; } [data-land] .dz-land .q-grass { fill: none; stroke: var(--q-drysh); stroke-width: 1.1; stroke-linecap: round; opacity: .8; } [data-land] .dz-land .q-fog { fill: var(--q-fog); opacity: .9; } [data-land] .dz-land .q-fog2 { fill: var(--q-fog); opacity: .62; } [data-land] .dz-land .q-br { fill: var(--q-br); } [data-land] .dz-land .q-brsh { fill: var(--q-brsh); } [data-land] .dz-land .q-cable { fill: none; stroke: var(--q-br); stroke-width: 2.6; stroke-linecap: round; } [data-land] .dz-land .q-hang { fill: none; stroke: var(--q-br); stroke-width: .8; opacity: .8; } [data-land] .dz-land .q-deck { fill: none; stroke: var(--q-br); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; } [data-land] .dz-land .q-deckrail { fill: none; stroke: var(--q-brsh); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; opacity: .55; } [data-land] .dz-land .q-deckshadow { fill: none; stroke: #0E2A44; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; opacity: .2; } [data-land] .dz-land .q-hull { fill: #FFFFFF; } [data-land] .dz-land .q-hullstripe { fill: #2F5E8C; } [data-land] .dz-land .q-hullstripe2 { fill: #A63A2B; } [data-land] .dz-land .q-mast { fill: none; stroke: #5B6570; stroke-width: 1.3; } [data-land] .dz-land .q-sail { fill: #FFFFFF; } [data-land] .dz-land .q-sail2 { fill: #EEF2F5; } [data-land] .dz-land .q-sail3 { fill: #F2C14E; } [data-land] .dz-land .q-sail2x { fill: #E8634F; } [data-land] .dz-land .q-bird { fill: none; stroke: #3F4A55; stroke-width: 1.4; stroke-linecap: round; } [data-land] .dz-land .q-rock { fill: #9AA3AB; } [data-land] .dz-land .q-rocksh { fill: #6E7880; } [data-land] .dz-land .q-lion { fill: #8A6545; } [data-land] .dz-land .q-lionsh { fill: #5E4430; opacity: .6; } [data-land] .dz-land .q-dark { fill: #2B2F36; } [data-land] .dz-land .q-pelican { fill: #8D949B; } [data-land] .dz-land .q-pelican2 { fill: #6F767D; } [data-land] .dz-land .q-beak { fill: #E8A33D; } [data-land] .dz-land .q-wall { fill: #EEE7DA; } [data-land] .dz-land .q-wallsh { fill: #C9C0B0; } [data-land] .dz-land .q-roof { fill: #8C7B68; } [data-land] .dz-land .q-win { fill: #4F5E6E; } [data-land] .dz-land .q-lamp { fill: #F6D36B; } [data-land] .dz-land .q-tank { fill: #B7B0A3; } [data-land] .dz-land .q-dock { fill: #7A5E44; } [data-land] .dz-land .q-tree { fill: #5D8A4E; } [data-land] .dz-land .q-tree2 { fill: #3F6A3A; } [data-land] .dz-land .q-c1 { fill: #D9594C; } [data-land] .dz-land .q-c2 { fill: #3F7BDB; } [data-land] .dz-land .q-c3 { fill: #F2B544; } [data-land] .dz-land .q-c4 { fill: #3E9A6A; } [data-land] .dz-land .q-tug { fill: #D9594C; } [data-land] .dz-land .q-boat { fill: #2F6C8F; } [data-land] .dz-land .q-line { fill: none; stroke: #5B6570; stroke-width: .9; } [data-land] .dz-land .q-ferry { fill: #FFFFFF; } [data-land] .dz-land .q-ferrysh { fill: #D4DCE3; } [data-land] .dz-land .q-flag { fill: #D9594C; } [data-land] .dz-land .q-jacket { fill: #E8634F; } [data-land] .dz-land .q-skin { fill: #E9BE98; } [data-land] .dz-land .q-paddle { fill: none; stroke: #3A4450; stroke-width: 1.4; stroke-linecap: round; } [data-land] .dz-land .q-buoy { fill: #D9594C; } [data-land] .dz-land .q-white { fill: #FFFFFF; } [data-land] .dz-land .q-wake { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; } /* вода по образцу Arrow (проба ?wfx=1, map-land.js wakeFx/reflectFx/waterline): светлая дорожка следа, рваное отражение, кромка ватерлинии */ [data-land] .dz-land .q-trail { fill: #FFFFFF; } [data-land] .dz-land .q-reflfx { fill: #1F4D72; } [data-land] .dz-land .q-wline { fill: #FFFFFF; opacity: .85; } [data-theme="dark"][data-land] .dz-land .q-trail { fill: #9FB4C6; }[data-theme="dark"][data-land] .dz-land .q-reflfx { fill: #000; } [data-theme="dark"][data-land] .dz-land .q-wline { opacity: .4; } [data-land] .dz-land .q-refl2 { fill: #1F4D72; opacity: .09; } [data-theme="dark"][data-land] .dz-land .q-wake { stroke: #9FB4C6; } [data-land] .t5-zig .l5 { max-width: calc(66% - var(--d) * .5); } /* 66%, было 60%: «упражнение 33 · шаг 165» в одну строку на телефоне (замер check_labels_local: 816 переносов → 0), PO 03.10 18:07 */ /* вторая строка подписи — одна, пока влезает: неразрывные пробелы внутри частей ставит map-render (meta), перенос — только после «·»; было nowrap — длинная строка («английский в жизни · шаг 166») вылезала за плашку (PO 03.10 18:07) */ [data-land] .l5 small { white-space: normal; } /* 8 «Пейзаж» — суша (локации 2–5): Виста-Пойнт (сухие холмы), Форт Пойнт (камень набережной), Президио (газон, рощи), Бейкер-Бич (песок, дюны) */ [data-land] .tr5 { --q-stone: #D9D6CE; --q-stone2: #CFCBC1; --q-lawn: #BFDDA8; --q-lawn2: #AED398; --q-sand: #F1E2BC; --q-sand2: #EAD7A8; --q-shadowc: #3A3522; --q-shade: .22; } [data-theme="dark"][data-land] .tr5 { --q-stone: #3C3A36; --q-stone2: #34322E; --q-lawn: #2F4A2C; --q-lawn2: #2A4228; --q-sand: #4F4634; --q-sand2: #473F2F; --q-shadowc: #000; --q-shade: .35; } [data-land] .dz-land .q-shadow { fill: var(--q-shadowc); opacity: var(--q-shade); } [data-land] .dz-land .q-mow { fill: #FFFFFF; opacity: .07; } [data-land] .dz-land .q-drydot { fill: #B39A55; opacity: .5; } [data-land] .dz-land .q-lawn1 { fill: #CFE8B8; opacity: .7; } [data-land] .dz-land .q-lawn2 { fill: #93BF7C; opacity: .5; } [data-land] .dz-land .q-lawn3 { fill: #9CCB84; } [data-land] .dz-land .q-lawnsh { fill: #7AAA66; opacity: .7; } [data-land] .dz-land .q-speck { fill: #C9B282; opacity: .7; } [data-land] .dz-land .q-speck2 { fill: #FFFFFF; opacity: .6; } [data-land] .dz-land .q-sandrip { fill: none; stroke: #CDB688; stroke-width: 1.2; stroke-linecap: round; opacity: .55; } [data-land] .dz-land .q-stonespot { fill: #BDB8AC; opacity: .5; } [data-land] .dz-land .q-joint { fill: none; stroke: #B9B4A8; stroke-width: 1; opacity: .7; } [data-theme="dark"][data-land] .dz-land .q-mow { opacity: .03; } [data-theme="dark"][data-land] .dz-land .q-lawn1 { fill: #3C5A38; } [data-theme="dark"][data-land] .dz-land .q-lawn2 { fill: #22381F; } [data-theme="dark"][data-land] .dz-land .q-joint { stroke: #2A2825; } [data-theme="dark"][data-land] .dz-land .q-speck { fill: #6A5E45; } [data-theme="dark"][data-land] .dz-land .q-speck2 { opacity: .12; } [data-theme="dark"][data-land] .dz-land .q-sandrip { stroke: #5F5540; } [data-theme="dark"][data-land] .dz-land .q-drydot { fill: #6E6240; } [data-theme="dark"][data-land] .dz-land .q-lawn3 { fill: #3A5A34; } [data-land] .dz-land .q-sh-dry, [data-land] .dz-land .q-sh-stone, [data-land] .dz-land .q-sh-lawn, [data-land] .dz-land .q-sh-sand { fill: none; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; } [data-land] .dz-land .q-sh-dry { stroke: #BFAE72; } [data-land] .dz-land .q-sh-stone { stroke: #B9B4A8; } [data-land] .dz-land .q-sh-lawn { stroke: #D9CFA8; } [data-land] .dz-land .q-sh-sand { stroke: #DCC896; } [data-theme="dark"][data-land] .dz-land .q-sh-dry, [data-theme="dark"][data-land] .dz-land .q-sh-stone, [data-theme="dark"][data-land] .dz-land .q-sh-lawn, [data-theme="dark"][data-land] .dz-land .q-sh-sand { stroke: #2A2825; } [data-land] .dz-land .q-waterflat { fill: var(--q-w2); } [data-land] .dz-land .q-spray { fill: #FFFFFF; opacity: .85; } [data-land] .dz-land .q-trunk { fill: #7A5A3E; } [data-land] .dz-land .q-trunkline { fill: none; stroke: #7A5A3E; stroke-width: 2; stroke-linecap: round; } [data-land] .dz-land .q-cyp { fill: #3E6B4B; } [data-land] .dz-land .q-cyp2 { fill: #2F5A3C; } [data-land] .dz-land .q-cyplit { fill: #5C8A5E; } [data-land] .dz-land .q-euc { fill: #D8D2C4; } [data-land] .dz-land .q-eucsh { fill: #A9A293; } [data-land] .dz-land .q-euc2 { fill: #8FAE9A; } [data-land] .dz-land .q-euc3 { fill: #7A9C88; } [data-land] .dz-land .q-legs2 { fill: #3A4A5E; } [data-land] .dz-land .q-legs3 { fill: none; stroke: #3A4A5E; stroke-width: 2.4; stroke-linecap: round; } [data-land] .dz-land .q-shirt1 { fill: #D9594C; } [data-land] .dz-land .q-shirt2 { fill: #3F7BDB; } [data-land] .dz-land .q-shirt3 { fill: #26904F; } [data-land] .dz-land .q-shirt4 { fill: #F2B544; } [data-land] .dz-land .q-deer2 { fill: #A8784F; } [data-land] .dz-land .q-deerw { fill: #F3EDE2; } [data-land] .dz-land .q-deerear { fill: #8C6240; } [data-land] .dz-land .q-deerleg2 { fill: none; stroke: #8C6240; stroke-width: 2; stroke-linecap: round; } [data-land] .dz-land .q-antler2 { fill: none; stroke: #6E5238; stroke-width: 1.4; stroke-linecap: round; } [data-land] .dz-land .q-car1 { fill: #D9594C; } [data-land] .dz-land .q-car2 { fill: #2A86C4; } [data-land] .dz-land .q-car3 { fill: #E8E4DA; } [data-land] .dz-land .q-glass { fill: #BFD9EC; } [data-land] .dz-land .q-tyre { fill: #2B2F36; } [data-land] .dz-land .q-hub { fill: #9AA3AB; } [data-land] .dz-land .q-shine { fill: #FFFFFF; opacity: .35; } [data-land] .dz-land .q-lupine { fill: #7F6FD1; } [data-land] .dz-land .q-poppy2 { fill: #F08A24; } [data-land] .dz-land .q-poppyc { fill: #F6C24A; } [data-land] .dz-land .q-stem2 { fill: none; stroke: #6E8A4A; stroke-width: 1.1; } [data-land] .dz-land .q-cityhill { fill: #B9C4CC; } [data-land] .dz-land .q-bld1 { fill: #E4E8EC; } [data-land] .dz-land .q-bld2 { fill: #CCD5DD; } [data-land] .dz-land .q-bldsh { fill: #9EAAB5; } [data-theme="dark"][data-land] .dz-land .q-cityhill { fill: #33404B; } [data-theme="dark"][data-land] .dz-land .q-bld1 { fill: #56626E; } [data-theme="dark"][data-land] .dz-land .q-bld2 { fill: #4A5561; } [data-theme="dark"][data-land] .dz-land .q-bldsh { fill: #333C45; } [data-land] .dz-land .q-fence2 { fill: none; stroke: #7A6A55; stroke-width: 1.6; stroke-linecap: round; } [data-land] .dz-land .q-viewer2 { fill: #4F6A80; } [data-land] .dz-land .q-asph { fill: #9C9A94; } [data-land] .dz-land .q-mark { fill: none; stroke: #FFFFFF; stroke-width: 1.4; opacity: .85; } [data-land] .dz-land .q-bus { fill: #F2F0EA; } [data-land] .dz-land .q-busstripe { fill: #3F7BDB; } [data-land] .dz-land .q-trail2 { fill: none; stroke: #E6D5AB; stroke-width: 9; stroke-linecap: round; } [data-theme="dark"][data-land] .dz-land .q-trail2 { stroke: #5A5238; } [data-land] .dz-land .q-wire { fill: none; stroke: #3A4450; stroke-width: 1.2; } [data-land] .dz-land .q-frame { fill: none; stroke: #D9594C; stroke-width: 1.8; stroke-linejoin: round; } [data-land] .dz-land .q-helmet2 { fill: #F2C94C; } [data-land] .dz-land .q-hawk { fill: none; stroke: #5B4A3A; stroke-width: 1.8; stroke-linecap: round; } [data-land] .dz-land .q-rabbit { fill: #B89A7A; } [data-land] .dz-land .q-bench { fill: #A0754E; } [data-land] .dz-land .q-pack { fill: #6E5238; } [data-land] .dz-land .q-wall2 { fill: #BEB8AA; } [data-land] .dz-land .q-archbig { fill: none; stroke: var(--q-br); stroke-width: 7; stroke-linecap: round; } [data-land] .dz-land .q-archlace { fill: none; stroke: var(--q-brsh); stroke-width: 3; opacity: .8; } [data-land] .dz-land .q-archpost { fill: none; stroke: var(--q-br); stroke-width: 1.6; opacity: .9; } [data-land] .dz-land .q-brick2x { fill: #B5553C; } [data-land] .dz-land .q-brickl { fill: #C96A50; } [data-land] .dz-land .q-brickd { fill: #8F3F2C; } [data-land] .dz-land .q-archwin { fill: #5A2E22; } [data-land] .dz-land .q-navy2 { fill: #2F4A7A; } [data-land] .dz-land .q-trunk2x { fill: #7A5A3E; } [data-land] .dz-land .q-hat { fill: #5B4A3A; } [data-land] .dz-land .q-rod { fill: none; stroke: #3A3A3A; stroke-width: .9; } [data-land] .dz-land .q-bucket2 { fill: #3F7BDB; } [data-land] .dz-land .q-chain2 { fill: none; stroke: #58606A; stroke-width: 1.3; } [data-land] .dz-land .q-rope { fill: none; stroke: #B08A5A; stroke-width: 2; } [data-land] .dz-land .q-ranger { fill: #6E7B4E; } [data-land] .dz-land .q-rangerhat { fill: #8C6A3E; } [data-land] .dz-land .q-surfwave { fill: #8DC1DE; opacity: .9; } [data-land] .dz-land .q-surf2 { fill: #F2B544; } [data-land] .dz-land .q-wetsuit2 { fill: #2B2F36; } [data-land] .dz-land .q-wallw { fill: #F2EEE6; } [data-land] .dz-land .q-wallwsh { fill: #D6D0C4; } [data-land] .dz-land .q-roof2 { fill: #B8503A; } [data-land] .dz-land .q-stripes2 { fill: none; stroke: #D9594C; stroke-width: 2.1; } [data-land] .dz-land .q-red2 { fill: #D9594C; } [data-land] .dz-land .q-plaid2 { fill: none; stroke: #FFFFFF; stroke-width: 2; opacity: .8; } [data-land] .dz-land .q-basket2 { fill: #B0834F; } [data-land] .dz-land .q-dog2 { fill: #C48A4E; } [data-land] .dz-land .q-dog3 { fill: #3D3A36; } [data-land] .dz-land .q-dogleg2 { fill: none; stroke: #6E5238; stroke-width: 1.8; stroke-linecap: round; } [data-land] .dz-land .q-leash { fill: none; stroke: #3A4450; stroke-width: 1; } [data-land] .dz-land .q-kitetail2 { fill: none; stroke: #F2B544; stroke-width: 1.6; stroke-linecap: round; } [data-land] .dz-land .q-wetsand { fill: #D9C79A; } [data-land] .dz-land .q-dune { fill: #EAD7A8; } [data-land] .dz-land .q-dunesh { fill: #CDB688; opacity: .8; } [data-land] .dz-land .q-dunegrass { fill: none; stroke: #8FA35E; stroke-width: 1.3; stroke-linecap: round; } [data-land] .dz-land .q-sand { fill: var(--q-sand); } [data-theme="dark"][data-land] .dz-land .q-wetsand { fill: #433B2B; } [data-theme="dark"][data-land] .dz-land .q-dune { fill: #564C38; } [data-theme="dark"][data-land] .dz-land .q-dunesh { fill: #3E3628; } [data-land] .dz-land .q-umb1 { fill: #E8634F; } [data-land] .dz-land .q-umb2 { fill: #3F7BDB; } [data-land] .dz-land .q-pole { fill: none; stroke: #6E5238; stroke-width: 1.6; } [data-land] .dz-land .q-towel2 { fill: #F2B544; } [data-land] .dz-land .q-towel3 { fill: #26904F; } [data-land] .dz-land .q-towel4 { fill: #D2527A; } [data-land] .dz-land .q-bucket3 { fill: #D9594C; } [data-land] .dz-land .q-sandc2 { fill: #E0C98E; } [data-land] .dz-land .q-sandcsh { fill: #C9AF72; } [data-land] .dz-land .q-netband2 { fill: #FFFFFF; opacity: .35; } [data-land] .dz-land .q-net2 { fill: none; stroke: #58606A; stroke-width: .8; } [data-land] .dz-land .q-drift2 { fill: #B8A58A; } [data-land] .dz-land .q-driftl { fill: none; stroke: #9C8A70; stroke-width: 3; stroke-linecap: round; } [data-land] .dz-land .q-ball2 { fill: #D9594C; } [data-land] .dz-land .q-tidepool { fill: var(--q-w2); opacity: .8; } [data-land] .dz-land .q-joint { opacity: .32; } [data-theme="dark"][data-land] .dz-land .q-joint { opacity: .5; } [data-land] .dz-land .q-wetrim { fill: none; stroke: #BFAE84; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; } [data-theme="dark"][data-land] .dz-land .q-wetrim { stroke: #3B3527; } [data-land] .dz-land .q-parapet { fill: none; stroke: #BEB8AA; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } [data-theme="dark"][data-land] .dz-land .q-parapet { stroke: #4A4740; } /* 8 «Пейзаж» — раздел 2 «Улицы Сан-Франциско» (map-land-s2.js): город (кварталы, улицы, викторианские дома, трамвай), причалы (деревянный настил, сваи, морские львы), Китайский квартал, парк Золотые Ворота */ [data-land] .tr5 { --q-city: #E6E0D6; --q-city2: #DDD6CA; } [data-theme="dark"][data-land] .tr5 { --q-city: #3A3833; --q-city2: #34322D; } [data-land] .dz-land .q-slopelit { fill: #FFFFFF; opacity: .16; } [data-land] .dz-land .q-slopesh { fill: #6E6454; opacity: .08; } [data-land] .dz-land .q-curb { fill: #CFC8BB; } [data-land] .dz-land .q-street { fill: #A7A49E; } [data-land] .dz-land .q-streetline { fill: none; stroke: #F2C94C; stroke-width: 1.4; stroke-dasharray: 10 8; opacity: .8; } [data-land] .dz-land .q-zebra, [data-land] .dz-land .q-zebra2 { fill: none; stroke: #FFFFFF; stroke-width: 3; opacity: .85; } [data-land] .dz-land .q-tile { fill: none; stroke: #C9C1B3; stroke-width: 1; opacity: .5; } [data-theme="dark"][data-land] .dz-land .q-curb { fill: #4A4740; } [data-theme="dark"][data-land] .dz-land .q-street { fill: #2A2926; } [data-theme="dark"][data-land] .dz-land .q-tile { stroke: #2A2825; } [data-land] .dz-land .q-sh-city { fill: none; stroke: #C9C2B5; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; } [data-theme="dark"][data-land] .dz-land .q-sh-city { stroke: #2A2825; } [data-land] .dz-land .q-v1 { fill: #F2C6C2; } [data-land] .dz-land .q-v2 { fill: #BFD8E6; } [data-land] .dz-land .q-v3 { fill: #F4E0A6; } [data-land] .dz-land .q-v4 { fill: #C9E1C2; } [data-land] .dz-land .q-v5 { fill: #D8C8E6; } [data-land] .dz-land .q-v6 { fill: #F5D1A8; } [data-land] .dz-land .q-vsh { fill: #000000; opacity: .12; } [data-land] .dz-land .q-trim { fill: none; stroke: #FFFFFF; stroke-width: 1.4; } [data-land] .dz-land .q-vwin { fill: #5A6B7C; } [data-land] .dz-land .q-bay { fill: #FFFFFF; opacity: .35; } [data-land] .dz-land .q-door { fill: #7A4E36; } [data-land] .dz-land .q-steps { fill: #CFC8BB; } [data-land] .dz-land .q-tree1x { fill: #5D8A4E; } [data-land] .dz-land .q-tree2x { fill: #3F6A3A; } [data-land] .dz-land .q-treelit { fill: #8AB36F; opacity: .8; } [data-land] .dz-land .q-ccbody { fill: #F2E6C8; } [data-land] .dz-land .q-ccred { fill: #B8412F; } [data-land] .dz-land .q-ccroof { fill: #8A2E22; } [data-land] .dz-land .q-ccwin { fill: #4F5E6E; } [data-land] .dz-land .q-ccboard { fill: #6E5238; } [data-land] .dz-land .q-cable2 { fill: none; stroke: #3A3A3A; stroke-width: 1; } [data-land] .dz-land .q-ccop { fill: #2F4A7A; } [data-land] .dz-land .q-rail { fill: none; stroke: #7A7872; stroke-width: 1.6; } [data-land] .dz-land .q-slot { fill: none; stroke: #4A4944; stroke-width: 1; stroke-dasharray: 3 3; } [data-land] .dz-land .q-turn { fill: #9C9A94; } [data-land] .dz-land .q-turn2 { fill: #B8B5AE; } [data-land] .dz-land .q-awning { fill: #2A86C4; } [data-land] .dz-land .q-awning2 { fill: #D9594C; } [data-land] .dz-land .q-table { fill: #EEE7DA; } [data-land] .dz-land .q-stand { fill: #A0754E; } [data-land] .dz-land .q-hedge { fill: #5E8A4A; } [data-land] .dz-land .q-brickroad { fill: none; stroke: #B5553C; stroke-width: 11; stroke-linejoin: round; stroke-linecap: round; } [data-land] .dz-land .q-hydr1 { fill: #D286C8; } [data-land] .dz-land .q-hydr2 { fill: #8FA8E0; } [data-land] .dz-land .q-stairs { fill: #CFC8BB; } [data-land] .dz-land .q-stairline { fill: none; stroke: #9C9486; stroke-width: 1; } [data-land] .dz-land .q-shopwall { fill: #E9D7B8; } [data-land] .dz-land .q-greenroof { fill: #3E8A5E; } [data-land] .dz-land .q-darkroof { fill: #3A3A3A; } [data-land] .dz-land .q-redcol { fill: #C43A2E; } [data-land] .dz-land .q-sign { fill: #F2C14E; } [data-land] .dz-land .q-lantern { fill: #E0402E; } [data-land] .dz-land .q-lanterncap { fill: #F2C14E; } [data-land] .dz-land .q-gatewall { fill: #F0E6D2; } [data-land] .dz-land .q-gatedark { fill: #5A4A3A; } [data-land] .dz-land .q-stone3 { fill: #B9B4A8; } [data-land] .dz-land .q-lion2 { fill: #9C978B; } [data-land] .dz-land .q-orange { fill: #F08A24; } [data-land] .dz-land .q-green2 { fill: #6FAF4E; } [data-land] .dz-land .q-crate { fill: #B08A5A; } [data-land] .dz-land .q-liondress { fill: #F2C14E; } [data-land] .dz-land .q-lionhead { fill: #D9402E; } [data-land] .dz-land .q-lionmane { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; } [data-land] .dz-land .q-drum { fill: #B8412F; } [data-land] .dz-land .q-wood { fill: #A98460; stroke: #A98460; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; } [data-land] .dz-land path.q-wood { fill: none; } [data-land] .dz-land rect.q-wood { stroke: none; } [data-land] .dz-land .q-planks { fill: none; stroke: #7E5F42; stroke-width: 30; stroke-dasharray: 1.2 6; stroke-linejoin: round; opacity: .6; } [data-land] .dz-land .q-plank2 { fill: none; stroke: #7E5F42; stroke-width: 1; opacity: .6; } [data-theme="dark"][data-land] .dz-land .q-wood { fill: #5A4633; stroke: #5A4633; } [data-theme="dark"][data-land] .dz-land .q-planks { stroke: #3A2D21; } [data-land] .dz-land .q-piling { fill: #6E5238; } [data-land] .dz-land .q-pilingtop { fill: #8C6A4A; } [data-land] .dz-land .q-shopwood { fill: #C9A57A; } [data-land] .dz-land .q-roofwood { fill: #7E5F42; } [data-land] .dz-land .q-carousel { fill: #F2E6C8; } [data-land] .dz-land .q-carroof { fill: #D9594C; } [data-land] .dz-land .q-flag2 { fill: #3F7BDB; } [data-land] .dz-land .q-boat2 { fill: #D9594C; } [data-land] .dz-land .q-boat3 { fill: #26904F; } [data-land] .dz-land .q-boat4 { fill: #F2B544; } [data-land] .dz-land .q-buoy2 { fill: #E8634F; } [data-land] .dz-land .q-pot { fill: #8C8F94; } [data-land] .dz-land .q-steam { fill: #FFFFFF; opacity: .6; } [data-land] .dz-land .q-crab { fill: #E0402E; } [data-land] .dz-land .q-white2 { fill: #F2F2F2; } [data-land] .dz-land .q-cage { fill: none; stroke: #5B6570; stroke-width: 1.2; } [data-land] .dz-land .q-cagel { fill: none; stroke: #5B6570; stroke-width: .8; } [data-land] .dz-land .q-lawnx { fill: #A8D38F; } [data-theme="dark"][data-land] .dz-land .q-lawnx { fill: #33502E; } [data-land] .dz-land .q-frisbee { fill: #F08A24; } [data-land] .dz-land .q-bus2 { fill: #D9594C; } [data-land] .dz-land .q-tulip1 { fill: #E8403A; } [data-land] .dz-land .q-tulip2 { fill: #F2C14E; } [data-land] .dz-land .q-tulip3 { fill: #E86FA6; } [data-land] .dz-land .q-mill { fill: #8A6B4E; } [data-land] .dz-land .q-millsh { fill: #6E5238; } [data-land] .dz-land .q-millsail { fill: #F2EEE6; stroke: #7E5F42; stroke-width: 1; } [data-land] .dz-land .q-bison { fill: #5A3E2A; } [data-land] .dz-land .q-bison2 { fill: #7A5A3E; } [data-land] .dz-land .q-hay { fill: #E0C77A; } [data-land] .dz-land .q-glasshouse { fill: #EEF3F4; } [data-land] .dz-land .q-glassline { fill: none; stroke: #B9C8CF; stroke-width: 1; } [data-land] .dz-land .q-wetrim2 { fill: none; stroke: #7FA36A; stroke-width: 3; } [data-land] .dz-land .q-duck { fill: #3E8A5E; } [data-land] .dz-land .q-archbridge { fill: none; stroke: #C43A2E; stroke-width: 4; stroke-linecap: round; } [data-land] .dz-land .q-maple { fill: #D9502E; } [data-land] .dz-land .q-maple2 { fill: #F08A24; } [data-land] .dz-land .q-skate { fill: #3A4450; } [data-land] .dz-land .q-shell { fill: #EEE7DA; } [data-land] .dz-land .q-shellin { fill: #C9BFAE; } [data-land] .dz-land .q-dark2 { fill: #2B2F36; } [data-land] .dz-land .q-redwood { fill: #9A4F32; } [data-land] .dz-land .q-redwoodsh { fill: #6E3622; } [data-land] .dz-land .q-hedgesh { fill: #3F6A3A; opacity: .5; } [data-land] .dz-land .q-leafrow { fill: #5E8A4A; opacity: .8; } /* 8 «Пейзаж» — раздел 3 «Йосемити» (map-land-s3.js): луг, гранитные стены, сосны, река, водопады, снег наверху */ [data-land] .tr5 { --q-meadow: #C9DDA0; --q-meadow2: #BCD493; --q-alpine: #D8E2C8; --q-alpine2: #E6EDDD; } [data-theme="dark"][data-land] .tr5 { --q-meadow: #33482A; --q-meadow2: #2E4226; --q-alpine: #3A4436; --q-alpine2: #414B3D; } [data-land] .dz-land .q-pine { fill: #2F5A3C; } [data-land] .dz-land .q-pinelit { fill: #4F7D55; } [data-land] .dz-land .q-snowx { fill: #F7FAFD; } [data-land] .dz-land .q-granite { fill: #CFCBC2; } [data-land] .dz-land .q-granitesh { fill: #A9A49A; } [data-land] .dz-land .q-granitefar { fill: #C3CCD6; } [data-land] .dz-land .q-streak { fill: none; stroke: #8E897F; stroke-width: 1.4; stroke-linecap: round; opacity: .5; } [data-theme="dark"][data-land] .dz-land .q-granite { fill: #5A5751; } [data-theme="dark"][data-land] .dz-land .q-granitesh { fill: #45423D; } [data-theme="dark"][data-land] .dz-land .q-granitefar { fill: #4A525C; } [data-land] .dz-land .q-bank { fill: #BFB08A; } [data-land] .dz-land .q-river { fill: #7FB8D8; } [data-theme="dark"][data-land] .dz-land .q-river { fill: #1E3A50; } [data-theme="dark"][data-land] .dz-land .q-bank { fill: #4A4332; } [data-land] .dz-land .q-flowery { fill: #F2C94C; } [data-land] .dz-land .q-flowerw { fill: #FFFFFF; opacity: .9; } [data-land] .dz-land .q-tent1 { fill: #E8634F; } [data-land] .dz-land .q-tent2 { fill: #3F7BDB; } [data-land] .dz-land .q-tentsh { fill: #000000; opacity: .18; } [data-land] .dz-land .q-logs { fill: none; stroke: #6E5238; stroke-width: 2.4; stroke-linecap: round; } [data-land] .dz-land .q-fire { fill: #F08A24; } [data-land] .dz-land .q-fire2 { fill: #F6D36B; } [data-land] .dz-land .q-smoke { fill: #B9B4A8; opacity: .5; } [data-land] .dz-land .q-legs4 { fill: none; stroke: #2B2622; stroke-width: 3; stroke-linecap: round; } [data-land] .dz-land .q-bear { fill: #2E2A26; } [data-land] .dz-land .q-muzzle { fill: #8C6A4A; } [data-land] .dz-land .q-rope2 { fill: none; stroke: #E8634F; stroke-width: .9; } [data-land] .dz-land .q-ledge { fill: #8E897F; opacity: .6; } [data-land] .dz-land .q-fallbase { fill: #EAF4FA; } [data-land] .dz-land .q-fallstreak { fill: none; stroke: #BFDDEB; stroke-width: 1.2; } [data-land] .dz-land .q-mist { fill: #FFFFFF; opacity: .6; } [data-land] .dz-land .q-haze { fill: #DCE7EE; } [data-theme="dark"][data-land] .dz-land .q-haze { fill: #2A3440; } [data-land] .dz-land .q-raft1 { fill: #F2B544; } [data-land] .dz-land .q-raft2 { fill: #E8634F; } [data-land] .dz-land .q-berry { fill: #4F7D55; } [data-land] .dz-land .q-portaledge { fill: #F2B544; } [data-land] .dz-land .q-mat { fill: #3F7BDB; } [data-land] .dz-land .q-tripod { fill: none; stroke: #3A3A3A; stroke-width: 1.2; } [data-land] .dz-land .q-rainbow1 { fill: none; stroke: #F08A24; stroke-width: 2; opacity: .55; } [data-land] .dz-land .q-rainbow2 { fill: none; stroke: #7F6FD1; stroke-width: 2; opacity: .45; } [data-land] .dz-land .q-poncho { fill: #F2C94C; } [data-land] .dz-land .q-poncho2 { fill: #E8634F; } [data-land] .dz-land .q-lake { fill: #8DC1DE; } [data-theme="dark"][data-land] .dz-land .q-lake { fill: #1E3A50; } [data-land] .dz-land .q-cablehike { fill: none; stroke: #3A3A3A; stroke-width: 1; } [data-land] .dz-land .q-marmot { fill: #9A7650; } [data-land] .dz-land .q-snowpatch { fill: #F7FAFD; opacity: .9; } [data-theme="dark"][data-land] .dz-land .q-snowpatch { fill: #C9D3DC; opacity: .35; } [data-land] .dz-land .q-jacket1 { fill: #E8634F; } [data-land] .dz-land .q-jacket2 { fill: #3F7BDB; } [data-land] .dz-land .q-jacket3 { fill: #F2B544; } [data-land] .dz-land .q-sunset { fill: #F6B26B; opacity: .8; } [data-land] .dz-land .q-ski { fill: none; stroke: #D9594C; stroke-width: 1.6; stroke-linecap: round; } [data-land] .dz-land .q-pole2 { fill: none; stroke: #3A3A3A; stroke-width: .9; } /* 8 «Пейзаж» — раздел 4 «Секвойи» (map-land-s4.js): лесная подстилка, стволы секвой, папоротник, мрамор пещеры, хребты, дубы предгорий */ [data-land] .tr5 { --q-duff: #CDBE98; --q-duff2: #C2B18A; } [data-theme="dark"][data-land] .tr5 { --q-duff: #3D3528; --q-duff2: #372F23; } [data-land] .dz-land .q-seq { fill: #A85A36; } [data-land] .dz-land .q-seqlit { fill: #C97C4F; } [data-land] .dz-land .q-seqsh { fill: #7A3B22; } [data-land] .dz-land .q-seqfar { fill: #C9A58E; } [data-land] .dz-land .q-seqbark { fill: none; stroke: #6A301C; stroke-width: 1.2; stroke-linecap: round; opacity: .55; } [data-land] .dz-land .q-seqscar { fill: #3A2418; opacity: .8; } [data-land] .dz-land .q-seqbranch { fill: none; stroke: #6A301C; stroke-width: 2; stroke-linecap: round; } [data-land] .dz-land .q-seqcrown { fill: #3F6B3A; } [data-land] .dz-land .q-seqcrown2 { fill: #5A8A4C; } [data-land] .dz-land .q-seqcrownfar { fill: #A9BFA0; } [data-theme="dark"][data-land] .dz-land .q-seq { fill: #7A4128; } [data-theme="dark"][data-land] .dz-land .q-seqlit { fill: #93563A; } [data-theme="dark"][data-land] .dz-land .q-seqsh { fill: #532815; } [data-theme="dark"][data-land] .dz-land .q-seqfar { fill: #4E3D33; } [data-theme="dark"][data-land] .dz-land .q-seqcrown { fill: #27442A; } [data-theme="dark"][data-land] .dz-land .q-seqcrown2 { fill: #355A34; } [data-theme="dark"][data-land] .dz-land .q-seqcrownfar { fill: #34443A; } [data-land] .dz-land .q-fern { fill: none; stroke: #5E8C45; stroke-width: 2.4; stroke-linecap: round; } [data-land] .dz-land .q-fern2 { fill: none; stroke: #7FAA55; stroke-width: 2.2; stroke-linecap: round; } [data-theme="dark"][data-land] .dz-land .q-fern { stroke: #3E5E30; } [data-theme="dark"][data-land] .dz-land .q-fern2 { stroke: #4E7238; } [data-land] .dz-land .q-needle { fill: none; stroke: #A8845A; stroke-width: 1; stroke-linecap: round; opacity: .7; } [data-land] .dz-land .q-cone { fill: #8A5E3A; } [data-land] .dz-land .q-sunpatch { fill: #F6E7B0; opacity: .45; } [data-land] .dz-land .q-sunbeam { fill: #FFF4CC; opacity: .22; } [data-theme="dark"][data-land] .dz-land .q-needle { stroke: #6A5236; } [data-theme="dark"][data-land] .dz-land .q-sunpatch { fill: #6B6445; opacity: .3; } [data-theme="dark"][data-land] .dz-land .q-sunbeam { fill: #8A8260; opacity: .1; } [data-land] .dz-land .q-log { fill: #8E5A38; } [data-land] .dz-land .q-logsh { fill: #6A3E24; } [data-land] .dz-land .q-logend { fill: #E0BC8C; } [data-land] .dz-land .q-logring { fill: none; stroke: #B08658; stroke-width: 1; } [data-land] .dz-land .q-cutwood { fill: #E0BC8C; } [data-theme="dark"][data-land] .dz-land .q-log { fill: #5E3C26; } [data-theme="dark"][data-land] .dz-land .q-logend { fill: #8E7458; } [data-land] .dz-land .q-plank { fill: none; stroke: #B8925F; stroke-width: 10; stroke-linejoin: round; } [data-land] .dz-land .q-plankedge { fill: none; stroke: #7E6040; stroke-width: 13; stroke-linejoin: round; } [data-land] .dz-land .q-plankline { fill: none; stroke: #8E6E48; stroke-width: .8; } [data-theme="dark"][data-land] .dz-land .q-plank { stroke: #6A5238; } [data-theme="dark"][data-land] .dz-land .q-plankedge { stroke: #45351F; } [data-theme="dark"][data-land] .dz-land .q-plankline { stroke: #4E3C28; } [data-land] .dz-land .q-ranger { fill: #6B7A3A; } [data-land] .dz-land .q-rangerhat { fill: #B8925A; } [data-land] .dz-land .q-pack { fill: #4A6E8A; } [data-land] .dz-land .q-arms { fill: none; stroke: #E8B98E; stroke-width: 1.6; stroke-linecap: round; } [data-land] .dz-land .q-squirrel { fill: #8A6446; } [data-land] .dz-land .q-sign { fill: #6E5238; } [data-land] .dz-land .q-signboard { fill: #9A7650; } [data-land] .dz-land .q-fence3 { fill: none; stroke: #6E5238; stroke-width: 1.6; stroke-linecap: round; } [data-land] .dz-land .q-meadowpatch { fill: var(--q-meadow); } [data-land] .dz-land .q-meadowsoft { fill: var(--q-meadow); opacity: .45; } [data-land] .dz-land .q-moss { fill: #7E9A52; opacity: .6; } [data-land] .dz-land .q-lupine2 { fill: #7F6FD1; } [data-land] .dz-land .q-blanket { fill: #D9594C; opacity: .9; } [data-land] .dz-land .q-marble { fill: #E6E3DC; } [data-land] .dz-land .q-marblesh { fill: #C2BDB2; } [data-land] .dz-land .q-marblevein { fill: none; stroke: #B6B0A4; stroke-width: 1.2; opacity: .6; } [data-land] .dz-land .q-cavemouth { fill: #2A2420; } [data-land] .dz-land .q-stal { fill: #D8D1C4; } [data-land] .dz-land .q-gate { fill: none; stroke: #4A4A4A; stroke-width: 1.2; } [data-land] .dz-land .q-lantern { fill: #F6D36B; } [data-land] .dz-land .q-lanternglow { fill: #F6D36B; opacity: .28; } [data-theme="dark"][data-land] .dz-land .q-marble { fill: #6B6861; } [data-theme="dark"][data-land] .dz-land .q-marblesh { fill: #55524C; } [data-theme="dark"][data-land] .dz-land .q-marblevein { stroke: #817D75; } [data-theme="dark"][data-land] .dz-land .q-cavemouth { fill: #110E0C; } [data-theme="dark"][data-land] .dz-land .q-stal { fill: #8E887C; } [data-theme="dark"][data-land] .dz-land .q-gate { stroke: #9A9A9A; } [data-land] .dz-land .q-stairs { fill: none; stroke: #8E897F; stroke-width: 3; stroke-linejoin: round; } [data-land] .dz-land .q-rail3 { fill: none; stroke: #5A554C; stroke-width: 1; } [data-land] .dz-land .q-ridge1 { fill: #A7B8CB; } [data-land] .dz-land .q-ridge2 { fill: #BACADA; } [data-land] .dz-land .q-ridge3 { fill: #CDD8E3; } [data-theme="dark"][data-land] .dz-land .q-ridge1 { fill: #3A4656; } [data-theme="dark"][data-land] .dz-land .q-ridge2 { fill: #444F60; } [data-theme="dark"][data-land] .dz-land .q-ridge3 { fill: #4E5A6B; } [data-land] .dz-land .q-oak { fill: #6F8A3E; } [data-land] .dz-land .q-oak2 { fill: #88A24E; } [data-land] .dz-land .q-oaktrunk { fill: none; stroke: #5A4632; stroke-width: 3; stroke-linecap: round; } [data-theme="dark"][data-land] .dz-land .q-oak { fill: #3F5226; } [data-theme="dark"][data-land] .dz-land .q-oak2 { fill: #4C6230; } [data-land] .dz-land .q-roadfar { fill: #9C9486; opacity: .8; } [data-land] .dz-land .q-trailwide { fill: none; stroke: #B89E74; stroke-width: 12; stroke-linecap: round; } [data-land] .dz-land .q-door { fill: #5A3E26; } [data-land] .dz-land .q-window { fill: #F6D36B; opacity: .85; } [data-land] .dz-land .q-foamline { fill: none; stroke: #FFFFFF; stroke-width: 1.4; opacity: .7; } [data-land] .dz-land .q-archbridge2 { fill: none; stroke: #7E6040; stroke-width: 4; stroke-linecap: round; } [data-land] .dz-land .q-snowline { fill: none; stroke: #F7FAFD; stroke-width: 2; stroke-linecap: round; opacity: .8; } [data-theme="dark"][data-land] .dz-land .q-roadfar { fill: #4A463F; } [data-theme="dark"][data-land] .dz-land .q-trailwide { stroke: #5E513C; } [data-theme="dark"][data-land] .dz-land .q-foamline { opacity: .35; } /* 8 «Пейзаж» — раздел 5 «Биг-Сур» (map-land-s5.js): прибрежные заросли, обрыв к океану, ламинария, бетонный мост, маяк, бирюзовая бухта, мысы */ [data-land] .tr5 { --q-scrub: #CBD0A2; --q-scrub2: #BFC794; } [data-theme="dark"][data-land] .tr5 { --q-scrub: #3B4230; --q-scrub2: #353C2B; } [data-land] .dz-land .q-clifflit { fill: none; stroke: #C4A986; stroke-width: 2; stroke-linejoin: round; } [data-land] .dz-land .q-cliffline { fill: none; stroke: #6E5840; stroke-width: 1.1; opacity: .55; } [data-land] .dz-land .q-kelp { fill: #5E6B2E; opacity: .55; } [data-land] .dz-land .q-scrubbush { fill: #7F9258; } [data-theme="dark"][data-land] .dz-land .q-clifflit { stroke: #7A6650; } [data-theme="dark"][data-land] .dz-land .q-kelp { fill: #3A4220; } [data-theme="dark"][data-land] .dz-land .q-scrubbush { fill: #45552F; } [data-land] .dz-land .q-condor { fill: #2B2622; } [data-land] .dz-land .q-condorw { fill: none; stroke: #F2F2F2; stroke-width: 1.4; stroke-linecap: round; } [data-land] .dz-land .q-condorhead { fill: #E07A5F; } [data-land] .dz-land .q-wheel { fill: none; stroke: #2B2F36; stroke-width: 1.4; } [data-land] .dz-land .q-helmet { fill: #F2B544; } [data-land] .dz-land .q-gravel { fill: #D8CCB0; } [data-land] .dz-land .q-van { fill: #E8A23A; } [data-land] .dz-land .q-chair { fill: #3F7BDB; } [data-theme="dark"][data-land] .dz-land .q-wheel { stroke: #C9D3DC; } [data-theme="dark"][data-land] .dz-land .q-gravel { fill: #55503F; } [data-land] .dz-land .q-canyon { fill: #A9B37A; } [data-land] .dz-land .q-canyonsh { fill: #8A955F; } [data-theme="dark"][data-land] .dz-land .q-canyon { fill: #3E4A2E; } [data-theme="dark"][data-land] .dz-land .q-canyonsh { fill: #323C25; } [data-land] .dz-land .q-arch { fill: none; stroke: #E2DDD1; stroke-width: 6; stroke-linecap: round; } [data-land] .dz-land .q-archsh { fill: none; stroke: #A9A293; stroke-width: 9; stroke-linecap: round; } [data-land] .dz-land .q-spandrel { fill: none; stroke: #CFC9BB; stroke-width: 2.4; } [data-land] .dz-land .q-concrete { fill: #E2DDD1; } [data-land] .dz-land .q-concretesh { fill: #B8B1A2; } [data-theme="dark"][data-land] .dz-land .q-arch { stroke: #8A857B; } [data-theme="dark"][data-land] .dz-land .q-archsh { stroke: #5A564F; } [data-theme="dark"][data-land] .dz-land .q-spandrel { stroke: #77726A; } [data-theme="dark"][data-land] .dz-land .q-concrete { fill: #8A857B; } [data-theme="dark"][data-land] .dz-land .q-concretesh { fill: #5E5A53; } [data-land] .dz-land .q-lighthouse { fill: #F7F5EF; } [data-land] .dz-land .q-house { fill: #F2EEE4; } [data-land] .dz-land .q-roofr { fill: #B8483A; } [data-land] .dz-land .q-beam { fill: #FFF3B0; opacity: .35; } [data-theme="dark"][data-land] .dz-land .q-house { fill: #B8B3A8; } [data-theme="dark"][data-land] .dz-land .q-beam { opacity: .5; } [data-land] .dz-land .q-glitter { fill: #FFF1C4; opacity: .8; } [data-theme="dark"][data-land] .dz-land .q-glitter { fill: #C9A86A; opacity: .5; } [data-land] .dz-land .q-cove { fill: #4CC4C0; } [data-land] .dz-land .q-sandp { fill: #DCC6CB; } [data-land] .dz-land .q-keyhole { fill: #F6D9A0; } [data-theme="dark"][data-land] .dz-land .q-cove { fill: #1F6E73; } [data-theme="dark"][data-land] .dz-land .q-sandp { fill: #5E5056; } [data-theme="dark"][data-land] .dz-land .q-keyhole { fill: #8A6A40; } [data-land] .dz-land .q-headland1 { fill: #8FA888; } [data-land] .dz-land .q-headland2 { fill: #A9BDA3; } [data-land] .dz-land .q-headland3 { fill: #C4D1C0; } [data-theme="dark"][data-land] .dz-land .q-headland1 { fill: #3A4A3A; } [data-theme="dark"][data-land] .dz-land .q-headland2 { fill: #435243; } [data-theme="dark"][data-land] .dz-land .q-headland3 { fill: #4D5B4E; } [data-land] .dz-land .q-hwy { fill: none; stroke: #6E7178; stroke-width: 7; stroke-linecap: round; } [data-land] .dz-land .q-hwyedge { fill: none; stroke: #C2B68E; stroke-width: 11; stroke-linecap: round; } [data-land] .dz-land .q-hwyline { fill: none; stroke: #F2D36B; stroke-width: 1; stroke-dasharray: 4 4; } [data-theme="dark"][data-land] .dz-land .q-hwy { stroke: #3A3D44; } [data-theme="dark"][data-land] .dz-land .q-hwyedge { stroke: #55503F; } /* 8 «Пейзаж» — раздел 6 «Лос-Анджелес» (map-land-s6.js): пальмы, дома в испанском стиле, бассейны, стеклянные башни, холмы в дымке */ [data-land] .dz-land .q-palmtrunk { fill: none; stroke: #9A7B5A; stroke-width: 3; stroke-linecap: round; } [data-land] .dz-land .q-palmring { fill: none; stroke: #7A5E42; stroke-width: 1; opacity: .7; } [data-land] .dz-land .q-frond { fill: none; stroke: #3F7A3A; stroke-width: 3.2; stroke-linecap: round; } [data-land] .dz-land .q-frondlit { fill: none; stroke: #6FA24E; stroke-width: 2.6; stroke-linecap: round; } [data-land] .dz-land .q-palmhead { fill: #6E5238; } [data-theme="dark"][data-land] .dz-land .q-palmtrunk { stroke: #6A553F; } [data-theme="dark"][data-land] .dz-land .q-frond { stroke: #2A4E28; } [data-theme="dark"][data-land] .dz-land .q-frondlit { stroke: #3F6630; } [data-land] .dz-land .q-stucco { fill: #F4EFE6; } [data-land] .dz-land .q-stuccosh { fill: #D6CFC2; } [data-land] .dz-land .q-tile2 { fill: #C8563E; } [data-land] .dz-land .q-tileline { fill: none; stroke: #9E3E2A; stroke-width: .8; } [data-land] .dz-land .q-archwin { fill: #5E6B78; } [data-land] .dz-land .q-archdoor { fill: #6E4A30; } [data-land] .dz-land .q-shop { fill: #F2E3D2; } [data-theme="dark"][data-land] .dz-land .q-stucco { fill: #9A958C; } [data-theme="dark"][data-land] .dz-land .q-stuccosh { fill: #77726A; } [data-theme="dark"][data-land] .dz-land .q-tile2 { fill: #8E3E2C; } [data-theme="dark"][data-land] .dz-land .q-shop { fill: #8E857A; } [data-land] .dz-land .q-pool { fill: #5CC7E0; } [data-land] .dz-land .q-poolrim { fill: #EDE7DA; } [data-land] .dz-land .q-poolrip { fill: none; stroke: #FFFFFF; stroke-width: 1.2; opacity: .8; } [data-land] .dz-land .q-pooldeck { fill: #E6DDCC; } [data-theme="dark"][data-land] .dz-land .q-pooldeck { fill: #5E584E; } [data-land] .dz-land .q-lounger { fill: #F2F2F2; } [data-land] .dz-land .q-umbrella { fill: #E8634F; opacity: .9; } [data-theme="dark"][data-land] .dz-land .q-pool { fill: #1F6E80; } [data-theme="dark"][data-land] .dz-land .q-poolrim { fill: #6E695F; } [data-land] .dz-land .q-glass1 { fill: #9DBBD6; } [data-land] .dz-land .q-glass2 { fill: #B5CCDF; } [data-land] .dz-land .q-glasssh { fill: #7B99B5; } [data-land] .dz-land .q-glasslit { fill: #E4EEF7; opacity: .7; } [data-land] .dz-land .q-glassline { fill: none; stroke: #6D8AA6; stroke-width: .6; opacity: .6; } [data-theme="dark"][data-land] .dz-land .q-glass1 { fill: #3C5670; } [data-theme="dark"][data-land] .dz-land .q-glass2 { fill: #46607A; } [data-theme="dark"][data-land] .dz-land .q-glasssh { fill: #2E4459; } [data-theme="dark"][data-land] .dz-land .q-glasslit { fill: #F2D36B; opacity: .35; } [data-land] .dz-land .q-steel { fill: #D7DBE0; } [data-land] .dz-land .q-steel2 { fill: #B9C0C8; } [data-theme="dark"][data-land] .dz-land .q-steel { fill: #7A8088; } [data-theme="dark"][data-land] .dz-land .q-steel2 { fill: #5E646C; } [data-land] .dz-land .q-freeway { fill: none; stroke: #8E8C88; stroke-width: 9; stroke-linecap: round; } [data-land] .dz-land .q-freewayedge { fill: none; stroke: #CFC8BB; stroke-width: 13; stroke-linecap: round; } [data-theme="dark"][data-land] .dz-land .q-freeway { stroke: #45433F; } [data-theme="dark"][data-land] .dz-land .q-freewayedge { stroke: #5A5650; } [data-land] .dz-land .q-pole { fill: #6E6A64; } [data-land] .dz-land .q-board { fill: #3A3A3A; } [data-land] .dz-land .q-board1 { fill: #F2B544; } [data-land] .dz-land .q-board2 { fill: #5CC7E0; } [data-land] .dz-land .q-boardsun { fill: #E8634F; } [data-land] .dz-land .q-walk { fill: #E2D9CB; } [data-land] .dz-land .q-starbox { fill: #5A4E60; } [data-land] .dz-land .q-star { fill: #F0C9A8; } [data-theme="dark"][data-land] .dz-land .q-walk { fill: #4A463F; } [data-land] .dz-land .q-truck { fill: #F2F2F2; } [data-land] .dz-land .q-truckwin { fill: #E8634F; } [data-land] .dz-land .q-bus3 { fill: #E8634F; } [data-land] .dz-land .q-skate2 { fill: #3F7BDB; } [data-land] .dz-land .q-bag { fill: #E86FA6; } [data-land] .dz-land .q-bag2 { fill: #F2B544; } [data-land] .dz-land .q-muralwall { fill: #EDE4D6; } [data-land] .dz-land .q-mural1 { fill: #E8634F; } [data-land] .dz-land .q-mural2 { fill: #3F7BDB; } [data-land] .dz-land .q-mural3 { fill: #F2B544; } [data-land] .dz-land .q-ladder { fill: none; stroke: #8A6446; stroke-width: 1.4; } [data-land] .dz-land .q-canvas { fill: #FFFFFF; stroke: #8A6446; stroke-width: .8; } [data-land] .dz-land .q-scope { fill: none; stroke: #3A3A3A; stroke-width: 3; stroke-linecap: round; } [data-theme="dark"][data-land] .dz-land .q-muralwall { fill: #6A645A; } [data-land] .dz-land .q-hillfar { fill: #C9C2AE; } [data-land] .dz-land .q-hillgreen { fill: #AFC193; } [data-theme="dark"][data-land] .dz-land .q-hillfar { fill: #4A463C; } [data-theme="dark"][data-land] .dz-land .q-hillgreen { fill: #3A4A30; } [data-land] .dz-land .q-hwsign { fill: #FFFFFF; font: 700 12px/1 system-ui, sans-serif; letter-spacing: 2px; } [data-theme="dark"][data-land] .dz-land .q-hwsign { fill: #D8D8D8; } [data-land] .dz-land .q-citygrid { fill: #D8CFC0; } [data-land] .dz-land .q-gridline { fill: none; stroke: #B9AE9C; stroke-width: .7; opacity: .7; } [data-theme="dark"][data-land] .dz-land .q-citygrid { fill: #45413A; } [data-theme="dark"][data-land] .dz-land .q-gridline { stroke: #5E584E; } [data-land] .dz-land .q-obs { fill: #F4F1EA; } [data-land] .dz-land .q-obssh { fill: #D2CCC0; } [data-land] .dz-land .q-dome { fill: #3E7B6E; } [data-land] .dz-land .q-obswin { fill: #6E7C88; } [data-theme="dark"][data-land] .dz-land .q-obs { fill: #A8A399; } [data-theme="dark"][data-land] .dz-land .q-dome { fill: #2A5A50; } [data-land] .dz-land .q-sunsetsky { fill: #F6C9A0; opacity: .75; } [data-theme="dark"][data-land] .dz-land .q-sunsetsky { fill: #6A4A3A; opacity: .6; } [data-land] .dz-land .q-travertine { fill: #EFE9DC; } [data-land] .dz-land .q-travsh { fill: #D4CBB8; } [data-land] .dz-land .q-travline { fill: none; stroke: #CFC5B0; stroke-width: .7; } [data-theme="dark"][data-land] .dz-land .q-travertine { fill: #9E978A; } [data-theme="dark"][data-land] .dz-land .q-travsh { fill: #7A7468; } [data-land] .dz-land .q-azalea { fill: #E86FA6; } [data-land] .dz-land .q-tramtrack { fill: none; stroke: #9C9486; stroke-width: 2; } [data-land] .dz-land .q-tram { fill: #F4F1EA; stroke: #9C9486; stroke-width: .8; } [data-theme="dark"][data-land] .dz-land .q-azalea { fill: #8E3E66; } [data-land] .dz-land .q-clock { fill: #FFFFFF; stroke: #6E5238; stroke-width: 1; } [data-land] .dz-land .q-clockhand { fill: none; stroke: #3A3A3A; stroke-width: 1; } [data-land] .dz-land .q-train { fill: #D9D6CE; } [data-land] .dz-land .q-trainstripe { fill: #3F7BDB; } [data-theme="dark"][data-land] .dz-land .q-train { fill: #7A776F; } [data-land] .dz-land .q-lotus { fill: #5E9A4A; } [data-land] .dz-land .q-lotusflower { fill: #F29BC2; } [data-land] .dz-land .q-fountain { fill: #EAF4FA; opacity: .85; } [data-land] .dz-land .q-swan { fill: #FFFFFF; } [data-land] .dz-land .q-swanneck { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; } [data-theme="dark"][data-land] .dz-land .q-lotus { fill: #3A5E30; } [data-theme="dark"][data-land] .dz-land .q-swan { fill: #D8D8D8; } [data-theme="dark"][data-land] .dz-land .q-swanneck { stroke: #D8D8D8; } [data-land] .dz-land .q-stilt { fill: none; stroke: #7A5E42; stroke-width: 1.6; } [data-land] .dz-land .q-lgtower { fill: #5CC7E0; } [data-land] .dz-land .q-lgroof { fill: #E8634F; } [data-land] .dz-land .q-surfboard { fill: #F2B544; } [data-land] .dz-land .q-surfboard2 { fill: #5CC7E0; } [data-land] .dz-land .q-net { fill: none; stroke: #3A3A3A; stroke-width: 1.2; } [data-land] .dz-land .q-ball { fill: #F2F2F2; stroke: #E8634F; stroke-width: .8; } /* 8 «Пейзаж» — раздел 7 «Санта-Моника» (map-land-s7.js): пирс, колесо обозрения, горки, пляж, каналы, площадка Маскл-Бич, закат над океаном */ [data-land] .dz-land .q-towel { fill: #E86FA6; } [data-land] .dz-land .q-castle { fill: #E3CB94; } [data-land] .dz-land .q-bucket { fill: #E8634F; } [data-land] .dz-land .q-can { fill: #E8634F; } [data-land] .dz-land .q-wheelleg { fill: none; stroke: #E8E4DC; stroke-width: 2.4; stroke-linecap: round; } [data-land] .dz-land .q-wheelrim { fill: none; stroke: #F4F1EA; stroke-width: 2.2; } [data-land] .dz-land .q-wheelrim2 { fill: none; stroke: #F2B544; stroke-width: 1; } [data-land] .dz-land .q-spoke { fill: none; stroke: #CFCBC1; stroke-width: .6; } [data-land] .dz-land .q-hub2 { fill: #6E6A64; } [data-land] .dz-land .q-cab1 { fill: #E8634F; } [data-land] .dz-land .q-cab2 { fill: #3F7BDB; } [data-land] .dz-land .q-cab3 { fill: #F2B544; } [data-land] .dz-land .q-cab4 { fill: #5CC7E0; } [data-theme="dark"][data-land] .dz-land .q-wheelleg { stroke: #8E8A82; } [data-theme="dark"][data-land] .dz-land .q-wheelrim { stroke: #A8A399; } [data-theme="dark"][data-land] .dz-land .q-wheelrim2 { stroke: #F6D36B; } [data-theme="dark"][data-land] .dz-land .q-spoke { stroke: #6A665E; } [data-theme="dark"][data-land] .dz-land .q-cab1 { fill: #A8473A; } [data-theme="dark"][data-land] .dz-land .q-cab2 { fill: #2F5A9E; } [data-theme="dark"][data-land] .dz-land .q-cab3 { fill: #B8883A; } [data-theme="dark"][data-land] .dz-land .q-cab4 { fill: #3E8EA0; } [data-land] .dz-land .q-coaster { fill: none; stroke: #E8634F; stroke-width: 2.4; stroke-linejoin: round; } [data-land] .dz-land .q-coasterleg { fill: none; stroke: #D9D6CE; stroke-width: 1; } [data-theme="dark"][data-land] .dz-land .q-coaster { stroke: #A8473A; } [data-theme="dark"][data-land] .dz-land .q-coasterleg { stroke: #6A665E; } [data-land] .dz-land .q-arcade { fill: #F2E3D2; } [data-land] .dz-land .q-arcaderoof { fill: #3F7BDB; } [data-land] .dz-land .q-sign66 { fill: #F4EFE6; stroke: #3A3A3A; stroke-width: .8; } [data-land] .dz-land .q-signtext { fill: #3A3A3A; font: 700 8px/1 system-ui, sans-serif; letter-spacing: .5px; } [data-theme="dark"][data-land] .dz-land .q-arcade { fill: #8E857A; } [data-theme="dark"][data-land] .dz-land .q-arcaderoof { fill: #2A4E80; } [data-theme="dark"][data-land] .dz-land .q-sign66 { fill: #A8A399; } [data-land] .dz-land .q-graf4 { fill: #5CB85C; } [data-land] .dz-land .q-grafline { fill: none; stroke: #3A3A3A; stroke-width: 1.2; stroke-linecap: round; } [data-land] .dz-land .q-bar { fill: none; stroke: #5A5A5A; stroke-width: 1.6; stroke-linecap: round; } [data-land] .dz-land .q-plate { fill: #3A3A3A; } [data-land] .dz-land .q-ring { fill: none; stroke: #E8634F; stroke-width: 1.2; } [data-land] .dz-land .q-gymfloor { fill: #D9C79A; } [data-land] .dz-land .q-fence4 { fill: none; stroke: #8E8C88; stroke-width: 1.2; } [data-theme="dark"][data-land] .dz-land .q-bar { stroke: #A8A399; } [data-theme="dark"][data-land] .dz-land .q-gymfloor { fill: #433B2B; } [data-theme="dark"][data-land] .dz-land .q-fence4 { stroke: #6A665E; } [data-land] .dz-land .q-topiary { fill: #4F8A3E; } [data-land] .dz-land .q-topiarylit { fill: #7FB05A; opacity: .8; } [data-theme="dark"][data-land] .dz-land .q-topiary { fill: #2E5226; } [data-theme="dark"][data-land] .dz-land .q-topiarylit { fill: #44683A; } [data-land] .dz-land .q-bulb { fill: #F6D36B; } [data-land] .dz-land .q-cart { fill: #F29BC2; } [data-land] .dz-land .q-guitar { fill: none; stroke: #6E4A30; stroke-width: 1.4; stroke-linecap: round; } [data-land] .dz-land .q-guitarbody { fill: #A0754E; } [data-theme="dark"][data-land] .dz-land .q-cart { fill: #8E4A6A; } [data-land] .dz-land .q-bikepath { fill: none; stroke: #D8CFC0; stroke-width: 10; stroke-linecap: round; } [data-land] .dz-land .q-bikepathw { fill: none; stroke: #D8CFC0; stroke-width: 16; stroke-linecap: round; } [data-land] .dz-land .q-bikelane { fill: none; stroke: #FFFFFF; stroke-width: 1; stroke-dasharray: 6 5; } [data-theme="dark"][data-land] .dz-land .q-bikepath, [data-theme="dark"][data-land] .dz-land .q-bikepathw { stroke: #4A463F; } [data-theme="dark"][data-land] .dz-land .q-bikelane { stroke: #8E8C88; } [data-land] .dz-land .q-bluff { fill: var(--q-lawn); } [data-land] .dz-land .q-bluffface { fill: #CDB688; } [data-land] .dz-land .q-pergola { fill: #F4EFE6; } [data-theme="dark"][data-land] .dz-land .q-bluffface { fill: #5A4E38; } [data-theme="dark"][data-land] .dz-land .q-pergola { fill: #9A958C; } [data-land] .dz-land .q-bowl { fill: #D9D6CE; } [data-land] .dz-land .q-bowlin { fill: #BDB8AE; } [data-theme="dark"][data-land] .dz-land .q-bowl { fill: #5A5650; } [data-theme="dark"][data-land] .dz-land .q-bowlin { fill: #4A4640; } [data-land] .dz-land .q-canal { fill: var(--q-w2); } [data-land] .dz-land .q-canalbank { fill: #D8CFC0; } [data-land] .dz-land .q-lawnfill { fill: var(--q-lawn); } [data-land] .dz-land .q-archbridge3 { fill: #FFFFFF; stroke: #D6CFC2; stroke-width: .8; } [data-land] .dz-land .q-kayak { fill: #F2B544; } [data-land] .dz-land .q-kayak2 { fill: #E8634F; } [data-land] .dz-land .q-duck2 { fill: #FFFFFF; } [data-theme="dark"][data-land] .dz-land .q-canalbank { fill: #4A463F; } [data-theme="dark"][data-land] .dz-land .q-archbridge3 { fill: #B8B4AC; stroke: #8E8A82; } [data-theme="dark"][data-land] .dz-land .q-duck2 { fill: #D8D8D8; } [data-land] .dz-land .q-dusk1 { fill: #F3B98E; opacity: .5; } [data-land] .dz-land .q-dusk2 { fill: #F29B6E; opacity: .55; } [data-land] .dz-land .q-dusk3 { fill: #EE7E5A; opacity: .6; } [data-land] .dz-land .q-sunbig { fill: #FFD27A; } [data-land] .dz-land .q-waterdusk { fill: #D98A6E; } [data-theme="dark"][data-land] .dz-land .q-dusk1 { fill: #6A4A3A; opacity: .6; } [data-theme="dark"][data-land] .dz-land .q-dusk2 { fill: #7A4632; opacity: .6; } [data-theme="dark"][data-land] .dz-land .q-dusk3 { fill: #8A4230; opacity: .6; } [data-theme="dark"][data-land] .dz-land .q-sunbig { fill: #F2B544; } [data-theme="dark"][data-land] .dz-land .q-waterdusk { fill: #4A3040; } [data-land] .dz-land .q-silhouette { fill: #3A2A30; } [data-land] .dz-land .q-silhouette2 { fill: none; stroke: #3A2A30; stroke-width: 1.4; } [data-land] .dz-land rect.q-silhouette2 { fill: #3A2A30; stroke: none; } [data-land] .dz-land .q-silline { fill: none; stroke: #3A2A30; stroke-width: 1.4; } [data-theme="dark"][data-land] .dz-land .q-silhouette { fill: #1E1719; } [data-theme="dark"][data-land] .dz-land .q-silhouette2, [data-theme="dark"][data-land] .dz-land .q-silline { stroke: #1E1719; } [data-theme="dark"][data-land] .dz-land rect.q-silhouette2 { fill: #1E1719; } /* стык разделов в 8: без «неба» наверху участка — раздел начинается с того же фона, каким кончается предыдущий (конец гаснет в --color-bg); иначе на стыке видна чёткая линия (PO 28.09 10:19) */ [data-land] .tr5 { background: linear-gradient(180deg, var(--color-bg) 0, color-mix(in srgb, var(--meadow-c) var(--meadow), var(--color-bg)) 170px, color-mix(in srgb, var(--meadow-c) var(--meadow), var(--color-bg)) calc(100% - 140px), var(--color-bg) 100%); } /* «Продолжить» на пейзаже — без подложки цвета страницы (map.css .bottom: 72 % снизу — сплошной фон): на пейзаже она ложилась светлой полосой от низа экрана до кнопки (PO 29.09 14:2x: «на ПК внизу белая полоса… думаю её можно убрать»). Кнопка — своя заливка и тень. */ [data-land] .bottom { background: none; } /* Пробный режим ?art=u1 (MAP-UNIT1-METHODS-29.09): предметы Arrow — готовые цвета, не классы темы; в тёмной теме приглушаем, как остальной пейзаж ночью (яркие белые паруса иначе «светятся» на тёмной воде) */ [data-theme="dark"][data-land] .dz-land .q-art { filter: brightness(.72) saturate(.85); }