/* MúdryKošík — modern retail redesign 2026 Tento súbor je zámerne samostatná prezentačná vrstva. Pôvodný app.css ostáva nedotknutý a slúži ako bezpečný fallback. Návrat na pôvodný vzhľad vyžaduje iba zmeniť stylesheet v static/index.html späť na /static/css/app.css. */ @import url("/static/css/app.css"); :root { /* `.topbar-inner` ma min-height 78 px a lista k tomu 1 px spodny ramik. */ --topbar-height: 79px; --ink: #0b1f33; --ink-2: #102a43; --ink-3: #173b56; --bg: #f7f8f2; --surface: #ffffff; --line: #e3e8dc; --line-strong: #ccd6c3; --text: #102235; --muted: #637083; --muted-2: #8893a1; --accent: #68b31a; --accent-ink: #4a8f0c; --accent-soft: #edf8df; --accent-glow: #8bd431; --amber: #b87206; --amber-soft: #fff5d8; --danger: #cc3434; --danger-soft: #fff0ee; --radius: 20px; --radius-sm: 12px; --shadow: 0 2px 5px rgba(11, 31, 51, 0.035), 0 18px 45px -28px rgba(11, 31, 51, 0.24); --shadow-lift: 0 12px 24px -18px rgba(11, 31, 51, 0.28), 0 28px 56px -30px rgba(59, 104, 20, 0.2); --content-width: 1480px; } html { background: #f7f8f2; scroll-padding-top: 88px; } body { min-width: 320px; overflow-x: clip; color: var(--text); background: radial-gradient(circle at 5% 26%, rgba(111, 180, 34, 0.07), transparent 25rem), linear-gradient(180deg, #fbfcf8 0%, #f6f8f2 48%, #ffffff 100%); font-size: 16px; line-height: 1.6; } /* Kratky uvod pri spusteni nainstalovanej PWA. V beznom prehliadaci zostava element skryty; zobrazenie riadi inline skript hned na zaciatku . */ .app-launch-splash[hidden] { display: none; } .app-launch-splash { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow: hidden; touch-action: none; color: #ffffff; background: radial-gradient(circle at 50% 43%, rgba(126, 211, 35, 0.25), transparent 17rem), linear-gradient(145deg, #10243a, #071423); opacity: 1; visibility: visible; transition: opacity 380ms ease, visibility 380ms ease; } .app-launch-splash.is-leaving { opacity: 0; visibility: hidden; } .app-launch-splash-inner { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; } .app-launch-mascot-glow { position: absolute; top: 50%; left: 50%; width: clamp(190px, 48vw, 270px); aspect-ratio: 1; border-radius: 50%; background: rgba(112, 201, 20, 0.16); filter: blur(10px); transform: translate(-50%, -58%); animation: app-launch-glow 1100ms ease-in-out both; } /* Objavitel na uvodnej obrazovke. * * Predtym tu bolo video s ciernym pozadim, ktore sa "odstranovalo" cez * `mix-blend-mode: screen` a `background: #050706`. Obrazok ma priehladnost * naozaj, takze ten hack uz netreba - a s nim zmizol aj artefakt, ze screen * blend zosvetloval tmave casti postavicky (lupa, ocka). * * Casovanie sedi na `minimumVisibleMs = 3500` v index.html: * 520 ms prichod + 2 x 1490 ms pohup = 3500 ms * Pri zmene jedneho treba upravit aj druhe, inak sa pohyb utne v polovici. */ .app-launch-mascot { position: relative; width: auto; height: clamp(190px, 52vw, 260px); object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); animation: app-launch-mascot-prichod 520ms cubic-bezier(0.22, 1.2, 0.36, 1) both, app-launch-mascot-pohup 1490ms ease-in-out 520ms 2; } @keyframes app-launch-mascot-prichod { 0% { opacity: 0; transform: translateY(26px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes app-launch-mascot-pohup { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-2.5deg); } } .app-launch-splash p { position: relative; margin: 0; color: rgba(255, 255, 255, 0.9); font-family: var(--font-display); font-size: clamp(17px, 4vw, 21px); font-weight: 700; letter-spacing: -0.02em; animation: app-launch-copy 700ms 360ms ease both; } .app-launch-dots { display: flex; gap: 7px; height: 7px; } .app-launch-dots i { width: 7px; height: 7px; background: var(--accent-glow); border-radius: 50%; animation: app-launch-dot 900ms ease-in-out infinite; } .app-launch-dots i:nth-child(2) { animation-delay: 120ms; } .app-launch-dots i:nth-child(3) { animation-delay: 240ms; } @keyframes app-launch-glow { 0% { opacity: 0; transform: translate(-50%, -58%) scale(0.7); } 55% { opacity: 1; } 100% { opacity: 0.72; transform: translate(-50%, -58%) scale(1); } } @keyframes app-launch-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes app-launch-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .app-launch-splash { transition-duration: 80ms; } .app-launch-mascot-glow, .app-launch-splash p, .app-launch-dots i { animation: none; } /* Postavicka zostane vidiet, iba sa nehybe. */ .app-launch-mascot { animation: none; opacity: 1; transform: none; } } ::selection { color: #ffffff; background: var(--accent-ink); } :where(button, a, input, select, textarea):focus-visible { outline: 3px solid rgba(104, 179, 26, 0.3); outline-offset: 3px; } /* Header */ .topbar { color: var(--text); background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid rgba(11, 31, 51, 0.07); box-shadow: 0 8px 28px rgba(11, 31, 51, 0.045); } .topbar-inner { width: min(var(--content-width), calc(100% - 48px)); min-height: 78px; padding: 10px 0; gap: 24px; } /* Nove logo je hotovy lockup - znacka aj napis v jednom obrazku, takze nahradza oboje. Riesi sa to tu v CSS a nie v HTML zamerne: `app.css` ma tmavu listu, na ktorej by sa tmavomodre "Múdry" z loga stratilo. Nazov pre citacky obrazovky zostava v `aria-label` odkazu. */ .brand { flex: 0 0 auto; gap: 0; height: 48px; aspect-ratio: 564 / 138; color: var(--ink); background: url("/static/brand-lockup.webp") left center / contain no-repeat; } .brand-img, .brand-name { display: none; } .topnav { margin-left: auto; gap: 4px; } .topnav > a { min-height: 44px; padding: 10px 14px; color: #34465a; border-radius: 12px; font-size: 14px; font-weight: 700; transition: color 160ms ease, background-color 160ms ease; } .topnav > a:hover, .topnav > a.is-active { color: var(--accent-ink); background: var(--accent-soft); } .topnav > a.is-active::after { display: none; } .topbar-actions { gap: 8px; } .location-chip, .cart-chip, .auth-chip, .mobile-nav-toggle { min-height: 44px; color: #314256; background: #f8faf6; border: 1px solid #e3e9de; border-radius: 13px; transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease; } .location-chip:hover, .cart-chip:hover, .auth-chip:hover, .mobile-nav-toggle:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: #bcd99f; transform: translateY(-1px); } .cart-chip-count { color: #fff; background: var(--accent-ink); } /* Hero */ /* Hero vyplni zvysok obrazovky pod listou, aby logá retazcov sadli presne na spodnu hranu prveho zobrazenia - ako v predlohe. `svh` je kvoli mobilom, kde `vh` pocita aj s panelom prehliadaca, ktory sa pri rolovani schova. */ .hero-block { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-height)); min-height: calc(100svh - var(--topbar-height)); color: var(--text); background: radial-gradient(circle at 80% 48%, rgba(127, 187, 57, 0.2) 0 8%, transparent 8.3%), radial-gradient(circle at 85% 30%, rgba(255, 202, 54, 0.15) 0 5%, transparent 5.3%), linear-gradient(115deg, #ffffff 0%, #fbfcf5 43%, #f2f6e7 100%); padding: 0; } .hero-block::before { content: ""; position: absolute; z-index: -1; width: min(57vw, 900px); aspect-ratio: 1.08; right: -8vw; top: -19%; border-radius: 45% 0 0 58%; background: radial-gradient(circle at 47% 48%, rgba(255, 255, 255, 0.72) 0 15%, transparent 16%), linear-gradient(145deg, rgba(225, 241, 199, 0.95), rgba(248, 247, 220, 0.68)); transform: rotate(-6deg); } .hero-block::after { content: "%"; position: absolute; z-index: -1; right: clamp(20px, 6vw, 100px); top: 15%; display: grid; place-items: center; width: clamp(88px, 9vw, 138px); aspect-ratio: 1.18; color: #ffffff; background: linear-gradient(145deg, #85bd43, #5d9f19); border-radius: 26% 38% 28% 34%; box-shadow: 0 24px 42px -24px rgba(76, 132, 18, 0.7); font-family: var(--font-display); font-size: clamp(36px, 4vw, 58px); font-weight: 700; line-height: 1; transform: rotate(11deg); } .hero { position: relative; z-index: 1; width: min(var(--content-width), calc(100% - 48px)); min-height: 500px; /* Horny padding bol az 104 px a kicker tak zacinal privysoko od hornej listy. Spodny je uz len symbolicky - miesto pod hero patri lište retazcov. */ padding: clamp(14px, 1.6vw, 22px) 0 0; grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.92fr); align-items: center; gap: clamp(60px, 8vw, 132px); /* Hero rastie do zvysnej vysky, logá tak zostanu na spodnej hrane. */ flex: 1 1 auto; } /* Samotny padding nestacil: `align-items: center` este vycentruje obsah v 590 px vysokom bloku, takze text sa vratil do stredu. Hore sa posuva IBA textovy stlpec - grafika zostava vycentrovana, inak by pod nou vznikla diera. (Predchadzajuci pokus menil `align-items` na celom `.hero` a rozhodil oba stlpce.) */ .hero-main { max-width: 820px; align-self: start; } .hero-kicker { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin: 0 0 16px; padding: 8px 13px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid #d8ecc2; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } .hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(104, 179, 26, 0.12); } .hero h1 { max-width: 860px; color: var(--ink); font-size: clamp(54px, 5.65vw, 88px); font-weight: 700; line-height: 0.98; letter-spacing: -0.065em; text-wrap: balance; } .hero h1 .hl { display: block; color: var(--accent-ink); background: none; -webkit-text-fill-color: currentColor; } .hero-lead { max-width: 690px; margin: 22px 0 0; color: #3e4d5e; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; } .hero-main .inline-search { margin-top: 26px; } .hero-actions { margin-top: 24px; gap: 12px; } .btn, .hero-form button, .more-offers-toggle { border-radius: 14px; font-weight: 750; } .btn.primary, .hero-form button { color: #ffffff; background: linear-gradient(180deg, #75bd20, #58a30d); border-color: #58a30d; box-shadow: 0 12px 24px -15px rgba(70, 137, 10, 0.7); } .btn.primary:hover, .hero-form button:hover { background: linear-gradient(180deg, #69b416, #4c9508); border-color: #4c9508; transform: translateY(-1px); } .btn.ghost.on-dark, .icon-btn.on-dark { color: var(--ink); background: rgba(255, 255, 255, 0.76); border-color: rgba(11, 31, 51, 0.14); } .hero-note { margin-top: 14px; color: #70806b; font-size: 13px; } /* Kosik aj telefon su teraz jeden obrazok, takze tu netreba ziadne skladanie ani naťahovanie stlpca - to predchadzajuce riesenie rozhodilo cele hero. Kontajner je siroky presne ako obrazok (nie ako cely stlpec), aby sa tri body dali polohovat voci kosiku. Sirku obmedzuje aj vyska okna: pri pomere 1120/1377 je 44svh prave ~54 % vysky obrazovky, takze vysoky obrazok uz nevytlaci logá retazcov pod spodnu hranu prveho zobrazenia. */ .hero-visual { position: relative; justify-self: center; width: min(100%, 500px, 40svh); min-height: 0; padding: 0; } .hero-figure { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 44px rgba(52, 78, 24, 0.2)); } /* Cenovky okolo kosika. Su ciste dekorativne (`aria-hidden`), preto tu nie su ziadne konkretne cisla z akcii - maju len povedat, ze ide o zlavy. */ .hero-tag { position: absolute; z-index: 2; padding: 9px 15px; color: #ffffff; border-radius: 14px; font-family: var(--font-display); font-size: clamp(17px, 1.2vw, 24px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .hero-tag-sale { top: 5%; left: -2%; background: linear-gradient(145deg, #85bd43, #5d9f19); box-shadow: 0 20px 32px -20px rgba(76, 132, 18, 0.8); transform: rotate(-9deg); } .hero-tag-deal { top: -3%; right: 3%; background: linear-gradient(145deg, #ffd257, #f2b100); box-shadow: 0 20px 32px -20px rgba(176, 128, 0, 0.75); transform: rotate(8deg); } /* Tri body uz nestoja pod vyhladavanim - naťahovali lavy stlpec a logá retazcov tak vypadli z prveho zobrazenia. Zakladne rozlozenie je rad pod obrazkom; plavat vedla kosika zacnu az na sirokom displeji (nizsie). */ .hero-value { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; } .hero-value-card { display: grid; justify-items: start; gap: 5px; min-height: 0; padding: 11px 14px; color: var(--text); background: rgba(255, 255, 255, 0.93); border: 1px solid rgba(11, 31, 51, 0.07); border-radius: 15px; box-shadow: 0 20px 38px -26px rgba(11, 31, 51, 0.5); } .hero-value-card .value-label { /* Zakladny styl dava stitku pozadie a ramik, ale ziadny vnutorny odstup. Radius je tu mensi nez globalnych 999 px - plne zaoblene konce vyzerali pri viacslovnom popise ako tabletka. */ padding: 4px 10px; border-radius: 7px; } .hero-value-card p { margin: 0; color: #5f6d5a; font-size: 13px; line-height: 1.35; } /* Siroky displej: stitky sa odlepia a postavia sa VEDLA obrazka - dva vlavo, jeden vpravo. Nesmu prekryvat kosik ani displej telefonu, preto sa odsadzuju o celu svoju sirku plus medzeru. Hranica 1500 px pocita aj s 27-palcovymi monitormi so systemovym skalovanim, pri ktorom ma prehliadac menej CSS pixelov nez fyzicke rozlisenie. Pod nou zostava bezpecny rad pod obrazkom pre mensie notebooky a tablety. */ @media (min-width: 1500px) { .hero-value { position: absolute; inset: 0; display: block; margin: 0; /* Su to popisky, nie ovladacie prvky - nech neberu klik obrazku pod nimi. */ pointer-events: none; } .hero-value-card { position: absolute; width: 200px; } .hero-value-card:nth-child(1) { top: 4%; left: calc(-200px - 18px); } .hero-value-card:nth-child(2) { top: 42%; right: calc(-200px - 18px); } .hero-value-card:nth-child(3) { bottom: 6%; left: calc(-200px - 18px); } } /* Kompaktne desktopove rozlozenie pre 27-palcove monitory so skalovanim. Uzsie karty sa zmestia po bokoch obrazka bez orezania hero blokom. */ @media (min-width: 1500px) and (max-width: 1799px) { .hero-value-card { width: 160px; padding: 10px 12px; } .hero-value-card:nth-child(1) { left: calc(-160px - 14px); } .hero-value-card:nth-child(2) { right: calc(-160px + 8px); } .hero-value-card:nth-child(3) { left: calc(-160px - 14px); } } /* Na uzkom displeji by sa telefon prekryval s kosikom az na necitatelnost - obrazok sa skryva, ale tri body zostavaju: su to informacie, nie dekoracia. */ @media (max-width: 900px) { .hero-visual { width: auto; } .hero-figure, .hero-tag { display: none; } .hero-value { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } } /* Lista retazcov pod hero. Zamerne iba styri, ktore realne indexujeme. */ .hero-chains { width: min(var(--content-width), calc(100% - 48px)); margin: 0 auto; /* Prisadne na spodnu hranu hero bloku bez ohladu na vysku obsahu nad nim. */ margin-top: auto; padding-bottom: clamp(32px, 6vh, 88px); text-align: center; } .hero-chains p { margin: 0 0 9px; color: #5f6d5a; font-size: 13.5px; font-weight: 600; } .hero-chains ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } @media (max-width: 760px) { .hero-chains ul { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } } /* Biele karty pod logami su prec - vsetkych pat znaciek ma priehladne pozadie, takze sadnu priamo na podklad hero bloku. Usetri to aj vysku. */ .hero-chains li { display: grid; place-items: center; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .hero-chains img { max-width: 100%; max-height: 42px; object-fit: contain; } .value-label { color: var(--accent-ink); background: var(--accent-soft); border: 1px solid #d8eac6; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; } .hero-value-card h2 { margin-top: 14px; color: var(--ink); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.35; } /* Search remains the primary action inside the hero. */ .page { position: relative; z-index: 3; width: min(var(--content-width), calc(100% - 48px)); margin-top: 42px; padding: 0 0 92px; } body[data-active-view="zoznam"] .page { margin-top: 34px; } /* Vysledky boli zbytocne siroke a kosik tesny. Kosik ma vlastnu vnutornu strukturu (miniatura + nazov + cena), takze potrebuje viac miesta nez zoznam ponuk, ktory je jednostlpcovy. */ .actions-workspace { grid-template-columns: minmax(0, 1fr) minmax(370px, 440px); gap: 26px; align-items: start; } .results { display: flex; flex-direction: column; min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } .inline-search { margin: 0; padding: 15px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(11, 31, 51, 0.08); border-radius: 24px; box-shadow: 0 22px 48px -24px rgba(11, 31, 51, 0.28); } .hero-form { min-height: 70px; padding: 0; overflow: visible; background: #ffffff; border: 0; border-radius: 17px; box-shadow: inset 0 0 0 1px #dfe5da; } /* Po kliknuti vyzeralo pole, akoby pretekalo cez okraj karty: vonkajsi glow `0 0 0 5px` sa kreslil ZA hranicu ramceka. Prstenec je preto iba `inset`, takze zvyraznenie ostava vnutri pola. */ .hero-form:focus-within { box-shadow: inset 0 0 0 2px var(--accent); } /* Pole malo z zakladu `max-width: 640px`, takze v sirsej bielej karte koncilo skor nez jej okraj a posobilo to ako nezarovnany prekryv. */ .hero-form { max-width: 100%; } .inline-search { overflow: hidden; } .hero-form::before { content: ""; width: 21px; height: 21px; margin-left: 23px; border: 2px solid #99a2aa; border-radius: 50%; box-sizing: border-box; align-self: center; background: linear-gradient(45deg, transparent 56%, #99a2aa 57% 68%, transparent 69%) 12px 12px / 10px 10px no-repeat; } .hero-form input { min-width: 0; min-height: 70px; padding: 0 18px; color: var(--ink); background: transparent; border: 0; font-size: 17px; } .hero-form input:focus { outline: none; } .hero-form input::placeholder { color: #8a929c; } .hero-form button { min-width: 158px; min-height: 58px; margin: 6px; border-radius: 13px; font-size: 17px; } .hero-quick { padding: 13px 7px 0; color: #758173; } .hero-quick button { min-height: 32px; padding: 5px 11px; color: #49633b; background: #f3f8ec; border: 1px solid #dce9cd; border-radius: 999px; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; } .hero-quick button:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: #bdd99f; } .hero-message { padding-inline: 8px; color: #617064; } .hero-message.success { color: var(--accent-ink); } .hero-message.error { color: var(--danger); } /* Sections and controls */ .section-head { margin-bottom: 20px; align-items: flex-end; } .section-head h2, .cart-panel-head h2, .plus-panel-head h2 { color: var(--ink); font-size: clamp(25px, 2vw, 32px); letter-spacing: -0.035em; } .section-sub, .plus-panel-copy p { color: var(--muted); } .section-tools { gap: 9px; } .segmented { padding: 4px; background: #edf1e9; border: 1px solid #dfe6d9; border-radius: 14px; } .segmented button { min-height: 36px; padding: 7px 13px; color: #637069; border-radius: 10px; } .segmented button.is-active { color: var(--accent-ink); background: #ffffff; box-shadow: 0 4px 12px rgba(11, 31, 51, 0.07); } .btn.ghost { color: #314256; background: #ffffff; border-color: #dce3d7; } .btn.ghost:hover { color: var(--accent-ink); background: #f7fbf2; border-color: #bcd79f; } .btn.ghost.danger { color: var(--danger); border-color: #f0ceca; } /* Product and offer cards */ .items-list { gap: 20px; } .item-card, .cart-panel, .plus-list-panel, .list-comparison, .store-comparison-card, .pricing-card, .how-step { background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(11, 31, 51, 0.08); border-radius: 22px; box-shadow: var(--shadow); } .item-card { padding: 22px; transition: transform 180ms ease, border-color 180ms ease; } .item-card:hover { border-color: rgba(104, 179, 26, 0.28); transform: translateY(-2px); box-shadow: var(--shadow-lift); } .item-card-head { padding-bottom: 17px; border-bottom: 1px solid #eef1ea; } .item-name { color: var(--ink); font-size: 19px; font-weight: 750; } /* Stitky mali uzky padding zdedeny zo zakladu, takze pri tucnejsom rezu redesignu sa posledne pismeno dotykalo okraja. */ .status-pill, .timing-chip { border-radius: 999px; font-weight: 800; padding: 4px 13px; line-height: 1.35; } .status-pill.ok { color: #3c7d0a; background: var(--accent-soft); border-color: #cee6b4; } .best-offer { margin-top: 18px; padding: 20px; background: linear-gradient(125deg, #fbfdf8, #f3f9eb); border: 1px solid #dfead5; border-radius: 18px; } .best-price .label { color: #74826d; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .best-price .value, .offer-price .value { color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; } .best-price .value { font-size: clamp(26px, 2.6vw, 36px); } /* Na mobile ma cena vlastny uzky stlpec vedla nazvu (layout je v app.css pri rovnakej hranici 480px). Velka cena by nazov produktu stlacila na dva znaky na riadok. Musi to byt TU, nie v app.css - ten sa sem importuje, takze by pravidlo nizsie prehralo. */ @media (max-width: 480px) { /* Karta sa na telefone dusila: nazov aj meta sa lamali na kazdy druhy znak. Mensie pismo vrati sirku textovemu stlpcu. */ .best-offer { padding: 12px; } .best-price .value { font-size: 20px; } .best-price .label { font-size: 9px; letter-spacing: 0.03em; line-height: 1.25; } .best-price .offer-price-details { gap: 4px; font-size: 11px; } .best-offer .offer-title { font-size: 14px; } .best-offer .offer-meta { font-size: 11.5px; line-height: 1.45; } /* Kratke popisky tlacidiel len na telefone. Na sirsich obrazovkach zostavaju plne - tam je na ne miesto. */ .offer-actions .btn-label-full, .offer-row .row-actions .btn-label-full { display: none; } .offer-actions .btn-label-short, .offer-row .row-actions .btn-label-short { display: inline; } } @media (max-width: 360px) { .best-price .value { font-size: 20px; } } .original-price { color: #919a9f; } .discount-badge { color: #704b00; background: #ffd54a; border: 0; border-radius: 9px; box-shadow: none; font-weight: 850; } .offer-title, .cart-row-name, .plus-item-name, .lc-name { color: var(--ink); font-weight: 700; } .offer-thumbnail { background: #ffffff; border-color: #e3e8df; border-radius: 16px; } /* Bublina dostala pozadie a ramik, ale ziadny padding - logo aj posledne pismena nazvu tak dosadali priamo na jej hranu. */ .offer-store-line .store-badge, .store-badge { color: #35445a; background: #ffffff; border: 1px solid #e3e8df; border-radius: 12px; gap: 9px; padding: 5px 13px 5px 6px; } .store-badge .dot { background: #ffffff; } /* Logo retazca bolo v bubline stiahnute; v karte ponuky je to hlavny rozlisovaci prvok, takze znesie vacsi format. */ .store-badge .dot.has-logo { width: 36px; height: 36px; border-radius: 10px; padding: 3px; } .store-badge.small .dot.has-logo { width: 30px; height: 30px; } .offer-actions .btn { min-height: 40px; } .more-offers-toggle { color: var(--accent-ink); background: #f5faef; border-color: #d8e9c5; } .more-offers-toggle:hover { background: var(--accent-soft); border-color: #bdd99f; } .more-offers { background: #fafbf8; border: 1px solid #e7ebe3; border-radius: 16px; } /* Zakladny styl pocita s tym, ze rozbaleny zoznam nema vlastny ramik, preto ma riadok len 4 px bocneho odsadenia. Redesign mu ramik a pozadie dal, takze cena vpravo aj miniatura vlavo lezali priamo na jeho hrane. */ .offer-row { padding-inline: 16px; border-color: #e7ebe3; } .offer-row:hover { background: #f4f8ef; } .offer-history-row { color: #778277; border-color: #e5eae1; } .hist-min { color: var(--accent-ink); } /* Basket, planning and comparisons */ .side-column { top: 96px; } .cart-panel { padding: 21px; border-color: #dce5d5; } .cart-panel-head { margin-bottom: 16px; } .cart-panel-head h2 { font-size: 23px; } .cart-empty { padding: 28px 18px; color: #758174; background: #f8faf5; border: 1px dashed #cfdbc5; border-radius: 16px; } .cart-row, .plus-item, .lc-item { background: #ffffff; border: 1px solid #e5eae1; border-radius: 16px; } /* Riadok kosika dedil `padding: 8px 0`, takze miniatura vlavo a cena vpravo dosadali priamo na hranu karty. Miniatura bola navyse 46 px, co je pri produktovej fotke malo na rozoznanie. */ .cart-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-top: 0; } .cart-row .cart-item-thumbnail, .cart-item-thumbnail { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #ffffff; border: 1px solid #eef2ea; padding: 3px; } .cart-panel .cart-body, .cart-sheet .cart-body { display: grid; gap: 10px; } .cart-row:hover, .plus-item:hover, .lc-item:hover { border-color: #c5dda9; } /* Zakladny styl je len ciara nad sumou, preto ma iba `padding-top`. Redesign z toho spravil vyplneny box - bez vnutorneho odstupu lezal "Spolu" aj cena priamo na jeho hrane. */ .cart-total-row { margin-top: 14px; padding: 14px 18px; color: var(--ink); background: var(--accent-soft); border: 1px solid #d2e7ba; border-radius: 15px; } .cart-total-row strong { color: var(--accent-ink); } .list-workspace { max-width: 1120px; margin-inline: auto; } .plus-list-panel { padding: clamp(22px, 3vw, 36px); } .plus-list-form, .waitlist-form, .login-form { background: #f7faf3; border-color: #dce7d3; border-radius: 18px; } input, select, textarea { color: var(--ink); background: #ffffff; border-color: #d6ded0; border-radius: 13px; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(104, 179, 26, 0.12); } .compare-basket-btn { min-height: 52px; border-radius: 15px; } /* Verdikt bol v zaklade TMAVA karta, takze vsetok text v nej je nastaveny na svetle odtiene (#fff, #b9c4d4, accent-glow). Redesign prepisal pozadie na svetle, ale farby textu ostali - vysledok bolo biele pismo na svetlozelenej a text sa strácal. Preto sa tu prefarbuje cely obsah, nielen karta. */ .verdict-card { color: var(--ink); background: linear-gradient(120deg, #eff8e5, #ffffff); border-color: #d5e8c0; border-radius: 20px; } /* Nadpisy stlpcov su 11,5 px verzalky, teda maly text - `--accent-ink` na nich dava iba 3,7:1. Sytejsia zelena drzi 4,7:1 aj na svetlejsom konci gradientu. */ .verdict-card .label, .vstat .label { color: #3c7d0a; } /* `app.css` ma `.lc-verdict-card .verdict-store .store-badge { color: #fff }` so specificitou (0,3,0). Na povodnej TMAVEJ karte to bolo spravne, ale redesign spravil verdikt svetlym gradientom - nazov obchodu vedla loga tak zmizol, biele pismo na svetlom podklade. Odhalilo ho az oznacenie mysou. Selektor tu MUSI mat rovnaku specificitu, inak stara vrstva vyhra bez ohladu na poradie importu. */ .verdict-store .store-badge, .lc-verdict-card .verdict-store .store-badge { color: var(--ink); } .verdict-store-note, .vstat .hint { color: #5f6d5a; } .verdict-line { color: #2f3f2a; } .verdict-split { background: rgba(255, 255, 255, 0.78); border-color: #dbe9cc; } .verdict-split strong, .verdict-split p strong { color: var(--ink); } .verdict-split p { color: #5f6d5a; } .verdict-split .split-verdict { color: #3c7d0a; } .vstat { background: rgba(255, 255, 255, 0.78); border-color: #dbe9cc; } .vstat strong { color: var(--ink); } /* Zvyraznene cislo (cena najdenych) - sytejsia zelena, nie bledy accent-glow. */ .vstat strong.pos { color: var(--accent-ink); } /* Store tiles */ .leaflets-section { margin-top: 70px; padding: clamp(24px, 3vw, 38px); background: linear-gradient(135deg, rgba(250, 252, 247, 0.98), rgba(242, 247, 234, 0.96)); border: 1px solid #e1e8da; border-radius: 28px; } .store-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .store-tile { min-height: 116px; padding: 18px; justify-content: center; color: var(--ink); background: #ffffff; border: 1px solid rgba(11, 31, 51, 0.07); border-radius: 18px; box-shadow: 0 14px 30px -28px rgba(11, 31, 51, 0.32); transition: transform 180ms ease, border-color 180ms ease; } .store-tile:hover { color: var(--accent-ink); border-color: #c8ddaF; transform: translateY(-3px); box-shadow: 0 22px 40px -30px rgba(62, 111, 16, 0.38); } .store-tile .dot { width: 48px; height: 48px; border-radius: 14px; } .store-tile .dot img { width: 44px; height: 44px; } .store-tile .sub { color: #879184; } /* Dialogs and overlays */ .overlay { background: rgba(11, 31, 51, 0.68); } .sheet { background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 24px; box-shadow: 0 32px 80px -28px rgba(4, 17, 29, 0.55); } .sheet-head { border-color: #e7ece3; } .sheet-head h2 { color: var(--ink); letter-spacing: -0.035em; } .icon-btn { border-radius: 12px; } .pricing-card.featured { background: linear-gradient(145deg, #f2fae9, #ffffff); border-color: #bcd99f; box-shadow: 0 20px 40px -28px rgba(71, 126, 17, 0.35); } .plan-label, .step-number { color: var(--accent-ink); background: var(--accent-soft); } /* MúdryKošík Plus - modal. Vsetko je scopovane pod `.plus-sheet`, aby sa nedotklo ostatnych modalov, ktore zdielaju `.sheet`, `.sheet-head` a `.waitlist-form`. */ .plus-sheet { gap: 16px; overflow-wrap: break-word; } /* Modal je dlhy, po odrolovani by krizik zmizol. Prilepi sa preto na vrch. Zaporne okraje ho roztiahnu cez padding listu, aby text nepresvital bokom. */ .plus-sheet .sheet-head { position: sticky; top: 0; z-index: 2; margin: -20px -20px 0; padding: 18px 20px; background: #ffffff; border-bottom: 1px solid #e7ece3; border-radius: 24px 24px 0 0; } .plus-trial { padding: clamp(18px, 3vw, 26px); background: linear-gradient(145deg, #f2fae9, #ffffff); border: 1px solid #cfe6b4; border-radius: 22px; } .plus-trial h3 { margin: 0; color: var(--accent-ink); font-family: var(--font-display); font-size: clamp(23px, 3.4vw, 31px); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; } .plus-trial-lead { margin: 10px 0 0; color: var(--text); font-size: 16px; line-height: 1.5; } .plus-trial-badge { display: inline-block; margin: 14px 0 0; padding: 6px 12px; color: var(--accent-ink); background: #ffffff; border: 1px solid #cfe6b4; border-radius: 999px; font-size: 13px; font-weight: 800; } .plus-trial-body { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } .plus-features h3, .plus-pricing h3 { margin: 0 0 12px; color: var(--ink); font-size: 16px; font-weight: 750; } .plus-features ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 9px 20px; margin: 0; padding: 0; list-style: none; } .plus-features li { position: relative; padding-left: 27px; color: var(--text); font-size: 14.5px; line-height: 1.45; } .plus-features li::before { content: "✓"; position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 19px; height: 19px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 50%; font-size: 11px; font-weight: 800; } .plus-cta { justify-content: center; width: 100%; padding-block: 14px; font-size: 16px; } .plus-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 12px; } .plus-plan { display: grid; align-content: start; gap: 6px; padding: 18px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(11, 31, 51, 0.08); border-radius: 18px; box-shadow: var(--shadow); } /* Rocny variant sa zvyrazni len ramikom a jemnym podkladom - ziadny krik. */ .plus-plan.is-best { background: linear-gradient(145deg, #f4fbec, #ffffff); border-color: #bcd99f; } .plus-plan .plan-label { justify-self: start; padding: 4px 10px; border-radius: 7px; } .plus-plan-name { color: var(--muted); font-size: 13px; font-weight: 700; } .plus-plan-price { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.035em; } .plus-plan-price span { color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; } .plus-plan-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .plus-closing { padding: 16px 18px; background: var(--accent-soft); border: 1px solid #d8ecc2; border-radius: 18px; } .plus-closing p { margin: 0; color: #46603a; font-size: 13.5px; line-height: 1.5; } /* Musi prebit `.plus-closing p { margin: 0 }` vyssie, preto dve triedy. */ .plus-closing .plus-closing-lead { margin-bottom: 6px; color: var(--accent-ink); font-size: 15px; font-weight: 750; } .leaflets-shell, .viewer-shell { background: #f8faf5; } .leaflets-topbar { background: var(--ink); } .leaflets-store-chips button.is-active { color: #ffffff; background: var(--accent-ink); border-color: var(--accent-ink); } /* Karta "Oplati sa" ma teraz dve tlacidla; na uzkej karte sa musia zalomit pod text, nie sa zoskrtit. */ .best-price-footer { flex-wrap: wrap; gap: 8px; } .best-price-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } /* Dlazdice letakov mali logo aj popis v zakladnej velkosti, ktora je v tomto rozlozeni prilis drobna - je to hlavny vyber na obrazovke Letaky. */ .leaflet-card { border-radius: 18px; gap: 8px; padding: 16px; } .leaflet-card .lc-title { font-size: 15.5px; line-height: 1.35; } .leaflet-card .lc-dates { font-size: 13.5px; } .leaflet-card .store-badge { font-size: 14.5px; } .leaflet-card .store-badge .dot.has-logo { width: 40px; height: 40px; border-radius: 11px; } /* Footer and floating actions */ .footer { color: #758174; background: #ffffff; border-top: 1px solid #e3e8df; } .footer strong { color: var(--ink); } .cart-fab { color: #ffffff; background: linear-gradient(180deg, #71ba1d, #529d0b); border: 1px solid #4b9108; border-radius: 18px; box-shadow: 0 18px 36px -16px rgba(46, 96, 7, 0.72); } .toast { color: #ffffff; background: var(--ink); border-radius: 14px; } /* Oplatí sa — only offers verified against the recorded price history. */ body[data-active-view="oplati-sa"] .page, body[data-active-view="zoznam"] .page { margin-top: 34px; } .best-prices-shell { min-height: 440px; } .best-prices-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .best-prices-head h2 { margin: 3px 0 4px; color: var(--ink); font-size: clamp(34px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; } .best-prices-kicker { margin: 0; color: var(--accent-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } .best-prices-explainer { max-width: 840px; margin: 20px 0 30px; padding: 14px 17px; color: #526154; background: var(--accent-soft); border: 1px solid #d7e9c6; border-radius: 14px; font-size: 14px; } .best-prices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* Zakladny styl kresli kartu vodorovne: mriezka `116px | 1fr`, obrazok v prvom stlpci a telo v druhom. Redesign ju kresli zvisle - obrazok hore cez celu sirku, telo pod nim - ale mriezku z `app.css` nikdy nezrusil. Stlpce tak zostali a stitok "Historicky najnizsia cena" v uzkom prvom stlpci zasahoval do popisu produktu. Preto sa tu layout prepisuje cely, nie po vlastnostiach. */ .best-price-card { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; overflow: hidden; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(11, 31, 51, 0.09); border-radius: 22px; box-shadow: var(--shadow); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .best-price-card:hover { border-color: rgba(104, 179, 26, 0.34); transform: translateY(-3px); box-shadow: var(--shadow-lift); } .best-price-media { position: relative; display: grid; min-height: 178px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f8fbf4, #edf6e5); border-bottom: 1px solid #e6ecdf; } .best-price-media .offer-thumbnail { width: 100%; height: 178px; border: 0; border-radius: 0; background: transparent; } .best-price-media .offer-thumbnail img { width: 100%; height: 100%; padding: 18px; object-fit: contain; } .best-price-media .offer-thumbnail-placeholder { width: 54px; height: 54px; color: #91ab77; } .best-price-label { position: absolute; top: 14px; left: 14px; /* Aby stitok nikdy nevyliezol z obrazka, aj keby text narastol. */ max-width: calc(100% - 28px); box-sizing: border-box; padding: 7px 10px; color: #ffffff; background: var(--accent-ink); border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px -10px rgba(45, 96, 5, 0.8); } .best-price-body { display: flex; min-height: 370px; padding: 19px; flex-direction: column; } .best-price-store { margin-bottom: 11px; } .best-price-body h3 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.32; } .best-price-package { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .best-price-current { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 17px; } .best-price-current strong { color: var(--accent-ink); font-size: 30px; line-height: 1; letter-spacing: -0.04em; } .best-price-current span { color: var(--muted); font-size: 12px; text-align: right; } .best-price-history { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin-top: 18px; padding: 12px 13px; color: #526154; background: #f7f9f4; border: 1px solid #e6ebe1; border-radius: 12px; font-size: 13px; } .best-price-history strong { color: var(--ink-2); } .best-price-history small { grid-column: 1 / -1; color: var(--muted); } .best-price-saving { margin: 13px 0 18px; color: #4e5c50; font-size: 13px; line-height: 1.45; } .best-price-saving strong { color: var(--accent-ink); } .best-price-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf0e9; } .best-price-footer > span { color: var(--muted); font-size: 12px; } .best-price-footer .btn { flex: 0 0 auto; } .best-prices-state { display: flex; grid-column: 1 / -1; min-height: 220px; padding: 34px; align-items: center; justify-content: center; flex-direction: column; gap: 9px; color: var(--muted); background: rgba(255, 255, 255, 0.9); border: 1px dashed var(--line-strong); border-radius: 22px; text-align: center; } .best-prices-state strong { color: var(--ink); font-size: 18px; } .best-prices-state.is-error strong { color: var(--danger); } .best-prices-spinner { width: 28px; height: 28px; border: 3px solid #dce9cf; border-top-color: var(--accent-ink); border-radius: 50%; animation: best-prices-spin 700ms linear infinite; } @keyframes best-prices-spin { to { transform: rotate(360deg); } } /* Responsive */ @media (min-width: 1800px) { :root { --content-width: 1640px; } .hero { min-height: 540px; } .hero-main { max-width: 920px; } } @media (min-width: 2400px) { :root { --content-width: 1840px; } .hero { min-height: 580px; grid-template-columns: minmax(0, 1.15fr) minmax(520px, 0.85fr); } .hero h1 { font-size: 98px; } } @media (max-width: 1180px) { .topnav > a:nth-of-type(4), .topnav > a:nth-of-type(5), .topnav > a:nth-of-type(6), .topnav > a:nth-of-type(7) { display: none; } .mobile-nav-menu { display: block; } .hero { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: 44px; } .hero-value { padding-right: 0; } .actions-workspace { grid-template-columns: minmax(0, 1fr) 310px; } } @media (max-width: 980px) { .topbar-inner, .hero, .page { width: min(100% - 32px, var(--content-width)); } .hero-block { padding-bottom: 0; } .hero-block::before { width: 76vw; right: -24vw; } .hero-block::after { top: 20%; right: 3vw; } .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 72px; } .hero-main { max-width: 780px; } /* Medzi 901 a 980 px este plavaju stitky okolo obrazka - stara mriezka po trojici a pevna vyska kariet by ich rozhodili. */ .hero-value { max-width: 780px; } .actions-workspace { grid-template-columns: 1fr; } .best-prices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .side-column { position: static; } .cart-panel { display: none; } /* Tri tlacidla hlavnej ponuky maju vojst do jedneho riadka bez zalomenia. Miesto na to vytvara IBA kompaktnejsia miera tlacidiel. Cela sirka karty (`grid-column: 1 / -1`) tu NIE JE moznost: miniatura v prvom stlpci sa tiahne cez styri riadky, takze akcie by sa s nou prekryli a prve tlacidlo by zmizlo pod obrazkom. Pod 480px to ide, lebo tam miniatura zabera iba tri riadky - to pravidlo je v app.css. */ .offer-actions, .offer-row .row-actions { gap: 6px; } .offer-actions .btn, .offer-row .row-actions .btn { min-height: 34px; padding: 0 9px; font-size: 12px; gap: 5px; } .store-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 719px) { body { font-size: 15px; } .topbar-inner { min-height: 68px; gap: 10px; } .best-prices-head { align-items: flex-start; flex-direction: column; } .best-prices-head .btn { width: 100%; } .best-prices-grid { grid-template-columns: 1fr; } .best-price-body { min-height: 0; } .brand { height: 38px; } .topnav { margin-left: auto; } /* Zakladny styl posuva `.topnav` pod listu ako druhy riadok (`order: 3`, `width: 100%`), takze v prvom riadku ostava len logo a akcie. S `margin-left: 0` sa akcie prilepili na logo vlavo - patria k pravemu okraju. */ .topbar-actions { margin-left: auto; } .location-chip { min-width: 43px; padding-inline: 10px; } .location-chip span { display: none; } /* Kosik aj prihlasenie zostavaju v liste aj na mobile, iba bez textu. Predtym sa kosik pod 719 px skryval uplne a nahradzalo ho plavajuce tlacidlo - lenze to sa ukazuje az ked je v kosiku aspon jedna polozka, takze s prazdnym kosikom sa k nemu nedalo dostat vobec. Prihlasenie zasa ostavalo len v rozbalovacom menu "Viac", kde ho nikto nehladal. */ .cart-chip, .topbar-actions .auth-chip { display: inline-flex; min-width: 43px; padding-inline: 10px; } .cart-chip-total, #auth-chip-label { display: none; } .hero-block { padding-bottom: 0; } .hero-block::before { width: 112vw; right: -66vw; top: 16%; opacity: 0.72; } .hero-block::after { width: 76px; top: 30%; right: -15px; font-size: 31px; opacity: 0.8; } .hero { padding: 54px 0 60px; gap: 32px; } .hero-kicker { margin-bottom: 16px; font-size: 10px; } .hero h1 { max-width: 620px; font-size: clamp(39px, 10.5vw, 56px); line-height: 1.01; } .hero-lead { margin-top: 22px; font-size: 17px; } .hero-actions { margin-top: 24px; } .hero-note { margin-top: 14px; } .hero-value { grid-template-columns: 1fr; gap: 10px; padding: 0; } .page { width: min(100% - 22px, var(--content-width)); margin-top: 28px; padding-bottom: 64px; } body[data-active-view="zoznam"] .page { margin-top: 22px; } .inline-search { padding: 9px; border-radius: 20px; } .hero-form { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-height: 58px; box-shadow: inset 0 0 0 1px #dfe5da; } .hero-form::before { width: 18px; height: 18px; margin-left: 14px; } .hero-form input { min-height: 58px; padding: 0 12px; font-size: 16px; } .hero-form button { grid-column: 1 / -1; min-width: 0; min-height: 50px; margin: 3px; border-radius: 13px; } .hero-quick { padding-top: 10px; } .section-head { align-items: stretch; } /* Filter a Obnoviť patria na JEDEN riadok. `width: 100%` na filtri tlacilo tlacidlo pod neho a vznikol prazdny pas cez celu sirku obrazovky. */ .section-tools { align-items: center; flex-wrap: nowrap; } .segmented { flex: 1 1 auto; min-width: 0; } .segmented button { flex: 1 1 0; min-width: 0; } .section-tools > .btn { flex: 0 0 auto; white-space: nowrap; } .item-card { padding: 15px; border-radius: 18px; } .best-offer { padding: 15px; } .plus-list-panel { border-radius: 20px; } .leaflets-section { margin-top: 44px; padding: 20px 15px; border-radius: 22px; } .store-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .store-tile { min-height: 100px; padding: 13px; border-radius: 15px; } .sheet { border-radius: 22px 22px 0 0; } } @media (max-width: 430px) { .topbar-inner, .hero { width: calc(100% - 22px); } /* Lockup je siroky 4x svoju vysku, na najuzsom displeji by zabral pol listy. */ .brand { height: 32px; } /* V liste su teraz styri prvky - lokalita, kosik, prihlasenie a "Viac". Aby sa zmestili aj na 360 px, ubera sa z medzier a z popisku "Viac". */ .topbar-inner { gap: 10px; } .topbar-actions { gap: 6px; } .mobile-nav-toggle span { display: none; } .topnav > a { padding-inline: 9px; } .hero h1 { font-size: clamp(38px, 10.5vw, 46px); } .hero-actions { display: grid; grid-template-columns: 1fr; } .hero-actions .btn { width: 100%; } .hero-quick span { width: 100%; } /* Ani na najuzsom displeji sa Obnoviť nelame pod filter - iba sa zuzi. */ .section-tools { gap: 6px; } .section-tools > .btn { padding-left: 10px; padding-right: 10px; } .store-tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 360px) { .topnav > a { font-size: 12px; } .mobile-nav-toggle { padding-inline: 8px; } .hero h1 { font-size: 38px; } .hero-lead { font-size: 16px; } /* Na 360 px je riadok "Vsetky | Aktualne | Budúce | Obnoviť" tesny. Radsej zmensime pismo nez aby sa Obnoviť zlomilo pod filter - to bol povodny problem. Text sa neskryva: ikona sama by nepovedala, co tlacidlo robi. */ .segmented button, .section-tools > .btn { font-size: 12px; padding-left: 8px; padding-right: 8px; } /* Kratsi nazov sa nesmie orezat na pol slova. */ .segmented button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* Odskrtavanie poloziek v zdielanom kosiku. Fajka je zdielana - kto ma odkaz, vidi rovnaky stav. Polozka zostava na svojom mieste a nikam neskace, len zosivie a preskrtne sa. */ .cart-pick { flex: 0 0 auto; display: grid; place-items: center; /* 44 px je minimum, do ktoreho sa na mobile spolahlivo trafi prst. */ width: 44px; height: 44px; margin: -6px 0 -6px -6px; cursor: pointer; } .cart-pick input { position: absolute; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; } .cart-pick-box { display: grid; place-items: center; width: 24px; height: 24px; background: #ffffff; border: 2px solid #c7d3c0; border-radius: 7px; transition: background-color 140ms ease, border-color 140ms ease; } .cart-pick-box::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #ffffff; border-bottom: 2.5px solid #ffffff; opacity: 0; transform: rotate(-45deg) translate(1px, -1px); } .cart-pick input:checked + .cart-pick-box { background: var(--accent-ink); border-color: var(--accent-ink); } .cart-pick input:checked + .cart-pick-box::after { opacity: 1; } .cart-pick input:focus-visible + .cart-pick-box { outline: 3px solid rgba(104, 179, 26, 0.35); outline-offset: 2px; } .cart-row.is-picked { background: var(--accent-soft); border-radius: 12px; } .cart-row.is-picked .cart-row-name { color: #4d6a4f; text-decoration: line-through; text-decoration-thickness: 1px; } .cart-progress { margin: 0 0 12px; padding: 10px 14px; color: var(--text); background: #f7faf3; border: 1px solid #dce7d3; border-radius: 12px; font-size: 13.5px; } .cart-progress strong { color: var(--accent-ink); } .cart-progress.is-done { color: var(--accent-ink); background: var(--accent-soft); border-color: #c4e3c7; font-weight: 700; } /* Letáky ako dlaždice. Pri `minmax(230px, ...)` spadli na uzkom displeji do jedneho stlpca a boli z nich dlhe bloky pod sebou. */ @media (max-width: 719px) { .leaflet-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .leaflet-card { padding: 12px; } .leaflet-card .lc-title { font-size: 14px; } .leaflet-card .lc-dates { font-size: 12px; } } /* Nainstalovana aplikacia. Nie je to prehliadac s kartou, ale samostatna obrazovka - kosik preto nema byt plavajuci panel, ale cela plocha. */ @media (display-mode: standalone) { #cart-sheet .sheet { width: 100%; max-width: none; max-height: none; height: 100dvh; border-radius: 0; /* Systemova lista a gesto navigacie nesmu prekryvat obsah. */ padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); } #cart-sheet { padding: 0; } /* Krizik musi zostat dostupny aj pri dlhom kosiku. */ #cart-sheet .sheet-head { position: sticky; top: 0; z-index: 2; margin: 0 -20px; padding: 4px 20px 12px; background: #ffffff; border-bottom: 1px solid #e7ece3; } } /* Zoznam vytvorenych zdielani. Odkazy platia 30 dni, takze ich byva viac naraz a bez datumu sa neda rozoznat, ktory sa prave odskrtava. */ .cart-shares { margin: 0 0 10px; padding: 10px 12px; background: #f7faf3; border: 1px solid #dce7d3; border-radius: 12px; } .cart-shares-head { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .cart-shares ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .cart-shares li { display: flex; align-items: stretch; background: #ffffff; border: 1px solid #e3e9de; border-radius: 10px; overflow: hidden; } .cart-shares li.is-active { border-color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent-ink) inset; } .cart-shares button { min-height: 36px; padding: 0 10px; color: #314256; background: none; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; } .cart-shares li.is-active > button:first-child { color: var(--accent-ink); } .cart-shares .share-drop { padding-inline: 9px; color: var(--muted); border-left: 1px solid #e3e9de; } .cart-shares .share-drop:hover { color: var(--danger); background: var(--danger-soft); } /* Horna hranica rozsahu cien. Je to najvyssia zaznamenana cena, teda to, comu sa chce clovek vyhnut - preto cervene pozadie a nie iba farba pisma. */ .best-price-history .price-high { padding: 1px 6px; color: #ffffff; background: var(--danger); border-radius: 6px; white-space: nowrap; } /* Upozornenie, ze ten isty produkt je inde lacnejsi. Zamerne jemne: je to informacia, nie chyba. Cervena upozornuje, ale nesmie z riadku spravit poplach. */ .better-price { grid-column: 1 / -1; margin: 6px 0 0; padding: 6px 10px; color: #9c2f1c; background: #fff2ee; border: 1px solid #f4d3c8; border-radius: 9px; font-size: 13px; line-height: 1.4; } .better-price strong { color: #8f2a18; } /* Vymena za lacnejsiu ponuku. Tlacidlo je hned pri tvrdeni o cene, aby sa nedalo prehliadnut, ale vizualne slabsie nez "Odstranit" - vymena je ponuka, nie vyzva. */ .better-price-swap { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 10px; color: #8f2a18; background: #fff; border: 1px solid #e6b9aa; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background 140ms ease, border-color 140ms ease; } .better-price-swap:hover:not(:disabled) { background: #ffe6dd; border-color: #d98c74; } .better-price-swap:disabled { opacity: 0.55; cursor: progress; } .better-price-swap span { font-size: 13px; } /* Vernostna cena nie je dostupna kazdemu - musi to byt vidno na prvy pohlad. */ .better-price-loyalty { display: inline-block; padding: 1px 7px; color: #6a4a12; background: #ffe9b8; border-radius: 999px; font-size: 11.5px; font-weight: 700; } /* Prehliadac letaku. Je to TMAVY overlay (`.overlay full dark`), ale redesign nastavil svetlemu zvysku aplikacie tmavu farbu pisma - nadpis letaka ju zdedil a bol tmavy na tmavom, teda takmer neviditelny. */ #page-viewer .viewer-title strong { color: #0b1f33; font-size: 16px; } #page-viewer .viewer-title span { color: #3b4a5c; font-weight: 600; } #page-viewer .viewer-hotspot-count { color: var(--ink); background: var(--accent-glow); } /* Sipky boli absolutne prilepene na okraje obrazovky (`left: 8px`), takze pri vycentrovanom letaku boli aj pol metra od neho a na tmavom pozadi ich takmer nebolo vidno. Stage je teraz jeden riadok: sipka - letak - sipka. */ #page-viewer .viewer-stage { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 20px); padding: 0 clamp(10px, 1.6vw, 24px) 18px; } #page-viewer .viewer-nav { position: static; flex: 0 0 auto; transform: none; width: 46px; height: 74px; color: var(--ink); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.8); font-size: 30px; font-weight: 700; } #page-viewer .viewer-nav:hover { color: var(--accent-ink); background: #ffffff; } #page-viewer .viewer-nav:disabled { opacity: 0.35; } #page-viewer .viewer-canvas { min-width: 0; } /* Na mobile sa sipky pod letak nezmestia vedla neho - ostanu pri okrajoch, ale uz s citatelnym kontrastom. */ @media (max-width: 719px) { #page-viewer .viewer-stage { gap: 4px; padding-inline: 4px; } #page-viewer .viewer-nav { width: 38px; height: 60px; font-size: 24px; } } /* Odkazy na stranky retazcov v paticke. Su to skutocne navstivitelne stranky, nie skryte SEO odkazy - preto vyzeraju ako odkazy a su citatelne. */ .footer .footer-links { margin-top: 8px; font-size: 0.85rem; color: var(--muted, #5b6b80); } .footer .footer-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .footer .footer-links a:hover { color: var(--brand, #0d7f74); } /* ---------- kosik pripnuty v prehliadaci letakov ---------- Kto sa v letaku ukliknul, opravi to na mieste. Panel je zbaleny, kym oň pouzivatel nepoziada - letak je hlavny obsah a trvalo otvoreny zoznam by z neho ukrajoval. */ /* Panel sa kotvi k SPODKU listy, nie k uhadnutej vyske. Lista ma pri dlhom nazve letaku dva riadky - pevne `top` ju prekrylo aj s tlacidlom kosika, takze sa panel nedal zavriet. */ .viewer-topbar { position: relative; } .btn-label-short { display: none; } .viewer-cart-toggle { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .viewer-cart-toggle.is-empty { opacity: 0.6; } .viewer-cart-panel { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; left: auto; width: min(360px, calc(100% - 24px)); max-height: min(52vh, 420px); overflow-y: auto; padding: 12px 14px; color: var(--ink); background: #ffffff; border: 1px solid #dfe5da; border-radius: 14px; box-shadow: 0 18px 44px rgba(12, 20, 36, 0.34); } .viewer-cart-panel[hidden] { display: none; } .viewer-cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eef2ea; } .viewer-cart-total { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .viewer-cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; padding: 7px 0; border-bottom: 1px solid #f2f5ef; } .viewer-cart-row:last-child { border-bottom: 0; } .viewer-cart-store { grid-column: 1 / -1; color: #74826d; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .viewer-cart-name { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .viewer-cart-price { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } .viewer-cart-remove { width: 26px; height: 26px; padding: 0; color: #9c2f1c; background: #fff2ee; border: 1px solid #f4d3c8; border-radius: 8px; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; } .viewer-cart-remove:hover:not(:disabled) { background: #ffe0d6; } .viewer-cart-remove:disabled { opacity: 0.5; cursor: progress; } .viewer-cart-empty { margin: 6px 0; color: var(--muted); font-size: 13px; line-height: 1.45; } .viewer-cart-close { width: 26px; height: 26px; margin-left: 4px; padding: 0; color: var(--muted); background: #f4f7f1; border: 1px solid #e2e8dd; border-radius: 8px; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; } .viewer-cart-close:hover { color: var(--ink); background: #e8eee3; } /* Mnozstvo a upozornenie na lacnejsiu ponuku idu na vlastny riadok - vedla nazvu by sa na mobile nezmestili. */ .viewer-cart-qty { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 2px; justify-self: start; margin-top: 2px; } .viewer-cart-qty button { width: 24px; height: 24px; padding: 0; color: var(--ink); background: #f4f7f1; border: 1px solid #e2e8dd; border-radius: 7px; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; } .viewer-cart-qty button:hover:not(:disabled) { background: #e8eee3; } .viewer-cart-qty button:disabled { opacity: 0.5; cursor: progress; } .viewer-cart-qty > span { min-width: 30px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; } .viewer-cart-better { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; padding: 5px 8px; color: #9c2f1c; background: #fff2ee; border: 1px solid #f4d3c8; border-radius: 8px; font-size: 12px; line-height: 1.35; } .viewer-cart-swap { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; color: #8f2a18; background: #ffffff; border: 1px solid #e6b9aa; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .viewer-cart-swap:hover:not(:disabled) { background: #ffe6dd; } .viewer-cart-swap:disabled { opacity: 0.55; cursor: progress; } @media (max-width: 480px) { /* Na mobile je navigacia stran dole, takze panel visi zhora a nesmie siahat az k nej. */ .viewer-cart-panel { right: 0; width: min(100%, 92vw); max-height: 46vh; } } /* ---------- vernostné karty ---------- Peňaženka pre reťazce, ktoré MúdryKošík porovnáva. Nie univerzálna wallet - jediný cieľ je, aby používateľ pri pokladni nemusel hľadať inú aplikáciu. */ .wallet-privacy { margin: 0 0 14px; padding: 9px 12px; color: #2f5d3a; background: #eef7e8; border: 1px solid #d3e7c5; border-radius: 10px; font-size: 13px; line-height: 1.45; } .wallet-list { display: grid; gap: 8px; } .wallet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; } .wallet-row.is-saved { border-color: #cfe6bd; background: #fbfdf8; } .wallet-row-name { font-weight: 700; font-size: 14.5px; } .wallet-row-state { grid-column: 1 / -1; order: 3; color: var(--muted); font-size: 12px; } .wallet-row-actions { display: flex; flex-wrap: wrap; gap: 6px; } .wallet-danger { color: #9c2f1c; border-color: #f0cec3; } .wallet-danger:hover { background: #fff2ee; } .wallet-empty, .wallet-preview-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; } /* --- editor karty --- */ .wallet-scan-btn { width: 100%; margin-bottom: 12px; } .wallet-scan { margin-bottom: 12px; } .wallet-video { display: block; width: 100%; max-height: 260px; background: #0c1424; border-radius: 12px; object-fit: cover; } .wallet-field { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--muted); } .wallet-field select, .wallet-field input { min-height: 44px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; font: inherit; font-size: 15px; } .wallet-preview { display: grid; place-items: center; min-height: 96px; margin-bottom: 12px; padding: 10px; background: #fff; border: 1px dashed var(--line); border-radius: 12px; } .wallet-preview svg { max-width: 100%; height: auto; } /* --- karta pod sumárom košíka --- */ .wallet-cart-card, .wallet-cart-add { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; color: inherit; background: #fff; border: 1px solid #cfe6bd; border-radius: 12px; font: inherit; text-align: center; cursor: pointer; } .wallet-cart-add { color: var(--accent-ink); background: #f5faef; border-style: dashed; font-size: 13px; font-weight: 600; } .wallet-cart-label { display: block; color: #74826d; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .wallet-cart-code { display: block; margin: 6px 0 4px; } .wallet-cart-code svg { max-width: 100%; height: auto; } .wallet-cart-hint { display: block; color: var(--muted); font-size: 11.5px; } /* --- súhlas pri zdieľaní --- */ .wallet-share-options { display: grid; gap: 6px; margin-bottom: 10px; } .wallet-share-option { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 11px; font-size: 14px; cursor: pointer; } /* Iny ton nez `.wallet-privacy` - pri zdielani karta na server IDE. */ .wallet-share-note { margin: 0 0 14px; padding: 9px 12px; color: #6a4a12; background: #fff6e0; border: 1px solid #f0dfae; border-radius: 10px; font-size: 12.5px; line-height: 1.45; } .wallet-share-actions { display: flex; justify-content: flex-end; gap: 8px; } /* --- fullscreen pri pokladni --- */ .wallet-fullscreen { background: #ffffff; } .wallet-fullscreen-inner { display: grid; align-content: start; gap: 16px; width: min(560px, 100%); padding: 18px; } .wallet-fullscreen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; } /* Biele pozadie a maximalny kontrast - skener cita odraz, nie dizajn. */ .wallet-fullscreen-code { display: grid; place-items: center; padding: 16px 8px; background: #fff; border-radius: 14px; } .wallet-fullscreen-code svg { width: 100%; height: auto; } /* QR je stvorec: na 100 % sirky by na uzkej obrazovke pretiekol nadol a clovek by pri pokladni skroloval prave vtedy, ked ma na to najmenej casu. */ .wallet-fullscreen-code svg[data-qr] { width: auto; max-width: 100%; max-height: 62vh; } .wallet-fullscreen-hint { margin: 0; color: var(--muted); font-size: 13px; text-align: center; } /* ---------- SEO stránky reťazcov (/akcie, /akcie/) ---------- Stránky sú serverom vykreslené a bez aplikačného JS, ale MUSIA vyzerať ako MúdryKošík - návštevník z Googlu nesmie mať pocit, že opustil web. Preto používajú ten istý stylesheet a tie isté triedy hlavičky a pätičky. Triedy obsahu majú prefix `seo-`, lebo `.card`, `.name` a `.price` sú v aplikácii obsadené a bez prefixu by si navzájom prepisovali vzhľad. */ /* Rozbaľovacie menu "Viac" potrebuje JS, ktorý tu nebeží. Odkazy sa preto na užších displejoch zalamujú namiesto toho, aby zmizli. */ .seo-page .topnav { flex-wrap: wrap; } @media (max-width: 1180px) { .seo-page .topnav > a:nth-of-type(4), .seo-page .topnav > a:nth-of-type(5), .seo-page .topnav > a:nth-of-type(6) { display: inline-flex; } } .seo-crumbs { margin-bottom: 16px; color: var(--muted); font-size: 13px; } .seo-crumbs a { color: var(--accent-ink); text-decoration: none; } .seo-crumbs span { margin: 0 6px; color: #b6c0ca; } .seo-page h1 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; } .seo-page h2 { margin: 30px 0 12px; font-size: 17px; } .seo-lede { max-width: 62ch; margin: 0 0 20px; color: var(--muted); font-size: 15.5px; line-height: 1.6; } .seo-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .seo-list { margin: 0; padding: 0; overflow: hidden; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .seo-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #eef2f7; } .seo-list li:first-child { border-top: 0; } .seo-name { flex: 1 1 auto; min-width: 0; font-weight: 600; } .seo-name small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; font-weight: 400; } .seo-price { font-weight: 700; white-space: nowrap; } .seo-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; color: #6a4a12; background: #ffe9b8; border-radius: 999px; font-size: 11px; font-weight: 700; } .seo-stores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; } .seo-stores a { display: inline-block; padding: 8px 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; } .seo-stores a:hover { border-color: var(--accent); } .seo-empty { padding: 16px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .seo-foot { margin-top: 28px; color: var(--muted); font-size: 13px; } @media (max-width: 719px) { .seo-list li { flex-direction: column; gap: 4px; } .seo-cta-row .btn { flex: 1 1 100%; justify-content: center; } } /* Napoveda k typu kodu v editore vernostnej karty. */ .wallet-hint { margin: 0 0 12px; padding: 9px 12px; color: #4a5b6f; background: #f3f7fb; border: 1px solid #dbe6f0; border-radius: 10px; font-size: 12.5px; line-height: 1.45; } /* Karta, ktoru NEMA zmysel prepisovat rucne (Kaufland). Odlisena farbou od beznej napovedy - nie je to tip, ale prekazka, o ktoru sa clovek inak zasekne az pri pokladni. */ .wallet-hint-block { color: #7a4a12; background: #fdf4e6; border-color: #f0dbb8; } /* ---------- Strážca cien ---------- Sledované je vlastný pohľad, nie zoznam v zozname: "čo idem kúpiť teraz" a "čo chcem dlhodobo strážiť" sú dve rôzne veci. */ .watch-page { max-width: 780px; margin: 0 auto; padding: 8px 0 40px; } .watch-head h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.01em; } .watch-lead { margin: 0 0 12px; color: var(--muted); font-size: 14px; } .watch-summary { margin: 0 0 16px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft, #edf8df); color: var(--accent-ink, #4a8f0c); font-weight: 700; font-size: 14px; width: fit-content; } .watch-list { display: grid; gap: 12px; } .watch-empty { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; } .watch-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); } /* Dobra cena je jediny stav, ktory sa oplati zvyraznit. Keby svietili vsetky, nesvietil by ziadny. */ .watch-item.is-matched { border-color: var(--accent, #68b31a); box-shadow: 0 0 0 1px var(--accent, #68b31a); } .watch-item header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; } .watch-item h2 { margin: 0; font-size: 16px; } .watch-rule { color: var(--muted); font-size: 12.5px; } .watch-offer { margin: 0 0 4px; font-size: 14px; font-variant-numeric: tabular-nums; } .watch-state { margin: 0 0 10px; font-size: 13px; color: var(--muted); } .watch-state[data-state="MATCHED"] { color: var(--accent-ink, #4a8f0c); font-weight: 600; } .watch-item-actions { display: flex; flex-wrap: wrap; gap: 6px; } .watch-nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: var(--accent, #68b31a); color: #fff; font-size: 11px; font-weight: 700; } .watch-dialog-product { margin: 0 0 14px; font-weight: 600; } .watch-modes { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; } .watch-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .watch-mode small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; } .watch-mode:has(input:checked) { border-color: var(--accent, #68b31a); background: var(--accent-soft, #edf8df); } .watch-target { display: grid; gap: 6px; margin: 0 0 12px; } .watch-target-input { display: flex; align-items: center; gap: 8px; } .watch-target-input input { flex: 1 1 auto; } .watch-target-input em { font-style: normal; color: var(--muted); } .watch-dialog-actions { display: flex; justify-content: space-between; gap: 8px; } /* Ikonove tlacidlo - stvorec, nie natiahnuty pasik. Bez pevnej sirky by ho flexbox v riadku akcii roztiahol a rozlozenie karty by sa rozislo. */ .watch-toggle { flex: 0 0 auto; width: 34px; padding: 0; display: inline-grid; place-items: center; font-size: 16px; line-height: 1; } .watch-toggle.is-watched { color: var(--accent-ink, #4a8f0c); border-color: var(--accent, #68b31a); } /* ---------- Wallet v2 (admin test mode) ---------- Vsetko v tomto bloku vidi IBA admin. Zamerne to vyzera ako nastroj, nie ako sucast aplikacie - aby bolo na prvy pohlad jasne, ze je to experiment. */ .wallet-v2-badge { margin: 0 0 12px; padding: 5px 10px; border-radius: 999px; background: #1f2937; color: #e5e7eb; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; justify-self: start; width: fit-content; } .wallet-matrix { margin: 0 0 14px; padding: 12px; border: 1px solid #d7dee6; border-radius: 12px; background: #f8fafc; } .wallet-matrix-title { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #475569; } .wallet-matrix-title span { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: #1f2937; color: #e5e7eb; } /* Uzka tabulka na mobile pretecie - scrolluje SAMA, nie cela stranka. */ .wallet-matrix table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .wallet-matrix th, .wallet-matrix td { padding: 5px 6px; text-align: left; border-bottom: 1px solid #e5eaf0; } .wallet-matrix th { color: #64748b; font-weight: 600; } .wallet-matrix td.is-ready { color: #15803d; font-weight: 700; } .wallet-matrix td.not-ready { color: #94a3b8; } .wallet-debug { grid-column: 1 / -1; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f1f5f9; border: 1px solid #dbe3ec; font-size: 12px; } .wallet-debug-tag { display: inline-block; margin-bottom: 8px; padding: 2px 7px; border-radius: 4px; background: #1f2937; color: #e5e7eb; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; } .wallet-debug dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 8px; } .wallet-debug dt { color: #64748b; } .wallet-debug dd { margin: 0; color: #0f172a; font-variant-numeric: tabular-nums; } .wallet-debug-stav { margin: 0 0 8px; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; color: #92400e; } .wallet-debug-stav[data-stav="overene"] { color: #15803d; } .wallet-debug-stav[data-stav="zlyhalo"] { color: #b91c1c; } .wallet-debug-actions { display: flex; flex-wrap: wrap; gap: 6px; } /* Payload sa lame, nie skracuje - pri porovnavani s originalom potrebujem vidiet kazdy znak, nie tri bodky. */ .wallet-debug-payload { display: block; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-family: ui-monospace, monospace; font-size: 11.5px; word-break: break-all; } .wallet-code-choice { display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #f0dbb8; border-radius: 12px; background: #fdf4e6; } .wallet-choice-title { margin: 0 0 2px; font-size: 12.5px; color: #7a4a12; } .wallet-code-choice button { display: flex; justify-content: space-between; gap: 12px; width: 100%; } .wallet-field span small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 400; } /* Logo retazca v zozname vernostnych kariet. Je vnutri riadka s nazvom, takze nepridava dalsi stlpec do mriezky. */ .wallet-row-name { display: inline-flex; align-items: center; gap: 9px; } .wallet-row-logo { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; } /* Na mobile tri tlačidlá v `auto` stĺpci zjedli takmer celý riadok a názov reťazca sa pod nimi stratil. Dostanú preto vlastný riadok pod obsahom. */ @media (max-width: 560px) { .wallet-row { grid-template-columns: minmax(0, 1fr); } .wallet-row-name { order: 1; } .wallet-row-state { order: 2; } .wallet-row-actions { order: 3; margin-top: 4px; } /* Tri tlačidlá rovnomerne cez celú šírku - inak sa zalomí len posledné. */ .wallet-row-actions .btn { flex: 1 1 0; justify-content: center; padding: 0 8px; } } /* Dlhý názov sa musí zalomiť, nie pretiecť cez tlačidlá. */ .wallet-row-name { min-width: 0; overflow-wrap: anywhere; } /* ---------- logá reťazcov bez rámčekov (Akcie a Košík) ---------- Logo aj názov ležia priamo na pozadí karty. Dva vnorené rámčeky - jeden okolo celého badge, druhý okolo loga - robili z jednoduchého označenia obchodu vizuálne najťažší prvok karty. Zámerne iba v týchto dvoch sekciách. Porovnanie zoznamu a verdikt majú tmavé pozadie, kde biely rámček plní inú úlohu. */ .offer-store-line .store-badge, .offer-row .store-badge, .cart-store-head .store-badge, .cart-summary-store .store-badge { padding: 0; background: transparent; border: 0; border-radius: 0; } .offer-store-line .store-badge .dot.has-logo, .offer-row .store-badge .dot.has-logo, .cart-store-head .store-badge .dot.has-logo, .cart-summary-store .store-badge .dot.has-logo { padding: 0; background: transparent; border: 0; border-radius: 0; } /* ---------- produktová fotka lepšie vyplní svoj box ---------- Fotky z letákov majú okolo produktu rôzne veľa prázdneho miesta. Pri `object-fit: contain` sa mierka riadi tým prázdnym okrajom, takže Kaufland box vyplnil a ostatné pôsobili maličko. Box zostáva rovnaký. Obrázok stráca 5px odsadenie a `scale` ho zväčší - `scale` drží pomer strán, takže sa nič nedeformuje, iba sa oreže okraj, ktorý je aj tak prázdny. Zámerne mierne: pri väčšej hodnote by sa začali orezávať samotné produkty. */ .best-offer > .offer-thumbnail img, .offer-row > .offer-thumbnail img, .cart-item-thumbnail img { inset: 0; width: 100%; height: 100%; transform: scale(1.16); } /* ---------- modal „Ako funguje MúdryKošík" ---------- Prehľad produktu, nie návod na jednu sekciu. Používateľ ho má vedieť prečítať očami: číslo a ikona, nadpis, dva-tri riadky, tichý hint. Hierarchiu drží veľkosť a farba, nie ďalšie rámčeky. */ /* `.sheet.wide` je 840px; šesť kariet v troch stĺpcoch potrebuje viac. */ .how-sheet { width: min(1040px, 100%); } .how-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 4px; } .how-card { padding: 16px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); } .how-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .how-card-icon { width: 21px; height: 21px; color: var(--accent-ink); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .how-card h3 { margin: 0 0 6px; font-size: 15.5px; } .how-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; } /* Hint je doplnok, nie druhá veta - preto menší a tichší. */ .how-card-hint { margin-top: 8px !important; font-size: 12.5px !important; font-style: italic; } .how-badge { margin-left: auto; padding: 3px 9px; color: #6a4a12; background: #ffe9b8; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* Karta funkcie, ktorá ešte nie je v ponuke - tichšia, aby sa nepliedla s tým, čo sa dá použiť hneď. */ .how-card.is-soon { background: #fbfcfa; border-style: dashed; box-shadow: none; } /* --- priebeh nákupu --- */ .how-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 18px 0 0; padding: 0; list-style: none; } .how-flow li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; color: var(--ink); background: #f2f8ec; border: 1px solid #dcebcd; border-radius: 999px; font-size: 13px; font-weight: 600; } /* Šípka medzi krokmi. Na mobile sa reťaz zalomí a šípky zostanú v riadkoch. */ .how-flow li:not(:last-child)::after { content: "→"; margin-left: 4px; color: var(--muted); font-weight: 400; } .how-flow li.is-soon { color: var(--muted); background: #fbfcfa; border-style: dashed; } .how-flow li.is-soon .how-badge { margin-left: 0; padding: 2px 7px; font-size: 9.5px; } /* --- dátová poznámka --- */ .how-note { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0; padding: 12px 14px; color: #45604c; background: #f2f8ec; border: 1px solid #dcebcd; border-radius: 12px; font-size: 13px; line-height: 1.55; } .how-note svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: #6f8a72; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } /* --- šírka obrazovky --- */ @media (min-width: 700px) { .how-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .how-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .how-card { padding: 14px 15px; } .how-card p, .how-note, .how-flow li { font-size: 12.5px; } .how-flow li { padding: 6px 10px; } } /* ---------- MúdryKošík Plus ako cenníková stránka ---------- Bola to modálka s vnútorným posuvníkom. Teraz je to riadny pohľad aplikácie: stránku scrolluje prehliadač, karty ležia v layoute. Registračný blok pod cenníkom má vlastné štýly (`.waitlist-form`) a tie sa tu ZÁMERNE nedotýkame - je mimo rozsah tejto zmeny. */ .plus-hero { max-width: 62ch; margin: 0 0 30px; } .plus-hero h1 { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(27px, 3.6vw, 40px); letter-spacing: -0.02em; line-height: 1.15; } .plus-hero-lead { margin: 0 0 8px; color: var(--ink); font-size: 16.5px; line-height: 1.55; } .plus-hero-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } .plus-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 34px; } .plus-tier { position: relative; display: flex; flex-direction: column; padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); } /* Plus je hlavná ponuka - nesie ju rám a zdvih, nie krikľavá farba. */ .plus-tier.is-main { border-color: var(--accent); border-width: 2px; box-shadow: 0 14px 34px rgba(107, 200, 1, 0.16); } .plus-tier-badge { align-self: flex-start; margin-bottom: 10px; padding: 4px 11px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } /* Zakladateľská cena je promo na Plus, nie vyššia úroveň - preto tichší badge. */ .plus-tier.is-founder .plus-tier-badge { color: #6a4a12; background: #ffe9b8; } .plus-tier h2 { margin: 0 0 6px; font-size: 18px; } .plus-tier-price { margin: 0 0 10px; color: var(--ink); font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; } .plus-tier-price span { color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; } .plus-tier-desc { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55; } .plus-tier-list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; } .plus-tier-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; } .plus-tier-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 800; } /* Funkcia, ktorá ešte nie je v ponuke, nesmie vyzerať ako dostupná. */ .plus-tier-list li.is-soon { color: var(--muted); } .plus-tier-list li.is-soon::before { content: "○"; color: var(--muted); font-weight: 400; } /* Zámerne bez červených krížikov: hovoríme, čo Free obsahuje, a zvyšok jednou vetou. Zoznam toho, čo človek nedostane, je nátlak, nie informácia. */ .plus-tier-foot { margin: 0 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.5; } .plus-tier-cta { margin-top: auto; justify-content: center; } .plus-closing { max-width: 62ch; margin-top: 30px; color: var(--muted); font-size: 14px; line-height: 1.6; } .plus-closing-lead { margin: 0 0 6px; color: var(--ink); font-size: 16px; font-weight: 700; } @media (min-width: 860px) { .plus-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 480px) { .plus-tier { padding: 18px 17px 20px; } .plus-tier-price { font-size: 28px; } }