/* mapa-main.html — pełnoekranowa mapa (wydzielona ze strony głównej) */ /* * Mapa jest zawsze ciemna (kafle i sama mapa mają wpisany na sztywno #0d0618), * więc płótno strony też musi być ciemne w OBU motywach. W trybie jasnym * theme.css ustawia `html { background-color: var(--bg-primary) }` na #f1f5f9 — * a że ma własne tło, nie propaguje się ono na płótno i pod mapą * wychodził biały pas. Dlatego przypinamy ciemne tło na i . */ html:has(body.map-main-page) { background-color: #0d0618; } .map-main-page { min-height: 100vh; display: flex; flex-direction: column; background: #0d0618; color: var(--text-primary, #f0e0ff); } /* Topbar relative w HTML — bez podwójnego padding-top z navbar.css (fixed) */ body.map-main-page:has(header.topbar) { padding-top: 0; } body.map-main-page header.topbar { position: sticky; top: 0; z-index: 300; min-height: 0; height: auto; padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: 8px; } .map-main-top { flex-shrink: 0; padding: 0.35rem 12px 0.4rem; } .map-main-back { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; font-weight: 600; color: var(--text-muted, rgba(240, 224, 255, 0.55)); text-decoration: none; margin-bottom: 0.5rem; } .map-main-back:hover { color: var(--cyan, #00d4f5); } .map-main-head h1 { font-family: Syne, sans-serif; font-weight: 800; font-size: clamp(1.15rem, 4vw, 1.45rem); letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 0.25rem; } .map-main-head h1 span { color: var(--accent, #b026ff); } .map-main-head p { font-size: 0.88rem; color: var(--text-muted, rgba(240, 224, 255, 0.55)); line-height: 1.45; max-width: 36rem; } .map-main-section { flex: 1; display: flex; flex-direction: column; padding: 0 12px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 0; } .map-main-section .map-shell { flex: 1; height: auto; min-height: min(72vh, 640px); max-height: none; } .map-section { padding: 0; position: relative; z-index: 5; flex: 1; display: flex; min-height: 0; } .map-shell { position: relative; width: 100%; flex: 1; min-height: 320px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(176, 38, 255, 0.18); background: #0d0618; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(176, 38, 255, 0.06); } /* * SVG wypełnia kafel przez pozycjonowanie absolutne, a nie `height:100%`. * Shell ma `height:auto` (rozmiar daje mu dopiero min-height/flex), więc procentowa * wysokość dziecka nie miała się do czego odnieść i mapa zwijała się do proporcji * z atrybutów width/height (800×150) — kilkadziesiąt pikseli zamiast pełnej wysokości. */ .map-shell svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; } .map-shell.map-shell-pulse { box-shadow: 0 0 0 2px rgba(0, 212, 245, 0.5), 0 20px 60px rgba(0, 0, 0, 0.5); transition: box-shadow 0.35s ease; } .map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(240, 224, 255, 0.5); } .map-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(12, 14, 20, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 100px; padding: 10px 22px; font-size: 14px; color: rgba(240, 224, 255, 0.5); white-space: nowrap; pointer-events: none; display: none; } .map-hint--guide { display: block; animation: map-blink 3s ease-in-out infinite; } .map-hint.is-error { display: block; animation: map-blink 3s ease-in-out infinite; } @keyframes map-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .map-tip { position: absolute; pointer-events: none; background: #1a1e2a; border: 1px solid rgba(176, 38, 255, 0.35); color: #fff; font-family: Syne, sans-serif; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 10px; white-space: nowrap; opacity: 0; transition: opacity 0.1s; z-index: 50; } .eu-c { fill: #1a0035; stroke: #3d008a; stroke-width: 0.55; cursor: pointer; transition: fill 0.16s; } .eu-c:hover { fill: #4a00aa; } .eu-c.hl { fill: #3d0080; stroke: #b026ff; stroke-width: 1.5; } .van-layer path, .van-layer use { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .van-layer { display: none; } } .map-cta-bus { position: fixed; top: calc(68px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 250; isolation: isolate; border: none; cursor: pointer; overflow: hidden; font-family: Syne, sans-serif; font-weight: 800; color: #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(176, 38, 255, 0.45), 0 0 0 1px rgba(0, 212, 245, 0.12); opacity: 0; transform: scale(0.88) translateY(-6px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease, width 0.42s cubic-bezier(0.4, 0, 0.2, 1), height 0.42s cubic-bezier(0.4, 0, 0.2, 1), padding 0.42s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.42s cubic-bezier(0.4, 0, 0.2, 1); width: 56px; height: 56px; padding: 0; border-radius: 50%; background: linear-gradient(135deg, #b026ff 0%, #7a00cc 100%); border: 2px solid rgba(0, 212, 245, 0.55); } .map-cta-bus.is-visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .map-cta-bus.is-pop-in { animation: mapCtaPopIn 0.62s cubic-bezier(0.34, 1.45, 0.64, 1) both; } @keyframes mapCtaPopIn { 0% { opacity: 0; transform: scale(0.35); box-shadow: 0 0 0 0 rgba(0, 212, 245, 0.55), 0 8px 28px rgba(176, 38, 255, 0.45); } 45% { opacity: 1; transform: scale(1.14); box-shadow: 0 0 0 14px rgba(0, 212, 245, 0.25), 0 0 32px rgba(255, 204, 0, 0.35), 0 8px 28px rgba(176, 38, 255, 0.55); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 8px 28px rgba(176, 38, 255, 0.45), 0 0 0 1px rgba(0, 212, 245, 0.12); } } .map-cta-bus.is-pop-in::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; pointer-events: none; background: radial-gradient(circle, rgba(255, 204, 0, 0.45) 0%, rgba(0, 212, 245, 0.2) 35%, transparent 68%); animation: mapCtaBurst 0.55s ease-out both; z-index: -1; } @keyframes mapCtaBurst { 0% { opacity: 0.95; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } } .map-cta-bus.is-expanded { width: 176px; height: 48px; padding: 0 20px 0 14px; border-radius: 100px; } .map-cta-bus__label { display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; } .map-cta-bus.is-expanded .map-cta-bus__label { opacity: 1; visibility: visible; pointer-events: auto; } .map-cta-bus__pin { font-size: 1rem; flex-shrink: 0; } .map-cta-bus__text { font-size: 14px; letter-spacing: -0.02em; } .map-cta-bus__mini { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease 0.08s, visibility 0.22s ease 0.08s; } .map-cta-bus.is-collapsed .map-cta-bus__mini { opacity: 1; visibility: visible; transition-delay: 0.28s; } .map-cta-bus.is-expanded .map-cta-bus__mini { opacity: 0; visibility: hidden; transition-delay: 0s; pointer-events: none; } /* Bez is-expanded i bez is-collapsed — nie zostawiaj pustego przycisku */ .map-cta-bus.is-visible:not(.is-expanded):not(.is-collapsed) .map-cta-bus__mini { opacity: 1; visibility: visible; } .map-cta-road-track { position: absolute; bottom: 7px; left: 50%; width: 42px; height: 16px; margin-left: -21px; overflow: hidden; border-radius: 4px; opacity: 0.9; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .map-cta-road-lanes { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 100%; padding-bottom: 1px; } .map-cta-lane { display: block; height: 2px; border-radius: 1px; background: repeating-linear-gradient( 90deg, rgba(255, 204, 0, 0.15) 0, rgba(255, 204, 0, 0.15) 5px, #ffcc00 5px, #ffcc00 10px, rgba(255, 204, 0, 0.15) 10px, rgba(255, 204, 0, 0.15) 15px ); background-size: 15px 2px; animation: mapCtaLaneMove 0.28s linear infinite; } .map-cta-lane:nth-child(2) { animation-duration: 0.24s; opacity: 0.85; } .map-cta-lane:nth-child(3) { animation-duration: 0.32s; opacity: 0.7; } @keyframes mapCtaLaneMove { from { background-position: -15px 0; } to { background-position: 0 0; } } .map-cta-bus__van { position: relative; z-index: 2; font-size: 1.35rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(176, 38, 255, 0.65)); animation: mapCtaBusHighway 0.55s ease-in-out infinite; } @keyframes mapCtaBusHighway { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-2px) translateX(1px); } } .map-cta-bus:hover { filter: brightness(1.06); } .map-cta-bus:focus-visible { outline: 2px solid #00d4f5; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .map-cta-bus, .map-cta-bus__label, .map-cta-bus__mini, .map-cta-bus__van, .map-cta-lane { transition: none; animation: none; } .map-cta-bus.is-pop-in, .map-cta-bus.is-pop-in::before { animation: none; } .map-cta-bus.is-collapsed .map-cta-bus__mini { opacity: 1; visibility: visible; } } .map-intro-chmurka { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; } .map-intro-chmurka[hidden] { display: none !important; } .map-intro-chmurka.is-open { pointer-events: auto; opacity: 1; visibility: visible; } .map-intro-chmurka__backdrop { position: absolute; inset: 0; background: rgba(13, 6, 24, 0.75); backdrop-filter: blur(5px); } .map-intro-chmurka__card { position: relative; z-index: 1; max-width: 320px; width: 100%; padding: 1.35rem 1.5rem 1.2rem; background: linear-gradient(165deg, rgba(26, 0, 53, 0.98), rgba(13, 6, 24, 0.96)); border: 1px solid rgba(176, 38, 255, 0.45); border-radius: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); text-align: center; transform: scale(0.92) translateY(10px); transition: transform 0.38s cubic-bezier(0.34, 1.35, 0.64, 1); } .map-intro-chmurka.is-open .map-intro-chmurka__card { transform: scale(1) translateY(0); } .map-intro-chmurka__text { font-family: Syne, sans-serif; font-weight: 800; font-size: clamp(1rem, 3.6vw, 1.12rem); line-height: 1.4; color: #f0e0ff; margin: 0 0 1rem; } .map-intro-chmurka__ok { font-family: Syne, sans-serif; font-weight: 800; font-size: 14px; padding: 0.65rem 2.25rem; border: 1px solid rgba(0, 212, 245, 0.45); border-radius: 100px; cursor: pointer; background: linear-gradient(135deg, #b026ff 0%, #7a00cc 100%); color: #fff; min-width: 120px; }