/* css/layout.css */ /* ========================================================================== 🚀 HLAVNÝ KONFIGURÁTOR - PEVNÝ POMER STRÁN 16 : 9 (Absolute Overlays) ========================================================================== */ /* * Presne 16:9 - rovnaký pomer ako majú fasádne JPG obrázky (1920x1080) aj * biely orámovaný rám v host-demo.html (.configurator-frame-wrapper). * Vďaka zhode pomerov sa obrázok vždy vyplní presne, bez orezania a bez * medzier, žiadny prepočet crop-offsetu pre percentuálne súradnice pinov * nie je potrebný - fungujú priamo (Suradnica_X/Y ÷ 1920/1080 × 100%). * * Aspect ratio sa počíta voči SKUTOČNÉMU kontajneru (.app-padding, cez * cqw/cqh), nie voči window/browser viewportu. Šírka aj výška vychádzajú * z toho, čo sa reálne zmestí do iframu; pri zmene šírky iframu sa výška * automaticky prispôsobí (žiadna pevná desktopová hodnota, žiadny * hardcoded 1920x1080 layout). */ :root { /* Zdieľaná medzera medzi logo boxom a filter panelom (ľavá strana, 16px top loga + ~38px výška loga + 18px = 72px top filtra) aj medzi 'Prémiová Rezidencia' a 'Dostupné byty' panelmi (pravá strana) - obe strany musia byť vizuálne konzistentné. */ --panel-gap: 18px; /* Horizontálny padding tlačidiel spodného radu dimenzovaných podľa textu - .view-btn v režime .pohlady-viac a zdieľané tlačidlá (VÝBER BLOKU/MAPA, VR/GALÉRIE) pri K>1 (.ui-k-aktivne, nižšie). Jeden zdroj pravdy pre hodnotu. */ --bottom-row-btn-padding-x: calc(12px * var(--ui-scale-kompenzacia, 1)); } #app.configurator-ratio { position: relative; /* Kritické pre plávanie panelov nad celoobrazovkovým domom */ aspect-ratio: 16 / 9; width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); max-width: 100%; max-height: 100%; background: var(--app-background); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; /* Vlastný query kontajner - vnútorné panely (filter, zoznam bytov, spodná lišta) tak môžu reagovať na SKUTOČNÚ šírku/výšku konfigurátora (napr. v úzkom iframe), nie iba na window viewport. */ container-type: size; container-name: configurator; } /* ========================================================================== 🎬 PRECHOD MEDZI HLAVNÝM KONFIGURÁTOROM A POHĽADOM OKOLIE #main-configurator-view zoskupuje fasádnu scénu + celé bežné UI (filter, pravý panel, spodná lišta, info/Okolie ikonky) do JEDNÉHO animovaného celku - kríženie s #okolie-overlay (css/okolie.css) riadi js/okolie.js pridaním/odobraním .mcv-hidden na tomto elemente. Logo (#app-logo) je ZÁMERNE MIMO tejto skupiny (index.html) - nemení sa, viditeľné vždy rovnako, nezávisle od prechodu (nezmenená požiadavka z predošlého zadania OKOLIE). ========================================================================== */ #main-configurator-view { position: absolute; inset: 0; transform-origin: center center; transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), filter 0.65s cubic-bezier(0.4, 0, 0.2, 1); } /* Stav počas otvoreného OKOLIE (aj v priebehu prechodu do/z neho) - zväčšenie + vyblednutie + rozmazanie presne podľa zadania. */ #main-configurator-view.mcv-hidden { transform: scale(1.15); opacity: 0; filter: blur(6px); pointer-events: none; } /* ========================================================================== 🖥️ "CHROME" appky (filter/pravý panel/lišta pohľadov) - SAMOSTATNÝ animovaný wrapper, ODDELENÝ od .center-visual-zone (fasádna scéna) v rámci #main-configurator-view. Virtuálne prehliadky/Galéria (js/vr-tours.js, otvorVrTours) skrývajú IBA TENTO chrome pri otvorení z hlavného módu - fasádna scéna (aktívny pohľad svetovej strany, obrázok aj video) ostáva VŽDY nedotknutá/viditeľná pod lightboxom (sekcia zadania "VR/Galéria nesmú meniť pozaďový pohľad svetovej strany"). Rovnaká vizuálna "receptúra" (scale/opacity/blur, 0.65s) ako #main-configurator-view.mcv- hidden vyššie - OKOLIE naďalej skrýva CELÉ #main-configurator-view (fasádu aj tento chrome naraz, bezo zmeny), tu ide o NEZÁVISLÝ, užší variant rovnakého efektu. position:absolute;inset:0 zachováva presne ten istý súradnicový systém pre position:absolute potomkov (#configurator-filters/#right-panel-stack/#facade-view-switcher), aký mali predtým priamo v #main-configurator-view. */ #main-configurator-chrome { position: absolute; inset: 0; transform-origin: center center; transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), filter 0.65s cubic-bezier(0.4, 0, 0.2, 1); } #main-configurator-chrome.mcv-chrome-hidden { transform: scale(1.15); opacity: 0; filter: blur(6px); pointer-events: none; } /* ========================================================================== 🏢 PANEL B: VIZUÁL BUDOVY (Podklad na úplnom spodku scény) ========================================================================== */ .center-visual-zone { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Podkladová vrstva */ display: block; } #configurator-content { width: 100%; height: 100%; position: relative; } .facade-media-element { width: 100%; height: 100%; object-fit: cover; /* Dom pohltí 100% monitora bez bielych pásov */ pointer-events: none; } /* ========================================================================== 🏔️ LOGO (Hore vľavo, nad hlavným filtrom) ========================================================================== */ /* * Logo dostáva vlastné tmavé dymové sklo (rovnaký jazyk ako ostatné panely), * aby zostalo plne čitateľné bez ohľadu na to, čo je práve pod ním vo * fasádnej fotke (napr. svetlá obloha) - predtým bol text bez pozadia * miestami takmer nečitateľný ("orezané" logo). */ #app-logo { position: absolute; top: 16px; left: 16px; /* Rovnaká šírka ako filter panel pod ním (#configurator-filters) - logo box tak vizuálne lícuje s panelom, nie je len "hugnutý" na obsah. justify-content: center drží ikonu+text ako centrovanú skupinu na stred tohto širšieho rámika. */ width: clamp(160px, 42cqw, 300px); z-index: 15; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-strong); /* Sekcia zadania "'BYTY RUŽINOV' logo/nadpis ako button..." - PREDTÝM pointer-events:none (logo bolo čisto dekoratívne, klik cezeň "prepadol" na fasádu pod ním). TERAZ klikateľné (otvára lightbox s popisom projektu, js/ui.js) - vizuálny vzhľad/rozmer/umiestnenie sa týmto NEMENÍ (zadanie explicitne), iba interaktivita + cursor. */ pointer-events: auto; cursor: pointer; user-select: none; padding: 8px 16px; background: rgb(var(--surface-panel-rgb) / 0.6); border: 1px solid rgb(var(--hairline-rgb) / 0.06); border-radius: 12px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Sekcia zadania "Zviditeľniť zlatý border na CTA AJ na #app-logo" - #app-logo a #compare-contact-cta (css/porovnanie.css) zdieľajú ten istý "glass" jazyk (--surface-panel-rgb pozadie, --hairline-rgb border, blur(16px), border-radius:12px) - TERAZ zdieľajú aj tento zlatý inset prstenec, rovnaká farba (--accent-strong-rgb, base.css) aj rovnaká alfa (0.85) ako CTA v jeho pokojovom (nehoverovom) stave. Pôvodný neutrálny hĺbkový tieň (0 10px 24px) ostáva bezo zmeny - gold vrstva je PRIDANÁ ako ďalšia box-shadow vrstva, nie náhrada. */ box-shadow: inset 0 0 0 1px rgb(var(--accent-strong-rgb) / 0.85), 0 10px 24px rgba(0, 0, 0, 0.35); } .logo-icon { width: 26px; height: 20px; color: rgb(var(--accent-rgb)); flex-shrink: 0; } .logo-text { font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-body); white-space: nowrap; } .logo-text strong { color: var(--text-strong); font-weight: 700; margin-right: 3px; } /* ========================================================================== 🌗🗺️🧱 DEŇ/NOC + MAPA + VÝBER BLOKU - ľavý dolný roh. Zrkadlový princíp k .vr-gallery-corner nižšie (pravý dolný roh): samostatné satelitné tlačidlo na VONKAJŠOM okraji (.mapa-blok-corner, #den-noc-blok-group) + rámčekový skupinový kontajner vedľa neho (#mapa-blok-group, .btn-group-box, zdieľaná trieda nižšie) - sekcia zadania "Nové poradie ľavej strany bottom row". VÝBER BLOKU (#blok-vyber-trigger, index.html, js/vyber- blokov.js) je TERAZ VŽDY viditeľný (sekcia zadania "'Výber blokov' je vždy úvodná obrazovka" - obrazovka, na ktorú sa vracia, je vždy dosiahnuteľná) - kontajner aj bez zmeny vlastnej šírky prirodzene prerozdelí priestor medzi 1 alebo 2 vnútornými buttons (flex:1 na oboch, rovnaký princíp ako #vr-tours-trigger/#gallery-trigger). MAPA otvára OKOLIE; text sa mení na "Vybrať byt" keď je OKOLIE otvorené (toggle, js/ okolie.js). Celý kontajner je MIMO #main-configurator-view (index.html) - musí zostať funkčný aj počas OKOLIE prechodu (zatvára ho) AJ počas obrazovky Výber blokov. ========================================================================== */ .mapa-blok-corner { position: absolute; /* Výška/spodný okraj zhodné s #facade-view-switcher (40px/bottom:24px na desktope) - obe sedia v tom istom spodnom riadku appky (sekcia zadania "Finálny farebný štýl", bod 4 - zjednotená výška naprieč celým spodným riadkom/skupinami). */ bottom: 24px; left: 16px; /* Rovnaká šírka ako logo/filter panel nad ním - konzistentné so zvyškom ľavého stĺpca. Šírka OSTÁVA rovnaká bez ohľadu na to, či #mapa-blok-group obsahuje 1 alebo 2 buttons (rovnaký princíp ako .vr-gallery-corner) - žiadna layout zmena potrebná pri budúcom zapnutí VÝBER BLOKU. */ /* K rozšíri aj ŠÍRKU, nie iba výšku nižšie - ak by v budúcnosti pribudlo VÝBER BLOKU (2 buttons v tomto riadku, dnes display:none), zväčšený text by sa bez zväčšenia kontajnera navzájom zrážal (rovnaký dôvod ako #facade-view-switcher vyššie). Sekcia zadania "Rozšíriť šírku #okolie-trigger" - horný strop 300px-> 350px - dôvod: "Čo je nablízku?" (#okolie-trigger, 50/50 zdieľané s #blok-vyber-trigger cez #mapa-blok-group) pretekalo (scrollWidth> clientWidth, namerané priamo) - #blok-vyber-trigger ("Výber bloku") pritom malo takmer nulovú rezervu, takže čisté prerozdelenie POMERU flex-grow bez zväčšenia CELKOVÉHO priestoru by problém iba presunulo naň. Presná hodnota (350, nie okrúhlejšia menšia) bola dolaďovaná priamym opakovaným meraním scrollWidth/clientWidth OBOCH tlačidiel (nie jednorazovým výpočtom) - viacero pokusov s menším stropom (320/340) stále mierne pretekalo, teoretický odhad z Range. getBoundingClientRect() na samotnom texte (bez vplyvu boxu) dával nižšie číslo, než čo scrollWidth v praxi vyžadovalo (text-overflow: ellipsis pravdepodobne rezervuje navyše priestor pre "…", aj keď sa nikdy nezobrazí) - empirické meranie je tu spoľahlivejšie než teoretický výpočet z geometrie textu. Flex `gap:8px` medzi NOC a týmto kontajnerom (a jeho symetria s pravou stranou, potvrdená v predošlom tikete) sa týmto NEMENÍ - je to nezávislá konštanta, nie odvodená od tejto šírky (overené, gap ostáva 8px/6.667px nezmenený na touch-table/PC). */ width: clamp(calc(160px * var(--ui-scale-kompenzacia, 1)), 42cqw, calc(350px * var(--ui-scale-kompenzacia, 1))); /* Kompenzačná podlaha (--ui-scale-kompenzacia, K) - rovnaká výška ako .vr-gallery-corner nižšie, oba riadky musia rásť spolu. */ height: calc(40px * var(--ui-scale-kompenzacia, 1)); z-index: 15; box-sizing: border-box; display: flex; align-items: stretch; gap: 8px; } /* DEŇ/NOC dvojvrstvová štruktúra - vonkajší rámček (.btn-group-box dáva pozadie/rám/radius/padding) auto-šírky (nie pevný štvorec ako FULLSCREEN, obsahuje text "Noc"/"Deň", nie iba ikonku). display:none natvrdo na TOMTO vonkajšom kontajneri (index.html), NIE na vnútornom tlačidle - js/den-noc.js prepína práve TENTO element, aby sa pri skrytom stave nezobrazoval prázdny osamotený rámček (rovnaký princíp ako #fullscreen-blok-group nižšie). */ #den-noc-blok-group { flex: 0 0 auto; } /* Vnútorný chip DEŇ/NOC - rovnaký princíp ako #fullscreen-trigger (zmenšený vnútri vonkajšieho 40px rámčeka), tu ale auto-šírka s paddingom namiesto pevného štvorca (krátky text "Noc"/"Deň"), min-width proti "poskakovaniu" layoutu pri prepnutí medzi oboma textami rôznej dĺžky. */ #den-noc-trigger { flex: 0 0 auto; /* --ui-scale-kompenzacia (K, js/scale.js) - sekcia zadania "Minimálna 'podlaha' veľkosti pre text/UI prvky na mobile/tablete... + Doplnenie". Na PC/touch-table je K vždy 1 (calc(...*1) = pôvodná hodnota, bezo zmeny); na mobile/tablete pri nízkom scale narastie spolu s (rem-based) font-size, aby tlačidlo ostalo úchytné aj čitateľné. */ min-width: calc(56px * var(--ui-scale-kompenzacia, 1)); height: calc(32px * var(--ui-scale-kompenzacia, 1)); box-sizing: border-box; padding: 0 calc(14px * var(--ui-scale-kompenzacia, 1)); /* 6px -> 12px, sekcia zadania "Oprava artefaktu na zaoblených rohoch" - viď identický komentár pri .mode-tab (css/filters.css). */ border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; /* Sekcia zadania "Zvýšiť čitateľnosť textu a viditeľnosť borderu na tlačidlách spodného riadku" -> "Zvážiť globálnu zmenu tokenu" - PREDTÝM lokálny scoped override priamym literálom (biely text/ viditeľnejší border), keďže --btn-secondary-text/border boli vtedy nezmenené univerzálne tokeny (~25 miest naprieč 9 súbormi). Po diagnostike (žiadny z týchto ~25 spotrebiteľov nepoužíva token ako signál "disabled" - ten má vlastný, samostatný --btn-disabled-* pár) bola zmena POTVRDENÁ ako globálna (project.config.js/css/base.css) - tento scoped literál je teraz redundantný duplicit, VRÁTENÝ späť na zdieľanú premennú (jeden zdroj pravdy). */ color: var(--btn-secondary-text); background: var(--btn-secondary-bg-nested); border: 1px solid var(--btn-secondary-border); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } #den-noc-trigger:hover, #den-noc-trigger:focus-visible { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-text-hover); } #mapa-blok-group { /* Už nie je samostatne pozicovaný - .mapa-blok-corner vyššie prevzal position/bottom/left/width/z-index, tento kontajner teraz iba vyplní ZVYŠNÝ priestor vedľa DEŇ/NOC (rovnaký princíp ako #vr-gallery-group vedľa #fullscreen-blok-group). Výška sa dedí cez align-items:stretch rodiča (.mapa-blok-corner), rovnako ako #vr-gallery-group nemá vlastnú výšku. */ flex: 1 1 0; min-width: 0; } #okolie-trigger, #blok-vyber-trigger { flex: 1 1 0; /* 6px -> 12px, sekcia zadania "Oprava artefaktu na zaoblených rohoch" - viď identický komentár pri .mode-tab (css/filters.css). */ border-radius: 12px; padding: 0 calc(10px * var(--ui-scale-kompenzacia, 1)); display: flex; align-items: center; justify-content: center; text-align: center; font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* SECONDARY, "nested" variant (bod 4 zadania "Finálny farebný štýl" - tlačidlá VNÚTRI skupinových kontajnerov). Token teraz globálne biely/ viditeľnejší (pozri #den-noc-trigger vyššie) - žiadny scoped override tu už netreba. */ color: var(--btn-secondary-text); background: var(--btn-secondary-bg-nested); border: 1px solid var(--btn-secondary-border); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } /* Sekcia zadania "Rozšíriť šírku #okolie-trigger" - PREDTÝM zdieľané min-width:0 na oboch (žiadna podlaha, 50/50 flex delilo priestor rovným dielom bez ohľadu na obsah). TERAZ VLASTNÝ min-width na KAŽDOM, dolaďovaný priamym opakovaným meraním scrollWidth<=clientWidth (nie jednorazovým výpočtom z textovej geometrie - pozri komentár pri .mapa-blok-corner width vyššie) - hodnoty dávajú OBOM tlačidlám bezpečnú rezervu nad ich nameraný obsahový nárok, K=1 na PC/touch-table (odtiaľ referenčné px). flex:1 1 0 (base pravidlo vyššie) OSTÁVA - nad týmito podlahami sa prípadný ĎALŠÍ voľný priestor stále delí rovným dielom, min-width iba garantuje, že ANI JEDNO tlačidlo nikdy nespadne pod svoj vlastný obsahový nárok, nezávisle od presnej šírky rodiča. */ #okolie-trigger { min-width: calc(138px * var(--ui-scale-kompenzacia, 1)); } #blok-vyber-trigger { min-width: calc(126px * var(--ui-scale-kompenzacia, 1)); } #okolie-trigger:hover, #okolie-trigger:focus-visible, #blok-vyber-trigger:hover, #blok-vyber-trigger:focus-visible { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-text-hover); } /* Mobilný skrátený text "Mapa" (sekcia zadania "Mobilný text pre 'Čo je nablízku?'") - dva , tu default (PC/touch-table aj bezo zmeny stavu) plný text. Skutočný prepínač na "Mapa" je NIŽŠIE v tomto súbore (@media (hover:none) and (pointer:coarse) blok, zdieľaný s #fullscreen-blok-group skrytím) - PÔVODNE (mŕtvy) @container v css/responsive.css, opravené sekciou zadania "Dynamická šírka + MAPA text spodného riadku", pozri komentár pri tom pravidle. Aktívne IBA v ne-CTA stave (js/okolie.js, aktualizujTextOkolieTlacidla) - "Vybrať byt" nemá skrátený variant. */ #okolie-trigger .text-desktop { display: inline; } #okolie-trigger .text-mobile { display: none; } /* "Vybrať byt" (OKOLIE otvorené) je silnejšia výzva na akciu (návrat k výberu bytu) - PRIMARY štýl namiesto bežného NAVIGATION vzhľadu vyššie ("Mapa"). Trieda sa prepína v js/okolie.js (aktualizujTextOkolieTlacidla) spolu s textom. IBA #okolie-trigger - VÝBER BLOKU nemá CTA stav. */ #okolie-trigger.okolie-trigger-cta { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: transparent; } #okolie-trigger.okolie-trigger-cta:hover, #okolie-trigger.okolie-trigger-cta:focus-visible { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); border-color: transparent; box-shadow: var(--btn-primary-shadow-hover); } #okolie-trigger.okolie-trigger-cta:active { background: var(--btn-primary-bg-active); color: var(--btn-primary-text); border-color: transparent; } #okolie-trigger:disabled, #okolie-trigger.okolie-trigger-cta:disabled, #blok-vyber-trigger:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); border-color: var(--btn-disabled-border); opacity: 1; cursor: default; box-shadow: none; } /* ========================================================================== 🧭 PANEL A: PLÁVAJÚCI HLAVNÝ FILTER (Hore vľavo, pod logom) ========================================================================== */ #configurator-filters { position: absolute; top: 72px; /* Miesto pre logo (s vlastným pozadím) nad panelom */ left: 16px; /* Horná hranica (pôvodne pevných 300px) teraz rastie s --ui-scale- kompenzacia (K) - sekcia zadania "Rozšíriť šírku ľavého a pravého panela na mobile... podľa K-kompenzácie" - text vnútri (najmä .filter-tile mriežka Podlažie/Počet izieb) zdedil väčší font-size (K, css/base.css) ako predtým, ale samotná šírka panelu (a teda aj jeho vnútorných grid buniek) rástla len s cqw kontajnerom, nie s K - na malých mobiloch (S8+, S20 FE) preto text v úzkych dlaždiciach zalamoval/prekrýval. min(300px * K, 460px) - rastie proporčne s K, ale NIKDY nad 460px (empiricky overené na S8+/S20 FE/MediaPad T5, ponecháva bezpečný odstup od fasády v strede appky, sekcia zadania). Na PC/touch-table je K vždy 1 -> min(300,460)=300px, presne nezmenené. */ width: clamp(160px, 42cqw, min(calc(300px * var(--ui-scale-kompenzacia, 1)), 460px)); height: auto; /* Výška presne podľa obsahu filtrov */ /* Miesto pre logo hore a spodnú lištu dole. Pôvodné "94px" dole = 24px (bottom-anchor spodného radu) + 40px (jeho PÔVODNÁ, pevná výška) + 30px rezerva - sekcia zadania "Filter panel na mobile stráca obsah... + nekonzistentný rámčekový štýl" zistila, že spodný rad (.mapa-blok-corner/.vr-gallery-corner/#facade-view- switcher, css/layout.css) dnes rastie s --ui-scale-kompenzacia (K, sekcia zadania "Minimálna 'podlaha' veľkosti...") - jeho VÝŠKA je teraz calc(40px * K), NIE pevných 40px. Táto rezerva tu MUSÍ rovnaký K zohľadniť, inak (potvrdené meraním na Galaxy S8+ 740×360, K≈1.8) panel v Rozšírenom filter móde reálne PREKRYL spodný rad o ~0.7px - nešlo o "miznúci obsah" (vnútorný scroll funguje správne), ale o vizuálnu kolíziu dvoch prvkov. Iba GROWABLE časť (40px) sa násobí K - pevný bottom-anchor (24px) a bezpečnostná rezerva (30px) zostávajú nezmenené. */ max-height: calc(100cqh - 72px - 24px - 30px - (40px * var(--ui-scale-kompenzacia, 1))); z-index: 10; background: rgb(var(--surface-panel-rgb) / 0.55); /* Polopriehľadné dymové sklo */ border: 1px solid rgb(var(--hairline-rgb) / 0.04); /* Ultra tenká linka */ border-radius: 14px; /* Zaoblené rohy presne podľa predlohy */ padding: calc(24px * var(--ui-scale-kompenzacia, 1)); display: flex; flex-direction: column; overflow-y: auto; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } /* ========================================================================== 📄 PRAVÝ STĹPEC: INFORMÁCIE O PROJEKTE + ZOZNAM BYTOV ========================================================================== */ /* Čisto layoutový kontajner - ŽIADNE vlastné pozadie/rám/blur/tieň tu. Predošlá verzia mala na tomto stacku vlastnú "základnú" sklenú vrstvu siahajúcu aj cez gap medzi panelmi nižšie, čo v gape vytváralo tmavý poloprie hľadný nádych navyše nad fotkou (nekonzistentné s ľavou stranou, kde je gap medzi logo boxom a filter panelom úplne čistý - iba fasádna fotka, žiadne prekrytie). Panely nižšie majú vlastné pozadie/blur/rám/tieň - medzera medzi nimi (--panel-gap, rovnaká hodnota ako medzera logo↔filter na ľavej strane) tak ukazuje priamo fotku, bez akéhokoľvek tmavého prekrytia. */ #right-panel-stack { position: absolute; top: 16px; right: 16px; /* Rovnaký K-aware princíp ako #configurator-filters vyššie (sekcia zadania "Rozšíriť šírku ľavého a pravého panela..."). Ceiling 480px (o 20px vyšší než ľavý panel - zachováva pôvodný 20px rozdiel medzi 300px/320px). */ width: clamp(160px, 44cqw, min(calc(320px * var(--ui-scale-kompenzacia, 1)), 480px)); /* NIŽŠIE (@media (hover:none) and (pointer:coarse) na konci súboru) túto šírku na dotykových zariadeniach ĎALEJ zužuje - sekcia zadania "Skryť ikonky fasády/pôdorysu... zúžiť a zjednotiť šírku pravého panela" (fotky/ikonky v .apartment-card sú tam skryté, uvoľnená šírka sa už nemusí rezervovať). */ /* Rovnaký K-aware rozklad "94px" ako #configurator-filters vyššie (sekcia zadania "Filter panel na mobile stráca obsah..." - platí identicky aj pre tento pravý stĺpec, rovnaký spodný rad pod ním). */ max-height: calc(100cqh - 32px - 24px - 30px - (40px * var(--ui-scale-kompenzacia, 1))); /* Miesto pre spodnú lištu dole */ z-index: 100; /* Vysoká vrstva v popredí */ display: flex; flex-direction: column; gap: var(--panel-gap); } /* Statický panel s informáciami o projekte - vlastné dymové sklo (nad základnou vrstvou #right-panel-stack vyššie), vždy viditeľný bez ohľadu na stav filtrov. Trieda (nie IBA #project-info-panel ID) - sekcia zadania "Doladenie viditeľnosti prvkov v menu 'Výber blokov'", bod 1: ZDIEĽANÁ so samostatnou kópiou tohto panela na obrazovke Výber blokov (#vyber-blokov-project-info-panel, css/vyber-blokov.css - tá si dopĺňa VLASTNÚ position/top/right/width, keďže nie je (na rozdiel od tejto) flex dieťaťom #right-panel-stack). */ .project-info-panel { flex-shrink: 0; /* Sekcia zadania "Stacky, výplň Prémiovej, banner" (Časť D) - K-only alfa 0,55->0,75 (predošlé zadanie) VRÁTENÁ na pôvodnú flat 0,55, zhodnú s referenčnými panelmi (#configurator-filters, #apartments-list-panel - rovnaký token --surface-panel-rgb, tá istá 0,55, nikdy K-škálovaná). Táto trieda má TROCH konzumentov (#project-info-panel, #vyber-blokov-project-info-panel, .blok-badge - js/vyber-blokov.js:213) - zmena zámerne zasiahne VŠETKÝCH TROCH (schválené používateľom). */ background: rgb(var(--surface-panel-rgb) / 0.55); border: 1px solid rgb(var(--hairline-rgb) / 0.04); border-radius: 14px; padding: calc(20px * var(--ui-scale-kompenzacia, 1)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .project-info-title { font-size: 1.02rem; font-weight: 600; color: var(--text-strong); margin-bottom: 10px; } .project-info-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .project-info-features li { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-body); } /* SVG ikonky namiesto emoji (💎/🍃) - emoji majú vlastnú pevnú farbu (modrá/zelená) a nedajú sa prefarbiť, čo rozbíjalo zlatú/medenú paletu UI (bod 6). SVG s stroke="currentColor" preberá farbu z .feature-icon. */ .project-info-features .feature-icon { display: inline-flex; width: 15px; height: 15px; color: rgb(var(--accent-rgb)); flex-shrink: 0; } .project-info-features .feature-icon svg { width: 100%; height: 100%; } /* Sekcia zadania "Zmena čitateľnosti panelov a odstup (iba mobil/tablet, K-only)", Časť B - zväčšenie textu/ikoniek panela "Prémiová Rezidencia" VÝHRADNE na dotyku. ID-scoped na OBE kópie (NIE .project-info-panel querySelector) - tá trieda zdieľa .blok-badge (karta bloku, viď komentár vyššie), preto by bare `.project-info-panel .project-info-title` selektor OMYLOM zasiahol aj kartu bloku (tá má VLASTNÉ, nezávislé Časť A pravidlá, css/vyber-blokov.css) - rovnaký princíp, aký appka už používa pri skrývaní tohto panela počas Porovnania (js/main.js, getElementById namiesto querySelector). */ #project-info-panel .project-info-title, #vyber-blokov-project-info-panel .project-info-title { font-size: clamp(1.02rem, calc(1.02rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem), 1.3rem); } #project-info-panel .project-info-features .feature-icon, #vyber-blokov-project-info-panel .project-info-features .feature-icon { width: calc(15px * var(--ui-scale-kompenzacia, 1)); height: calc(15px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "Zjednotenie veľkosti popiskov a odstup Prémiovej", Časť A-B (c) - texty `li` ("Exkluzívna lokalita"/"Panoramatické okná"), rovnaký K-only vzor/horná hranica 0,92rem ako vyššie. ID-scoped na OBE kópie z rovnakého dôvodu ako titulok. Základ 0,76rem nezmenený. */ #project-info-panel .project-info-features li, #vyber-blokov-project-info-panel .project-info-features li { font-size: clamp(0.76rem, calc(0.76rem + 100 * (var(--ui-scale-kompenzacia, 1) - 1) * 1rem), 0.92rem); } /* Časť C zadania "Zjednotenie veľkosti popiskov a odstup Prémiovej" - NEIMPLEMENTOVANÉ, po vyčerpávajúcom priamom testovaní (NIE hypotéze o časovaní - report tiketu má presné namerané hodnoty z 3 nezávislých čerstvých načítaní na variantu). Zistenie: panel "Prémiová Rezidencia" (`.project-info-panel`, bez vlastného `width`) a jeho rodičovský stack (`#right-panel-stack`/ `#vyber-blokov-right-stack`, `width:clamp(160px,44cqw,min(calc(320px* K),480px))`) sa DNES zhodujú na kópii fasády, ale NIE na kópii Výber blokov (o 20-22,5 referenčných px). PRIAMO OTESTOVANÉ A ZAMIETNUTÉ (3 nezávislé CSS-nasadené varianty, každý overený 3 čerstvými načítaniami, nie jedným behom): 1) `width:100%` na paneli - facade zostáva správne, vyber zostáva nesprávne (bez zmeny oproti pôvodnému stavu). 2) Duplikovanie PRESNÉHO vzorca rodiča (`clamp(160px,44cqw,min( calc(320px*K),480px))`) priamo na paneli - facade sa NOVO POKAZÍ (panel > stack), vyber zostáva nesprávne. 3) Matematicky ROVNAKÝ vzorec BEZ `cqw` (`min(calc(320px*K),480px)`, keďže `44cqw` je vždy ≈845 referenčných px - ĎALEKO nad hornou hranicou 480px vo VŠETKÝCH reálnych K, teda v praxi nikdy nič neurčuje) - DÁVA IDENTICKÝ zlý vzor ako (2), čím sa `cqw` VYLUČUJE ako príčina. Vylúčené AJ (samostatné priame testy, viď história repozitára): `gap` stacku, dočasné odobratie súrodenca (`#vyber-blokov-favorites-panel`, display:none), box-sizing/border panela, opakovaný `updateScale()`/ `resize` event/re-set CSS premennej/detach+reattach panela zo stromu. Záver: nejde o `cqw`, gap, súrodenca, box-sizing ani o jednoduché "zastarané K" (priamy test to vyvrátil). Presná príčina zostáva NEZISTENÁ aj po tomto rozsiahlom testovaní - zdá sa byť hlbšia Chromium špecifickosť vo vyhodnocovaní `calc()`/`min()` výrazov nad custom property (`--ui-scale-kompenzacia`) naprieč viacerými prvkami PRI PRVOM vykreslení, ktorú CSS-only prostriedkami dostupnými v tomto tikete nebolo možné spoľahlivo obísť bez rizika NOVEJ regresie (viď pokus 2/3, kde predtým správna fasádna kópia prestala sedieť). Panel width preto ostáva na PÔVODNOM stave (implicitný flex stretch, žiadne vlastné `width`) - jediný z testovaných stavov, ktorý nezaviedol NOVÚ chybu, čaká sa na ďalšie rozhodnutie používateľa. */ #apartments-list-panel { position: relative; flex: 1 1 auto; min-height: 0; /* umožní vnútorné scrollovanie namiesto pretečenia stacku */ width: 100%; padding: calc(24px * var(--ui-scale-kompenzacia, 1)); display: flex; flex-direction: column; overflow: hidden; /* Vlastné dymové sklo (nad základnou vrstvou #right-panel-stack) - rovnaký jazyk ako #project-info-panel vyššie. */ background: rgb(var(--surface-panel-rgb) / 0.55); border: 1px solid rgb(var(--hairline-rgb) / 0.04); border-radius: 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } /* 🧡 "ZAVRIEŤ MÔJ VÝBER" tlačidlo (predtým "ZAVRIEŤ OBĽÚBENÉ" hneď pod hlavičkou - sekcia zadania "Premenovanie 'Obľúbené byty' na 'Môj výber'...", bod 2 - "presúva sa POD zoznam bytov") - priamo v obsahu panela "Môj výber" (js/favorites.js, vykresliObsahOblubenych), rovnaká sekundárna paleta ako iné textové CTA v appke (.apartments-summary-cta/ .detail-action-btn). flex-shrink:0 - panel je flex-column s .panel-foreground-scroller rastúcim nad ním (flex:1 1 auto, overflow-y:auto) - tlačidlo tak VŽDY ostáva pod scrollovateľným zoznamom, nikdy sa nescrolluje preč z dohľadu, nezávisle od dĺžky zoznamu. */ .favorites-close-btn { flex-shrink: 0; width: 100%; padding: calc(10px * var(--ui-scale-kompenzacia, 1)) 0; margin-top: calc(12px * var(--ui-scale-kompenzacia, 1)); /* 8px -> 12px, sekcia zadania "Rozšírenie opravy artefaktu na zaoblených rohoch na ďalšie miesta appky" (nadväzuje na commit 6743e54). */ border-radius: 12px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--btn-secondary-text); background: var(--btn-secondary-bg-nested); border: 1px solid var(--btn-secondary-border); cursor: pointer; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } .favorites-close-btn:hover, .favorites-close-btn:focus-visible { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); color: var(--btn-secondary-text-hover); } /* 🚀 VRSTVA PRE KARTY BYTOV (Absolútne popredie) */ .panel-foreground-scroller { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 8px; } /* Zjemnenie a skrytie hrubého systémového scrolleru - UNIVERZÁLNE pre ĽUBOVOĽNÝ scrollovateľný prvok v celej appke (nie iba .panel-foreground- scroller), vo VŠETKÝCH breakpointoch (žiadny samostatný mobilný variant nižšie). `*` namiesto konkrétnej triedy = jeden zdroj pravdy pre štýl scrollbaru, automaticky platný aj pre budúce scrollovateľné panely. */ *::-webkit-scrollbar { width: 4px; } *::-webkit-scrollbar-thumb { background: rgb(var(--accent-rgb) / 0.3); border-radius: 4px; } /* ========================================================================== 🔴 LIŠTA PRE PREPÍNANIE POHĽADOV (DOKONALE VYCENTROVANÁ V STREDE DOLE). DEŇ/NOC sa presunul do ľavého dolného rohu (.mapa-blok-corner vyššie, sekcia zadania "Nové poradie ľavej strany bottom row") - #facade-view- switcher je teraz opäť sám osebe priamo pozicovaný, žiadny spoločný obaľovací riadok netreba. ========================================================================== */ #facade-view-switcher { position: absolute; bottom: 24px; /* Fixne v dolnej časti */ left: 50%; /* Posun na stredovú os */ transform: translateX(-50%); /* Vyváženie presného stredu */ z-index: 10; /* Horný strop UŽ NIE JE fixných 300px - počíta ho js/config-apply.js (aplikujRozmeryPrepinacaPohladov) z počtu pohľadov v configu a zapisuje ho sem ako --view-switcher-max-width. Pri dnešných 4 pohľadoch je to presne 300px, takže vzhľad ostáva nezmenený. Fallback 300px platí, kým sa premenná nenastaví. */ /* --ui-scale-kompenzacia (K) MUSÍ tu rozšíriť aj ŠÍRKU, nie iba výšku/ padding nižšie - viacero tlačidiel SEVER/JUH/ZÁPAD/VÝCHOD si rovným dielom delí TENTO kontajner (flex:1 na .view-btn nižšie); keby sa zväčšil iba ich font-size (automaticky, koreňový rem, css/base.css) bez zväčšenia spoločného kontajnera, susedné popisy by sa navzájom prekrývali/zrážali (zistené vizuálnou kontrolou na simulovanom S20 FE - "ZÁPADVÝCHOD" bez medzery, sekcia zadania "Minimálna 'podlaha' veľkosti..."). Zväčšením ŠÍRKY spolu s textom si každé tlačidlo zachová PÔVODNÝ POMER medzi svojou šírkou a veľkosťou textu. */ width: clamp(calc(180px * var(--ui-scale-kompenzacia, 1)), 78cqw, calc(var(--view-switcher-max-width, 300px) * var(--ui-scale-kompenzacia, 1))); /* Skupinový kontajner (bod 3 zadania "Finálny farebný štýl") - rovnaká výška (40px) ako ostatné skupiny/samostatné tlačidlá spodného radu. min-height namiesto fixnej výšky: pri veľkom počte pohľadov sa tlačidlá zalomia do viacerých riadkov a skupina musí vedieť narásť. Je ukotvená spodkom (bottom: 24px), takže rastie NAHOR - do voľnej fasádnej plochy, nič pod ňou nekoliduje. */ min-height: calc(40px * var(--ui-scale-kompenzacia, 1)); box-sizing: border-box; background: var(--group-container-bg); /* Farba borderu PREPÍSANÁ z --group-container-border (zdieľaný token ostatných skupín bottom row, nedotknutý) na existujúci --accent-strong-rgb (rovnaký token ako #app-logo/.view-btn.active, css/base.css:91) s vlastnou, nižšou alfou 0.35 - sekcia zadania "Zlatý border pozadia #facade-view-switcher". Iba TÁTO jedna vlastnosť sa prepisuje priamo na tomto pravidle (rovnaká špecificita, jeden ID selektor), --group-container-border token samotný zostáva nezmenený pre NOC/VÝBER BLOKU/VR+GALÉRIE. */ border: 1px solid rgb(var(--accent-strong-rgb) / 0.35); /* 8px -> 12px, sekcia zadania "border-radius 16 -> 12, zjednotiť s .view-btn a ostatnými skupinami bottom row" (nadväzuje na predošlý medzikrok 8px->16px, ktorý sa touto zmenou NAHRÁDZA - koncentrický 16px vzorec bol zámerne opustený v prospech vizuálnej zhody so zvyškom bottom row, kde skupinový kontajner aj vnútorné tlačidlá majú rovnaký 12px polomer). */ border-radius: 12px; display: inline-flex; /* Vnútorné buttons majú teraz flex:1 (rovnomerne vyplnia CELÚ šírku kontajnera) - nahrádza pôvodné justify-content:space-around, keďže tlačidlá už NIE SÚ len "hugnuté" na text, ale rovnako široké medzi sebou (zadanie, bod 3). */ justify-content: center; align-items: stretch; /* Zalomenie do ďalšieho riadku je zámerne zvolené namiesto horizontálneho scrollu: spodný rad je vizuálne jazyk "pilulkových skupín" (rovnaká logika ako .vr-gallery-corner / #mapa-blok-group) a skrytý scroll v 40px vysokej pilulke nemá na dotykovom stole žiadnu viditeľnú indikáciu. Pri <= baseViewCount pohľadoch sa nikdy neuplatní (tlačidlá sa zmestia do jedného riadku). */ flex-wrap: wrap; align-content: stretch; padding: calc(3px * var(--ui-scale-kompenzacia, 1)); gap: 6px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .view-btn { flex: 1 1 0; min-width: 0; /* Vertikálne centrovanie cez flex (nie padding) - výška presne sedí s okolitými skupinami/samostatnými tlačidlami (zadanie, bod 3). */ display: flex; align-items: center; justify-content: center; background: var(--btn-secondary-bg-nested); /* Token teraz globálne biely/viditeľnejší (pozri #den-noc-trigger vyššie) - žiadny scoped override tu už netreba. */ color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); /* .view-btn je