:root{
--sp-green-900:#065f46;
--sp-green-800:#047857;
--sp-green-700:#059669;
--sp-green-600:#10b981;
--sp-green-500:#22c55e;
--sp-green-400:#34d399;
--sp-green-300:#6ee7b7;
--sp-green-200:#a7f3d0;
--sp-green-100:#d1fae5;
--sp-bg:#f5fbf8;
--sp-text:#0f2a22;
--sp-muted:#46665b;
--sp-radius:16px;
--sp-radius-lg:20px;
--sp-shadow:0 6px 18px rgba(6,95,70,.12);
--sp-shadow-lg:0 14px 32px rgba(6,95,70,.18);
}
html{box-sizing:border-box;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{
margin:0;
color:var(--sp-text);
background:var(--sp-bg);
font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sp-green-800);text-decoration:none}
a:hover{text-decoration:underline} h1,h2,h3{
margin:0 0 .6em 0;
font-weight:800;
letter-spacing:-.015em;
line-height:1.15;
}
h1{font-size:clamp(28px,4.8vw,44px)}
h2{font-size:clamp(22px,3.2vw,32px)}
h3{font-size:clamp(18px,2.6vw,24px)}
p{margin:0 0 1em 0} .btn{
--pad-y:.75rem; --pad-x:1rem;
display:inline-flex; align-items:center; justify-content:center;
gap:.5rem;
padding:var(--pad-y) var(--pad-x);
border-radius:999px;
border:0; cursor:pointer; text-decoration:none;
font-weight:700; white-space:nowrap;
box-shadow:var(--sp-shadow);
transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:focus-visible{outline:3px solid var(--sp-green-300); outline-offset:2px}
.btn:hover{transform:translateY(-1px); box-shadow:var(--sp-shadow-lg)}
.btn:active{transform:translateY(0)}
.btn--solid{
color:#fff; background:linear-gradient(180deg,var(--sp-green-600),var(--sp-green-700));
}
.btn--outline{
color:var(--sp-green-800); background:#fff; border:2px solid var(--sp-green-300);
}
.btn--sm{ --pad-y:.55rem; --pad-x:.9rem; font-size:.92rem } .container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:clamp(28px,5.5vw,68px) 0}
.text-center{text-align:center}
.mt-20{margin-top:20px}
.mt-32{margin-top:32px}
.mb-0{margin-bottom:0} :root{
--sp-page-bg: #f4fbf8; --sp-green-1: #22d9b7; --sp-green-2: #0ca785; --sp-ribbon-height: 88px; --sp-ribbon-radius: 18px; } body { background: var(--sp-page-bg); } .page-ribbon{
position: relative;
z-index: 0;
margin: 0; height: var(--sp-ribbon-height);
display: flex;
align-items: center; background: linear-gradient(180deg, var(--sp-green-1), var(--sp-green-2));
box-shadow: 0 8px 24px rgba(0,0,0,.12);
border-radius: 0 0 var(--sp-ribbon-radius) var(--sp-ribbon-radius);
overflow: visible;
} .page-ribbon__title{
margin: 0;
text-align: center;
font-weight: 800;
letter-spacing: -.015em;
font-size: clamp(28px, 5.2vw, 48px);
color: #0b3731; text-shadow: 0 1px 0 rgba(255,255,255,.25);
} .page-ribbon::after{
content: "";
position: absolute;
left: 0; right: 0;
bottom: -14px; height: 14px; background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'>\
<defs>\
<linearGradient id='g' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0' stop-color='%230ca785'/>\
<stop offset='1' stop-color='%230b8f73'/>\
</linearGradient>\
</defs>\
<!-- tmavší spodní linka pro plastický dojem -->\
<rect x='0' y='0' width='40' height='2' fill='url(%23g)' opacity='0.35'/>\
<!-- trojúhelníky směrem dolů vyplněné barvou pozadí stránky -->\
<polygon points='0,0 10,14 20,0 30,14 40,0 40,14 0,14' fill='%23f4fbf8'/>\
</svg>");
background-size: 40px 14px;
background-repeat: repeat-x;
pointer-events: none;
} @media (max-width: 480px){
:root{ --sp-ribbon-height: 72px; }
}  :root { --sp-header-height-m: 60px; } @media (max-width: 1024px){
.sp-header + .page-ribbon{
margin-top: var(--sp-header-height-m); }
} body.page:not(.home) main.section .container a:is( [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt/"]
),
body.page:not(.home) main.section .container a[href^="tel:+420606904177"] {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: 10px 14px;
border: 2px solid #14b8a6; border-radius: 12px;
background: rgba(20,184,166,.06); color: #0f766e; font-weight: 800;
text-decoration: none;
line-height: 1.1;
transition: transform .15s ease, box-shadow .15s ease,
background-color .15s ease, border-color .15s ease;
box-shadow: 0 3px 10px rgba(0,0,0,.05);
} body.page:not(.home) main.section .container a:is(
[href$="/kontakt/"], [href*="://stromypozemky.cz/kontakt/"]
):hover,
body.page:not(.home) main.section .container a[href^="tel:+420606904177"]:hover {
background: rgba(20,184,166,.12);
border-color: #10b981;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
} body.page:not(.home) main.section .container a:is(
[href$="/kontakt/"], [href*="://stromypozemky.cz/kontakt/"]
):focus-visible,
body.page:not(.home) main.section .container a[href^="tel:+420606904177"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(20,184,166,.28), 0 6px 16px rgba(0,0,0,.08);
} body.page:not(.home) main.section .container p a:is(
[href$="/kontakt/"], [href*="://stromypozemky.cz/kontakt/"]
),
body.page:not(.home) main.section .container p a[href^="tel:+420606904177"] {
margin-right: .6rem; } @media (max-width: 480px){
body.page:not(.home) main.section .container a:is(
[href$="/kontakt/"], [href*="://stromypozemky.cz/kontakt/"]
),
body.page:not(.home) main.section .container a[href^="tel:+420606904177"] {
padding: 10px 12px;
border-radius: 10px;
}
} body.page:not(.home) main.section .container a:is(
[href$="/kontakt"],
[href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"],
[href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
){
display: inline-flex;
align-items: center;
gap: .5rem;
padding: 10px 14px;
border: 2px solid #0f766e; border-radius: 12px;
background: transparent; color: #064e3b; font-weight: 800;
text-decoration: none;
line-height: 1.1;
transition: transform .15s ease, box-shadow .15s ease,
border-color .15s ease, color .15s ease;
box-shadow: 0 3px 10px rgba(0,0,0,.05);
} body.page:not(.home) main.section .container a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
):hover {
border-color: #0b5e54;
color: #063d32;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
body.page:not(.home) main.section .container a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
):focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(15,118,110,.25), 0 6px 16px rgba(0,0,0,.08);
} body.page:not(.home) main.section .container p a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
){
margin-right: .6rem;
} @media (max-width: 480px){
body.page:not(.home) main.section .container a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
){
padding: 10px 12px;
border-radius: 10px;
}
} body.page:not(.home) main.section .container a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
){ color: #0b5d4d; border: 2px solid #0b5d4d; background: rgba(2,148,117,.03);
text-decoration: none;
font-weight: 800;
letter-spacing: .2px;
border-radius: 14px;
padding: 14px 18px; display: block; inline-size: fit-content; max-inline-size: 100%;  margin: 10px 0 14px 0; box-shadow:
0 1px 0 rgba(2,63,52,.08),
inset 0 8px 18px rgba(2,63,52,.06);
} body.page:not(.home) main.section .container a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
):hover,
body.page:not(.home) main.section .container a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
):focus-visible{
background: rgba(2,148,117,.08);
box-shadow: 0 0 0 4px rgba(2,148,117,.10);
outline: none;
} @media (min-width: 768px){
body.page:not(.home) main.section .container p a:is(
[href$="/kontakt"], [href$="/kontakt/"],
[href*="://stromypozemky.cz/kontakt"], [href*="://stromypozemky.cz/kontakt/"],
[href^="tel:+420606904177"]
){
margin-right: 12px;
}
}