/*
* Sticky CTA „Bezplatná konzultace" — plovoucí blok v pravém dolním rohu.
*
* Struktura:
* .sticky-cta — zelený box (#22C55E), 12 px radius, 20 px padding
* .sticky-cta__eyebrow — BEZPLATNÁ KONZULTACE (11 px, uppercase)
* .sticky-cta__phone — telefonní číslo (22 px)
* .sticky-cta__btn — tmavý pill button (jako hero btn)
* .sticky-cta__avatar — kruhový avatar + green status dot
* .sticky-cta__btn-label — label tlačítka
* .sticky-cta__btn-icon — bílý kruh s phone.svg ikonou
*
* Pozice: fixed bottom-right, z-index pod headerem (header je 100, my 90).
* Zobrazí se až po určitém scroll-Y (JS přidá .is-visible).
*/
.sticky-cta,
.sticky-cta:hover,
.sticky-cta:focus,
.sticky-cta:visited {
color: var(--rp-color-bg); /* anchor reset — celý blok je */
text-decoration: none;
}
.sticky-cta {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 90;
display: flex;
flex-direction: column;
gap: 8px; /* 8 px mezi eyebrow, telefonem a tlačítkem */
padding: 20px;
background: var(--rp-color-accent-light); /* #29F674 */
border-radius: 12px;
box-shadow:
0 16px 40px -10px rgba(0, 0, 0, 0.35),
0 4px 12px -4px rgba(0, 0, 0, 0.2);
cursor: pointer; /* celý blok je klikatelný link */
/* Initial hidden state — JS přepne na .is-visible při scrollu */
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition:
opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sticky-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/*
* Inline varianta — pro vložení do mobilního menu pod položky.
* Žádné fixed positioning, žádné fade-in chování — block je vždy viditelný.
*/
.sticky-cta--inline {
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
margin: var(--rp-space-5); /* 24 px okraj od krajů menu */
transition: none;
box-shadow: none; /* uvnitř menu zbytečné */
}
/* ── Texty ──────────────────────────────────── */
.sticky-cta__eyebrow {
display: block;
font-size: 11px;
font-weight: var(--rp-fw-medium); /* 500 — lehčí než bold */
letter-spacing: -0.02em; /* -2 % tracking dle Figmy */
line-height: 1;
text-transform: uppercase;
color: var(--rp-color-bg);
}
.sticky-cta__phone {
display: block;
font-size: 22px;
font-weight: var(--rp-fw-semibold); /* 600 — lehčí než bold, ale stále výrazné */
letter-spacing: -0.02em;
line-height: 1;
color: var(--rp-color-bg);
}
/* ── Tlačítko (vizuál) ──────────────────────────────────────────
Není to , jen styled jako pill — celý parent blok je odkaz.
Hover/active se spouští z hoveru nad celým blokem (.sticky-cta:hover).
─────────────────────────────────────────────────────────────── */
.sticky-cta__btn {
position: relative;
overflow: hidden; /* clip shine sweep + avatar do pill tvaru */
display: inline-flex;
align-items: center;
gap: 0; /* avatar/icon mají vlastní margin */
padding: 0; /* avatar flush s levým okrajem pillu */
margin-top: 8px; /* mezera od telefonního čísla nad */
background: linear-gradient(180deg, #FFFFFF 0%, #E5E7EB 100%);
color: var(--rp-color-bg);
border-radius: var(--rp-radius-pill);
font-size: 14px;
font-weight: var(--rp-fw-semibold);
letter-spacing: var(--rp-tracking-normal);
line-height: 1;
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Shine sweep — gradient highlight přejede přes pill při hoveru parenta */
.sticky-cta__btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
transform: translateX(-110%);
transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 0;
}
/* Focus (klávesnice) — vždy funguje */
.sticky-cta:focus-visible .sticky-cta__btn {
transform: translateY(-2px);
}
.sticky-cta:focus-visible .sticky-cta__btn::after {
transform: translateX(110%);
}
/* Hover — jen na zařízeních s myší */
@media (hover: hover) and (pointer: fine) {
.sticky-cta:hover .sticky-cta__btn {
transform: translateY(-2px);
}
.sticky-cta:hover .sticky-cta__btn::after {
transform: translateX(110%);
}
}
.sticky-cta:active .sticky-cta__btn {
transform: translateY(0) scale(0.98);
transition-duration: 100ms;
}
/* ── Avatar — fills full button height, 1:1 ratio (perfect circle) ─────── */
.sticky-cta__avatar {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: inline-block;
height: 48px; /* určuje výšku celého tlačítka */
width: 48px; /* 1:1 ratio = perfect circle */
border-radius: 50%;
}
.sticky-cta__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* Active status indicator — zelená tečka */
.sticky-cta__avatar::after {
content: "";
position: absolute;
right: 2px;
bottom: 2px;
width: 12px;
height: 12px;
background: var(--rp-color-accent);
border-radius: 50%;
}
/* ── Label ─────────────────────────────────── */
.sticky-cta__btn-label {
position: relative;
z-index: 1;
flex: 1 1 auto;
text-align: center;
white-space: nowrap;
padding: 0 16px;
}
/* ── Phone ikona — bez borderu, bez pozadí, jen čistá ikona ─────── */
.sticky-cta__btn-icon {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding-right: 16px;
color: var(--rp-color-bg); /* tmavá ikona */
}
.sticky-cta__btn-icon svg {
width: 14px;
height: 14px;
display: block;
}
/* ── Mobil ────────────────────────────────────
Žádné `left` — block zůstane vpravo zarovnaný a přirozeně široký dle obsahu. */
@media (max-width: 639px) {
.sticky-cta {
right: 12px;
bottom: 12px;
padding: 16px;
}
}
/* Chromium a WebKit nemají !important na [hidden] v UA stylesheets — display: flex by to přebilo.
Tento selektor má specificitu 0,2,0 a garantuje správné skrytí přes hidden atribut. */
.sticky-cta[hidden] {
display: none;
}
/* ── Respekt k reduced-motion ──────────────── */
@media (prefers-reduced-motion: reduce) {
.sticky-cta,
.sticky-cta:hover .sticky-cta__btn,
.sticky-cta:hover .sticky-cta__btn::after,
.sticky-cta__btn,
.sticky-cta__btn::after,
.sticky-cta__btn-icon {
transition: none;
}
}