/* Design systém veřejného webu – tokeny 1:1 podle referenčního designového mockupu webu (viz interní dokumentaci designu). Barvy/radius se odsud čerpají v blocks.css/menu.css (custom-menu.css)/footer.css (custom-footer.css)/articles.css/events.css. */ :root { --sw-font: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ink: #14181F; --muted: #5D6773; --line: #E8EAED; --blue: #2557E8; --green: #1F9D55; --yellow: #FFC93C; --blue-soft: #EDF2FE; --green-soft: #EAF6EF; --yellow-soft: #FFF6DC; --r-s: 10px; --r: 16px; --r-l: 24px; --max: 1160px; /* zpětně kompatibilní aliasy – starší třídy v tomto i dalších CSS souborech je používaly před redesignem, necháváme, ať se nemusí přepisovat na 100 míst najednou */ --sw-text: var(--ink); --sw-muted: var(--muted); --sw-bg: #ffffff; --sw-border: var(--line); --sw-max-width: var(--max); --sw-gap: 24px; } /* Bez tohoto resetu má defaultní margin z browseru (obvykle 8px) – projevuje se to jako "odsazení od okraje" na plovoucích full-width prvcích jako utility lišta/header (viz custom-menu.php), které jsou přímo v . */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } .sw-page { font-family: var(--sw-font); color: var(--ink); background: #ffffff; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .sw-page h1, .sw-page h2, .sw-page h3 { font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; } .sw-container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .sw-placeholder { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 24px; } .sw-placeholder__box { max-width: 480px; } .sw-placeholder__title { font-size: 22px; font-weight: 800; margin: 0 0 8px; } .sw-placeholder__text { color: var(--muted); margin: 0; } /* ---------- utility: eyebrow/btn/tag/dot/plate (referenčního designového mockupu webu) ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); } .btn { display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; background: none; } .btn-yellow { background: var(--yellow); color: var(--ink); } .btn-blue { background: var(--blue); color: #fff; } .btn-green { background: var(--green); color: #fff; } .btn-ghost { border-color: var(--ink); color: var(--ink); } .btn-white { background: #fff; color: var(--blue); } .tag { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .tag-blue { background: var(--blue-soft); color: var(--blue); } .tag-green { background: var(--green-soft); color: var(--green); } .tag-yellow { background: var(--yellow-soft); color: #8A6500; } /* Hlavička výpisových stránek (Aktuality/Akce) – 1:1 podle ".svc-head" v referenčního designového mockupu webu (tag + h1 + lead, zarovnáno vlevo), ať vypadá stejně jako zbytek webu a ne jako neupravený zbytek z doby před redesignem. */ .sw-listing-head { padding: 56px 0 48px; border-bottom: 1px solid var(--line); margin-bottom: 40px; } .sw-listing-head h1 { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 12px; color: var(--ink); } .sw-listing-head .lead { font-size: 17px; color: var(--muted); max-width: 60ch; margin: 0; } .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; } .dot-blue { background: var(--blue); } .dot-green { background: var(--green); } .dot-yellow { background: var(--yellow); } .dots { display: inline-flex; gap: 5px; } .dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dots i:nth-child(1) { background: var(--blue); } .dots i:nth-child(2) { background: var(--green); } .dots i:nth-child(3) { background: var(--yellow); } /* fotky na plochých barevných deskách */ .plate { position: relative; display: inline-block; width: 100%; } .plate::before { content: ""; position: absolute; inset: 0; transform: translate(8px, 8px); border-radius: var(--r); } .plate img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); } .plate-green::before { background: var(--green); } .plate-blue::before { background: var(--blue); } .plate-yellow::before { background: var(--yellow); } /* ---------- drobečková navigace ---------- */ .sw-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 22px 24px 0; max-width: var(--max); margin: 0 auto; font-size: 13.5px; color: var(--muted); } .sw-breadcrumbs a { color: inherit; text-decoration: none; } .sw-breadcrumbs a:hover { color: var(--ink); } .sw-breadcrumbs__sep { color: var(--line); } .sw-breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 500; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- layout: sidenav/sidebar ---------- 1:1 podle referenčního designového mockupu webu – ".docs" (280px podnavigace + hlavní obsah) a ".subnav" (orámovaný sticky box s "kapitolami" a zvýrazněnou aktivní položkou). Stejný box/vzhled používá jak automatické menu sekce (.sw-sidenav, viz PageService::sidenavItems()/siblingItems()), tak blokový sidebar builder (.sw-layout__sidebar, viz Sidebar/) – oba jsou v podstatě tatáž "levá podnavigace" z mockupu, jen jeden je automatický a druhý ručně poskládaný z bloků. */ .sw-layout { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; padding: 48px 24px 80px; } /* sidebar-right: aside je v DOM druhé (za hlavním obsahem), ale sloupce musí být v opačném pořadí (úzký sloupec vpravo), jinak by grid s pevným "280px 1fr" template natáhl hlavní obsah jen na 280px. */ .sw-layout--right { grid-template-columns: 1fr 280px; } .sw-layout__sidenav, .sw-layout__sidebar { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0; } .sw-page-main--narrow { max-width: 760px; } /* Bloky nových typů (button-link/contact-info/mini-list), viz Blocks/BlockRegistry.php. */ .sw-block__button-link .sw-block__button-link-anchor { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; background: var(--blue); color: #ffffff; text-decoration: none; font-weight: 700; font-size: 14px; } .sw-layout__sidebar .sw-block__button-link .sw-block__button-link-anchor { width: 100%; } /* Kontaktní údaje v sidebaru = stejná "donate" zvýrazněná krabička jako v mockupu ("Akutní situace? Zavolejte nám…"). */ .sw-block__contact-info { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; } .sw-layout__sidebar .sw-block__contact-info { padding: 16px; border-radius: var(--r-s); background: var(--blue-soft); } .sw-block__contact-info-name { display: block; font-size: 15px; font-weight: 700; color: var(--ink); } .sw-block__contact-info-item { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .sw-block__contact-info-item i { color: var(--blue); } .sw-block__contact-info-item:hover { text-decoration: underline; } /* Mini-list (poslední články / nadcházející akce v sidebaru) – datum jako malý barevný "eyebrow" štítek, název tučně, kousek perexu/popisu pod tím, celý řádek s jemným hover zvýrazněním (stejný jazyk jako .mega-links a). */ .sw-block__mini-list h2 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .sw-block__mini-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sw-block__mini-list li { padding: 12px 10px; margin: 0 -10px; border-radius: var(--r-s); transition: background-color .15s ease; } .sw-block__mini-list li:hover { background: var(--blue-soft); } .sw-block__mini-list-date { display: block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; } .sw-block__mini-list a { display: block; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1.4; } .sw-block__mini-list li:hover a { color: var(--blue); } .sw-block__mini-list-excerpt { display: block; margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); } /* Rich-text/citace/upozornění v sidebaru – v úzkém sloupci je hlavní typografie (16px, viz blocks.css) zbytečně velká. */ .sw-layout__sidebar .sw-block__rich-text { font-size: 14px; line-height: 1.65; } .sw-layout__sidebar .sw-block__rich-text h1, .sw-layout__sidebar .sw-block__rich-text h2, .sw-layout__sidebar .sw-block__rich-text h3 { font-size: 15px; } .sw-layout__sidebar .sw-block__rich-text img { max-width: 100%; height: auto; border-radius: var(--r-s); } /* Bloky uvnitř sidebaru si nesou vlastní .sw-container/šířku navrženou pro hlavní obsah – v úzkém sloupci by to jen zbytečně omezovalo. */ .sw-layout__sidebar .sw-container, .sw-layout__sidebar .sw-block__inner { max-width: none; padding-left: 0; padding-right: 0; } .sw-layout__sidebar .sw-block { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .sw-layout__sidebar .sw-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .sw-layout__main { min-width: 0; } .sw-layout__main .sw-container { max-width: none; padding-left: 0; padding-right: 0; } /* "Kapitoly" sekce – čísla (01, 02, …) u každé položky, přesně jako .subnav a/a.on v mockupu. Plochý seznam (kořen sekce + jeho přímé podstránky, viz PageService::sidenavItems()/siblingItems()) – žádné vnořování/odsazování podle úrovně. */ .sw-sidenav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: sw-sidenav; } .sw-sidenav__item { counter-increment: sw-sidenav; } .sw-sidenav__link { display: flex; align-items: baseline; gap: 12px; padding: 9px 14px; border-radius: var(--r-s); color: var(--muted); text-decoration: none; font-size: 14.5px; } .sw-sidenav__link::before { content: counter(sw-sidenav, decimal-leading-zero); font-weight: 700; font-size: 12px; color: var(--line); min-width: 18px; } .sw-sidenav__link:hover { background: var(--blue-soft); color: var(--ink); } .sw-sidenav__link.is-active { background: var(--blue-soft); color: var(--ink); font-weight: 600; } .sw-sidenav__link.is-active::before { color: var(--blue); } @media (max-width: 1000px) { .sw-layout { grid-template-columns: 1fr; gap: 32px; } .sw-layout__sidenav, .sw-layout__sidebar { position: static; width: 100%; } }