/* * stranka.css -- vzhled verejnych stranek v `public/` (about, gallery, * download, donate, privacy, contact). Hlavicka je zvlast v `hlava.css` * (nacitaji ji i vyvojove stranky a uvodni index.html). * * Prepsano 2026-09-14 po vraceni uzivatelem („hnusna vibe code stranka"): * misto dokumentace na tmavem podkladu ma stranka hero pres celou sirku, * serifove titulky, tri body, oddily text/obraz stridave, pas s vyzvou a * patu s navigaci a pravnimi odkazy. Navrhove varianty jsou v * `design/web/` (v1 pergamen, v2 noc, v3 mapa); tenhle soubor je jejich * spolecny zaklad a varianta se voli tridou na : `vNoc` (vychozi), * `vPergamen`, `vMapa`. * * Paleta je vzata ze hry, ne vymyslena: * pergamen #e0d8c3 / inkoust #2a2519 / rumelka #7a2416 / jantar #f0c674 * -- panely hry (zaklad.css, prompt-grafika 4.2) * pisek #d9c797 (CONFIG.render.pobrezi.pisek), louka #617e41, voda #336286, * skala #5d5a54, les ve stinu #3a4422 -- teren * drevo #6b4a2e, strecha #a24d36 -- atlas budov * noc #0d1720 / #14202a -- pozadi platna hry * * Zadne externi fonty ani CDN: Georgia/Noto Serif na titulky, system-ui na text. */ :root { --pergamen: #e0d8c3; --pergamen-svetly: #efe9d8; --inkoust: #2a2519; --inkoust-tlumeny: #524734; --rumelka: #7a2416; --jantar: #f0c674; --jantar-tmavy: #b98a2f; --pisek: #d9c797; --drevo-tmave: #3f2a17; --noc: #0d1720; --noc-svetla: #14202a; --bila: #f3efe4; --pismo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pismo-titul: Georgia, 'Noto Serif', 'Times New Roman', serif; --sirka: 64rem; --sirka-text: 44rem; --okraj: 18px; --bezpecne-dole: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); } @media (min-width: 720px) { :root { --okraj: 32px; } } /* ---- varianta vNoc je vychozi (na body i bez tridy) ---- */ body, .vNoc { --pozadi: var(--noc-svetla); --text: #e8e8e0; --tlumene: #a9b8c4; --titul: var(--jantar); --odkaz: #ffd98a; --cta: var(--jantar); --cta-text: var(--inkoust); --cta-okraj: #ffe0a0; --cta-najeti: #ffd98a; --hero-zaclona: linear-gradient(180deg, rgba(13, 23, 32, 0.35) 0%, rgba(13, 23, 32, 0) 35%, rgba(20, 32, 42, 0.95) 100%); --panel: var(--pergamen); --panel-text: var(--inkoust); --panel-tlumeny: var(--inkoust-tlumeny); --panel-titul: var(--rumelka); --panel-okraj: rgba(58, 44, 20, 0.32); --panel-odkaz: var(--rumelka); --obraz-okraj: rgba(255, 255, 255, 0.12); --linka: rgba(255, 255, 255, 0.14); --pata-pozadi: var(--noc); --pata-text: #a9b8c4; --pata-titul: var(--jantar); --pata-odkaz: #e8e8e0; --pata-aktivni: var(--jantar); --pole: #0f1a23; } .vPergamen { --pozadi: var(--pergamen); --text: var(--inkoust); --tlumene: var(--inkoust-tlumeny); --titul: var(--rumelka); --odkaz: var(--rumelka); --cta: var(--rumelka); --cta-text: #fff4e3; --cta-okraj: #a3402c; --cta-najeti: #93301f; --hero-zaclona: linear-gradient(180deg, rgba(13, 23, 32, 0.15) 0%, rgba(13, 23, 32, 0.05) 40%, rgba(42, 37, 25, 0.9) 100%); --panel: var(--pergamen-svetly); --obraz-okraj: rgba(58, 44, 20, 0.4); --linka: rgba(58, 44, 20, 0.3); --pata-pozadi: var(--drevo-tmave); --pata-text: #d9ccb0; --pata-odkaz: #efe3c8; --pole: #fbf8f0; background-image: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%); } .vMapa { --pozadi: #2b3a2b; --text: var(--inkoust); --tlumene: var(--inkoust-tlumeny); --titul: var(--rumelka); --odkaz: var(--rumelka); --cta: var(--rumelka); --cta-text: #fff4e3; --cta-okraj: #a3402c; --cta-najeti: #93301f; --hero-zaclona: linear-gradient(180deg, rgba(13, 23, 32, 0.1) 0%, rgba(13, 23, 32, 0.05) 45%, rgba(13, 23, 32, 0.85) 100%); --panel: rgba(224, 216, 195, 0.96); --panel-okraj: rgba(42, 37, 25, 0.5); --obraz-okraj: rgba(42, 37, 25, 0.6); --linka: rgba(42, 37, 25, 0.3); --pata-pozadi: var(--pergamen); --pata-text: var(--inkoust-tlumeny); --pata-titul: var(--rumelka); --pata-odkaz: var(--inkoust); --pata-aktivni: var(--rumelka); --pole: #fbf8f0; } .vMapa .mapaPozadi { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.55); } .vMapa .oddil, .vMapa .stranka { padding: 18px; border-radius: 8px; background: var(--panel); border: 1px solid var(--panel-okraj); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* ================================================================== zaklad */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font: 16px/1.55 var(--pismo); color: var(--text); background: var(--pozadi); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--odkaz); } a:focus-visible, button:focus-visible { outline: 3px solid var(--jantar); outline-offset: 2px; } code, .otisk { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.92em; overflow-wrap: anywhere; } .obsah { width: min(100%, var(--sirka)); margin: 0 auto; padding: 0 var(--okraj); } /* ================================================================== hero */ .hero { position: relative; min-height: clamp(420px, 72vh, 720px); display: grid; align-items: end; overflow: hidden; background: var(--noc); } .heroObraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; } .heroZaclona { position: absolute; inset: 0; background: var(--hero-zaclona); } .heroText { position: relative; width: min(100%, var(--sirka)); margin: 0 auto; padding: 48px var(--okraj) 40px; color: var(--bila); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); } .heroNadznak { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--jantar); } .heroTitul { margin: 0 0 12px; max-width: 14ch; font: 700 clamp(34px, 7vw, 64px)/1.02 var(--pismo-titul); letter-spacing: 0.01em; } .heroVeta { margin: 0 0 22px; max-width: 34rem; font-size: clamp(16px, 2.4vw, 20px); line-height: 1.45; } .heroDrobne { margin: 12px 0 0; font-size: 13px; opacity: 0.85; } @media (max-width: 719px) { .hero { min-height: clamp(460px, 78vh, 680px); } } /* ================================================================== tlacitka */ .akce { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; } .tl, .tlacitko { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 2px solid transparent; border-radius: 6px; font-weight: 700; font-size: 17px; text-decoration: none; text-shadow: none; } .tlHlavni, .tlacitko { background: var(--cta); color: var(--cta-text); border-color: var(--cta-okraj); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } .tlHlavni:hover, .tlacitko:hover { background: var(--cta-najeti); color: var(--cta-text); } .tlDruhy, .tlacitko.druhotne { background: rgba(0, 0, 0, 0.35); color: var(--bila); border-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(3px); box-shadow: none; } .tlDruhy:hover, .tlacitko.druhotne:hover { background: rgba(0, 0, 0, 0.55); color: var(--bila); } .vPergamen .tlDruhy, .vMapa .tlDruhy, .vPergamen .tlacitko.druhotne, .vMapa .tlacitko.druhotne { color: var(--inkoust); background: rgba(42, 37, 25, 0.06); border-color: rgba(42, 37, 25, 0.45); } .hero .tlDruhy { color: var(--bila); background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.55); } @media (max-width: 719px) { .akce .tl, .akce .tlacitko { flex: 1 1 auto; } } /* Radek pod tlacitkem (velikost APK, datum). */ .stav { margin: -6px 0 18px; color: var(--tlumene); font-size: 13px; } /* ================================================================== tri body */ .body3 { display: grid; gap: 14px; margin: 26px 0 8px; } @media (min-width: 720px) { .body3 { grid-template-columns: repeat(3, 1fr); gap: 18px; } } .bod { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 8px; background: var(--panel); color: var(--panel-text); border: 1px solid var(--panel-okraj); } .bod img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; } .bod b { display: block; margin-bottom: 2px; font: 700 18px/1.2 var(--pismo-titul); color: var(--panel-titul); } .bod p { margin: 0; font-size: 14.5px; line-height: 1.45; } /* ================================================================== oddily */ .oddil { display: grid; gap: 16px; align-items: center; margin: 40px 0; } @media (min-width: 720px) { .oddil { grid-template-columns: 5fr 7fr; gap: 36px; margin: 56px 0; } .oddil.obraceny .oddilText { order: 2; } } .oddilText h2 { margin: 0 0 10px; font: 700 clamp(24px, 3.4vw, 34px)/1.12 var(--pismo-titul); color: var(--titul); } .oddilText p { margin: 0 0 10px; max-width: 34rem; } .oddilText .doklad { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--jantar-tmavy); font-size: 13.5px; color: var(--tlumene); } .oddilObraz { margin: 0; } .oddilObraz img { width: 100%; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border: 1px solid var(--obraz-okraj); } .oddilObraz figcaption { margin: 6px 2px 0; font-size: 13px; color: var(--tlumene); } /* Pas pres celou sirku s obrazem a vyzvou. */ .pas { position: relative; margin: 48px 0 0; padding: 64px var(--okraj); overflow: hidden; background: var(--noc); color: var(--bila); text-align: center; } .pas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .pas .obsah { position: relative; } .pas h2 { margin: 0 0 8px; font: 700 clamp(26px, 4vw, 40px)/1.1 var(--pismo-titul); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8); } .pas p { margin: 0 auto 18px; max-width: 36rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } .pas .akce { justify-content: center; } /* Poctivost: co neni. Stejny panel jako tri body. */ .neni { margin: 44px 0; padding: 18px 20px; border-radius: 8px; background: var(--panel); color: var(--panel-text); border: 1px solid var(--panel-okraj); } .neni h2 { margin: 0 0 6px; font: 700 20px/1.2 var(--pismo-titul); color: var(--panel-titul); } .neni ul { margin: 0; padding-left: 1.2rem; font-size: 14.5px; } .neni li { margin: 4px 0; } .neni a { color: var(--panel-odkaz); } /* ================================================================== dokumentove stranky * (download, donate, privacy, contact, gallery): bez hero, uzsi sloupec textu. */ .stranka { max-width: var(--sirka-text); padding-top: 26px; } .stranka h1 { margin: 0 0 8px; font: 700 clamp(30px, 5vw, 42px)/1.1 var(--pismo-titul); color: var(--titul); } .stranka h2 { margin: 30px 0 8px; font: 700 clamp(20px, 3vw, 26px)/1.2 var(--pismo-titul); color: var(--titul); } .stranka p { margin: 0 0 10px; } .stranka ol, .stranka ul { margin: 0 0 10px; padding-left: 1.25rem; } .stranka li { margin-bottom: 6px; } /* Prvni odstavec pod nadpisem: co ta stranka je, jednou vetou. */ .podtitul { margin: 0 0 22px; font-size: 17px; color: var(--tlumene); } .pozn { color: var(--tlumene); font-size: 13.5px; } /* Vytazeny odstavec: varovani nebo duraz -- pergamenovy panel s rumelkou. */ .poznamka { margin: 22px 0; padding: 12px 14px; border-left: 4px solid var(--rumelka); border-radius: 0 8px 8px 0; background: var(--panel); color: var(--panel-text); font-size: 14.5px; } .poznamka a { color: var(--panel-odkaz); } .poznamka :last-child { margin-bottom: 0; } /* Seznam faktu (otisk APK, opravneni) -- vypada jako tabulka, cte se jako seznam. */ .fakta { margin: 0 0 22px; padding: 0; list-style: none; } .fakta li { margin: 0; padding: 8px 0; border-top: 1px solid var(--linka); } .fakta li:last-child { border-bottom: 1px solid var(--linka); } .fakta b { display: block; color: var(--tlumene); font-weight: 600; font-size: 13px; } /* Misto na udaj, ktery doplni autor (donate) -- napadne, at se neda prehlednout. */ .doplnit { display: inline-block; padding: 2px 8px; border: 1px dashed var(--jantar-tmavy); border-radius: 6px; color: var(--titul); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } .qr { margin: 22px 0; text-align: center; } .qr img { width: min(240px, 70vw); margin: 0 auto 8px; border: 1px solid var(--obraz-okraj); border-radius: 10px; background: #fff; image-rendering: pixelated; } .qr figcaption { color: var(--tlumene); font-size: 13.5px; } .snimek { margin: 12px 0 22px; } .snimek img { width: 100%; border: 1px solid var(--obraz-okraj); border-radius: 8px; background: var(--noc); } .snimek figcaption { margin: 6px 2px 0; color: var(--tlumene); font-size: 13px; } /* ================================================================== galerie */ .mrizka { display: grid; gap: 12px; margin: 16px 0 22px; } @media (min-width: 380px) { .mrizka { grid-template-columns: 1fr 1fr; gap: 10px; } } @media (max-width: 559px) { /* Popisek pod nahledem -- stejne pravidlo jako u kazdeho snimku na webu: jednoradkovy popisek pod obrazkem, nikdy pres obraz. */ .nahled span { display: block; padding: 7px 10px 9px; background: var(--panel); color: var(--panel-text); font: 600 14px/1.25 var(--pismo); } } @media (min-width: 900px) { .mrizka { grid-template-columns: 1fr 1fr 1fr; } } .nahled { position: relative; display: block; overflow: hidden; border-radius: 8px; border: 1px solid var(--obraz-okraj); background: var(--noc); color: var(--bila); text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .nahled img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 300ms ease; } .nahled:hover img { transform: scale(1.04); } .nahled span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(180deg, rgba(13, 23, 32, 0), rgba(13, 23, 32, 0.85)); font: 600 15px/1.2 var(--pismo); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); } /* Zvetseny snimek: prekryv pres celou obrazovku, zapina se kotvou (`:target`). */ .svetlo { display: none; position: fixed; inset: 0; z-index: 30; grid-template-rows: 1fr auto; grid-template-columns: 1fr; background: rgba(8, 14, 20, 0.96); color: var(--bila); } .svetlo:target { display: grid; } .svetlo > img { width: 100%; height: 100%; object-fit: contain; grid-row: 1; grid-column: 1; } .svetlo > p { grid-row: 2; margin: 0; padding: 12px calc(var(--okraj) + 44px) calc(14px + var(--bezpecne-dole)); text-align: center; font-size: 14.5px; color: #cfd8df; } .svetlo > a { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(20, 32, 42, 0.8); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--bila); font: 700 30px/1 var(--pismo-titul); text-decoration: none; } .svetlo > a:hover { background: var(--jantar); color: var(--inkoust); } .svetloZavrit { top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; } .svetloPredchozi { left: 8px; bottom: calc(8px + var(--bezpecne-dole)); } .svetloDalsi { right: 8px; bottom: calc(8px + var(--bezpecne-dole)); } @media (min-width: 720px) { .svetloPredchozi, .svetloDalsi { top: 50%; bottom: auto; transform: translateY(-50%); } .svetloPredchozi { left: 16px; } .svetloDalsi { right: 16px; } } /* ================================================================== pata */ .pata { margin-top: 40px; padding: 26px var(--okraj) calc(26px + var(--bezpecne-dole)); background: var(--pata-pozadi); color: var(--pata-text); font-size: 13.5px; } .pata .obsah { display: grid; gap: 12px; padding: 0; } @media (min-width: 720px) { .pata .obsah { grid-template-columns: 1.4fr 1fr 1fr; padding: 0; } } .pata h3 { margin: 0 0 6px; font: 700 12px/1 var(--pismo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pata-titul); } /* Odkazy v pate tecou v radku a lamou se jako slova, ne jako sloupec: na 400 px by osm polozek pod sebou pridalo 320 px vysky kazde strance. */ .pata ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; } .pata li { margin: 0; } .pata a { display: inline-flex; align-items: center; min-height: 40px; color: var(--pata-odkaz); text-decoration: none; } .pata a:hover { color: var(--pata-aktivni); text-decoration: underline; } .pata p { margin: 0; line-height: 1.5; } .pataZnacka { margin-bottom: 8px; font: 700 18px/1 var(--pismo-titul); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pata-titul); }