/* ──────────────────────────────────────────────────────────────────────── Sousedomat — veřejná stránka domu ({slug}.sousedomat.cz) Samostatný stylesheet (bez Bootstrapu a bez JS). Tokeny odpovídají assets/styles/sousedomat.scss; témata green/brick/blue/white/ink dle návrhu v5. ──────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --sd-paper: #F6F3EC; --sd-paper-2: #EFEBE1; --sd-paper-3: #E6E1D3; --sd-ink: #1B1D1A; --sd-ink-2: #3A3D37; --sd-ink-3: #6B6E66; --sd-ink-4: #9A9C93; --sd-line: #D9D4C5; --sd-primary: #2E5D4F; --sd-primary-ink: #1C3B31; --sd-primary-soft: #E4EDE6; --sd-accent: #C96F4A; --sd-accent-soft: #F4E3D8; --sd-font-ui: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sd-font-display: "Instrument Serif", "Playfair Display", Georgia, serif; --sd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } * { box-sizing: border-box; } /* Mirrors sousedomat.scss — this stylesheet is standalone, so without the line the very same Inter Tight renders softer here than it does inside the app. Most visible on the nav: light text on a dark bar at 13.6px. */ html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The .site column is centred (max-width + margin auto), so every page that gains or loses the vertical scrollbar shifts it sideways by half the scrollbar width. Home and the photo page fit in the viewport, the rest do not, so navigating between them made the layout jump. Reserving the gutter up front keeps the column still — it also covers the lightbox, which sets `overflow: hidden` on body. */ html { scrollbar-gutter: stable; } /* Safari < 18.2 does not know scrollbar-gutter — a permanently visible track costs nothing there and keeps the column from moving. */ @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } } html, body { margin: 0; padding: 0; } body { font-family: var(--sd-font-ui); font-size: 15px; line-height: 1.55; color: var(--sd-ink); background: var(--sd-paper-3); } a { color: var(--sd-primary-ink); } a:hover { color: var(--sd-accent); } /* Sloupcový flex + rostoucí .site-body drží patičku na spodku i u krátkých stránek — bez toho zbytek 100vh zůstane jako prázdné místo POD patičkou. */ .site { /* Theme accent — section headings, icons and the issue report form. */ --sd-theme: var(--sd-primary); max-width: 940px; margin: 0 auto; background: #fff; min-height: 100vh; display: flex; flex-direction: column; } /* Hero + nav */ .site-hero { color: #fff; padding: 3rem 2.5rem 2.5rem; display: flex; align-items: center; gap: 1.75rem; } .site-hero .s-hero-text { min-width: 0; } .site-hero .s-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 5rem; max-width: 11rem; padding: .6rem .75rem; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); } .site-hero .s-logo img { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; } .site-hero .s-eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 600; } .site-hero h1 { font-family: var(--sd-font-display); font-size: 2.5rem; font-weight: 400; color: #fff; margin: .5rem 0 .35rem; line-height: 1.05; } .site-hero .s-addr { opacity: .9; font-size: 1rem; } .site-nav { display: flex; gap: 1.5rem; padding: .85rem 2.5rem; font-size: .9rem; font-weight: 500; flex-wrap: wrap; } .site-nav a { color: inherit; text-decoration: none; } .site-nav a:hover { color: #fff; text-decoration: underline; } .site-nav a.is-active { color: #fff; font-weight: 600; } /* Leaving for the app, not navigating the building's site — set apart by position alone, so it inherits every theme's nav colours without an override. */ .site-nav .s-login { margin-left: auto; } .site-hero .s-logo { text-decoration: none; } /* Body + sekce */ .site-body { flex: 1 0 auto; padding: 2.5rem; display: flex; flex-direction: column; gap: 2.5rem; background: #fff; } .site-sec .s-h { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sd-theme); font-weight: 700; margin-bottom: .9rem; } /* Předěl pod sekcí. „Co se chystá“ a „Poslední aktuality“ jsou dva vizuálně podobné datované seznamy a bez čáry splývají v jeden. `padding-bottom` je stejný jako `gap` v `.site-body`, aby čára ležela přesně uprostřed mezery. `:last-child` hlídá, aby nezůstala viset, když už pod sekcí nic není. */ .site-sec-sep { border-bottom: 1px solid var(--sd-line); padding-bottom: 2.5rem; } .site-sec-sep:last-child { border-bottom: 0; padding-bottom: 0; } /* Sanitized TinyMCE HTML — sdílené sekcí „O nás“ a aktualitami. Žádný `white-space: pre-line`, zdvojil by odsazení, které už markup nese sám. */ .s-rich { color: var(--sd-ink-2); line-height: 1.6; max-width: 44rem; } .s-rich p { margin: 0 0 .6rem; } .s-rich :is(h1, h2, h3, h4) { font-family: var(--sd-font-ui); font-size: 1rem; font-weight: 600; color: var(--sd-ink-1); margin: .9rem 0 .35rem; } .s-rich :is(ul, ol) { margin: 0 0 .6rem; padding-left: 1.25rem; } .s-rich ul { list-style: disc outside; } .s-rich ol { list-style: decimal outside; } .s-rich li { margin-bottom: .2rem; } .s-rich a { color: var(--sd-accent); text-decoration: underline; } .s-rich strong { color: var(--sd-ink-1); } .s-rich blockquote { margin: 0 0 .6rem; padding-left: .8rem; border-left: 2px solid var(--sd-line); color: var(--sd-ink-3); } .s-rich table { width: 100%; margin: .6rem 0; border-collapse: collapse; font-size: .9rem; } .s-rich :is(th, td) { padding: .35rem .5rem; border: 1px solid var(--sd-line); text-align: left; vertical-align: top; } /* Editor images (TinyMCE uploads) — never wider than the column. */ .s-rich img { max-width: 100%; height: auto; } .s-rich > *:last-child { margin-bottom: 0; } /* Kontakt — building's own details */ .s-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; max-width: 44rem; } .s-inforow { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--sd-ink-2); min-width: 0; } .s-inforow .s-ico { flex: 0 0 auto; color: var(--sd-theme); } .s-inforow .s-infolabel { color: var(--sd-ink-4); font-size: .8rem; min-width: 4rem; } .s-inforow a { color: var(--sd-primary-ink); text-decoration: none; overflow-wrap: anywhere; } .s-inforow a:hover { color: var(--sd-accent); } /* Rich value (bank account with payment notes) takes the full row and aligns to its first line. */ .s-inforow--rich { grid-column: 1 / -1; align-items: flex-start; } .s-inforow--rich .s-rich { font-size: inherit; min-width: 0; } .s-inforow--rich .s-rich p { margin-bottom: .25rem; } /* Aktuality */ .s-akt { border-top: 1px solid var(--sd-line); padding: 1rem 0; } .s-akt:first-of-type { border-top: 0; padding-top: 0; } .s-akt .a-date { font-family: var(--sd-font-mono); font-size: .78rem; color: var(--sd-ink-4); } .s-akt .a-title { font-weight: 600; font-size: 1.1rem; margin: .15rem 0 .3rem; } /* Aktuality mají o něco drobnější písmo než zbytek stránky; vlastní bohatý text dědí ze sdílené `.s-rich` níž. */ .s-akt .a-text { font-size: .95rem; line-height: 1.55; } /* Poslední aktuality na úvodu */ /* Bez linek mezi položkami — jediný předěl na úvodu je ten mezi sekcemi (`.site-sec-sep`). Čára u každé položky dělala ze stránky mřížku a předěl sekcí v ní zanikl. Na vlastních stránkách sekcí (`.s-akt`, `.s-akce`) linky zůstávají: tam nesou dlouhý text a je co oddělovat. */ .s-teaser { padding: 0 0 1.5rem; } .s-teaser:last-of-type { padding-bottom: 0; } .s-teaser .a-date { font-family: var(--sd-font-mono); font-size: .78rem; color: var(--sd-ink-4); } .s-teaser .a-title { font-weight: 600; font-size: 1.05rem; margin: .15rem 0 .25rem; } .s-teaser-text { color: var(--sd-ink-2); font-size: .92rem; margin: 0; max-width: 44rem; } .s-teaser-all { display: inline-block; margin-top: .9rem; font-size: .88rem; font-weight: 600; text-decoration: none; } /* Kalendář akcí */ .s-akce { border-top: 1px solid var(--sd-line); padding: 1rem 0; } .s-akce:first-of-type { border-top: 0; padding-top: 0; } .s-akce .a-when { font-family: var(--sd-font-mono); font-size: .78rem; color: var(--sd-ink-4); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .s-akce .a-title { font-weight: 600; font-size: 1.1rem; margin: .15rem 0 .3rem; } .s-akce .a-place { font-size: .85rem; color: var(--sd-ink-3); margin-bottom: .35rem; } /* Akce mají o něco drobnější písmo než zbytek stránky; vlastní bohatý text dědí ze sdílené `.s-rich` výš. */ .s-akce .a-text { font-size: .95rem; line-height: 1.55; } /* Proběhlé akce ze stránky nemizí, jen ustoupí. Ztlumení je barvou, ne `opacity` — ta by text na papírovém pozadí stáhla pod kontrastní minimum. Nositelem informace je štítek „Proběhlo“, barva je jen doprovod. */ .s-akce.is-past .a-title { color: var(--sd-ink-3); font-weight: 500; } .s-akce.is-past .a-text, .s-akce.is-past .a-place { color: var(--sd-ink-4); } .s-akce .a-past { padding: .05rem .45rem; border-radius: 999px; background: var(--sd-paper-3); color: var(--sd-ink-3); font-family: var(--sd-font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .02em; } .s-akce .a-ongoing { padding: .05rem .45rem; border-radius: 999px; background: var(--sd-accent-soft); color: var(--sd-accent); font-family: var(--sd-font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .02em; } /* Co se chystá — na úvodu */ /* Bez linek mezi položkami, stejně jako u `.s-teaser` výš. */ .s-event { padding: 0 0 1.5rem; } .s-event:last-of-type { padding-bottom: 0; } .s-event .a-when { font-family: var(--sd-font-mono); font-size: .78rem; color: var(--sd-ink-4); } .s-event .a-title { font-weight: 600; font-size: 1.05rem; margin: .15rem 0 .2rem; } .s-event .a-place { font-size: .85rem; color: var(--sd-ink-3); margin-bottom: .2rem; } /* Přílohy pod aktualitou / akcí */ .s-att { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .85rem; } .s-att li { display: inline-flex; align-items: baseline; gap: .35rem; } .s-att-link { color: var(--sd-primary-ink); font-weight: 600; text-decoration: none; } .s-att-link:hover { color: var(--sd-accent); } .s-att-size { font-family: var(--sd-font-mono); font-size: .75rem; color: var(--sd-ink-4); } .s-akce.is-past .s-att-link { color: var(--sd-ink-3); } /* Dokumenty */ .s-doccat { margin-bottom: 1.25rem; } .s-doccat:last-child { margin-bottom: 0; } .s-doccat h3 { font-family: var(--sd-font-ui); font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; } .s-docrow { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--sd-line); } .s-docrow:first-of-type { border-top: 0; } .s-docrow .s-di { width: 28px; height: 34px; border-radius: 4px; background: var(--sd-accent-soft); color: var(--sd-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .7rem; font-family: var(--sd-font-mono); } .s-docrow .s-dn { font-weight: 500; font-size: .92rem; } .s-docrow .s-dd { font-size: .8rem; color: var(--sd-ink-3); } .s-docrow .s-dl { margin-left: auto; color: var(--sd-primary-ink); text-decoration: none; font-size: .85rem; font-weight: 600; white-space: nowrap; } .s-docrow .s-dl:hover { color: var(--sd-accent); } /* Kontakty na výbor */ .s-roster { display: flex; flex-direction: column; } .s-rrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1.5rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--sd-line); } .s-rrow:first-child { border-top: 0; } .s-rname { grid-column: 1; display: flex; flex-direction: column; gap: .15rem; font-weight: 600; } .s-rperson { display: inline-flex; align-items: center; gap: .45rem; } .s-rperson .s-ico { color: var(--sd-ink-4); flex: 0 0 auto; } .s-rnote { font-weight: 400; font-size: .8rem; color: var(--sd-ink-3); font-style: italic; } .s-rrole { grid-column: 2; color: var(--sd-ink-3); font-size: .9rem; } .s-rcontact { grid-column: 3; display: flex; flex-direction: column; gap: .1rem; font-size: .9rem; overflow-wrap: anywhere; } .s-rcontact a { color: var(--sd-primary-ink); text-decoration: none; } .s-rcontact a:hover { color: var(--sd-accent); } /* Map — full content width, no max-width cap (unlike .s-info). */ .s-map { width: 100%; height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--sd-line); } .s-map iframe { display: block; width: 100%; height: 100%; border: 0; } /* Fotografie — ořez drží .ph-img, ne .ph: na .ph by overflow ukousl popisek. */ .s-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem .75rem; align-items: start; } .s-photos .ph { margin: 0; display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .s-photos .ph-img { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; cursor: zoom-in; } .s-photos .ph-img:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; } .s-photos .ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .s-photos .ph-cap { font-size: .82rem; line-height: 1.4; color: var(--sd-ink-3); overflow-wrap: anywhere; } /* Lightbox (assets/js/public-photo-lightbox.js) — overlay se staví až při prvním otevření, takže bez JavaScriptu na stránce žádné z těchhle prvků nejsou. */ body.has-lb { overflow: hidden; } .ph-lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; background: rgba(16, 18, 20, .93); } .ph-lb[hidden] { display: none; } .ph-lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0; } /* The width cap must leave room for the side chrome of the flex row — 2× padding (1rem) + 2× arrow (2.75rem) + 2× gap (.75rem) = 9rem. A plain viewport share (92vw) exceeded that room, the photo overflowed its shrunken stage and buried the arrows underneath itself. */ .ph-lb__stage img { max-width: min(100vw - 9rem, 1400px); max-height: 78vh; object-fit: contain; border-radius: 8px; display: block; } .ph-lb__meta { display: flex; flex-direction: column; gap: .15rem; color: #fff; font-size: .9rem; text-align: center; max-width: 44rem; overflow-wrap: anywhere; } .ph-lb__count { opacity: .65; font-size: .8rem; } .ph-lb button { flex-shrink: 0; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 999px; width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1; cursor: pointer; } .ph-lb button:hover { background: rgba(255, 255, 255, .24); } .ph-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .ph-lb__close { position: absolute; top: 1rem; right: 1rem; font-size: 1.7rem; } /* Dokument — detail (rich text) */ .s-document h2 { font-family: var(--sd-font-display); font-weight: 400; font-size: 1.9rem; margin: 0 0 1rem; } .s-document .s-doc-content { color: var(--sd-ink-2); line-height: 1.65; } .s-document .s-doc-content img { max-width: 100%; height: auto; } .s-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 600; text-decoration: none; margin-bottom: 1.25rem; } /* Hlášení závady */ .s-form-intro { color: var(--sd-ink-2); max-width: 44rem; margin: 0 0 1.25rem; } .s-form { max-width: 44rem; } .s-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .s-fieldset[disabled] { opacity: .6; } .s-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } .s-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .s-field.is-wide { grid-column: 1 / -1; } .s-field label { font-size: .82rem; font-weight: 600; color: var(--sd-ink-2); } .s-input, .s-select, .s-textarea, .s-file { width: 100%; font: inherit; font-size: .92rem; color: var(--sd-ink); background: #fff; padding: .5rem .65rem; border: 1px solid var(--sd-line); border-radius: 6px; } .s-textarea { resize: vertical; min-height: 6rem; } .s-file { padding: .4rem .5rem; } .s-input:focus, .s-select:focus, .s-textarea:focus, .s-file:focus { outline: 2px solid var(--sd-theme); outline-offset: 1px; border-color: var(--sd-theme); } .s-hint { font-size: .8rem; color: var(--sd-ink-3); } .s-btn { display: inline-block; font: inherit; font-size: .92rem; font-weight: 600; padding: .6rem 1.4rem; border: 1px solid var(--sd-theme); border-radius: 6px; background: var(--sd-theme); color: #fff; text-decoration: none; cursor: pointer; } .s-btn:hover { color: #fff; opacity: .9; } .s-btn[disabled] { cursor: not-allowed; } .s-btn-quiet { background: transparent; color: var(--sd-theme); } .s-btn-quiet:hover { color: var(--sd-theme); } /* form_div_layout vykresluje chyby jako