/* IMAGIFT — kreator briefu (brief.html). Wymaga: tokeny.css + wspolne.css (kafle, przyciski, okna, .ig-zapis).
Spis: 1 baza strony · 2 wstęp · 3 kreator i narzędzia · 4 kroki (rozsuwane karty) · 5 kafle wyboru · 6 termin ·
7 kontakt i wysyłka · 8 panel „Twoja koncepcja” · 9 podziękowanie · 10 co dalej ·
11 tablet i telefon: pasek + arkusz (≤ 1023 px) · 12 telefon (≤ 767 px) · 13 ograniczony ruch
Zasady: zero wersalików i kursywy; kolor tekstu na bieli tylko w wersjach -tusz; style telefonu tylko w @media (max-width: 767px). */
/* =========================================================================
1. BAZA STRONY
========================================================================= */
.bf [hidden] { display: none !important; }
.bf-nowrap { white-space: nowrap; } /* „e-mail” nie łamie się na łączniku (Poppins/Work Sans nie mają glifu U+2011) */
.bf-link {
appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
display: inline-flex; align-items: center; min-height: 44px;
font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; color: var(--ig-tusz);
text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
text-decoration-color: var(--k, var(--ig-linia-mocna));
transition: text-decoration-color var(--ig-d-srednio) var(--ig-e-out);
}
@media (hover: hover) { .bf-link:hover { text-decoration-color: var(--ig-tusz); } }
.bf-link:focus-visible, .bf-krok-glowa:focus-visible, .bf-podsum-wiersz:focus-visible,
.bf-pasek-pokaz:focus-visible, .bf-arkusz-zamknij:focus-visible { outline: 2px solid var(--ig-fokus); outline-offset: 3px; }
/* =========================================================================
2. WSTĘP — tytuł po lewej, obietnica po prawej; konfetti przy krawędziach
========================================================================= */
.bf-wstep { position: relative; isolation: isolate; padding-bottom: clamp(36px, 1rem + 3vw, 64px); }
.bf-wstep-in {
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end;
gap: 32px clamp(40px, 5vw, 96px);
padding-top: clamp(24px, 1rem + 2vw, 56px);
}
.bf-h1 { font-size: clamp(2.6rem, 1.1rem + 4.2vw, 5.25rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 13ch; }
.bf-wstep-bok { display: grid; gap: 22px; padding-bottom: 6px; }
.bf-wstep-bok .ig-lead { margin: 0; }
.bf-fakty { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bf-fakty li { display: flex; align-items: baseline; gap: 12px; font-size: var(--ig-t-maly); color: var(--ig-tekst); }
.bf-fakty .ig-kropka { width: 9px; height: 9px; vertical-align: 0; transform: translateY(-1px); }
.bf-konfetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bf-konfetti i {
position: absolute; left: var(--x); top: var(--y);
width: var(--s); height: var(--s); border-radius: 50%; background: var(--c);
}
/* =========================================================================
3. KREATOR I NARZĘDZIA
========================================================================= */
.bf-kreator { --bf-kreator-dol: clamp(56px, 2rem + 4vw, 112px); position: relative; padding-bottom: var(--bf-kreator-dol); }
.bf-siatka {
display: grid; align-items: start;
grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 400px);
gap: clamp(28px, 3vw, 48px);
}
.bf-kolumna { min-width: 0; }
.bf-narzedzia {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 8px 20px; margin-bottom: 16px;
}
.bf-sciezka {
display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 0; min-width: 0;
border-radius: var(--ig-r-pigulka); background: var(--ig-papier);
}
.bf-sciezka label { position: relative; cursor: pointer; }
.bf-sciezka input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bf-sciezka span {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
border-radius: var(--ig-r-pigulka);
font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; color: var(--ig-cichy);
transition: background-color var(--ig-d-srednio) var(--ig-e-out), color var(--ig-d-srednio) var(--ig-e-out), box-shadow var(--ig-d-srednio) var(--ig-e-out);
}
.bf-sciezka input:checked + span { background: var(--ig-bialy); color: var(--ig-tusz); box-shadow: var(--ig-cien-1); }
.bf-sciezka label:has(input:focus-visible) span { outline: 2px solid var(--ig-fokus); outline-offset: 2px; }
@media (hover: hover) { .bf-sciezka label:hover span { color: var(--ig-tusz); } }
.bf-zapis-stan { flex: 1 1 220px; margin: 0; font-size: var(--ig-t-drobny); color: var(--ig-cichy); }
.bf-od-nowa { display: inline-flex; align-items: center; }
.bf-od-nowa-pytanie { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: var(--ig-t-maly); color: var(--ig-tekst); }
.bf-od-nowa-tak { --k: var(--ig-g); }
.bf-bez-js { padding: 32px; border-radius: var(--ig-r-karta); background: var(--ig-papier); }
.bf-bez-js h2 { font-size: var(--ig-t-h3); margin-bottom: 8px; }
/* =========================================================================
4. KROKI — rozsuwane karty; zamknięty krok = wiersz z odpowiedzią, otwarty = pole papieru z kaflami
========================================================================= */
.bf-kroki { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; overflow-anchor: none; }
.bf-krok {
position: relative;
border-radius: var(--ig-r-karta);
background: var(--ig-bialy);
box-shadow: inset 0 0 0 1px var(--ig-linia);
transition: background-color var(--ig-d-wolno) var(--ig-e-out), box-shadow var(--ig-d-wolno) var(--ig-e-out);
}
.bf-krok.is-otwarty { background: var(--ig-papier); box-shadow: inset 0 0 0 1px transparent; }
@media (hover: hover) { .bf-krok:not(.is-otwarty):hover { box-shadow: inset 0 0 0 1px var(--ig-linia-mocna); } }
.bf-krok-h { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.bf-krok-glowa {
appearance: none; border: 0; background: none; margin: 0; cursor: pointer;
display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
width: 100%; min-height: 68px; padding: 16px 24px;
border-radius: var(--ig-r-karta);
text-align: left;
font-family: var(--ig-f-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em;
color: var(--ig-tusz);
}
.bf-krok-pytanie { min-width: 0; text-wrap: balance; }
.bf-krok-pytanie b { font-weight: 500; }
.bf-krok-odp {
min-width: 0; justify-self: end;
font-family: var(--ig-f-tekst); font-weight: 400; font-size: var(--ig-t-maly); color: var(--ig-cichy);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-krok-zmien {
display: none;
font-size: 0.875rem; font-weight: 600; color: var(--k-tusz, var(--ig-tusz));
text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--k);
}
.bf-krok.is-odp:not(.is-otwarty) .bf-krok-zmien { display: inline; }
/* znacznik stanu: pierścień → kropka w kolorze kroku → zaznaczony */
.bf-krok-stan {
position: relative; width: 22px; height: 22px; border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--ig-linia-mocna);
transition: background-color var(--ig-d-wolno) var(--ig-e-out), box-shadow var(--ig-d-wolno) var(--ig-e-out);
}
.bf-krok-stan::before {
content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: var(--ig-tusz);
-webkit-mask: var(--ig-ptaszek) center / contain no-repeat; mask: var(--ig-ptaszek) center / contain no-repeat;
transform: scale(0); transition: transform var(--ig-d-wolno) var(--ig-e-out);
}
.bf-krok.is-odp .bf-krok-stan { background: var(--k); box-shadow: none; }
.bf-krok.is-odp .bf-krok-stan::before { transform: scale(1); }
.bf-krok.is-otwarty:not(.is-odp) .bf-krok-stan { background: var(--k-mgla); box-shadow: none; }
.bf-krok.is-otwarty:not(.is-odp) .bf-krok-stan::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--k); }
/* otwarty krok: duże pytanie */
.bf-krok.is-otwarty .bf-krok-glowa {
grid-template-columns: 22px minmax(0, 1fr); align-items: start;
padding: clamp(24px, 1rem + 1.4vw, 36px) clamp(22px, 1rem + 1.6vw, 40px) 8px;
font-weight: 400; font-size: clamp(1.55rem, 1.05rem + 1.25vw, 2.2rem); line-height: 1.12; letter-spacing: -0.026em;
cursor: default;
}
.bf-krok.is-otwarty .bf-krok-stan { margin-top: 0.22em; }
.bf-krok.is-otwarty .bf-krok-pytanie b { font-weight: 600; }
.bf-krok.is-otwarty .bf-krok-odp, .bf-krok.is-otwarty .bf-krok-zmien { display: none; }
.bf-krok-tresc { padding: 0 clamp(22px, 1rem + 1.6vw, 40px) clamp(22px, 1rem + 1.6vw, 40px); }
.bf-krok-podp { margin: 2px 0 24px 36px; max-width: 62ch; font-size: var(--ig-t-maly); color: var(--ig-tekst); }
.bf-krok-dol { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.bf-krok-dol .bf-dalej { margin-left: auto; }
/* =========================================================================
5. KAFLE WYBORU — rama z wspolne.css (.ig-kafel--wybor) + ikona, opis i „wspólnie” na papierze
========================================================================= */
.bf-kafle { --ig-kafle-odstep: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bf-kafel { gap: 4px; padding: 18px 18px 20px; }
.bf-kafel .ig-kafel-ikona {
width: 42px; height: 42px; margin-bottom: 10px; border-radius: 13px;
background: var(--ig-papier); color: var(--ig-tekst);
transition: background-color var(--ig-d-wolno) var(--ig-e-out), color var(--ig-d-wolno) var(--ig-e-out);
}
.bf-kafel .ig-kafel-ikona svg { width: 24px; height: 24px; }
.bf-kafel-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bf-kafel.ig-kafel--wybor .ig-kafel-tytul { padding-right: 0; font-size: 1.0625rem; line-height: 1.26; }
.bf-kafel .ig-kafel-opis { font-size: 0.84375rem; line-height: 1.48; color: var(--ig-cichy); text-wrap: pretty; }
@media (hover: hover) { .bf-kafel:hover .ig-kafel-ikona { color: var(--k-tusz); } }
.bf-kafel:has(.ig-kafel-pole:checked) .ig-kafel-ikona { background: var(--ig-bialy); color: var(--k-tusz); }
.bf-kafel:has(.ig-kafel-pole:checked) .ig-kafel-opis { color: var(--ig-tekst); }
/* „Zdecydujmy wspólnie / Wybierzemy później” — szary papier z dwoma dymkami, ten sam rozmiar */
.bf-kafel.ig-kafel--wspolnie { background: var(--ig-mgla); box-shadow: none; }
.bf-kafel.ig-kafel--wspolnie::before { content: none; }
.bf-kafel.ig-kafel--wspolnie .ig-kafel-ikona { background: var(--ig-bialy); color: var(--ig-tusz); }
.bf-kafel.ig-kafel--wspolnie .ig-kafel-opis { color: var(--ig-tekst); }
.bf-kafel.ig-kafel--wspolnie.ig-kafel--wybor:has(.ig-kafel-pole:checked) { background: var(--ig-bialy); box-shadow: inset 0 0 0 2px var(--ig-tusz); }
.bf-kafel.ig-kafel--wspolnie:has(.ig-kafel-pole:checked) .ig-kafel-ikona { background: var(--ig-mgla); }
/* konfetti przy zaznaczeniu: kropki wylatują ze znacznika */
.bf-iskra {
position: absolute; z-index: 3; pointer-events: none;
width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2);
border-radius: 50%; background: var(--c);
animation: bf-iskra 0.75s var(--ig-e-out) forwards;
}
@keyframes bf-iskra {
0% { transform: translate(0, 0) scale(0.3); opacity: 1; }
65% { opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
.ig-ruch .bf-kafel:has(.ig-kafel-pole:checked) .ig-kafel-znak { animation: bf-klik 0.5s var(--ig-e-out); }
@keyframes bf-klik { 0% { transform: scale(0.6); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* wejście kroku: pytanie i kafle wjeżdżają kolejno */
.ig-ruch .bf-krok.is-wchodzi .bf-krok-pytanie,
.ig-ruch .bf-krok.is-wchodzi .bf-krok-podp { animation: bf-tekst 0.6s var(--ig-e-out) both; }
.ig-ruch .bf-krok.is-wchodzi .bf-krok-podp { animation-delay: 60ms; }
.ig-ruch .bf-krok.is-wchodzi .bf-kafel { animation: bf-wjazd 0.7s var(--ig-e-out) both; animation-delay: calc(var(--i, 0) * 38ms + 90ms); }
.ig-ruch .bf-krok.is-wchodzi .bf-pola, .ig-ruch .bf-krok.is-wchodzi .bf-krok-dol { animation: bf-tekst 0.7s var(--ig-e-out) 0.2s both; }
@keyframes bf-tekst { from { opacity: 0; transform: translateY(10px); } }
@keyframes bf-wjazd { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
/* =========================================================================
6. TERMIN — data + karta oceny (ok / napięty / zły / informacja)
========================================================================= */
.bf-termin-data { display: grid; gap: 8px; max-width: 340px; margin-top: 20px; }
.bf-termin-data label { font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; color: var(--ig-tusz); }
.bf-info { display: grid; gap: 10px; margin-top: 16px; }
.bf-info:empty { display: none; }
.bf-info-karta {
display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; align-items: start;
padding: 18px 20px; border-radius: 18px;
background: var(--ig-bialy); box-shadow: inset 0 0 0 1px var(--ig-linia);
--kk: var(--ig-t);
}
.bf-info-karta[data-poziom="ok"] { background: var(--ig-f-mgla); box-shadow: none; --kk: var(--ig-f); }
.bf-info-karta[data-poziom="napiety"] { background: var(--ig-i-mgla); box-shadow: none; --kk: var(--ig-i); }
.bf-info-karta[data-poziom="zly"] { background: var(--ig-g-mgla); box-shadow: none; --kk: var(--ig-g); }
.bf-info-kropka { width: 12px; height: 12px; margin-top: 0.42em; border-radius: 50%; background: var(--kk); }
.bf-info-karta p { margin: 0; font-size: var(--ig-t-maly); line-height: 1.55; color: var(--ig-tekst); max-width: 64ch; }
.bf-info-karta b, .bf-info-karta strong { color: var(--ig-tusz); font-weight: 600; }
.bf-info-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }
.ig-ruch .bf-info-karta { animation: bf-tekst 0.5s var(--ig-e-out) both; }
/* =========================================================================
7. KONTAKT I WYSYŁKA
========================================================================= */
.bf-pola { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.bf-pole { grid-column: span 2; }
.bf-pole[data-pole="imie"], .bf-pole[data-pole="email"] { grid-column: span 3; }
.bf-pole--pelne, .bf-rola, .bf-zgoda { grid-column: 1 / -1; }
.bf-pole { min-width: 0; }
.bf-pole > label, .bf-rola legend {
display: block; margin-bottom: 8px; padding: 0;
font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.3; color: var(--ig-tusz);
}
.bf-wym, .bf-opc { margin-left: 6px; font-family: var(--ig-f-tekst); font-weight: 400; font-size: 0.8125rem; color: var(--ig-cichy); }
.bf .bf-pole input, .bf .bf-pole textarea, .bf .bf-termin-data input {
display: block; width: 100%; min-height: 54px; margin: 0; padding: 14px 18px;
border: 0; border-radius: 16px;
background: var(--ig-bialy); box-shadow: inset 0 0 0 1px var(--ig-linia-mocna);
font-family: var(--ig-f-tekst); font-size: 1rem; line-height: 1.4; color: var(--ig-tusz);
transition: box-shadow var(--ig-d-srednio) var(--ig-e-out);
}
.bf .bf-pole textarea { min-height: 128px; resize: vertical; }
.bf .bf-pole input::placeholder, .bf .bf-pole textarea::placeholder { color: var(--ig-cichy); opacity: 1; }
.bf .bf-pole input:focus, .bf .bf-pole textarea:focus, .bf .bf-termin-data input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ig-fokus); }
@media (hover: hover) { .bf .bf-pole input:hover:not(:focus), .bf .bf-pole textarea:hover:not(:focus) { box-shadow: inset 0 0 0 1px var(--ig-tusz); } }
.bf .bf-pole.is-blad input { box-shadow: inset 0 0 0 2px var(--ig-g-tusz); }
.bf-blad {
display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0;
font-size: 0.875rem; line-height: 1.45; color: var(--ig-g-tusz);
}
.bf-blad::before {
content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
background: var(--ig-g-tusz); color: var(--ig-bialy); font-family: var(--ig-f-display); font-weight: 600; font-size: 0.75rem; line-height: 1;
}
.is-uwaga .bf-blad { color: var(--ig-i-tusz); }
.is-uwaga .bf-blad::before { background: var(--ig-i); color: var(--ig-tusz); }
.bf-rola { margin: 0; padding: 0; border: 0; min-width: 0; }
.bf-rola-pigulki { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-rola label { position: relative; cursor: pointer; }
.bf-rola input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bf-rola-pigulki span {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
border-radius: var(--ig-r-pigulka); background: var(--ig-bialy); box-shadow: inset 0 0 0 1px var(--ig-linia-mocna);
font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; color: var(--ig-tusz);
transition: background-color var(--ig-d-srednio) var(--ig-e-out), color var(--ig-d-srednio) var(--ig-e-out), box-shadow var(--ig-d-srednio) var(--ig-e-out);
}
.bf-rola-pigulki input:checked + span { background: var(--ig-tusz); color: var(--ig-bialy); box-shadow: none; }
.bf-rola-pigulki label:has(input:focus-visible) span { outline: 2px solid var(--ig-fokus); outline-offset: 2px; }
@media (hover: hover) { .bf-rola-pigulki label:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--ig-tusz); } }
.bf-zgoda-etykieta {
position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start;
cursor: pointer; font-size: var(--ig-t-maly); line-height: 1.55; color: var(--ig-tekst);
}
.bf-zgoda-etykieta input { position: absolute; left: 0; top: 0; opacity: 0; width: 26px; height: 26px; margin: 0; }
.bf-zgoda-znak {
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
background: var(--ig-bialy); box-shadow: inset 0 0 0 1.5px var(--ig-linia-mocna);
transition: background-color var(--ig-d-srednio) var(--ig-e-out), box-shadow var(--ig-d-srednio) var(--ig-e-out);
}
.bf-zgoda-znak::before {
content: ""; width: 15px; height: 15px; background: var(--ig-bialy);
-webkit-mask: var(--ig-ptaszek) center / contain no-repeat; mask: var(--ig-ptaszek) center / contain no-repeat;
transform: scale(0); transition: transform var(--ig-d-wolno) var(--ig-e-out);
}
.bf-zgoda-etykieta input:checked + .bf-zgoda-znak { background: var(--ig-tusz); box-shadow: none; }
.bf-zgoda-etykieta input:checked + .bf-zgoda-znak::before { transform: scale(1); }
.bf-zgoda-etykieta input:focus-visible + .bf-zgoda-znak { outline: 2px solid var(--ig-fokus); outline-offset: 2px; }
.bf-zgoda.is-blad .bf-zgoda-znak { box-shadow: inset 0 0 0 2px var(--ig-g-tusz); }
.bf-zgoda a { color: var(--ig-tusz); font-weight: 500; text-decoration-color: var(--ig-t); text-underline-offset: 3px; }
.bf-zgoda .bf-blad { margin-left: 40px; }
.bf-pulapka { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bf-wysylka { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.bf-wyslij { min-width: 220px; }
.bf-wyslij[aria-busy="true"] .ig-btn-pole::before { animation: bf-kreci 0.9s linear infinite; -webkit-mask: none; mask: none; border-radius: 50%; width: 16px; height: 16px; background: none; box-shadow: inset 0 0 0 2.5px currentColor; clip-path: inset(0 0 50% 0); }
@keyframes bf-kreci { to { transform: rotate(360deg); } }
.bf-tarcza { flex: 1 1 240px; display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: var(--ig-t-drobny); line-height: 1.5; color: var(--ig-cichy); max-width: 46ch; }
.bf-tarcza-ikona { flex: none; width: 10px; height: 10px; margin-top: 0.4em; border-radius: 50%; background: var(--ig-mgla); transition: background-color var(--ig-d-srednio) var(--ig-e-out); }
.bf-tarcza[data-stan="working"] .bf-tarcza-ikona { background: var(--ig-i); }
.bf-tarcza[data-stan="ok"] .bf-tarcza-ikona { background: var(--ig-f); }
.bf-tarcza[data-stan="error"] .bf-tarcza-ikona { background: var(--ig-g); }
.bf-tarcza[data-stan="error"] { color: var(--ig-g-tusz); }
.ig-ruch .bf-tarcza[data-stan="working"] .bf-tarcza-ikona { animation: bf-puls 1s var(--ig-e-in-out) infinite alternate; }
@keyframes bf-puls { to { transform: scale(0.55); } }
.bf-blad-wysylki {
display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start;
margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: var(--ig-g-mgla);
font-size: var(--ig-t-maly); line-height: 1.55; color: var(--ig-tusz);
}
.bf-blad-wysylki p { margin: 0; }
.bf-blad-wysylki b { font-weight: 600; }
.bf-blad-ikona { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ig-g); }
.bf-blad-ikona::before { content: "!"; font-family: var(--ig-f-display); font-weight: 600; font-size: 0.875rem; color: var(--ig-tusz); }
.bf-blad-akcje { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; --k: var(--ig-g); }
/* =========================================================================
8. PANEL „TWOJA KONCEPCJA” — przyklejona karta (komputer); ta sama treść w arkuszu na telefonie
========================================================================= */
/* kolumna panelu sięga do dolnej krawędzi kreatora (przez jego dolny odstęp), więc karta trzyma się pod paskiem
także przy ostatnich krokach, gdy pod otwartym krokiem zostaje mało treści */
.bf-panel { align-self: stretch; min-width: 0; margin-bottom: calc(-1 * var(--bf-kreator-dol)); }
.bf-panel-karta {
position: sticky; top: calc(var(--ig-pasek-h) + 28px);
max-height: calc(100vh - var(--ig-pasek-h) - 56px);
max-height: min(calc(100dvh - var(--ig-pasek-h) - 56px), var(--bf-panel-max, 100dvh)); /* --bf-panel-max: brief.js dopasujPanel() */
overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
padding: 27px 27px 25px;
border: 1px solid var(--ig-linia); /* ramka, nie cień wewnętrzny — przyklejona stopka jej nie zakrywa */
border-radius: var(--ig-r-okno);
background: var(--ig-bialy);
box-shadow: var(--ig-cien-2);
}
.bf-panel-karta:has(.bf-panel-stopka) { padding-bottom: 0; }
.bf-panel-glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bf-panel-h { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.025em; }
.bf-kropki { flex: none; display: grid; grid-template-columns: repeat(4, 10px); gap: 6px; margin-top: 4px; }
.bf-kropki i {
display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ig-mgla);
transform: scale(0.72);
transition: transform 0.6s var(--ig-e-out), background-color var(--ig-d-wolno) var(--ig-e-out), opacity var(--ig-d-wolno) var(--ig-e-out);
}
.bf-kropki i.is-on { background: var(--k); transform: scale(1); }
.bf-kropki i.is-poza { opacity: 0.4; transform: scale(0.42); }
.bf-panel-pod { margin: 8px 0 18px; font-size: var(--ig-t-drobny); line-height: 1.5; color: var(--ig-cichy); }
.bf-temat {
display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding: 12px 14px;
border-radius: 14px; background: var(--ig-t-mgla);
font-size: 0.875rem; line-height: 1.45; color: var(--ig-tekst);
--k: var(--ig-t);
}
.bf-temat b { color: var(--ig-tusz); font-weight: 600; }
.bf-temat .ig-kropka { width: 8px; height: 8px; }
.bf-podsum { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
.bf-podsum-wiersz {
appearance: none; border: 0; background: none; margin: 0; cursor: pointer;
display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 12px; row-gap: 1px;
width: 100%; padding: 9px 10px; border-radius: 14px; text-align: left; color: inherit;
transition: background-color var(--ig-d-srednio) var(--ig-e-out);
}
@media (hover: hover) { .bf-podsum-wiersz:hover { background: var(--ig-papier); } }
.bf-podsum-kropka { grid-row: 1 / span 2; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--k); }
.bf-podsum-et { font-size: 0.8125rem; line-height: 1.35; color: var(--ig-cichy); }
.bf-podsum-war { font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.38; color: var(--ig-tusz); overflow-wrap: anywhere; }
.ig-ruch .bf-podsum li.is-nowy { animation: bf-wiersz 0.6s var(--ig-e-out) both; }
@keyframes bf-wiersz { from { opacity: 0; transform: translateX(-10px); } }
/* panel na komputerze: 4 ostatnie odpowiedzi + „Pokaż wszystkie (n)”; w arkuszu telefonu zawsze cała lista */
.bf-panel-karta .bf-podsum:not(.is-wszystkie) li.is-starszy, .bf-arkusz .bf-podsum-wszystkie { display: none; }
.bf-podsum-wszystkie { margin-top: 4px; font-size: 0.875rem; }
.bf-panel-pusto { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; border-radius: 18px; background: var(--ig-papier); }
.bf-panel-pusto p { margin: 0; font-size: var(--ig-t-maly); line-height: 1.5; color: var(--ig-tekst); }
.bf-pusto-znak, .bf-dzieki-znak { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 30px; height: 30px; }
.bf-pusto-znak i, .bf-dzieki-znak i { display: block; border-radius: 50%; background: var(--ig-g); }
.bf-pusto-znak i:nth-child(2), .bf-dzieki-znak i:nth-child(2) { background: var(--ig-i); }
.bf-pusto-znak i:nth-child(3), .bf-dzieki-znak i:nth-child(3) { background: var(--ig-f); }
.bf-pusto-znak i:nth-child(4), .bf-dzieki-znak i:nth-child(4) { background: var(--ig-t); }
.bf-panel-reszta { margin: 10px 0 0; font-size: var(--ig-t-drobny); color: var(--ig-cichy); }
.bf-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 18px 0 0; }
.bf-liczby div { padding: 12px 14px; border-radius: 14px; background: var(--ig-papier); }
.bf-liczby dt { font-size: 0.8125rem; line-height: 1.35; color: var(--ig-cichy); }
.bf-liczby dd { margin: 2px 0 0; font-family: var(--ig-f-display); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--ig-tusz); }
.bf-liczby [data-poziom="ok"] dd { color: var(--ig-f-tusz); }
.bf-liczby [data-poziom="napiety"] dd { color: var(--ig-i-tusz); }
.bf-liczby [data-poziom="zly"] dd { color: var(--ig-g-tusz); }
/* dopasowanie briefu — wstążka G·I·F·T odsłaniana od lewej */
.bf-dopasowanie { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ig-linia); }
.bf-dop-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.875rem; color: var(--ig-tekst); }
.bf-dop-glowa b { font-family: var(--ig-f-display); font-weight: 600; color: var(--ig-tusz); text-align: right; }
.bf-wstega { position: relative; height: 10px; margin-top: 10px; border-radius: 10px; background: var(--ig-mgla); overflow: hidden; }
.bf-wstega span {
position: absolute; inset: 0; border-radius: inherit; background: var(--ig-wstazka);
clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0 round 10px);
transition: clip-path 0.9s var(--ig-e-out);
}
.bf-dop-opis { margin: 10px 0 0; font-size: var(--ig-t-drobny); line-height: 1.5; color: var(--ig-cichy); }
.bf-do-wysylki { margin-top: 14px; }
.bf-panel-wyslany { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; font-family: var(--ig-f-display); font-weight: 500; color: var(--ig-f-tusz); --k: var(--ig-f); }
/* stopka: „Zostało n pytań” + „Przejdź do wysyłki”; na komputerze przyklejona do dołu karty, z łagodnym przejściem nad sobą */
.bf-panel-stopka { margin-top: 20px; }
.bf-panel-stopka > :first-child { margin-top: 0; }
.bf-panel-karta .bf-panel-stopka {
position: sticky; bottom: 0; z-index: 2;
margin: 24px -27px 0; padding: 4px 27px 25px;
background: var(--ig-bialy);
}
.bf-panel-karta .bf-panel-stopka::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none;
background: linear-gradient(rgba(255, 255, 255, 0), var(--ig-bialy));
}
/* karta inspiracji (z ?inspiracja=) */
.bf-insp { margin: 0 0 18px; border-radius: 20px; overflow: hidden; background: var(--k-mgla, var(--ig-papier)); }
.bf-insp .ig-render.bf-insp-render { border-radius: 0; background: transparent; }
.bf-insp-tresc { padding: 16px 18px 18px; }
.bf-insp-et { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--k-tusz, var(--ig-tusz)); }
.bf-insp-nazwa { margin: 4px 0 6px; font-size: 1.25rem; line-height: 1.2; }
.bf-insp-haslo { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ig-tekst); }
.bf-insp-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 12px 0 0; font-size: 0.8125rem; color: var(--ig-tekst); }
.bf-insp-meta > span { display: inline-flex; align-items: baseline; gap: 8px; }
.bf-insp-meta .ig-kropka { width: 8px; height: 8px; }
.bf-insp-meta a { display: inline-flex; align-items: center; min-height: 32px; font-family: var(--ig-f-display); font-weight: 600; color: var(--ig-tusz); text-decoration: underline; text-decoration-color: var(--k); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* =========================================================================
9. PODZIĘKOWANIE
========================================================================= */
.bf-dzieki {
position: relative; isolation: isolate; overflow: hidden;
padding: clamp(32px, 1rem + 3.5vw, 72px);
border-radius: var(--ig-r-okno); background: var(--ig-papier);
}
.bf-dzieki-konfetti { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.bf-dzieki-in { position: relative; z-index: 1; }
.bf-dzieki-znak { width: 52px; height: 52px; gap: 5px; }
.ig-ruch .bf-dzieki:not([hidden]) .bf-dzieki-znak i { animation: bf-klik 0.7s var(--ig-e-out) both; }
.ig-ruch .bf-dzieki:not([hidden]) .bf-dzieki-znak i:nth-child(2) { animation-delay: 80ms; }
.ig-ruch .bf-dzieki:not([hidden]) .bf-dzieki-znak i:nth-child(3) { animation-delay: 160ms; }
.ig-ruch .bf-dzieki:not([hidden]) .bf-dzieki-znak i:nth-child(4) { animation-delay: 240ms; }
.bf-dzieki-h { margin: 24px 0 14px; font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.bf-dzieki-h:focus { outline: none; }
.bf-dzieki-numer { margin: 0; font-size: var(--ig-t-lead); color: var(--ig-tekst); }
.bf-dzieki-numer strong { color: var(--ig-tusz); font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-dzieki-kroki { list-style: none; margin: clamp(28px, 1rem + 2vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bf-dzieki-kroki li { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 20px; background: var(--ig-bialy); }
.bf-dzieki-kropka { width: 14px; height: 14px; border-radius: 50%; background: var(--k); }
.bf-dzieki-kroki h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; margin-bottom: 6px; }
.bf-dzieki-kroki p { margin: 0; font-size: var(--ig-t-maly); line-height: 1.55; color: var(--ig-tekst); }
.bf-dzieki-kroki strong { color: var(--ig-tusz); font-weight: 600; }
.bf-dzieki-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 1rem + 2vw, 40px); }
/* =========================================================================
10. CO DALEJ — nagłówek wyśrodkowany, trzy kafle, duże CTA powrotu
========================================================================= */
.bf-dalej-sekcja { padding-top: clamp(40px, 1rem + 4vw, 96px); }
.bf-dalej-glowa { display: grid; justify-items: center; gap: 18px; max-width: 760px; margin: 0 auto clamp(36px, 1rem + 3vw, 64px); text-align: center; }
.bf-dalej-glowa .ig-lead { margin: 0; }
.bf-dalej-kafle .ig-kafel-tytul { font-size: 1.25rem; }
.ig-zapis--pelny .bf-mail { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* =========================================================================
11. TABLET I TELEFON (≤ 1023 px) — panel znika z boku; pasek „Twoja koncepcja” u dołu + arkusz
========================================================================= */
.bf-pasek-tel { display: none; }
.bf-arkusz { display: none; }
@media (max-width: 1023px) {
.bf-siatka { grid-template-columns: minmax(0, 1fr); }
.bf-sciezka span { min-height: 44px; } /* cel dotyku ≥ 44 px (komputer bez zmian: 40 px) */
.bf-panel { display: none; }
.bf-kreator { padding-bottom: 96px; }
.bf-pasek-tel {
position: fixed; z-index: 90;
left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
max-width: 560px; margin-inline: auto;
display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
padding: 6px;
border-radius: 30px;
background: rgba(14, 14, 20, 0.94); color: var(--ig-bialy);
box-shadow: 0 18px 40px -18px rgba(14, 14, 20, 0.6);
opacity: 0; visibility: hidden; transform: translateY(24px);
transition: opacity var(--ig-d-wolno) var(--ig-e-out), transform var(--ig-d-wolno) var(--ig-e-out), visibility 0s linear var(--ig-d-wolno);
}
.bf-pasek-tel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bf-wyslany .bf-pasek-tel, .bf-arkusz-otwarty .bf-pasek-tel { opacity: 0; visibility: hidden; }
.bf-pasek-pierscien { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.bf-pasek-pierscien svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.bf-pasek-pierscien circle { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 2.5; }
.bf-pasek-pierscien .bf-pasek-postep {
stroke: var(--ig-f); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - 100 * var(--p, 0));
transition: stroke-dashoffset var(--ig-d-wolno) var(--ig-e-out);
}
.bf-pasek-pierscien::after {
content: ""; width: 16px; height: 16px;
background:
radial-gradient(circle at 3.5px 3.5px, var(--ig-g) 0 3.3px, transparent 3.6px),
radial-gradient(circle at 12.5px 3.5px, var(--ig-i) 0 3.3px, transparent 3.6px),
radial-gradient(circle at 3.5px 12.5px, var(--ig-f) 0 3.3px, transparent 3.6px),
radial-gradient(circle at 12.5px 12.5px, var(--ig-t) 0 3.3px, transparent 3.6px);
}
.bf-pasek-tekst { display: grid; min-width: 0; }
.bf-pasek-tytul { font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem; line-height: 1.25; }
.bf-pasek-stan { font-size: 0.8125rem; line-height: 1.3; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-pasek-pokaz {
appearance: none; border: 0; cursor: pointer;
min-height: 44px; padding: 0 20px; border-radius: var(--ig-r-pigulka);
background: var(--ig-bialy); color: var(--ig-tusz);
font-family: var(--ig-f-display); font-weight: 500; font-size: 0.9375rem;
}
.bf-arkusz[open] {
position: fixed; inset: auto 0 0 0; z-index: 200;
display: flex; flex-direction: column;
width: 100%; max-width: 640px; max-height: 86vh; max-height: 86dvh;
margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom, 0px);
border: 0; border-radius: 28px 28px 0 0;
background: var(--ig-bialy); color: var(--ig-tekst);
box-shadow: 0 -20px 60px -30px rgba(14, 14, 20, 0.5);
transform: translateY(100%);
transition: transform 0.42s var(--ig-e-out);
overflow: hidden;
}
.bf-arkusz.is-on { transform: none; }
.bf-arkusz::backdrop { background: rgba(14, 14, 20, 0.36); }
.bf-arkusz-uchwyt { flex: none; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 5px; background: var(--ig-mgla); }
.bf-arkusz-glowa { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 16px 8px 24px; }
.bf-arkusz-glowa h2 { flex: 1; font-size: 1.5rem; line-height: 1.1; }
.bf-arkusz-zamknij {
appearance: none; border: 0; cursor: pointer; flex: none;
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ig-papier);
}
.bf-arkusz-zamknij::before, .bf-arkusz-zamknij::after { content: ""; grid-area: 1 / 1; width: 16px; height: 2px; border-radius: 2px; background: var(--ig-tusz); transform: rotate(45deg); }
.bf-arkusz-zamknij::after { transform: rotate(-45deg); }
.bf-arkusz-tresc { overflow: auto; overscroll-behavior: contain; padding: 4px 24px 24px; }
}
/* =========================================================================
12. TELEFON (≤ 767 px) — kafle jako wiersze (ikona · tekst · znacznik), pola 12 px od krawędzi, tekst ≥ 20 px
========================================================================= */
@media (max-width: 767px) {
.bf-wstep-in { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 12px; }
.bf-h1 { font-size: clamp(2.3rem, 1.2rem + 5.4vw, 3.1rem); max-width: 14ch; }
.bf-konfetti i:nth-child(2), .bf-konfetti i:nth-child(3), .bf-konfetti i:nth-child(4), .bf-konfetti i:nth-child(7) { display: none; }
.bf-konfetti i:nth-child(1) { left: auto; right: 60px; top: 158px; width: 14px; height: 14px; }
.bf-konfetti i:nth-child(5) { left: auto; right: 34px; top: 136px; width: 8px; height: 8px; }
.bf-konfetti i:nth-child(6) { left: auto; right: 28px; top: 186px; width: 6px; height: 6px; --c: var(--ig-t); }
.bf-pole, .bf-pole[data-pole="imie"], .bf-pole[data-pole="email"] { grid-column: 1 / -1; }
.bf-narzedzia { gap: 4px 12px; }
.bf-sciezka { width: 100%; }
.bf-sciezka label { flex: 1; }
.bf-sciezka span { justify-content: center; width: 100%; padding: 0 12px; }
.bf-zapis-stan { flex-basis: 100%; order: 3; }
/* karty kroków: kolorowe pole 12 px od krawędzi ekranu, tekst w środku ≥ 20 px od krawędzi */
.bf-kroki { margin-inline: calc(12px - var(--ig-o-margines)); gap: 8px; }
.bf-krok-glowa {
grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 2px; column-gap: 12px;
min-height: 64px; padding: 14px 14px 14px 16px; font-size: 1rem;
}
.bf-krok-odp { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; font-size: 0.875rem; }
.bf-krok-zmien { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.bf-krok-stan { align-self: start; margin-top: 1px; }
.bf-krok.is-otwarty .bf-krok-glowa { padding: 22px 16px 6px; font-size: clamp(1.4rem, 1rem + 2.2vw, 1.75rem); column-gap: 12px; }
.bf-krok-tresc { padding: 0 12px 16px; }
.bf-krok-podp { margin: 4px 4px 18px 38px; }
/* kafle jako wiersze — jedna kolumna, równe odstępy, cała karta dotykowa */
.bf-kafle { --ig-kafle-odstep: 8px; }
.bf-kafel {
display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; column-gap: 12px;
min-height: 64px; padding: 12px 14px 12px 12px;
}
.bf-kafel .ig-kafel-ikona { grid-column: 1; grid-row: 1; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.bf-kafel .bf-kafel-tekst { grid-column: 2; grid-row: 1; }
.bf-kafel .ig-kafel-ikona svg { width: 22px; height: 22px; }
.bf-kafel-tekst { gap: 2px; }
.bf-kafel.ig-kafel--wybor .ig-kafel-tytul { font-size: 1rem; line-height: 1.3; }
.bf-kafel .ig-kafel-opis { font-size: 0.8125rem; line-height: 1.42; }
.bf-kafel .ig-kafel-znak { grid-column: 3; grid-row: 1; position: static; width: 24px; height: 24px; }
.bf-kafel .ig-kafel-znak::before { width: 13px; height: 13px; }
.bf-krok-dol { margin-top: 18px; padding-inline: 4px; }
.bf-termin-data { max-width: none; }
.bf-info-karta { padding: 16px; gap: 12px; }
.bf-pola { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-inline: 4px; }
.bf-wysylka { padding-inline: 4px; }
.bf-wyslij { width: 100%; }
.bf-tarcza { flex-basis: 100%; max-width: none; }
.bf-blad-wysylki { padding: 16px; }
.bf-dzieki { margin-inline: calc(12px - var(--ig-o-margines)); padding: 28px 20px; border-radius: 24px; }
.bf-dzieki-kroki { grid-template-columns: minmax(0, 1fr); }
.bf-dzieki-kroki li { padding: 20px; }
.bf-dzieki-akcje .ig-btn { width: 100%; }
.bf-arkusz-glowa { padding-left: 20px; }
.bf-arkusz-tresc { padding: 4px 20px 24px; }
.bf-dalej-glowa { text-align: left; justify-items: start; }
}
/* =========================================================================
13. OGRANICZONY RUCH — bez konfetti, wjazdów i przejść
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.bf-iskra, .bf-dzieki-konfetti { display: none; }
.bf-krok, .bf-krok-stan, .bf-krok-stan::before, .bf-kafel .ig-kafel-ikona, .bf-kropki i, .bf-wstega span,
.bf-pasek-tel, .bf-arkusz[open], .bf-pasek-pierscien .bf-pasek-postep { transition: none !important; }
.bf-wyslij[aria-busy="true"] .ig-btn-pole::before { animation: none; }
}