/* ======================== Detail projektu (project.html i wcms.html). Nahoře úvod přes celou šířku (název, popis, fakta). Pod ním dva sloupce: vlevo obsah (galerie, sekce, další projekty), vpravo přilepená časová osa "Cesta projektu". Na užší obrazovce jde osa pod obsah. Projekt bez osy (třída detail--single) má celý obsah vycentrovaný. Rytmus drží mezery mezi bloky, ne čáry. Barvy a rozměry bere ze style.css. ======================== */ /* Barvy produktu (data-product na ). Akcent přebírají odkazy, tečky na časové ose, popisky faktů, hlavní tlačítko a linky v hlavičce. Pozadí a panely dostanou jen lehký nádech barvy produktu (pár procent). Logo Nexaly v hlavičce zůstává zelená (--brand se nepřepisuje). */ html[data-product="halyxo"] { --green: #a99df0; --green-bright: #c9c3e0; --green-soft: rgba(104, 87, 190, 0.16); --green-line: #6857be; --bg: #100E15; --bg-raised: #18151F; --border: #262233; --border-strong: #3A3452; --button: #6857be; --button-hover: #7566C9; } html[data-product="wcms"] { --green: #6fc795; --green-bright: #9fdcbc; --green-soft: rgba(79, 179, 124, 0.14); --green-line: #4fb37c; --bg: #0C110E; --bg-raised: #131A16; --border: #1F2A24; --border-strong: #2F3D34; --button: #247a4d; --button-hover: #2B8A58; } html[data-product] .detail-facts dt { color: var(--green); } .detail { padding: var(--sp-8) 0 var(--sp-5); } /* Obsah vlevo, osa vpravo */ .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-8); align-items: start; margin-top: var(--sp-8); } .detail-main { min-width: 0; } /* První blok vlevo začíná na stejné výšce jako osa vpravo */ .detail-main > :first-child, .detail-main > :first-child > .detail-section:first-child { margin-top: 0; } /* Bez osy: úvod i obsah v jednom sloupci uprostřed */ .detail--single .detail-intro, .detail--single .detail-layout { max-width: 880px; margin-inline: auto; } .detail--single .detail-layout { grid-template-columns: minmax(0, 1fr); } /* Osa zůstává při scrollování vedle obsahu; když je delší než okno, scrolluje se uvnitř sama */ .detail-aside { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .journey-box { padding: var(--sp-6) var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); background: var(--bg-raised); } .back-link { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-7); font-size: var(--fs-sm); color: var(--text-muted); } .back-link:hover { color: var(--text); } /* ---------- Úvod ---------- */ /* Odkaz na živý web pod popisem */ .detail-site { margin-top: var(--sp-5); } /* Hlavní akce produktu pod popisem (tlačítko v barvě produktu) */ .detail-cta { margin-top: var(--sp-6); } .detail-kicker { margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--green); } .detail-head h1 { display: flex; align-items: center; gap: var(--sp-4); font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -0.02em; } /* Značka produktu vedle názvu: logo, nebo písmeno v barvě aplikace */ .detail-mark { display: grid; place-items: center; flex-shrink: 0; width: 0.8em; height: 0.8em; border-radius: 0.15em; background: var(--button); color: #fff; font-size: 0.75em; font-weight: 800; letter-spacing: -0.04em; } .detail-mark span { font-size: 0.55em; } img.detail-mark { background: none; } .detail-sub { margin-top: var(--sp-3); font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--text-muted); } .detail-lead { margin-top: var(--sp-6); max-width: 720px; font-size: var(--fs-md); line-height: 1.75; color: var(--text-muted); } /* ---------- Fakta: vodorovný pruh pod úvodem ---------- */ .detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-5) var(--sp-6); margin: var(--sp-8) 0 0; padding: var(--sp-5) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .detail-facts > div { display: grid; align-content: start; gap: var(--sp-1); } .detail-facts dt { font-size: var(--fs-xs); color: var(--text-dim); } .detail-facts dd { margin: 0; font-size: var(--fs-base); line-height: 1.5; } .detail-facts dd a { color: var(--green); } /* ---------- Galerie ---------- */ .gallery { margin-top: var(--sp-8); } /* Poměr stran nastaví gallery.js podle nejvyššího obrázku; contain = nic se neořízne */ .gallery-image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; object-position: center; border-radius: var(--radius-lg); background: var(--bg-raised); cursor: zoom-in; } .gallery-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0 0; } .gallery-caption { flex: 1; min-width: 0; } .gallery-title { font-weight: 600; } .gallery-text { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); } .gallery-text:empty { display: none; } .gallery-counter { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-dim); } .gallery-prev, .gallery-next { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text); cursor: pointer; } .gallery-prev:hover, .gallery-next:hover { border-color: var(--text-dim); } .gallery--single .gallery-prev, .gallery--single .gallery-next, .gallery--single .gallery-counter { display: none; } /* Obrázek přes celou obrazovku */ .lightbox { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center; padding: var(--sp-6); background: rgba(8, 9, 8, 0.94); } .lightbox.is-open { display: grid; } .lightbox img { max-width: 100%; max-height: calc(100vh - 64px); border-radius: var(--radius-sm); } /* Šipky ve zvětšeném obrázku, po stranách uprostřed výšky */ .lightbox-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(16, 18, 17, 0.8); color: var(--text); font-size: var(--fs-base); cursor: pointer; transform: translateY(-50%); transition: border-color 0.2s ease; } .lightbox-nav:hover { border-color: var(--text-dim); } .lightbox-prev { left: 24px; } .lightbox-next { right: 24px; } .lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-muted); } .lightbox--single .lightbox-nav, .lightbox--single .lightbox-counter { display: none; } .lightbox-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: var(--fs-base); cursor: pointer; } /* ---------- Obsahové sekce: nadpis nad textem ---------- */ .detail-section { margin-top: var(--sp-9); } .detail-section h2 { margin-bottom: var(--sp-5); font-size: clamp(1.5rem, 3vw, 1.9rem); } .detail-body { display: grid; gap: var(--sp-5); font-size: var(--fs-base); line-height: 1.75; color: var(--text-muted); } .detail-body strong { color: var(--text); font-weight: 600; } .detail-body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-dim); text-underline-offset: 3px; } /* Dvojice pojem - vysvětlení */ .detail-list { display: grid; margin: 0; border-top: 1px solid var(--border); } .detail-list > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); } .detail-list dt { color: var(--text); font-weight: 600; font-size: var(--fs-base); line-height: 1.6; } .detail-list dd { margin: 0; font-size: var(--fs-base); line-height: 1.6; } /* ---------- Ukázka "Jak to funguje" (WCMS) ---------- Vlevo tři kroky, vpravo nakreslená stránka klienta. Co je na stránce vidět, řídí atribut data-step na .how (přepíná ho skript ve wcms.html): 1 = úrovně struktury, 2 = zámky a povolený blok, 3 = klient píše text. */ .how { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: center; margin-top: var(--sp-6); } /* Kroky na svislé lince: aktivní krok má zelený úsek linky. Stejný jazyk jako časová osa "Cesta projektu" vpravo. */ .how-steps { display: grid; margin: 0; padding: 0; list-style: none; } .how-step { position: relative; display: block; width: 100%; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border: 0; border-left: 1px solid var(--border-strong); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .how-step::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--green); transform: scaleY(0); transform-origin: top; transition: transform 0.3s var(--ease); } .how-step[aria-pressed="true"]::before { transform: none; } .how-num { font-size: var(--fs-xs); color: var(--text-dim); } .how-text { display: grid; gap: 2px; } .how-text strong { font-weight: 600; color: var(--text-muted); transition: color 0.2s ease; } .how-step:hover .how-text strong, .how-step[aria-pressed="true"] .how-text strong { color: var(--text); } .how-text > span { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-dim); } .how-step[aria-pressed="true"] .how-text > span { color: var(--text-muted); } /* Nakreslená stránka klienta */ .how-stage { padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--bg-raised); } /* min-width: 0 = rámeček se smí zúžit pod šířku obsahu. Bez toho by ho nezalomitelný psaný text roztáhl a vnořené rámečky by přetekly ven. */ .hs-level { min-width: 0; display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius); transition: border-color 0.4s ease; } .hs-label { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); transition: color 0.4s ease, opacity 0.4s ease; } .hs-block { min-width: 0; position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-6) var(--sp-3) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); transition: opacity 0.4s ease, border-color 0.4s ease; } .hs-bar { display: block; width: 70%; height: 8px; border-radius: 4px; background: var(--border-strong); } .hs-bar--title { width: 45%; height: 12px; } .hs-img { display: grid; place-items: center; height: 56px; border-radius: 4px; background: var(--surface-hover); color: var(--text-dim); } .hs-typing { display: none; max-width: 100%; overflow: hidden; font-size: var(--fs-base); color: var(--text); white-space: nowrap; } .hs-perm { position: absolute; top: 12px; right: 12px; font-size: var(--fs-xs); color: var(--text-dim); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; } .hs-caption { margin-top: var(--sp-4); min-height: 1.5em; text-align: center; font-size: var(--fs-sm); color: var(--text-dim); } .hs-caption span { display: none; } .hs-caption .icon { font-size: 0.7rem; } /* Krok 1: vyniknou úrovně struktury */ .how[data-step="1"] .hs-level { border-color: var(--green-line); } .how[data-step="1"] .hs-label { color: var(--green); } /* Krok 2: zámky a povolený blok */ .how[data-step="2"] .hs-perm { opacity: 1; transform: none; } .how[data-step="2"] .hs-block--edit { border-color: var(--green-line); } .how[data-step="2"] .hs-block--edit .hs-perm, .how[data-step="3"] .hs-block--edit .hs-perm { color: var(--green); } /* Krok 3: zamčené ztmavnou, do povoleného bloku se píše text */ .how[data-step="3"] .hs-perm { opacity: 1; transform: none; } .how[data-step="3"] .hs-block--locked { opacity: 0.35; } .how[data-step="3"] .hs-block--edit { border-color: var(--green); } .how[data-step="3"] .hs-block--edit .hs-bar { display: none; } .how[data-step="3"] .hs-typing { display: inline-block; justify-self: start; padding-right: 3px; border-right: 2px solid var(--green); animation: hs-type 1.2s steps(13) forwards, hs-caret 0.8s steps(1) 1.2s infinite; } @keyframes hs-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes hs-caret { 50% { border-right-color: transparent; } } .how[data-step="1"] .hs-caption [data-for="1"], .how[data-step="2"] .hs-caption [data-for="2"], .how[data-step="3"] .hs-caption [data-for="3"] { display: inline; } @media (prefers-reduced-motion: reduce) { .how[data-step="3"] .hs-typing { animation: none; } .how-step::before { transition: none; } } /* ---------- Cesta projektu (časová osa) ---------- Každý krok je tlačítko, které rozbalí popis (journey.js). Svislou linku kreslí levý okraj kroku, u budoucích kroků je čárkovaná. Rozbalení animuje grid-template-rows 0fr -> 1fr, takže výška sedí na obsah bez počítání v JavaScriptu. */ .journey-heading { font-size: var(--fs-md); } .journey-intro { margin: var(--sp-2) 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); } .journey { margin: 0; padding: 0; list-style: none; } .journey-step { position: relative; padding-left: var(--sp-5); border-left: 1px solid var(--border-strong); } .journey-step:last-child { border-left-color: transparent; } .journey-step::before { content: ''; position: absolute; left: 0; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 4px var(--bg-raised); transform: translateX(-50%); transition: background-color 0.2s ease; } .journey-toggle { position: relative; display: grid; gap: 2px; width: 100%; padding: var(--sp-2) var(--sp-5) var(--sp-3) 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } /* Šipka vpravo: dolů zavřeno, nahoru otevřeno */ .journey-toggle::after { content: ''; position: absolute; right: 4px; top: 20px; width: 7px; height: 7px; border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim); transform: rotate(45deg); transition: transform 0.25s ease; } .journey-step.is-open .journey-toggle::after { transform: translateY(3px) rotate(-135deg); } .journey-period { font-size: var(--fs-xs); color: var(--text-dim); } .journey-title { font-weight: 600; font-size: var(--fs-base); line-height: 1.4; color: var(--text-muted); transition: color 0.2s ease; } .journey-toggle:hover .journey-title, .journey-step.is-open .journey-title { color: var(--text); } .journey-step.is-open::before, .journey-step:hover::before { background: var(--text-muted); } .journey-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .journey-step.is-open .journey-panel { grid-template-rows: 1fr; } .journey-panel-inner { min-height: 0; overflow: hidden; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); } /* Mezera pod obsahem je součástí obsahu, aby zmizela i se zavřením */ .journey-panel-inner::after { content: ''; display: block; height: 16px; } .journey-stack { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-3); } .journey-stack span { padding: 3px var(--sp-2); border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-muted); } .journey-proof { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); } /* Dnešek: zelený bod a seznam hotového */ .journey-step--now::before, .journey-step--now:hover::before, .journey-step--now.is-open::before { background: var(--green); box-shadow: 0 0 0 4px var(--bg-raised), 0 0 0 5px var(--green-line); } .journey-step--now .journey-period { color: var(--green); } .journey-list { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0 0; padding: 0; list-style: none; } .journey-list li { position: relative; padding-left: var(--sp-4); } .journey-list li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--green); } /* Budoucnost: čárkovaná linka */ .journey-step--now, .journey-step--next { border-left-style: dashed; } .journey-step--next::before, .journey-step--next:hover::before, .journey-step--next.is-open::before { background: var(--bg-raised); border: 1px solid var(--green); } .journey-step--locked::before { content: none; } .journey-lock { position: absolute; left: 0; top: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text-dim); font-size: 0.6rem; transform: translateX(-50%); } /* ---------- Další projekty ---------- */ .detail-next { margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--border); } .detail-next h2 { margin-bottom: var(--sp-4); font-size: var(--fs-base); color: var(--text-dim); font-weight: 400; letter-spacing: 0; } .detail-next ul { display: grid; margin: 0; padding: 0; list-style: none; } .detail-next a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); } .detail-next strong { font-weight: 600; font-size: var(--fs-md); transition: color 0.2s ease; } .detail-next span { grid-row: 2; color: var(--text-muted); } .detail-next .icon { grid-row: 1 / 3; grid-column: 2; color: var(--text-dim); font-size: var(--fs-sm); transition: transform 0.2s ease, color 0.2s ease; } .detail-next a:hover strong, .detail-next a:hover .icon { color: var(--green); } .detail-next a:hover .icon { transform: translateX(3px); } /* ---------- Responzivita ---------- */ @media (max-width: 1100px) { .detail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } .detail-aside { position: static; max-height: none; overflow: visible; } } @media (max-width: 767px) { .detail { padding-top: var(--sp-6); } .back-link { margin-bottom: var(--sp-6); } .detail-facts { grid-template-columns: 1fr 1fr; margin-top: var(--sp-7); } .gallery { margin-top: var(--sp-7); } .detail-section { margin-top: var(--sp-8); } .detail-list > div { grid-template-columns: 1fr; gap: var(--sp-1); } .how { grid-template-columns: 1fr; } .how-stage { padding: var(--sp-4); } .detail-next { margin-top: var(--sp-8); } .journey-box { padding: var(--sp-5) var(--sp-4) var(--sp-3); } } @media (max-width: 420px) { .detail-facts { grid-template-columns: 1fr; } .lightbox { padding: var(--sp-3); } .lightbox-nav { width: 40px; height: 40px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }