/* * Hlavní styly. * Kritické CSS (proměnné, reset, hlavička, hero) je vložené přímo v . */ @layer hero-anim, sekce, komponenty, formular, obsah, paticka, utility; /* ================================================================ */ @layer hero-anim { /* ================================================================ */ /* * Animace měřické grafiky v hero bloku. * * Výchozí stav = hotová kompozice. Animace se přidává až třídou * .is-animating, kterou nasadí app.js, jakmile je blok ve výřezu. * Kdyby JavaScript selhal, uživatel prostě uvidí statickou grafiku — * nikdy ne prázdné místo. */ /* Vrstevnice se „vykreslí“ technikou posunu čárkovaného tahu. */ #gp-hero-svg #gp-contours path { stroke-dasharray: 2400; stroke-dashoffset: 0; } .is-animating #gp-contours path { animation: gp-draw 2.4s cubic-bezier(0.33, 1, 0.68, 1) backwards; } .is-animating #gp-contours path:nth-child(1) { animation-delay: 0s; } .is-animating #gp-contours path:nth-child(2) { animation-delay: 0.18s; } .is-animating #gp-contours path:nth-child(3) { animation-delay: 0.36s; } .is-animating #gp-contours path:nth-child(4) { animation-delay: 0.54s; } .is-animating #gp-contours path:nth-child(5) { animation-delay: 0.72s; } .is-animating #gp-contours path:nth-child(6) { animation-delay: 0.9s; } .is-animating #gp-contours path:nth-child(7) { animation-delay: 1.08s; } .is-animating #gp-contours path:nth-child(8) { animation-delay: 1.26s; } .is-animating #gp-contours path:nth-child(9) { animation-delay: 1.44s; } @keyframes gp-draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } } /* Parcely se objeví až po vrstevnicích. */ .is-animating #gp-parcels polygon { animation: gp-fade-in 1.2s ease-out backwards; } .is-animating #gp-parcels polygon:nth-child(1) { animation-delay: 1.5s; } .is-animating #gp-parcels polygon:nth-child(2) { animation-delay: 1.7s; } .is-animating #gp-parcels polygon:nth-child(3) { animation-delay: 1.9s; } @keyframes gp-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Spojnice měřické sítě. */ .is-animating #gp-triangulation line { animation: gp-fade-in 0.9s ease-out backwards; animation-delay: 1.6s; } /* Body sítě pomalu „dýchají“ — síť tím působí živě, ne blikavě. */ .is-animating #gp-triangulation circle { animation: gp-fade-in 0.6s ease-out backwards, gp-pulse 3.2s ease-in-out infinite; animation-delay: 1.8s, 2.4s; transform-box: fill-box; transform-origin: center; } .is-animating #gp-triangulation circle:nth-child(2n) { animation-delay: 1.9s, 2.8s; } .is-animating #gp-triangulation circle:nth-child(3n) { animation-delay: 2s, 3.2s; } @keyframes gp-pulse { 0%, 100% { opacity: 0.95; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.45); } } /* Terč putuje mezi třemi body sítě. */ #gp-crosshair { opacity: 0; transform: translate(812px, 214px); } .is-animating #gp-crosshair { animation: gp-target 12s ease-in-out infinite; animation-delay: 2.2s; } @keyframes gp-target { 0% { opacity: 0; transform: translate(812px, 214px); } 8% { opacity: 0.85; transform: translate(812px, 214px); } 28% { opacity: 0.85; transform: translate(812px, 214px); } 38% { opacity: 0.85; transform: translate(1396px, 438px); } 60% { opacity: 0.85; transform: translate(1396px, 438px); } 70% { opacity: 0.85; transform: translate(902px, 672px); } 92% { opacity: 0.85; transform: translate(902px, 672px); } 100% { opacity: 0; transform: translate(812px, 214px); } } /* * Tvrdá závora pro uživatele s omezenými animacemi. * Dostanou hotovou kompozici, nikoli prázdné plátno. */ @media (prefers-reduced-motion: reduce) { #gp-hero-svg *, .is-animating #gp-hero-svg * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } #gp-crosshair { opacity: 0.85 !important; } } /* Na malých displejích grafiku zjednodušíme — šetří výkon i baterii. */ @media (max-width: 48rem) { #gp-hero-svg #gp-triangulation circle { animation: none !important; } #gp-hero-svg #gp-crosshair { display: none; } } } /* ================================================================ */ @layer sekce { /* ================================================================ */ .gp-section { padding-block: var(--gp-space-8); } @media (min-width: 64rem) { .gp-section { padding-block: var(--gp-space-9); } } .gp-section--dark { position: relative; background: var(--gp-dark); color: var(--gp-text-on-dark); } .gp-section--darker { position: relative; background: var(--gp-darker); color: var(--gp-text-on-dark); } .gp-section--light { background: var(--gp-light); } /* * Jemná měřická mřížka na tmavých plochách. Připomíná milimetrový papír * a dává jinak ploché tmavé sekci texturu, aniž by rušila text. */ .gp-section--dark::before, .gp-section--darker::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(170, 207, 92, 0.055) 0 1px, transparent 1px 64px), repeating-linear-gradient(to bottom, rgba(170, 207, 92, 0.055) 0 1px, transparent 1px 64px); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 100%); } .gp-section > .gp-container { position: relative; } .gp-section--dark h2, .gp-section--dark h3, .gp-section--darker h2, .gp-section--darker h3 { color: var(--gp-white); } /* Hlavička sekce */ .gp-section__head { max-width: 46rem; margin-bottom: var(--gp-space-6); } .gp-section__number { display: block; margin-bottom: var(--gp-space-3); font-family: var(--gp-font-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.18em; color: var(--gp-primary); } .gp-section--dark .gp-section__number, .gp-section--darker .gp-section__number { color: var(--gp-primary-300); } .gp-section__dash { opacity: 0.5; } .gp-section__lead { max-width: 44ch; font-size: var(--gp-step-1); color: var(--gp-text-muted); } .gp-section--dark .gp-section__lead, .gp-section--darker .gp-section__lead { color: var(--gp-text-on-dark-muted); } /* Vrstevnicový předěl mezi sekcemi */ .gp-divider { display: block; width: 100%; height: 3rem; color: var(--gp-primary); opacity: 0.25; } } /* ================================================================ */ @layer komponenty { /* ================================================================ */ /* --- Ikony -------------------------------------------------------- */ /* * Základní definice musí stát PŘED variantami (.gp-card__icon apod.). * Mají stejnou specificitu, takže o vítězi rozhoduje pořadí v souboru — * kdyby byla základní definice až dole, přebila by všechny varianty. */ .gp-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* --- Karta služby ------------------------------------------------ */ .gp-grid { display: grid; gap: var(--gp-space-5); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); } .gp-card { position: relative; display: flex; flex-direction: column; background: var(--gp-white); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); overflow: hidden; transition: border-color var(--gp-transition), transform var(--gp-transition), box-shadow var(--gp-transition), background var(--gp-transition); } /* * Karty služeb (element
) mají jemně zelené pozadí, aby na bílých * sekcích víc vystoupily. Procesní kroky (
  • ) zůstávají bílé. */ article.gp-card { background: rgba(124, 162, 48, 0.07); border-color: rgba(124, 162, 48, 0.22); } article.gp-card:hover { background: rgba(124, 162, 48, 0.12); } .gp-section--dark .gp-card, .gp-section--darker .gp-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } .gp-card:hover { border-color: var(--gp-primary); transform: translateY(-3px); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35); } /* * Rohová značka připomínající geodetický kříž — drobný detail, * který kartu odliší od standardní zaoblené dlaždice. */ .gp-card::before, .gp-card::after { content: ''; position: absolute; top: var(--gp-space-4); left: var(--gp-space-4); background: var(--gp-primary); opacity: 0; transition: opacity var(--gp-transition); z-index: 2; } .gp-card::before { width: 14px; height: 1.5px; margin-top: 6px; } .gp-card::after { width: 1.5px; height: 14px; margin-left: 6px; } .gp-card:hover::before, .gp-card:hover::after { opacity: 1; } .gp-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gp-dark); } .gp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .gp-card:hover .gp-card__media img { transform: scale(1.04); } .gp-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--gp-space-5); } /* * Ikona sedí v zeleném čtverci — dává kartě pevný vizuální kotevní bod * a zabraňuje tomu, aby karty bez fotky působily prázdně. */ .gp-card__icon { width: 3rem; height: 3rem; padding: 0.7rem; margin-bottom: var(--gp-space-5); color: var(--gp-primary-800); background: rgba(124, 162, 48, 0.12); border-left: 2px solid var(--gp-primary); stroke-width: 1.6; transition: background var(--gp-transition), color var(--gp-transition); } .gp-card:hover .gp-card__icon { background: var(--gp-primary); color: var(--gp-white); } .gp-section--dark .gp-card__icon, .gp-section--darker .gp-card__icon { color: var(--gp-primary-300); background: rgba(170, 207, 92, 0.12); } .gp-card__title { margin-bottom: var(--gp-space-3); font-size: var(--gp-step-1); } .gp-card__title a { color: inherit; text-decoration: none; } /* Odkaz přes celou kartu — klikatelná je celá plocha, ale fokus zůstává na odkazu. */ .gp-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .gp-card__text { flex: 1; margin-bottom: var(--gp-space-4); font-size: 0.95rem; color: var(--gp-text-muted); } .gp-section--dark .gp-card__text, .gp-section--darker .gp-card__text { color: var(--gp-text-on-dark-muted); } .gp-card__more { display: inline-flex; align-items: center; gap: var(--gp-space-2); font-size: 0.9rem; font-weight: 600; color: var(--gp-link); text-decoration: none; } .gp-section--dark .gp-card__more, .gp-section--darker .gp-card__more { color: var(--gp-link-on-dark); } .gp-card__more svg { width: 1em; height: 1em; transition: transform var(--gp-transition); } .gp-card:hover .gp-card__more svg { transform: translateX(3px); } /* --- Seznam s odškrtnutím ---------------------------------------- */ .gp-checklist { display: grid; gap: var(--gp-space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } .gp-checklist li { display: flex; align-items: flex-start; gap: var(--gp-space-3); padding: var(--gp-space-4); border-left: 2px solid var(--gp-primary); background: rgba(124, 162, 48, 0.05); } .gp-section--dark .gp-checklist li, .gp-section--darker .gp-checklist li { background: rgba(255, 255, 255, 0.03); } .gp-checklist__icon { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.15em; color: var(--gp-primary); } .gp-section--dark .gp-checklist__icon, .gp-section--darker .gp-checklist__icon { color: var(--gp-primary-300); } /* --- Statistiky / důvody ----------------------------------------- */ .gp-stats { display: grid; gap: var(--gp-space-6); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); margin: 0; padding: 0; } .gp-stat { padding-left: var(--gp-space-5); border-left: 1px solid rgba(255, 255, 255, 0.15); } .gp-stat__value { display: block; font-family: var(--gp-font-display); font-size: var(--gp-step-4); font-weight: 800; line-height: 1; color: var(--gp-primary-300); letter-spacing: -0.03em; } .gp-stat__label { display: block; margin-top: var(--gp-space-2); font-size: 0.92rem; color: var(--gp-text-on-dark-muted); } /* --- Kontaktní osoby --------------------------------------------- */ .gp-person { padding: var(--gp-space-5); background: var(--gp-white); border: 1px solid var(--gp-border); border-top: 3px solid var(--gp-primary); } .gp-person__name { margin-bottom: var(--gp-space-1); font-size: var(--gp-step-1); } .gp-person__role { display: block; margin-bottom: var(--gp-space-4); font-family: var(--gp-font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gp-primary-800); } .gp-person__contact { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; } .gp-person__contact li { display: flex; align-items: center; gap: var(--gp-space-3); padding-block: var(--gp-space-2); } .gp-person__contact svg { flex-shrink: 0; width: 1.1rem; height: 1.1rem; color: var(--gp-primary); } /* --- Drobečky ---------------------------------------------------- */ .gp-breadcrumbs { padding-block: var(--gp-space-4); border-bottom: 1px solid var(--gp-border); background: var(--gp-light); font-size: 0.88rem; } .gp-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gp-space-2); margin: 0; padding: 0; list-style: none; } .gp-breadcrumbs__item + .gp-breadcrumbs__item::before { content: '/'; margin-right: var(--gp-space-2); color: var(--gp-primary); opacity: 0.6; } .gp-breadcrumbs__item [aria-current] { color: var(--gp-text-muted); } /* --- Časté dotazy ------------------------------------------------ */ .gp-faq { max-width: var(--gp-container-narrow); } .gp-faq__item { border-bottom: 1px solid var(--gp-border); } .gp-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gp-space-4); padding: var(--gp-space-5) 0; font-family: var(--gp-font-display); font-size: var(--gp-step-1); font-weight: 600; cursor: pointer; list-style: none; } .gp-faq__item summary::-webkit-details-marker { display: none; } .gp-faq__item summary::after { content: ''; flex-shrink: 0; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--gp-primary); border-bottom: 2px solid var(--gp-primary); transform: rotate(45deg); transition: transform var(--gp-transition); } .gp-faq__item[open] summary::after { transform: rotate(-135deg); } .gp-faq__answer { padding-bottom: var(--gp-space-5); color: var(--gp-text-muted); } /* --- Vzorové dokumenty ------------------------------------------- */ .gp-docs { display: grid; gap: var(--gp-space-3); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); margin: 0; padding: 0; list-style: none; } .gp-doc { display: flex; align-items: center; gap: var(--gp-space-4); padding: var(--gp-space-4); background: var(--gp-white); border: 1px solid var(--gp-border); color: inherit; text-decoration: none; transition: border-color var(--gp-transition), background var(--gp-transition); } .gp-doc:hover { border-color: var(--gp-primary); background: rgba(124, 162, 48, 0.04); } .gp-doc svg { flex-shrink: 0; width: 1.6rem; height: 1.6rem; color: var(--gp-primary-700); } .gp-doc__meta { display: block; font-size: 0.8rem; color: var(--gp-text-muted); } /* --- Technika ----------------------------------------------------- */ .gp-tech { display: grid; gap: var(--gp-space-5); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } .gp-tech__item { text-align: center; } .gp-tech__img { aspect-ratio: 3 / 4; margin-bottom: var(--gp-space-4); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } .gp-tech__img img { width: 100%; height: 100%; object-fit: contain; } .gp-tech__name { font-family: var(--gp-font-display); font-size: 1rem; font-weight: 700; color: var(--gp-white); } /* --- CTA pruh ----------------------------------------------------- */ .gp-cta { position: relative; padding-block: var(--gp-space-9); background: var(--gp-primary-800); color: var(--gp-white); overflow: hidden; } .gp-cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gp-space-6); } .gp-cta h2 { max-width: 24ch; margin: 0; color: var(--gp-white); font-size: var(--gp-step-3); } .gp-cta p { max-width: 40ch; margin: var(--gp-space-3) 0 0; color: rgba(255, 255, 255, 0.85); } .gp-cta .gp-btn--primary { background: var(--gp-white); border-color: var(--gp-white); color: var(--gp-primary-800); } .gp-cta .gp-btn--primary:hover { background: var(--gp-primary-300); border-color: var(--gp-primary-300); color: var(--gp-primary-800); } /* --- Mobilní menu -------------------------------------------------- */ .gp-drawer { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: var(--gp-space-6) var(--gp-space-5); /* Vodorovné odsazení bereme dovnitř šířky, ať panel nikdy nepřeteče. */ box-sizing: border-box; background: var(--gp-darker); /* * Zavřený panel se animuje POUZE svisle a průhledností. Dřívější * translateX(100%) posouval panel za pravý okraj obrazovky, a protože * jde o position:fixed prvek, vytvářel na každé stránce vodorovné * posouvání. Svislý posun žádný přetok nezpůsobí. */ opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 240ms ease, transform 240ms ease, visibility 240ms; overflow-y: auto; overscroll-behavior: contain; } /* Zavřený panel je zcela mimo rozvržení — nemůže tedy nic roztáhnout. */ .gp-drawer[hidden] { display: none; } .gp-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .gp-drawer { transition: opacity 120ms ease; transform: none; } } .gp-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gp-space-7); } .gp-drawer__list { margin: 0 0 var(--gp-space-7); padding: 0; list-style: none; } .gp-drawer__list a { display: block; padding: var(--gp-space-4) 0; font-family: var(--gp-font-display); font-size: var(--gp-step-2); font-weight: 700; color: var(--gp-white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .gp-drawer__list a:hover { color: var(--gp-primary-300); } .gp-drawer__contact { margin-top: auto; padding-top: var(--gp-space-6); font-size: 0.95rem; color: var(--gp-text-on-dark-muted); } .gp-drawer__contact a { display: block; padding-block: var(--gp-space-2); color: var(--gp-primary-300); text-decoration: none; } body.gp-drawer-open { overflow: hidden; } @media (min-width: 64rem) { .gp-drawer { display: none; } } } /* ================================================================ */ @layer formular { /* ================================================================ */ .gp-form { max-width: var(--gp-container-narrow); } .gp-form__grid { display: grid; gap: var(--gp-space-5); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); } .gp-field { display: flex; flex-direction: column; gap: var(--gp-space-2); } .gp-field--full { grid-column: 1 / -1; } .gp-field label { font-size: 0.92rem; font-weight: 600; } .gp-field__req { color: var(--gp-primary-800); } .gp-field__hint { font-size: 0.84rem; color: var(--gp-text-muted); } .gp-field input[type='text'], .gp-field input[type='email'], .gp-field input[type='tel'], .gp-field select, .gp-field textarea { width: 100%; min-height: 44px; padding: var(--gp-space-3) var(--gp-space-4); font-family: inherit; font-size: 1rem; color: var(--gp-text); background: var(--gp-white); border: 1px solid var(--gp-border); border-radius: var(--gp-radius); transition: border-color var(--gp-transition), box-shadow var(--gp-transition); } .gp-field textarea { min-height: 8rem; resize: vertical; } .gp-field input:focus, .gp-field select:focus, .gp-field textarea:focus { border-color: var(--gp-primary); box-shadow: 0 0 0 3px rgba(124, 162, 48, 0.18); outline: none; } .gp-field.has-error input, .gp-field.has-error select, .gp-field.has-error textarea { border-color: #b3261e; } .gp-field__error { font-size: 0.86rem; font-weight: 500; color: #b3261e; } /* Zaškrtávací pole souhlasu */ .gp-check { display: flex; align-items: flex-start; gap: var(--gp-space-3); font-size: 0.92rem; line-height: 1.5; } .gp-check input { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.2em; accent-color: var(--gp-primary-700); } /* Past na roboty — pro člověka neviditelná, pro čtečku skrytá. */ .gp-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Souborové pole */ .gp-files__list { margin: var(--gp-space-3) 0 0; padding: 0; list-style: none; font-size: 0.88rem; } .gp-files__list li { display: flex; align-items: center; gap: var(--gp-space-2); padding-block: var(--gp-space-1); color: var(--gp-text-muted); } /* Hlášky */ .gp-notice { padding: var(--gp-space-5); margin-bottom: var(--gp-space-6); border-left: 3px solid; border-radius: var(--gp-radius); font-size: 0.98rem; } .gp-notice--success { background: rgba(124, 162, 48, 0.1); border-color: var(--gp-primary); color: var(--gp-primary-800); } .gp-notice--error { background: rgba(179, 38, 30, 0.07); border-color: #b3261e; color: #8c1d18; } .gp-notice p:last-child { margin-bottom: 0; } } /* ================================================================ */ @layer obsah { /* ================================================================ */ .gp-page-head { padding-block: var(--gp-space-9) var(--gp-space-7); /* Tmavší než přilepená hlavička, aby se oba tmavé pruhy neslily v jeden. */ background: linear-gradient(165deg, color-mix(in srgb, var(--gp-darker) 72%, #000) 0%, var(--gp-darker) 100%); color: var(--gp-white); position: relative; overflow: hidden; border-bottom: 3px solid var(--gp-primary-800); } .gp-page-head::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, rgba(170, 207, 92, 0.05) 0 1px, transparent 1px 56px), repeating-linear-gradient(to bottom, rgba(170, 207, 92, 0.05) 0 1px, transparent 1px 56px); mask-image: linear-gradient(to bottom right, #000, transparent 70%); } .gp-page-head__inner { position: relative; } .gp-page-head h1 { max-width: 24ch; margin-bottom: 0; color: var(--gp-white); font-size: var(--gp-step-4); } .gp-page-head__lead { max-width: 48ch; margin-top: var(--gp-space-4); margin-bottom: 0; font-size: var(--gp-step-1); color: var(--gp-text-on-dark-muted); } /* Formátovaný text z editoru */ .gp-prose { max-width: 42rem; } .gp-prose > * + * { margin-top: var(--gp-space-4); } .gp-prose h2 { margin-top: var(--gp-space-8); font-size: var(--gp-step-2); } .gp-prose h3 { margin-top: var(--gp-space-6); font-size: var(--gp-step-1); } .gp-prose ul, .gp-prose ol { padding-left: var(--gp-space-5); } .gp-prose li + li { margin-top: var(--gp-space-2); } .gp-prose ul li::marker { color: var(--gp-primary); } .gp-prose strong { font-weight: 600; } .gp-prose blockquote { margin-inline: 0; padding-left: var(--gp-space-5); border-left: 3px solid var(--gp-primary); font-size: var(--gp-step-1); color: var(--gp-text-muted); } .gp-prose img { border-radius: var(--gp-radius); } /* Dvousloupcový layout detailu */ .gp-detail { display: grid; gap: var(--gp-space-8); align-items: start; } @media (min-width: 64rem) { .gp-detail { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--gp-space-9); } } .gp-aside { padding: var(--gp-space-5); background: var(--gp-light); border-top: 3px solid var(--gp-primary); } .gp-aside h2 { font-size: var(--gp-step-1); } .gp-aside dl { margin: 0; font-size: 0.94rem; } .gp-aside dt { font-weight: 600; color: var(--gp-text-muted); } .gp-aside dd { margin: 0 0 var(--gp-space-4); } /* Mapa */ .gp-map { display: block; border: 1px solid var(--gp-border); overflow: hidden; } .gp-map img { width: 100%; height: auto; } /* 404 */ .gp-404 { padding-block: var(--gp-space-12); text-align: center; } .gp-404__code { font-family: var(--gp-font-mono); font-size: var(--gp-step-5); font-weight: 500; color: var(--gp-primary); letter-spacing: 0.1em; } } /* ================================================================ */ @layer paticka { /* ================================================================ */ .gp-footer { padding-block: var(--gp-space-9) var(--gp-space-6); background: var(--gp-darker); color: var(--gp-text-on-dark-muted); font-size: 0.94rem; } .gp-footer a { color: var(--gp-text-on-dark); text-decoration: none; } .gp-footer a:hover { color: var(--gp-primary-300); text-decoration: underline; } .gp-footer__grid { display: grid; gap: var(--gp-space-7); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); padding-bottom: var(--gp-space-7); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .gp-footer h2 { margin-bottom: var(--gp-space-4); font-family: var(--gp-font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gp-primary-300); } .gp-footer ul { margin: 0; padding: 0; list-style: none; } .gp-footer li { padding-block: var(--gp-space-1); } .gp-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--gp-space-4); justify-content: space-between; padding-top: var(--gp-space-5); font-size: 0.85rem; } .gp-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gp-space-4); margin: 0; padding: 0; list-style: none; } } /* ================================================================ */ @layer utility { /* ================================================================ */ .gp-flow > * + * { margin-top: var(--gp-space-4); } .gp-mt-6 { margin-top: var(--gp-space-6); } .gp-mt-8 { margin-top: var(--gp-space-8); } .gp-mb-0 { margin-bottom: 0; } .gp-center { text-align: center; } /* Globální respekt k nastavení omezených animací. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Tisk */ @media print { .gp-header, .gp-drawer, .gp-cta, .gp-footer, .gp-hero__svg { display: none !important; } body { color: #000; background: #fff; } } }