/* * Mapa lokalizacji — style frontu. * * Zasady: * 1. Każdy selektor zaczyna się od .tm-app — to izoluje wtyczkę od motywu * i podnosi wagę reguł, więc style motywu nas nie nadpisują. * 2. Panel dostaje twardy reset dziedziczonych właściwości. Reset NIE obejmuje * wnętrza mapy, bo tam żyją własne elementy MapLibre (kontrolki, atrybucja) * i wyzerowanie ich popsułoby bibliotekę. * 3. Kolor akcentu i zaokrąglenie rogów wstrzykuje PHP jako --tm-dark * i --tm-radius na kontenerze. */ /* ================= 1. Kontener ================= */ .tm-app{ --tm-ink:#1b1917; --tm-ink-soft:#6d6862; --tm-line:#e6e2dc; --tm-panel-w:340px; --tm-font:'Outfit', system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --tm-serif:'Alike', Georgia,"Times New Roman",serif; display:flex !important; position:relative; width:100%; max-width:100%; margin:0; padding:0; border:0; overflow:hidden; isolation:isolate; background:#fff; border-radius:var(--tm-radius,10px); color:var(--tm-ink); font-family:var(--tm-font); font-size:16px; font-weight:400; font-style:normal; line-height:1.4; letter-spacing:normal; word-spacing:normal; text-transform:none; text-align:left; box-sizing:border-box; /* Renderowanie tekstu. Wszystkie te właściwości są dziedziczone, a motywy zwykle ustawiają je globalnie na — wtedy te same fonty w tych samych rozmiarach wyglądają na cieńsze albo inaczej rozstrzelone niż w wersji bez wtyczki. Przywracamy zachowanie domyślne przeglądarki. */ -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; text-rendering:auto; font-stretch:normal; font-variant:normal; font-feature-settings:normal; font-kerning:auto; } .tm-app, .tm-app *, .tm-app *::before, .tm-app *::after{ box-sizing:border-box; } /* ================= 2. Reset panelu ================= Wnętrze mapy celowo pominięte — MapLibre stylizuje tam własne elementy. */ /* Reset celowany WYŁĄCZNIE w nasze dwa przyciski (zakładka i wiersz listy) — to jedyne elementy, w które motywy realnie wstrzykują style. Wcześniejszy reset na gwiazdce obejmował każdy element panelu i sam psuł nasz wygląd: raz zabrał wielkie litery etykietom, raz przykrył tło karty inwestycji. Wartości poniżej to dokładnie te, których używa wersja bez wtyczki. */ .tm-app .tm-panel .tm-tab, .tm-app .tm-panel .tm-row{ -webkit-appearance:none; appearance:none; box-shadow:none; text-decoration:none; text-shadow:none; outline:0; float:none; text-indent:0; vertical-align:baseline; cursor:pointer; -webkit-tap-highlight-color:transparent; /* Świadomie BEZ min-height/min-width — to właśnie one pozwalają elementowi flex skurczyć się poniżej własnej zawartości, przez co przycisk robi się spłaszczony i ścięty. Wersja bez wtyczki ich nie ustawia. */ } /* Elementy tekstowe w środku przycisków przejmują typografię po rodzicu, zamiast łapać wartości narzucone przez motyw. */ .tm-app .tm-panel .tm-tab-label, .tm-app .tm-panel .tm-txt, .tm-app .tm-panel .tm-name, .tm-app .tm-panel .tm-meta{ margin:0; padding:0; border:0; background:none; text-transform:inherit; letter-spacing:inherit; text-align:inherit; text-decoration:none; text-shadow:none; } .tm-app .tm-panel svg{ flex:0 0 auto; } /* Widoczny fokus dla klawiatury — reset zdjął obrys motywu. */ .tm-app .tm-panel button:focus-visible{ outline:2px solid var(--tm-dark,#4D403A); outline-offset:-2px; } /* ================= 3. Układ ================= */ /* Narożniki nakładamy na elementy, które je tworzą, a nie tylko na kontener. Karta inwestycji ma position:sticky z z-index, więc trafia na osobną warstwę kompozycji — a taka warstwa potrafi uciec spod zaokrąglonego overflow:hidden rodzica i róg wychodzi kanciasty. */ .tm-app .tm-map-wrap{ position:relative; flex:1 1 auto; min-width:0; margin:0; padding:0; overflow:hidden; border-top-left-radius:var(--tm-radius,10px); border-bottom-left-radius:var(--tm-radius,10px); } .tm-app .tm-map{ position:absolute; inset:0; margin:0; padding:0; } .tm-app .tm-panel{ flex:0 0 var(--tm-panel-w); width:var(--tm-panel-w); display:flex; flex-direction:column; margin:0; padding:0; overflow:hidden; background:#fff; border-left:1px solid var(--tm-line); border-top-right-radius:var(--tm-radius,10px); border-bottom-right-radius:var(--tm-radius,10px); } /* ================= 4. Zakładki ================= */ .tm-app .tm-panel .tm-tabs{ /* Pasek zakładek nigdy się nie kurczy. Jako element flex w kolumnowym panelu mógłby zostać ściśnięty poniżej wysokości zawartości, a wtedy align-items:stretch spłaszcza przyciski i ścina je od dołu. Wolne miejsce ma pochłaniać przewijana lista, nie ten rząd. */ flex:0 0 auto; display:flex; flex-wrap:nowrap; align-items:flex-start; gap:4px; padding:10px 10px 6px; border-bottom:1px solid var(--tm-line); overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--tm-dark,#4D403A) #ece8e3; background:#fff; border-top-right-radius:var(--tm-radius,10px); } .tm-app .tm-panel .tm-tabs::-webkit-scrollbar{ height:7px; } .tm-app .tm-panel .tm-tabs::-webkit-scrollbar-track{ background:#ece8e3; border-radius:4px; } .tm-app .tm-panel .tm-tabs::-webkit-scrollbar-thumb{ background:var(--tm-dark,#4D403A); border-radius:4px; } .tm-app .tm-panel .tm-tab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 13px; margin:0 0 6px; border:0; border-radius:6px; background:transparent; color:var(--tm-ink-soft); font-family:var(--tm-font); font-size:11px; font-weight:500; line-height:1; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; transition:background .15s, color .15s; } .tm-app .tm-panel .tm-tab:hover{ background:#f4f2ef; color:var(--tm-ink); } .tm-app .tm-panel .tm-tab.is-active{ background:var(--tm-dark,#4D403A); color:#fff; } .tm-app .tm-panel .tm-tab .tm-i{ width:14px; height:14px; fill:currentColor; } .tm-app .tm-panel .tm-tab-label{ display:inline; color:inherit; font:inherit; letter-spacing:inherit; } .tm-app .tm-panel .tm-i--chev{ fill:none; } /* ================= 5. Lista ================= */ .tm-app .tm-panel .tm-list{ /* min-height:0 pozwala liście oddać miejsce zamiast rozpychać panel — to ona ma się kurczyć i przewijać, nie pasek zakładek. */ flex:1 1 auto; min-height:0; margin:0; padding:0; overflow-y:auto; overscroll-behavior:contain; background:#fff; border-bottom-right-radius:var(--tm-radius,10px); } .tm-app .tm-panel .tm-list::-webkit-scrollbar{ width:8px; } .tm-app .tm-panel .tm-list::-webkit-scrollbar-thumb{ background:#cfcac3; border-radius:4px; } .tm-app .tm-panel .tm-row{ width:100%; display:flex; align-items:center; gap:13px; padding:15px 16px; border:0; border-bottom:1px solid var(--tm-line); background:#fff; color:var(--tm-ink); font-family:var(--tm-font); font-size:16px; text-align:left; transition:background .15s; } .tm-app .tm-panel .tm-row:hover{ background:#f7f5f2; } .tm-app .tm-panel .tm-row.is-active{ background:#efece7; } .tm-app .tm-panel .tm-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:5px; display:grid; place-items:center; overflow:hidden; } .tm-app .tm-panel .tm-ic .tm-i{ width:18px; height:18px; fill:#fff; } .tm-app .tm-panel .tm-txt{ display:block; flex:1 1 auto; min-width:0; } .tm-app .tm-panel .tm-name{ display:block; font-size:14px; font-weight:600; line-height:1.3; color:var(--tm-ink); } .tm-app .tm-panel .tm-meta{ display:block; margin-top:3px; font-size:12px; font-weight:400; line-height:1.4; color:var(--tm-ink-soft); } .tm-app .tm-panel .tm-chev{ flex:0 0 auto; width:8px; height:13px; opacity:.35; } .tm-app .tm-panel .tm-chev .tm-i{ width:8px; height:13px; fill:none; stroke:var(--tm-ink); stroke-width:2; } /* --- Karta inwestycji --- Reguła .tm-row.is-active ma tę samą wagę co .tm-row--home, więc karta startowa (aktywna od wejścia) przejmowała jasne tło i biały tekst na niej znikał. Stąd osobna, mocniejsza reguła na stan aktywny karty. */ .tm-app .tm-panel .tm-row--home{ position:sticky; top:0; z-index:2; border-bottom:0; background:var(--tm-dark,#4D403A); } .tm-app .tm-panel .tm-row--home:hover, .tm-app .tm-panel .tm-row--home.is-active{ background:var(--tm-dark,#4D403A); filter:brightness(1.15); } .tm-app .tm-panel .tm-row--home .tm-name{ color:#fff; font-size:16px; letter-spacing:.01em; } .tm-app .tm-panel .tm-row--home .tm-meta{ color:rgba(255,255,255,.62); } .tm-app .tm-panel .tm-row--home .tm-ic{ background:transparent; border-radius:50%; padding:0; border:2px solid rgba(255,255,255,.72); } .tm-app .tm-panel .tm-row--home .tm-ic svg{ width:100%; height:100%; display:block; } .tm-app .tm-panel .tm-row--home .tm-chev{ opacity:.6; } .tm-app .tm-panel .tm-row--home .tm-chev .tm-i{ stroke:#fff; } .tm-app .tm-panel .tm-empty{ display:block; padding:26px 18px; font-family:var(--tm-font); font-size:13px; line-height:1.5; color:var(--tm-ink-soft); } /* ================= 6. Pinezki ================= Element pinezki musi mieć position:absolute — MapLibre pozycjonuje go transformem względem warstwy mapy. position:relative wyrzuca pinezki z warstwy i „odklejają się” przy obracaniu oraz przesuwaniu. */ .tm-app .tm-mk, .tm-app .tm-mk *{ margin:0; padding:0; border:0; font-family:var(--tm-serif); text-transform:none; box-sizing:border-box; } .tm-app .tm-mk{ position:absolute; top:0; left:0; width:38px; height:47px; cursor:pointer; } .tm-app .tm-mk.is-active{ z-index:6; } .tm-app .tm-mk-dot{ position:absolute; top:0; left:0; width:38px; height:38px; border-radius:50%; background:var(--tm-dark,#4D403A); border:2px solid rgba(255,255,255,.92); box-shadow:0 5px 14px rgba(0,0,0,.35); display:grid; place-items:center; transition:transform .18s; } .tm-app .tm-mk:hover .tm-mk-dot, .tm-app .tm-mk.is-active .tm-mk-dot{ transform:scale(1.14); } .tm-app .tm-mk-dot .tm-i{ width:17px; height:17px; fill:#fff; display:block; } .tm-app .tm-mk-tail{ position:absolute; left:50%; top:38px; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid var(--tm-mk,#4D403A); } .tm-app .tm-mk-label{ position:absolute; left:48px; top:19px; transform:translateY(-50%); padding:6px 11px; border-radius:3px; background:var(--tm-dark,#4D403A); color:#fff; font-family:var(--tm-serif); font-size:12px; font-weight:400; line-height:1.4; letter-spacing:.06em; font-variant:small-caps; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s; box-shadow:0 4px 12px rgba(0,0,0,.28); } /* Etykieta przeskakuje na lewo przy prawej krawędzi mapy. */ .tm-app .tm-mk.is-flip .tm-mk-label{ left:auto; right:48px; } .tm-app .tm-mk:hover .tm-mk-label, .tm-app .tm-mk.is-active .tm-mk-label{ opacity:1; } /* Pinezka inwestycji — logo wypełnia całe kółko. */ .tm-app .tm-mk--home{ width:64px; height:64px; z-index:5; } .tm-app .tm-mk--home .tm-mk-dot{ width:64px; height:64px; padding:0; overflow:hidden; background:transparent; border:2px solid rgba(255,255,255,.92); box-shadow:0 8px 22px rgba(0,0,0,.42); } .tm-app .tm-mk--home .tm-mk-dot svg{ width:100%; height:100%; display:block; } .tm-app .tm-mk--home::before, .tm-app .tm-mk--home::after{ content:""; position:absolute; left:32px; top:32px; width:64px; height:64px; transform:translate(-50%,-50%); border-radius:50%; background:var(--tm-dark,#4D403A); opacity:.32; box-shadow:0 0 0 2px var(--tm-dark,#4D403A); animation:tmPulse 2s cubic-bezier(.2,.6,.35,1) infinite; pointer-events:none; z-index:-1; } .tm-app .tm-mk--home::after{ animation-delay:1s; } /* zawsze połowa czasu trwania */ @keyframes tmPulse{ 0%{ transform:translate(-50%,-50%) scale(.72); opacity:.55; } 65%{ opacity:.2; } 100%{ transform:translate(-50%,-50%) scale(2.9); opacity:0; } } /* ================= 7. Drobiazgi ================= */ .tm-app .maplibregl-ctrl-attrib{ font-size:10px; font-family:var(--tm-font); } .tm-app .tm-pick{ position:absolute; left:12px; bottom:34px; z-index:10; max-width:76%; padding:10px 13px; border-radius:6px; background:var(--tm-dark,#4D403A); color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.6; box-shadow:0 4px 14px rgba(0,0,0,.35); user-select:all; cursor:text; } /* ================= 8. Telefon ================= */ @media (max-width:760px){ .tm-app{ flex-direction:column; } /* Panel ląduje pod mapą, więc narożniki przenoszą się w inne miejsca. */ .tm-app .tm-map-wrap{ flex:0 0 55%; height:55%; border-radius:var(--tm-radius,10px) var(--tm-radius,10px) 0 0; } .tm-app .tm-panel{ flex:1 1 auto; width:100%; border-left:0; border-top:1px solid var(--tm-line); border-radius:0 0 var(--tm-radius,10px) var(--tm-radius,10px); } .tm-app .tm-panel .tm-tabs{ border-top-right-radius:0; } .tm-app .tm-panel .tm-list{ border-bottom-left-radius:var(--tm-radius,10px); border-bottom-right-radius:var(--tm-radius,10px); } .tm-app .tm-mk-label{ display:none; } } /* Szanujemy ustawienie systemowe „ogranicz animacje”. */ @media (prefers-reduced-motion:reduce){ .tm-app .tm-mk--home::before, .tm-app .tm-mk--home::after{ animation:none; } .tm-app .tm-panel .tm-row, .tm-app .tm-panel .tm-tab, .tm-app .tm-mk-dot, .tm-app .tm-mk-label{ transition:none; } }