@import url("fonts.css"); :root { --fs-h1: clamp(1.25rem, 2.2vw, 1.75rem); --fs-h2: clamp(1rem, 1.6vw, 1.25rem); --fs-h3: clamp(1rem, 1.4vw, 1.125rem); --fs-h4: 1.0625rem; --fs-h5: 1rem; --fs-h6: 0.9375rem; --fs-body: clamp(1rem, 1.05vw, 1.0625rem); --fs-small: 0.875rem; --lh-heading: 1.25; --lh-body: 1.6; --ff-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --c-brand: #860E0E; --c-brand-dark: #600900; --c-cta: #53B900; --c-cta-hover: #46A100; --c-cta-shadow: #3D8A00; --c-text: #2B2B2B; --c-text-muted: #5C5C5C; --c-bg: #F3F3F3; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; } /* Themeco fixuje 14px na — reset na 16px, aby rem počítaly normálně */ html { font-size: 100% !important; } body, input, button, select, textarea { font-family: var(--ff-body) !important; color: var(--c-text); } body { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; } p { line-height: var(--lh-body); margin: 0 0 1rem; } h1, .h1 { font-size: var(--fs-h1) !important; line-height: var(--lh-heading); margin: 0 0 0.75em; } h2, .h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-heading); margin: 1.25em 0 0.6em; } h3, .h3 { font-size: var(--fs-h3) !important; line-height: var(--lh-heading); margin: 1em 0 0.5em; } h4, .h4 { font-size: var(--fs-h4) !important; line-height: var(--lh-heading); margin: 1em 0 0.5em; } h5, .h5 { font-size: var(--fs-h5) !important; line-height: var(--lh-heading); margin: 1em 0 0.5em; } h6, .h6 { font-size: var(--fs-h6) !important; line-height: var(--lh-heading); margin: 1em 0 0.5em; } h1 { font-weight: 700; } h2, h3 { font-weight: 600; } .x-text-content-text-primary { font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; } .e129-9.x-menu > li > .x-anchor .x-anchor-text-primary { font-size: 1.25rem !important; } /* Section headlines (homepage H2/H3, subpage H1) — menší než hero, výraznější */ .x-text-headline .x-text-content-text-primary { font-size: clamp(1.25rem, 2.6vw, 2.375rem) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0.01em; } /* Hero slogan jen na homepage (e12-5) — velikost shodná s originálním gunther.cz */ .e12-5.x-text .x-text-content-text-primary { font-size: clamp(2rem, 5.48vw, 5.5rem) !important; font-weight: 800 !important; line-height: 1.0 !important; letter-spacing: 0.03em; } .x-text-content-text-subheadline { font-size: clamp(2rem, 3.2vw, 2.75rem) !important; font-weight: 400 !important; font-style: italic; margin-top: 0.4rem !important; line-height: 1.2 !important; display: block; } /* Ceník — "Kč/km" popisky cen 3× menší než hero subheadline */ .page-id-50 .x-text-content-text-subheadline { font-size: clamp(0.7rem, 1.05vw, 0.9rem) !important; font-style: normal !important; font-weight: 600 !important; margin-top: 0 !important; } /* Kontakt — podnadpisy "Günther Spedition cz, s.r.o." a "Kontaktujte nás kdykoliv!" */ .e77-7 .x-text-content-text-primary, .e77-13 .x-text-content-text-primary { font-size: clamp(1rem, 1.8vw, 1.5rem) !important; font-weight: 600 !important; } /* Sjednocená šířka číslovaných bloků: "Firma zajišťuje" + FAQ + Praktické info. ID selektor #cs-content kvůli specificity vs Themeco. */ #cs-content .e12-47.x-row, #cs-content .e12-57.x-row, #cs-content .e45-2.x-row, #cs-content .e45-7.x-row { max-width: 900px !important; width: 90% !important; } /* FAQ — kruhové číslování, separace mezi otázkami */ .e12-60.x-text h5 { display: flex; align-items: center; gap: 0.9rem; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 2rem 0 0.6rem !important; padding: 0 0 0.6rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); color: #2B2B2B; } .e12-60.x-text h5 .count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--c-brand); color: #FFF !important; border-radius: 50%; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.1em; text-indent: -0.05em; } .e12-60.x-text h5 + p { margin: 0 0 0 3.4rem; padding: 0 0 0.5rem; line-height: 1.55; } .e12-60.x-text .strong_red { color: var(--c-brand); font-weight: 700; } /* Sekce "Na co se nás" — text i button vystředěné */ .e12-22 .e12-24.x-col { flex: 1 1 100% !important; max-width: 100% !important; padding: 1rem 1.5rem 2rem !important; text-align: center !important; } .e12-22 .e12-25 p { text-align: center; max-width: 760px; margin: 0 auto 1rem; } .e12-22 .e12-26 .x-text-content-text-primary { text-align: center !important; } .e12-22 a.e12-27.x-anchor { margin-left: auto !important; margin-right: auto !important; } /* Formulářové stránky — společná body class umožňuje plošný target */ .page-template-template-blank-4 .x-row.x-container.max.width { max-width: 1280px !important; } .page-template-template-blank-4 .x-container.width { width: 96% !important; } .page-template-template-blank-4 .cf7sg-container { width: 100%; max-width: 100%; } /* CF7 form-control-wrap je ; bez block-display se width:100% počítá ze šířky inline textu */ .wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea { font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.4; padding: 0.6rem 0.75rem; border: 1px solid #C8C8C8; border-radius: 4px; background: #FFF; color: var(--c-text); width: 100% !important; max-width: 100%; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; } .wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--c-cta); box-shadow: 0 0 0 3px rgba(83, 185, 0, 0.18); } /* :user-invalid se rozsvítí teprve PO uživatelově interakci nebo submit pokusu; čistá pole se necervení hned po načtení stránky. */ .wpcf7-form input:user-invalid, .wpcf7-form select:user-invalid, .wpcf7-form textarea:user-invalid { border-color: #c00; box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15); } .wpcf7-form input:user-invalid + .info-tip, .wpcf7-form input:user-invalid ~ .info-tip, .field:has(input:user-invalid) .info-tip { color: #c00; } .wpcf7-form label, .field > label, .cf7sg-container label { display: block !important; white-space: nowrap !important; overflow: visible !important; font-weight: 600 !important; margin: 0 0 0.35rem 0 !important; line-height: 1.3 !important; font-size: var(--fs-body) !important; } .cf7sg-container .field { margin-bottom: 1.1rem; } .cf7sg-container .info-tip { font-size: var(--fs-small); color: var(--c-text-muted); margin: 0.25rem 0 0; } textarea[name="_wpcf7_ak_hp_textarea"] { display: none !important; } /* CTA tlačítka — sjednocený solid + Themeco shadow */ .x-btn, .x-btn:link, .x-btn:visited, .button, [type="submit"], .wpcf7-submit, input.wpcf7-submit, .cf7-smart-grid.has-grid .wpcf7-submit { display: inline-block; background: var(--c-cta) !important; color: #FFFFFF !important; border: 1px solid var(--c-cta) !important; padding: 14px 28px !important; border-radius: 5px !important; box-shadow: 0 4px 0 var(--c-cta-shadow) !important; font-family: var(--ff-body) !important; font-size: var(--fs-body) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.02em; text-shadow: none !important; text-decoration: none !important; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; margin-bottom: 0.25rem; } .wpcf7-submit, input.wpcf7-submit, input[type="submit"], .cf7-smart-grid.has-grid .wpcf7-submit { width: auto !important; min-width: 280px; text-align: center !important; } .x-btn:hover, .button:hover, [type="submit"]:hover, .wpcf7-submit:hover, .cf7-smart-grid.has-grid .wpcf7-submit:hover { background: var(--c-cta-hover) !important; border-color: var(--c-cta-hover) !important; color: #FFFFFF !important; } .x-btn:active, .button:active, [type="submit"]:active, .wpcf7-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-cta-shadow) !important; } .x-btn:focus-visible, .button:focus-visible, [type="submit"]:focus-visible, .wpcf7-submit:focus-visible { outline: 3px solid rgba(83, 185, 0, 0.35); outline-offset: 2px; } a { color: var(--c-brand); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--c-brand-dark); } a:focus-visible { outline: 2px solid var(--c-cta); outline-offset: 2px; } @media (max-width: 767px) { .x-section { padding-left: 1rem !important; padding-right: 1rem !important; } .x-container.width { width: 100% !important; } .x-text-headline .x-text-content-text-primary { font-size: clamp(1.625rem, 6.5vw, 2.25rem) !important; } .e12-5.x-text .x-text-content-text-primary { font-size: clamp(2.25rem, 10vw, 3.25rem) !important; } h1, .h1 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; } h2, .h2 { font-size: clamp(1.25rem, 4.5vw, 1.625rem) !important; } } @media (max-width: 479px) { .x-bar-content { flex-wrap: wrap !important; } .header-contact { font-size: 0.875rem !important; } } img { max-width: 100%; height: auto; } ::selection { background: var(--c-cta); color: #FFF; } .entry-content { word-wrap: break-word; } p.netlify-hidden { display: none !important; }