/* theme.css — Excelentt.cz Jednotný vzhled + stabilizace tabulkové (sliced) hlavičky (vyčištěno od duplicit, připraveno pro 1sloupcový index) */ /* (VOLITELNÉ) pokud nechceš dávat fonty do , odkomentuj: @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Merriweather:wght@400;700&display=swap'); */ :root{ --bg: #f4f6f8; --surface: #ffffff; --surface-2: #f9fafb; --text: #111827; --muted: #374151; --border: #e5e7eb; --brand: #0b5d47; --brand2: #084b3a; --radius: 14px; --shadow: 0 12px 30px rgba(0,0,0,.08); --max: 1200px; /* šířka celé tabulky */ --inner: 955px; /* “vnitřek” pod hero obrázkem */ --reading: 62ch; /* maximální čtecí šířka textu */ /* kompatibilita se starším style.css (kdyby někde používal staré proměnné) */ --pozadi: var(--bg); --povrch: var(--surface); --okraj: var(--border); --hlavni-barva: var(--text); --sekundarni-barva: var(--muted); --akcent: var(--brand); --akcent-hover: var(--brand2); } *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ margin:0; background: var(--bg); color: var(--text); font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (max-width: 640px){ body{ font-size: 17px; } } /* u tebe blockquote často slouží jako wrapper */ blockquote{ margin:0; padding:0; } /* odkazy */ a{ color: var(--brand); text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .18em; } a:hover{ color: var(--brand2); } a:focus-visible{ outline: 3px solid rgba(11,93,71,.35); outline-offset: 3px; border-radius: 10px; } /* obrázky – bez globálního zaoblování (kvůli sliced hlavičce) */ img{ max-width: 100%; height: auto; border-radius: 0; } /* typografie */ h1,h2{ font-family: "Merriweather", Georgia, "Times New Roman", serif; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); margin: .35em 0 .65em; text-align: center; } h1{ font-size: clamp(24px, 3.0vw, 36px); } h2{ font-size: clamp(20px, 2.2vw, 28px); } h3{ font-weight: 700; margin: 1.1em 0 .4em; color: var(--text); font-size: 1.15rem; } p{ margin: .85em 0; color: var(--muted); } strong{ color: var(--text); } ul{ padding-left: 1.25rem; } li{ margin: .35em 0; } /* utility */ .center{ text-align: center !important; } .small{ font-size: .95rem; } .muted{ color: var(--muted) !important; } .lead{ font-size: 1.05rem; } /* ========================================================= Tlačítka ========================================================= */ .cta, .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 14px 22px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .08s ease, background-color .2s ease, border-color .2s ease; box-shadow: 0 10px 18px rgba(0,0,0,.14); } .cta, .btn{ background: var(--brand); color: #fff !important; } .cta:hover, .btn:hover{ background: var(--brand2); } .cta:active, .btn:active{ transform: translateY(1px); } .btn--ghost{ background: #fff; color: var(--brand) !important; border-color: var(--border); box-shadow: none; } .btn--ghost:hover{ background: rgba(11,93,71,.06); border-color: rgba(11,93,71,.25); } /* CTA nahoře */ .top-call{ text-align: center; margin: 18px 0; padding: 0 12px; } .top-call .cta{ font-size: clamp(18px, 2.2vw, 22px); } /* ========================================================= Tabulková (sliced) hlavička — stabilizace ========================================================= */ #Table_01, #Obsah{ width: 100%; max-width: var(--max); margin: 0 auto; border-collapse: collapse; border-spacing: 0; background: #fff; } /* odstranění "puzzle mezer" v prvních 3 řádcích */ #Table_01 > tbody > tr:nth-child(-n+3) td, #Obsah > tbody > tr:nth-child(-n+3) td{ padding: 0 !important; line-height: 0; font-size: 0; } #Table_01 > tbody > tr:nth-child(-n+3) img, #Obsah > tbody > tr:nth-child(-n+3) img{ display:block; } /* krajní buňky s   (rowspan) */ #Table_01 > tbody > tr:first-child > td[rowspan], #Obsah > tbody > tr:first-child > td[rowspan]{ padding: 0 !important; line-height: 0; font-size: 0; } /* ========================================================= Karty / obsah ========================================================= */ .page-card{ width: min(92%, 920px); margin: 18px auto 28px; padding: clamp(18px, 2.8vw, 34px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } /* v kartách chceme nadpisy spíš vlevo */ .page-card h2{ text-align: left; } /* čtecí šířka */ .page-card p, .page-card ul{ max-width: var(--reading); margin-left: auto; margin-right: auto; } .page-card p{ text-align: left; } /* jemný oddělovač */ .divider{ border: 0; border-top: 1px solid var(--border); margin: 26px auto; max-width: var(--reading); } /* ========================================================= INDEX (row-home) — 1 sloupec, kratší řádky, lepší rozložení ========================================================= */ .row-home > td{ padding: 0; } .home-hero{ text-align: center; } .home-hero h1{ font-size: clamp(22px, 2.25vw, 32px); line-height: 1.16; margin-top: 0; text-wrap: balance; } .home-subtitle{ font-size: 1.05rem; margin-top: .25em; } .home-tagline{ margin-top: .75em; color: var(--text); } /* tlačítka v úvodu */ .home-actions{ margin-top: 18px; display: grid; gap: 12px; grid-template-columns: 1fr; justify-items: center; } @media (min-width: 720px){ .home-actions{ grid-template-columns: repeat(3, auto); } } /* zvýrazněný “rychlý box” */ .home-kicker{ background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; max-width: var(--reading); margin: 16px auto 0; text-align: left; } /* Akordeon pro dlouhé texty */ details.accordion{ max-width: var(--reading); margin: 16px auto; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 0; overflow: hidden; } details.accordion > summary{ cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 800; color: var(--text); background: rgba(11,93,71,.05); } details.accordion[open] > summary{ border-bottom: 1px solid var(--border); } details.accordion > summary::-webkit-details-marker{ display:none; } details.accordion .accordion__body{ padding: 14px 16px 18px; } /* dvousloupcový text (jen na širokých displejích) */ @media (min-width: 1000px){ .two-columns{ column-count: 2; column-gap: 28px; } .two-columns p{ break-inside: avoid; } } /* Kanceláře — karty */ .office-grid{ display: grid; gap: 14px; grid-template-columns: 1fr; max-width: var(--reading); margin: 0 auto; } @media (min-width: 820px){ .office-grid{ grid-template-columns: repeat(3, 1fr); } } .office-card{ border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 16px; background: #fff; } .office-card h3{ margin-top: 0; text-align: left; } .office-card p{ margin: .4em 0; text-align: left; } .office-card .btn{ width: 100%; margin-top: 10px; box-shadow: none; } /* ikonky/loga v řadě */ .inline-icons{ display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 12px 0 0; } .inline-icons a, .inline-icons img{ display: inline-block; } /* footer (kdyby byl použit) */ footer{ background: #111; color: #fff; text-align: center; padding: 2rem 1rem; font-size: 0.95rem; } footer a{ color: #fff; } /* galerie */ .gallery{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; padding: 1rem 0; } /* ========= Kontakt – moderní karta ========= */ .page-card--contact{ max-width: 980px; margin: 0 auto; padding: 26px 22px; } .contact-hero{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; } .contact-hero__title h1{ margin:0 0 6px; letter-spacing:.2px; } .contact-hero__title .lead{ margin:0; max-width: 56ch; } .contact-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; justify-content:flex-end; } .btn__sub{ display:block; font-size:.9em; opacity:.85; margin-top:2px; } /* „Proužek“ s rychlými čísly */ .contact-strip{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin: 16px 0 6px; } .strip-item{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px 14px; background: rgba(255,255,255,.75); } .strip-item__k{ font-size:.85em; color: rgba(0,0,0,.65); margin-bottom:4px; } .strip-item__v{ font-size:1.06em; font-weight:700; } .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .section-head p{ margin:0; } .office-grid--v2{ margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } .office-card{ border: 1px solid rgba(0,0,0,.09); border-radius: 18px; padding: 14px 14px 12px; background: rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.05); } .office-card--main{ grid-column: span 3; padding: 16px 16px 14px; } .office-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom: 10px; } .office-card__head h3{ margin:0; } .badge{ display:inline-block; font-size:.78em; padding: 3px 8px; border-radius: 999px; background: rgba(57,193,155,.16); border: 1px solid rgba(57,193,155,.35); margin-left: 8px; vertical-align: middle; } .office-card__actions{ display:flex; gap:8px; flex-wrap:wrap; } .chip{ display:inline-flex; align-items:center; gap:6px; padding: 7px 10px; border-radius: 999px; text-decoration:none; border: 1px solid rgba(57,193,155,.45); background: rgba(57,193,155,.12); font-weight:700; font-size:.92em; } .chip--ghost{ background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.12); font-weight:600; } .office-meta{ display:grid; gap: 10px; font-size: .98em; } .meta-row{ display:grid; grid-template-columns: 24px 1fr; gap:10px; align-items:start; } .meta-ico{ line-height:1.3; opacity:.9; } .sep{ margin: 0 6px; opacity:.55; } .office-card__foot{ margin-top: 12px; } /* Dokumenty */ .doc-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 10px; } .doc-card{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius: 16px; border: 1px solid rgba(0,0,0,.09); background: rgba(255,255,255,.85); text-decoration:none; } .doc-ico{ font-size: 1.4em; } .doc-title{ font-weight: 800; } .doc-sub{ margin-left:auto; font-size:.9em; opacity:.7; } /* Dva sloupce v detailu */ .two-col{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; } /* Responsivita */ @media (max-width: 980px){ .page-card--contact{ padding: 20px 14px; } .office-card--main{ grid-column: span 1; } .office-grid--v2{ grid-template-columns: 1fr; } .doc-grid{ grid-template-columns: 1fr; } .contact-strip{ grid-template-columns: 1fr; } .two-col{ grid-template-columns: 1fr; } .contact-hero__actions{ justify-content:flex-start; } } /* ========================================================= Fotografie v kartách kanceláří (vložit na konec theme.css) ========================================================= */ .office-photo{ display:block; margin: -14px -14px 12px; /* “přetáhne” fotku až do okrajů karty */ border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: #fff; position: relative; text-decoration: none; } /* větší fotka pro hlavní (širokou) kartu */ .office-card--wide .office-photo, .office-card--main .office-photo{ margin: -16px -16px 12px; border-radius: 18px; } .office-photo img{ width: 100%; height: 170px; /* výška fotky u běžných karet */ object-fit: cover; display: block; transform: scale(1); transition: transform .35s ease; } /* větší fotka u široké / hlavní karty */ .office-card--wide .office-photo img, .office-card--main .office-photo img{ height: 240px; } /* jemné ztmavení spodku (lepší čitelnost, modernější vzhled) */ .office-photo::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%); pointer-events:none; } .office-card:hover .office-photo img{ transform: scale(1.03); } /* na mobilu trochu vyšší fotka */ @media (max-width: 980px){ .office-photo img{ height: 190px; } .office-card--wide .office-photo img, .office-card--main .office-photo img{ height: 210px; } } /* Sliced hlavička: nesmí se responsivně škálovat po jednotlivých slicích */ #Table_01 > tbody > tr:nth-child(-n+3) img{ max-width: none !important; }