/* ──────────────────────────────────────────────────────────────────────── 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; } 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; } .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); } /* 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; } /* 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; } /* 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; } .ph-lb__stage img { max-width: min(92vw, 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