/* ============================================================ guides.css — Portal homepage v2 (hero + mřížka novinek + boční panel Návody) a archiv/detail Návodů. Používá stávající proměnné z base.css (--cyan, --bg, --glass...). ============================================================ */ /* Nová sekce Návody dostává vlastní akcent, aby byla na první pohled odlišitelná od cyan Novinek, ale zůstala v rodině barev webu. */ :root { --guide: var(--amber, #ffb347); --guide-dim: var(--amber-dim, rgba(255, 179, 71, 0.4)); --guide-glow: rgba(255, 179, 71, 0.12); /* Společná výška spodních lišt: stránkování novinek vlevo a tlačítka "Zobrazit všechny návody" vpravo — díky tomu jsou na stejné lince. */ --iq-bottom-bar-h: 52px; --tag-windows: #4fc3f7; --tag-server: #85ff9e; --tag-fix: #ff6b6b; --tag-network: #c792ea; } /* ============================================================ PORTAL HOMEPAGE GRID ============================================================ */ /* width: 100% je POVINNÉ — je flex-column (base.css) a `margin: 0 auto` u flex položky ruší roztažení na plnou šířku. Bez toho se .portal-main smrští podle obsahu, takže šířku layoutu určuje text v kartách: dokud naskočí náhradní font místo Teko, jsou sloupce o ~50px širší a celý blok po doskočení fontu viditelně poskočí a zúží se. */ .portal-main { width: 100%; max-width: 1500px; margin: 0 auto; padding: 46px 40px 90px; position: relative; z-index: 1; } /* minmax(0, 1fr) místo 1fr — 1fr má implicitní minimum min-content, takže by šířku sloupců pořád mohl táhnout obsah (dlouhý titulek). */ .portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 340px; grid-template-rows: auto auto; /* column-gap je zvlášť: řídí mezeru mezi novinkami a panelem Návody (menší = panel blíž k novinkám, sloupec novinek se o to rozšíří). */ row-gap: 22px; column-gap: 30px; } /* Řádek 1: mozaika přes celou šířku (i nad panelem Návody). Řádek 2: mřížka novinek vlevo, panel Návody vpravo. */ .portal-lead { grid-column: 1 / -1; grid-row: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .portal-primary { grid-column: 1 / 4; grid-row: 2; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .portal-side { grid-column: 4; grid-row: 2; display: flex; flex-direction: column; gap: 22px; min-width: 0; } .portal-heading { display: flex; align-items: baseline; margin-bottom: 2px; } .portal-heading h2 { font-family: 'Teko', sans-serif; font-size: 1.6rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: 12px; } .portal-heading h2 .heading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex-shrink: 0; } .portal-heading h2 .glitch-pass { line-height: 1; } .portal-heading--guide h2 .heading-dot { background: var(--guide); box-shadow: 0 0 8px var(--guide); } .portal-heading--guide h2 .glitch-pass::before { color: var(--guide) !important; -webkit-text-fill-color: var(--guide) !important; } /* ── Mozaika nejnovějších novinek ──────────────────────────── */ /* 4 sloupce × 2 řady: velká novinka zabírá 2×2, dvě malé 1×1 nahoře vpravo a jedna široká 2×1 pod nimi — mřížka tak vyjde beze zbytku. Dlaždice si nesou stejné třídy jako hero a karty v mřížce pod mozaikou, takže dědí jejich vzhled i chování; tady se řeší jen rozmístění. */ .news-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 18px; } .news-bento .hero-feature { grid-column: span 2; grid-row: span 2; min-height: 0; } .news-bento .news-mini-card { min-height: 0; } .news-bento .bento-wide { grid-column: span 2; } /* Velká dlaždice je teď zhruba poloviční proti dřívějšímu hero přes celou šířku — písmo i perex se tomu musí přizpůsobit, jinak text přeteče. */ .news-bento .hero-feature h1 { font-size: 2.5rem; max-width: 100%; } .news-bento .hero-feature p { max-width: 100%; font-size: 0.92rem; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-bento .hero-feature-content { padding: 26px 30px; } .hero-kicker { display: block; margin-bottom: 9px; font-family: 'Teko', sans-serif; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); } /* ── Hero novinka (featured) ───────────────────────────────── */ .hero-feature { position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; background-color: #14181c; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0; outline: 1px solid rgba(120, 135, 155, 0.35); outline-offset: -1px; text-decoration: none; color: var(--text); transition: outline-color 0.3s ease, transform 0.3s ease; } /* Stejné "nadzvednutí" jako u malých karet a karet návodů — hero ho dřív jako jediná karta na webu nemělo. */ .hero-feature:hover { outline-color: var(--cyan-dim); transform: translateY(-4px); } .hero-feature::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); z-index: 3; } .hero-feature-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,8,0.05) 0%, rgba(5,6,8,0.35) 55%, rgba(5,6,8,0.94) 100%); } .hero-feature-content { position: relative; z-index: 2; padding: 40px 44px; width: 100%; } /* Umístění řeší obal .news-tags — štítek už se nepozicuje sám. */ .hero-feature .cat-label--big { display: inline-block; font-family: 'Teko', sans-serif; font-size: 1.05rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0,242,255,0.3); background: rgba(5,6,8,0.55); backdrop-filter: blur(4px); padding: 4px 16px; margin-bottom: 0; } /* Štítek kategorie + loga platforem jsou v jednom obalu (.news-tags) na jednom řádku: loga vlevo, kategorie vpravo. Obal je roztažený přes celou šířku karty, aby se oba kraje daly odsadit stejně. row-reverse: v HTML je první štítek kategorie (jde tedy doprava) a loga za ním (doleva) — pořadí v šabloně tak zůstává čitelné. */ .news-tags { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 10px; } .news-tags--big { top: 18px; left: 20px; right: 20px; } .news-tags--article { top: 16px; left: 16px; right: 16px; } /* .cat-label má v components.css margin-bottom pro běžný tok textu — v obalu by dělal mezeru navíc pod štítkem. */ .news-tags .cat-label { margin-bottom: 0; } /* Loga platforem (Windows/Linux/PlayStation/Xbox...) — vodorovná řada pod štítkem kategorie, jen ikony v barvě dané platformy, bez textu. Řada (ne sloupec), aby i 3-4 platformy zůstaly přehledné; loga jsou záměrně nižší než štítek kategorie nad nimi, ať kartu nepřebíjejí. */ .news-platform-row { display: flex; align-items: center; justify-content: center; gap: 5px; } .news-platform-row--big, .news-platform-row--article { gap: 6px; } .news-platform-badge { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--platform-color, var(--border-glass)); background: rgba(5,6,8,0.65); backdrop-filter: blur(4px); color: var(--platform-color, var(--text-muted)); font-size: 0.62rem; } .news-platform-row--big .news-platform-badge, .news-platform-row--article .news-platform-badge { width: 28px; height: 28px; font-size: 0.85rem; } /* "+N" když je platforem víc, než se na kartu vejde */ .news-platform-badge--more { font-family: 'Teko', sans-serif; letter-spacing: 0.5px; color: var(--text-muted); border-color: var(--border-glass); } .hero-feature h1 { font-family: 'Teko', sans-serif; font-size: 3.4rem; line-height: 0.95; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; max-width: 85%; margin-bottom: 14px; text-shadow: 0 4px 24px rgba(0,0,0,0.6); } .hero-feature p { color: #c3c8cf; font-size: 1rem; line-height: 1.6; max-width: 60%; margin-bottom: 18px; } .hero-feature .date { font-family: 'Teko', sans-serif; font-size: 0.95rem; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; } .hero-feature:hover h1 { color: var(--cyan); } /* Kdo má v systému vypnuté animace, dostane jen zvýraznění obrysu. */ @media (prefers-reduced-motion: reduce) { .hero-feature:hover, .news-mini-card:hover, .guide-card:hover { transform: none; } } /* ── Mřížka 6 novinek (2 řádky x 3 sloupce) ────────────────── */ .news-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-width: 0; } .news-mini-card { position: relative; overflow: hidden; min-height: 190px; background-color: #14181c; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0; outline: 1px solid rgba(120, 135, 155, 0.35); outline-offset: -1px; text-decoration: none; color: #fff; display: flex; align-items: flex-end; transition: outline-color 0.3s ease, transform 0.3s ease; } .news-mini-card:hover { outline-color: var(--cyan-dim); transform: translateY(-4px); } .news-mini-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,8,0.05) 0%, rgba(5,6,8,0.2) 50%, rgba(5,6,8,0.92) 100%); transition: background 0.3s ease; } .news-mini-card-content { position: relative; z-index: 2; padding: 16px 18px; width: 100%; } /* Umístění řeší obal .news-tags — štítek už se nepozicuje sám. */ .news-mini-card .cat-label { margin-bottom: 0; display: inline-block; font-family: 'Teko', sans-serif; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0,242,255,0.25); background: rgba(5,6,8,0.55); backdrop-filter: blur(4px); padding: 1px 9px; } .news-mini-card h3 { font-family: 'Teko', sans-serif; font-size: 1.28rem; line-height: 1.05; letter-spacing: 0.2px; text-transform: uppercase; color: #fff; margin-bottom: 6px; margin-top: 22px; transition: color 0.25s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-mini-card:hover h3 { color: var(--cyan); } .news-mini-card .date { font-size: 0.7rem; letter-spacing: 1px; color: #9aa0a7; text-transform: uppercase; font-weight: 700; } .news-mini-card--empty { align-items: center; justify-content: center; color: var(--text-muted); font-family: 'Teko', sans-serif; letter-spacing: 2px; text-transform: uppercase; } /* ── Boční panel Návody (mini karty s obrázkem) ────────────── */ /* Panel se roztáhne na výšku sloupce novinek vedle (oba jsou grid položky ve stejném řádku) a karty si tu výšku rovnoměrně rozdělí — spodní hrana panelu tak sedí přesně na spodní hraně mřížky novinek. Díky stránkování má sloupec novinek stálou výšku, takže zarovnání drží. */ .guide-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1; } /* Jen karty v bočním panelu se roztahují (archiv návodů má vlastní výšku). max-height je pojistka: při málo návodech by se jinak jedna karta roztáhla přes půl obrazovky. */ .guide-rail .guide-card { flex: 1 1 0; max-height: 190px; } .guide-card { position: relative; overflow: hidden; min-height: 104px; background-color: #14181c; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0; outline: 1px solid rgba(120, 135, 155, 0.35); outline-offset: -1px; text-decoration: none; color: #fff; display: flex; align-items: flex-end; transition: outline-color 0.3s ease, transform 0.3s ease; } .guide-card:hover { outline-color: var(--guide-dim); transform: translateY(-3px); } .guide-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--guide); box-shadow: 0 0 10px var(--guide); z-index: 3; } .guide-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,8,0.1) 0%, rgba(5,6,8,0.35) 45%, rgba(5,6,8,0.95) 100%); } .guide-card-content { position: relative; z-index: 2; padding: 14px 16px; width: 100%; } .guide-tag { position: absolute; top: 12px; right: 14px; z-index: 3; margin-bottom: 0; display: inline-flex; align-items: center; gap: 5px; font-family: 'Teko', sans-serif; font-size: 0.68rem; letter-spacing: 1.3px; text-transform: uppercase; padding: 1px 8px; border: 1px solid; border-radius: 2px; backdrop-filter: blur(4px); /* Barva přichází z inline style="--tag-color: #xxx" — viz inqer_guide_category_style() */ color: var(--tag-color, var(--guide)); border-color: var(--tag-color, var(--guide)); background: rgba(5,6,8,0.65); } .guide-card h4 { font-family: 'Teko', sans-serif; font-size: 1.08rem; line-height: 1.12; letter-spacing: 0.2px; text-transform: uppercase; color: #fff; margin-top: 20px; transition: color 0.25s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .guide-card:hover h4 { color: var(--guide); } .guide-card .guide-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 0.68rem; letter-spacing: 0.5px; color: #9aa0a7; text-transform: uppercase; } .guide-card .guide-meta i { color: var(--guide); font-size: 0.7rem; } .guide-rail--empty { color: var(--text-muted); font-family: 'Teko', sans-serif; letter-spacing: 2px; text-transform: uppercase; padding: 30px 10px; text-align: center; border: 1px dashed var(--border-glass); } /* ============================================================ VÝPIS NOVINEK (magazínový styl) + hlavičky sekcí + videa ============================================================ */ /* Hlavička sekce: proužek, nadpis, rubriky a odkaz "víc" vpravo. */ .section-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 9px; border-bottom: 2px solid rgba(0,242,255,0.25); } .section-bar h2 { font-family: 'Teko', sans-serif; font-size: 1.5rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } /* Proužek musí být na h2, ne na .glitch-pass — ten má vlastní ::before s glitch vrstvou (viz glitch.css), přebít by ho zrušilo efekt. */ .section-bar h2::before { content: ''; width: 4px; height: 20px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); flex-shrink: 0; } .section-bar h2 .glitch-pass { line-height: 1; } .section-bar-more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'Teko', sans-serif; font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; } .section-bar-more:hover { color: var(--cyan); } .section-chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-family: 'Teko', sans-serif; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); padding: 2px 10px; border: 1px solid var(--border-glass); text-decoration: none; transition: 0.2s ease; } .chip:hover { color: var(--text); border-color: var(--cyan-dim); } .chip.is-active { color: var(--cyan); border-color: rgba(0,242,255,0.5); background: rgba(0,242,255,0.08); } /* Titulky na kartách a ve výpisu — stejná pojistka jako u článku: dlouhý řetězec bez mezer nesmí roztáhnout kartu ani vytéct z mřížky. */ .hero-feature h1, .hero-feature p, .news-mini-card h3, .nr-title, .nr-perex, .guide-card h4, .video-title { overflow-wrap: anywhere; word-break: break-word; } /* ── Výpisy (rubriky, štítky, autoři, data) — archive.php ──── */ .archive-main { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; } .archive-main .back-link { align-self: flex-start; } /* Popisek typu výpisu vedle nadpisu ("Rubrika", "Štítek", "Autor"). */ .archive-kicker { font-family: 'Teko', sans-serif; font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(0, 242, 255, 0.3); padding: 2px 10px; background: rgba(0, 242, 255, 0.06); } .archive-desc { color: #b6bcc4; font-size: 0.9rem; line-height: 1.7; max-width: 70ch; } .archive-main .news-pagination { margin-top: 22px; } /* Řádek novinky */ .news-list { display: flex; flex-direction: column; min-width: 0; } .news-row { display: grid; grid-template-columns: 58px 124px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 12px; border-bottom: 1px solid var(--border-glass); text-decoration: none; color: var(--text); transition: background 0.2s ease; } .news-row:hover { background: rgba(0,242,255,0.04); } .nr-when { display: flex; flex-direction: column; align-items: center; gap: 2px; } .nr-time { font-family: 'Teko', sans-serif; font-size: 1.15rem; letter-spacing: 1px; color: var(--cyan); line-height: 1; } .nr-day { font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); } .nr-thumb { height: 74px; background-color: #14181c; background-size: cover; background-position: center; outline: 1px solid rgba(120, 135, 155, 0.35); outline-offset: -1px; } .nr-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .nr-title { font-family: 'Teko', sans-serif; font-size: 1.3rem; letter-spacing: 0.4px; line-height: 1.1; text-transform: uppercase; transition: color 0.2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-row:hover .nr-title { color: var(--cyan); } .nr-perex { font-size: 0.8rem; line-height: 1.5; color: #b6bcc4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; } /* Řádek je vodorovný, takže platformy sedí vedle štítku, ne pod ním. */ .nr-side .news-platform-row--row { position: static; display: flex; gap: 5px; } .nr-comments { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; } .nr-comments i { color: var(--cyan); margin-right: 4px; } .news-row--empty { display: block; text-align: center; padding: 30px 10px; color: var(--text-muted); font-family: 'Teko', sans-serif; letter-spacing: 2px; text-transform: uppercase; } /* ── Videa ─────────────────────────────────────────────────── */ .videos-section { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } .videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* Poměr 16:9 sedí na náhled z YouTube — bez něj se obrázek ořezával. Sloupcový flex drží titulek a datum pod sebou; dřív stály vedle sebe a datum se lámalo na tři řádky. */ .video-card { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; background-color: #14181c; background-size: cover; background-position: center; outline: 1px solid rgba(120, 135, 155, 0.35); outline-offset: -1px; padding: 13px 15px; text-decoration: none; color: #fff; transition: outline-color 0.3s ease, transform 0.3s ease; } .video-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; } .video-card:hover { outline-color: var(--cyan-dim); transform: translateY(-3px); } .video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,8,0.15) 0%, rgba(5,6,8,0.92) 100%); } .video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cyan-dim); background: rgba(5,6,8,0.6); color: var(--cyan); font-size: 0.85rem; transition: background 0.25s ease, box-shadow 0.25s ease; } .video-card:hover .video-play { background: rgba(0,242,255,0.16); box-shadow: 0 0 18px rgba(0,242,255,0.35); } .video-length { position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 0.66rem; padding: 1px 7px; color: #c3c8cf; background: rgba(5,6,8,0.8); border: 1px solid var(--border-glass); } .video-title { font-family: 'Teko', sans-serif; font-size: 1.08rem; letter-spacing: 1px; line-height: 1.15; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-card:hover .video-title { color: var(--cyan); } .video-meta { font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } /* Hláška o nenačtených videích — vidí ji jen přihlášený správce. */ .videos-admin-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 16px; font-size: 0.8rem; line-height: 1.5; color: #ffd9a3; border: 1px dashed rgba(255,179,71,0.5); background: rgba(255,179,71,0.06); } .videos-admin-note strong { color: var(--guide); } .videos-admin-note a { color: var(--cyan); text-decoration: underline; } .videos-admin-note em { width: 100%; font-size: 0.7rem; color: var(--text-muted); font-style: normal; } /* Stránkování novinek na homepage (přebírá vzhled .pagination-container z components.css, jen je nižší a drží se u spodní hrany sloupce). Výšku sdílí s tlačítkem "Zobrazit všechny návody" přes --iq-bottom-bar-h, a `margin-top: auto` drží obě lišty dole — takže sedí na stejné lince bez ohledu na to, kolik je zrovna novinek a návodů. */ .news-pagination { margin-top: auto; min-height: var(--iq-bottom-bar-h); padding: 0 30px; align-items: center; flex-wrap: wrap; } .news-pagination .page-numbers { cursor: pointer; font-size: 1.15rem; padding: 2px 10px; } .news-pagination .page-numbers.dots { cursor: default; color: var(--text-muted); opacity: 0.6; } /* Během načítání nové stránky obsah ztlumíme a zamkneme proti dvojkliku */ .news-mini-grid.is-loading, .news-list.is-loading { opacity: 0.4; pointer-events: none; } .news-mini-grid, .news-list { transition: opacity 0.2s ease; } .guide-rail-more { flex: 0 0 auto; /* tlačítko si drží svou výšku, roztahují se jen karty */ margin-top: auto; /* drží se dole = stejná linka jako stránkování vlevo */ min-height: var(--iq-bottom-bar-h); display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Teko', sans-serif; font-size: 1rem; letter-spacing: 2.5px; text-transform: uppercase; line-height: 1; /* bez toho je vlastní výška řádku Teka vyšší než --iq-bottom-bar-h */ color: var(--guide); text-decoration: none; padding: 0 14px; border: 1px solid rgba(255,179,71,0.25); background: rgba(255,179,71,0.04); transition: 0.25s ease; } .guide-rail-more:hover { background: rgba(255,179,71,0.1); border-color: rgba(255,179,71,0.5); } .guide-rail-more i { transition: transform 0.25s ease; } .guide-rail-more:hover i { transform: translateX(3px); } /* ── Navigace: odznak "NEW" u položky Návody ───────────────── */ .nav-l a .nav-badge-new, .nav-r a .nav-badge-new { font-family: 'Teko', sans-serif; font-size: 0.62rem; letter-spacing: 1px; background: var(--amber); color: #1a0f00; padding: 1px 6px; border-radius: 2px; margin-left: 6px; vertical-align: 3px; display: inline-block; } /* ============================================================ ARCHIV NÁVODŮ (/navody/) — hustší grid, 4 karty v řadě ============================================================ */ /* ── Vyhledávání ─────────────────────────────────────────────── */ .guides-search-wrap { position: relative; max-width: 420px; margin: 0 auto 28px; } .guides-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; pointer-events: none; } .guides-search { width: 100%; box-sizing: border-box; padding: 11px 16px 11px 42px; font-family: 'Open Sans', sans-serif; font-size: 0.95rem; color: #fff; background: var(--glass); border: 1px solid var(--border-glass); outline: none; transition: border-color 0.25s ease; } .guides-search::placeholder { color: var(--text-muted); } .guides-search:focus { border-color: var(--guide-dim); } .guides-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .guides-filter { font-family: 'Teko', sans-serif; font-size: 1rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 7px 18px; cursor: pointer; border: 1px solid var(--border-glass); background: var(--glass); transition: 0.25s ease; display: inline-flex; align-items: center; gap: 7px; -webkit-appearance: none; appearance: none; margin: 0; } .guides-filter i { font-size: 0.85rem; } .guides-filter:hover { color: #fff; border-color: var(--filter-color, var(--guide-dim)); } .guides-filter.is-active { color: var(--filter-color, var(--guide)); border-color: var(--filter-color, var(--guide-dim)); background: rgba(255,179,71,0.1); background: color-mix(in srgb, var(--filter-color, var(--guide)) 12%, transparent); } .guides-archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .guide-card--archive { min-height: 190px; } .guide-card--archive h4 { font-size: 1.15rem; -webkit-line-clamp: 2; margin-top: 20px; } .guide-card--archive .guide-card-content { padding: 16px 18px; } .guide-card--archive .guide-tag { top: 12px; right: 14px; font-size: 0.65rem; padding: 1px 8px; } .guide-card--archive .guide-meta { margin-top: 6px; } /* Karta skrytá filtrem/vyhledáváním — JS jen přepíná tuto třídu, nic se nenačítá znovu */ /* Během načítání nové stránky / filtru karty ztlumíme a zamkneme. */ .guides-archive-grid.is-loading { opacity: 0.4; pointer-events: none; } .guides-archive-grid { transition: opacity 0.2s ease; } /* Stejná lišta jako stránkování na úvodní stránce (1050 x 52 px). Bez omezení šířky by se roztáhla přes celý archiv (1585 px) a působila jako prázdný pruh přes celou obrazovku. */ .guides-pagination { width: 100%; max-width: 1050px; margin: 30px auto 0; padding: 0 30px; min-height: var(--iq-bottom-bar-h); align-items: center; flex-wrap: wrap; } .guides-pagination:empty { display: none; } .guides-empty-state { text-align: center; color: var(--text-muted); font-family: 'Teko', sans-serif; font-size: 1.3rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 50px 10px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1300px) { .guides-archive-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1200px) { .portal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .portal-lead { grid-column: 1 / -1; grid-row: 1; } .portal-primary { grid-column: 1 / 4; grid-row: 2; } .portal-side { grid-column: 1 / 4; grid-row: 3; } .guide-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .guide-rail-more { grid-column: 1 / 4; } } @media (max-width: 900px) { .portal-main { padding: 30px 20px 60px; } .news-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Mozaika na 2 sloupce: velká novinka přes celou šířku, pod ní dvojice. grid-auto-rows: auto je nutné — s pevnou výškou řádku (172px) velká dlaždice s min-height 300px přetekla do dalšího řádku a dlaždice se navzájem překrývaly. Výšku teď určuje min-height každé dlaždice. */ .news-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .news-bento .hero-feature { grid-column: span 2; grid-row: span 1; min-height: 300px; } .news-bento .news-mini-card { min-height: 172px; } .news-bento .bento-wide { grid-column: span 2; } .news-bento .hero-feature h1 { font-size: 2.2rem; } .hero-feature h1 { font-size: 2.4rem; } .news-row { grid-template-columns: 50px 104px minmax(0, 1fr) auto; gap: 12px; } .nr-thumb { height: 62px; } .videos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-feature p { max-width: 100%; } .guide-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-rail-more { grid-column: 1 / 3; } .guides-archive-grid { grid-template-columns: repeat(2, 1fr); } } /* Na malých obrazovkách a dotykových zařízeních musí jít prvky trefit prstem. Chipy měly 24 px na výšku, čísla stránkování 33 px — doporučené minimum je kolem 44 px. Řešeno šířkou i typem ovládání: šířka pokryje telefony, pointer: coarse i dotykové notebooky a tablety s velkým displejem. */ @media (max-width: 900px), (pointer: coarse) { .chip { padding: 10px 14px; } .page-numbers { padding: 10px 14px; } .section-bar-more, .guide-rail-more { padding-top: 10px; padding-bottom: 10px; } .post-tag { padding: 11px 16px 11px 14px; } } @media (max-width: 560px) { .news-mini-grid { grid-template-columns: 1fr; } .news-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .news-bento .hero-feature, .news-bento .bento-wide { grid-column: span 1; } .news-bento .news-mini-card { min-height: 190px; } .news-bento .hero-feature h1 { font-size: 1.9rem; } /* Řádek novinky na telefonu: čas | náhled | titulek, a štítky s diskuzí se přesunou pod ně přes celou šířku. Perex se skryje, jinak by byl řádek příliš vysoký a na obrazovku by se vešly jen dvě novinky. */ .news-row { grid-template-columns: 44px 76px minmax(0, 1fr); gap: 10px; row-gap: 8px; align-items: center; } .nr-thumb { height: 56px; } .nr-perex { display: none; } .nr-when { flex-direction: column; align-items: center; gap: 2px; } .nr-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; } .videos-grid { grid-template-columns: minmax(0, 1fr); } .guide-rail { grid-template-columns: 1fr; } .guide-rail-more { grid-column: 1; } .hero-feature h1 { font-size: 2rem; } .guides-archive-grid { grid-template-columns: 1fr; } .guides-search-wrap { max-width: 100%; } }