/* ============================================================ Benjamin Moore Polska – nowa strona główna Wszystko scope'owane pod .bmx aby nie kolidowało z motywem ============================================================ */ .bmx *,.bmx *::before,.bmx *::after{box-sizing:border-box} /* strona pelnoekranowa – kasujemy domyslny margines , inaczej widac bialy pasek przy krawedziach */ html{-webkit-text-size-adjust:100%} body{margin:0;padding:0;background:#FCFAF6} .bmx{ /* --- marka --- */ --navy:#0B2240; --navy-2:#12325C; --red:#DB0632; --red-dark:#B00427; --ink:#171A1E; --muted:#6C7079; /* --- tła --- */ --paper:#FCFAF6; --cream:#F5F1E9; --sand:#EAE3D6; --white:#fff; --line:rgba(11,34,64,.13); --line-soft:rgba(11,34,64,.07); --shadow-s:0 2px 10px rgba(11,34,64,.05); --shadow-m:0 14px 40px -18px rgba(11,34,64,.22); --shadow-l:0 40px 90px -40px rgba(11,34,64,.38); --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --pad:clamp(20px,5vw,64px); --maxw:1360px; --r:18px; --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,.05,.36,1); /* zmienna akcentu – sterowana przez JS w sekcji Color Trends */ --accent:#E8DECF; /* maska pociagniecia pedzla — postrzepiona krawedz + odpryski */ --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0 H170 Q184 4 168 8 Q186 13 170 17 Q188 21 169 25 Q185 29 167 33 Q182 36 172 40 H0 Z'/%3E%3Cellipse fill='white' cx='191' cy='6' rx='4.2' ry='2.4'/%3E%3Cellipse fill='white' cx='195' cy='19' rx='2.8' ry='1.7'/%3E%3Cellipse fill='white' cx='190' cy='31' rx='3.4' ry='2.1'/%3E%3Cellipse fill='white' cx='197.5' cy='26' rx='1.6' ry='1.1'/%3E%3Cellipse fill='white' cx='196' cy='11' rx='1.4' ry='1'/%3E%3C/svg%3E"); font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; } .bmx img{max-width:100%;display:block} /* :where() = zerowa specyficznosc, zeby resety nie wygrywaly z klasami komponentow */ :where(.bmx) :where(a){color:inherit;text-decoration:none} :where(.bmx) :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer} :where(.bmx) :where(ul){list-style:none;margin:0;padding:0} :where(.bmx) :where(h1,h2,h3,h4,h5,p,figure){margin:0} /* bez border-radius! nadpisywalo zaokraglenie pol i przyciskow przy focusie */ .bmx :focus-visible{outline:2px solid var(--red);outline-offset:3px} .bmx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- layout ---------- */ .bmx-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .bmx-sec{padding-block:clamp(56px,6.5vw,100px);position:relative} .bmx-sec--tight{padding-block:clamp(40px,4.5vw,68px)} /* ---------- typografia ---------- */ .bmx-eyebrow{ font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--red);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px } .bmx-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5} .bmx-eyebrow--plain::before{display:none} .bmx-h1{ font-family:var(--serif);font-weight:400; font-size:clamp(2rem,4.1vw,3.7rem);line-height:1.1;letter-spacing:-.018em; color:var(--navy) } .bmx-h2{ font-family:var(--serif);font-weight:400; font-size:clamp(1.65rem,2.9vw,2.55rem);line-height:1.16;letter-spacing:-.015em; color:var(--navy) } .bmx-h3{ font-family:var(--serif);font-weight:400; font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.22;color:var(--navy) } .bmx-h1 em,.bmx-h2 em{font-style:italic;font-weight:400;color:var(--red)} .bmx-lead{font-size:clamp(1rem,1.15vw,1.125rem);color:var(--muted);max-width:56ch;font-weight:300} .bmx-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)} .bmx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:clamp(26px,2.8vw,42px)} .bmx-head__t{max-width:620px} .bmx-head .bmx-lead{margin-top:14px} /* ---------- przyciski ---------- */ .bmx-btn{ --bg:var(--red);--fg:#fff;--bd:var(--red); position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;border:1px solid var(--bd);background:var(--bg);color:var(--fg); font-size:.735rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase; border-radius:999px;transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease); will-change:transform } /* FALLBACK (stare przegladarki): farba podnosi sie od dolu z falista krawedzia */ .bmx-btn::after{ content:"";position:absolute;left:-6%;right:-6%;bottom:-2px;height:210%;z-index:-1; background:var(--fill,var(--navy)); border-radius:48% 52% 0 0 / 16% 20% 0 0; transform:translateY(102%) rotate(-2deg); transition:transform .95s cubic-bezier(.62,.02,.3,1),border-radius .95s cubic-bezier(.62,.02,.3,1) } .bmx-btn:hover,.bmx-btn:focus-visible{transform:translateY(-2px);border-color:var(--fill,var(--navy))} .bmx-btn:hover::after,.bmx-btn:focus-visible::after{ transform:translateY(0) rotate(0deg);border-radius:0 } /* WLASCIWY EFEKT: pociagniecie pedzla. Maska jest 2x szersza od przycisku — lewa polowa to farba, prawa przezroczysta. Przesuwajac maske z prawej na lewa, postrzepiona krawedz przejezdza przez przycisk jak walek. Rozmiar maski jest staly, wiec krawedz sie nie deformuje. */ @supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){ .bmx-btn::after{ left:0;right:0;top:0;bottom:0;height:auto;border-radius:0;transform:none; /* matowa faktura farby — delikatne smugi po walku */ background: repeating-linear-gradient(112deg,rgba(255,255,255,.022) 0 2px,rgba(255,255,255,0) 2px 11px), var(--fill,var(--navy)); -webkit-mask-image:var(--brush); mask-image:var(--brush); -webkit-mask-size:300% 100%; mask-size:300% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:100% center; mask-position:100% center; transition:-webkit-mask-position 1.05s cubic-bezier(.42,.03,.25,1), mask-position 1.05s cubic-bezier(.42,.03,.25,1) } .bmx-btn:hover::after,.bmx-btn:focus-visible::after{ transform:none;border-radius:0; -webkit-mask-position:0% center; mask-position:0% center } } .bmx-btn--ghost{--bg:transparent;--fg:var(--navy);--bd:rgba(11,34,64,.35)} .bmx-btn--ghost:hover{color:#fff} /* bialy przycisk stoi na granacie/zdjeciu — zamalowujemy go CZERWIENIA, inaczej granat na granacie znikalby */ .bmx-btn--light{--bg:#fff;--fg:#0B2240;--bd:transparent;--fill:var(--red);color:#0B2240} .bmx-btn--light:hover{color:#fff} .bmx-btn--sm{padding:11px 22px;font-size:.68rem} /* uwaga: NIE animujemy tu `gap` – zmiana szerokosci elementu lamala linie przy hover. Rusza sie tylko strzalka, uklad zostaje nietkniety. */ .bmx-link{ display:inline-flex;align-items:center;gap:9px; font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--red); transition:color .35s var(--ease) } .bmx-link svg{flex-shrink:0;transition:transform .4s var(--ease)} .bmx-link:hover svg,a:hover>.bmx-link svg{transform:translateX(5px)} /* ================= REVEAL / ANIMACJE ================= */ .bmx [data-rv]{opacity:0;transition:opacity .95s var(--ease),transform 1.05s var(--ease),filter .95s var(--ease)} .bmx [data-rv="up"]{transform:translateY(34px)} .bmx [data-rv="fade"]{} .bmx [data-rv="left"]{transform:translateX(-40px)} .bmx [data-rv="right"]{transform:translateX(40px)} .bmx [data-rv="zoom"]{transform:scale(.94);filter:blur(4px)} .bmx [data-rv].is-in{opacity:1;transform:none;filter:none} /* maskowane wejście linii tekstu */ .bmx-mask{display:block;overflow:hidden} .bmx-mask>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)} .bmx-mask.is-in>span,.is-in>.bmx-mask>span{transform:none} /* ================= PASEK POSTĘPU ================= */ .bmx-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--red);z-index:1000;pointer-events:none} /* ================= TOPBAR ================= */ .bmx-top{background:var(--navy);color:rgba(255,255,255,.86);font-size:.72rem;letter-spacing:.06em} .bmx-top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding-block:8px} .bmx-tick{position:relative;height:20px;line-height:20px;overflow:hidden;flex:1;min-width:0} .bmx-tick li{ position:absolute;inset:0;display:flex;align-items:center;gap:9px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:0;visibility:hidden;transform:translateY(100%); transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s } .bmx-tick li.is-on{opacity:1;visibility:visible;transform:none} .bmx-tick li.is-out{opacity:0;visibility:visible;transform:translateY(-100%)} .bmx-tick b{color:#fff;font-weight:600} .bmx-top__r{display:flex;align-items:center;gap:18px;flex-shrink:0} .bmx-top__r a{opacity:.8;transition:opacity .3s} .bmx-top__r a:hover{opacity:1} .bmx-lang{display:flex;gap:7px;align-items:center} .bmx-lang a{font-weight:600;letter-spacing:.1em} .bmx-lang a[aria-current]{color:#fff;opacity:1} @media(max-width:820px){.bmx-top__r .bmx-hide-sm{display:none}} /* ================= HEADER ================= */ .bmx-hdr{position:sticky;top:0;z-index:900;background:rgba(252,250,246,.82);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid transparent;transition:border-color .4s,background .4s,box-shadow .4s} .bmx-hdr.is-stuck{border-color:var(--line-soft);box-shadow:0 6px 26px -20px rgba(11,34,64,.5)} .bmx-hdr__in{display:flex;align-items:center;gap:20px;min-height:78px;transition:min-height .4s var(--ease)} .bmx-hdr.is-stuck .bmx-hdr__in{min-height:66px} .bmx-logo{flex-shrink:0;display:block} .bmx-logo img{height:52px;width:auto;transition:height .4s var(--ease)} .bmx-hdr.is-stuck .bmx-logo img{height:44px} @media(max-width:520px){.bmx-logo img{height:44px}} /* nav rozciagniety na cala wysokosc naglowka — inaczej hover gubi sie w pustce miedzy linkiem a wysuwanym menu i panel zamyka sie w polowie ruchu myszy */ .bmx-hdr__in>nav{align-self:stretch;display:flex;margin-inline:auto} .bmx-nav{display:flex;align-items:stretch;gap:2px} .bmx-nav>li{display:flex;align-items:center} .bmx-nav>li>a,.bmx-nav>li>button{ display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:999px; font-size:.925rem;font-weight:500;color:var(--navy);position:relative; transition:background .35s var(--ease),color .35s var(--ease) } .bmx-nav>li>a::after,.bmx-nav>li>button::after{ content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--red); transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease) } .bmx-nav>li:hover>a::after,.bmx-nav>li:hover>button::after{transform:scaleX(1)} .bmx-nav>li:hover>a,.bmx-nav>li:hover>button{color:var(--red)} .bmx-nav .bmx-chev{transition:transform .35s var(--ease)} .bmx-nav li:hover .bmx-chev{transform:rotate(180deg)} .bmx-tools{display:flex;align-items:center;gap:6px;flex-shrink:0} .bmx-icon{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--navy); position:relative;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease) } .bmx-icon:hover{background:var(--cream);color:var(--red);transform:translateY(-1px)} .bmx-badge{ position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1 } .bmx-burger{display:none;width:42px;height:42px;border-radius:50%;place-items:center} .bmx-burger span{display:block;width:19px;height:1.5px;background:var(--navy);border-radius:2px;transition:transform .4s var(--ease),opacity .3s} .bmx-burger span+span{margin-top:5px} .bmx-burger.is-on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .bmx-burger.is-on span:nth-child(2){opacity:0} .bmx-burger.is-on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* --- mega menu --- */ .bmx-mega{ position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line-soft); box-shadow:0 30px 60px -40px rgba(11,34,64,.5); opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none; /* 140 ms zwloki przy zamykaniu — drobne zjechanie myszka nie zwija menu */ transition:opacity .3s var(--ease) .14s,transform .38s var(--ease) .14s,visibility .3s .14s } .bmx-hdr__in{position:static} .bmx-nav li.bmx-has-mega{position:static} .bmx-nav li.bmx-has-mega:hover .bmx-mega,.bmx-mega:hover{ opacity:1;visibility:visible;transform:none;pointer-events:auto; transition-delay:0s } .bmx-mega__in{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:34px;padding-block:40px 44px} .bmx-mega h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:14px} .bmx-mega li+li{margin-top:2px} .bmx-mega li a{display:block;padding:5px 0;font-size:.855rem;color:var(--navy);opacity:.82;transition:opacity .25s,transform .3s var(--ease),color .25s} .bmx-mega li a:hover{opacity:1;color:var(--red);transform:translateX(4px)} .bmx-mega__promo{background:var(--cream);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .bmx-mega__promo img{width:100%;height:150px;object-fit:cover;transition:transform .8s var(--ease)} .bmx-mega__promo:hover img{transform:scale(1.06)} .bmx-mega__promo div{padding:18px 20px 22px} .bmx-mega__promo p{font-size:.82rem;color:var(--muted);margin:6px 0 14px} @media(max-width:1180px){.bmx-mega__in{grid-template-columns:repeat(3,1fr)}.bmx-mega__promo{display:none}} /* --- mobilne menu --- */ .bmx-mob{ position:fixed;inset:0;z-index:950;background:var(--paper); transform:translateY(-100%);transition:transform .7s var(--ease); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:none } .bmx-mob.is-open{transform:none} .bmx-mob__in{padding:96px var(--pad) 60px;min-height:100%} .bmx-mob nav>ul>li{border-bottom:1px solid var(--line-soft)} .bmx-mob nav>ul>li>a{ display:block;padding:19px 0;font-family:var(--serif);font-size:1.55rem;font-weight:500;color:var(--navy); opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease) } .bmx-mob.is-open nav>ul>li>a{opacity:1;transform:none} .bmx-mob__cta{display:flex;flex-direction:column;gap:12px;margin-top:34px} .bmx-mob__meta{margin-top:34px;font-size:.82rem;color:var(--muted);line-height:1.9} .bmx-mob__meta a{color:var(--navy);font-weight:500} @media(max-width:1080px){ .bmx-nav{display:none} .bmx-burger{display:grid} .bmx-mob{display:block} .bmx-tools .bmx-icon--acc{display:none} } /* ================= HERO ================= */ .bmx-hero{position:relative;min-height:clamp(560px,88svh,900px);display:flex;align-items:center;overflow:clip;background:var(--cream)} .bmx-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden} /* Zdjecia hero leza na sobie. Widocznosc steruje MASKA — nowe zdjecie "zamalowuje" poprzednie skosnym, miekkim przetarciem, jak pociagniecie walka. */ .bmx-hero__bg img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%; transform:scale(1.1); -webkit-mask-image:linear-gradient(102deg,#000 0 42%,rgba(0,0,0,0) 58%); mask-image:linear-gradient(102deg,#000 0 42%,rgba(0,0,0,0) 58%); -webkit-mask-size:260% 100%; mask-size:260% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:100% 0; mask-position:100% 0; transition:-webkit-mask-position 1.25s cubic-bezier(.5,.03,.18,1), mask-position 1.25s cubic-bezier(.5,.03,.18,1), transform 9s var(--ease) } .bmx-hero__bg img.is-on{ -webkit-mask-position:0% 0; mask-position:0% 0; transform:scale(1) } /* brak maski (stare przegladarki) -> zwykly crossfade */ @supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){ .bmx-hero__bg img{opacity:0;transition:opacity 1s var(--ease),transform 9s var(--ease)} .bmx-hero__bg img.is-on{opacity:1} } /* Przeslona pod tekstem musi utrzymac czytelnosc takze przy ciemnych zdjeciach (Silhouette, Narragansett Green), stad mocne krycie do ~50% szerokosci. */ .bmx-hero__bg::after{ content:"";position:absolute;inset:0;z-index:5;pointer-events:none; background: linear-gradient(100deg, rgba(252,250,246,.985) 0%, rgba(252,250,246,.95) 36%, rgba(252,250,246,.78) 50%, rgba(252,250,246,.34) 66%, rgba(252,250,246,.04) 84%, rgba(252,250,246,0) 100%), linear-gradient(to top,rgba(252,250,246,.5),transparent 34%) } @media(max-width:820px){ .bmx-hero__bg::after{background:linear-gradient(180deg,rgba(252,250,246,.985) 0%,rgba(252,250,246,.93) 34%,rgba(252,250,246,.5) 60%,rgba(252,250,246,.2) 78%,rgba(252,250,246,.86) 100%)} .bmx-hero__bg img{object-position:center 62%} } .bmx-hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(60px,9vw,110px)} .bmx-hero__t{max-width:min(660px,58%)} @media(max-width:1080px){.bmx-hero__t{max-width:min(620px,80%)}} @media(max-width:820px){.bmx-hero__t{max-width:100%}} /* Miekka poswiata PRZYPIETA DO BLOKU TEKSTU — nie do szerokosci ekranu, wiec trzyma czytelnosc tak samo na 1280 jak na 2560 px i nad kazdym zdjeciem. Rozmyta plama swiatla + halo na samych literach. */ .bmx-hero__t{position:relative} .bmx-hero__t::before{ content:"";position:absolute;inset:-11% -30% -13% -16%;z-index:-1;pointer-events:none; background:linear-gradient(100deg, rgba(252,250,246,.97) 0%, rgba(252,250,246,.95) 46%, rgba(252,250,246,.86) 62%, rgba(252,250,246,.45) 78%, rgba(252,250,246,0) 96%); filter:blur(26px) } .bmx-hero h1,.bmx-hero__sub,.bmx-hero .bmx-eyebrow{ text-shadow: 0 0 2px rgba(252,250,246,.98), 0 0 12px rgba(252,250,246,.95), 0 0 34px rgba(252,250,246,.8) } .bmx-hero__sub{color:#2C3543} .bmx-hero h1{margin-bottom:26px} .bmx-hero__sub{font-size:clamp(.98rem,1.2vw,1.1rem);max-width:44ch;font-weight:300;margin-bottom:clamp(34px,4vw,52px)} .bmx-hero__sub b{font-weight:500;color:var(--navy)} .bmx-hero__cta{display:flex;flex-wrap:wrap;gap:12px} .bmx-hero__cta .bmx-btn{box-shadow:0 10px 26px -14px rgba(11,34,64,.45)} .bmx-hero__cta .bmx-btn--ghost{background:rgba(252,250,246,.78)} /* karta koloru roku */ .bmx-coty{ display:block; position:absolute;right:var(--pad);bottom:clamp(30px,5vw,62px);z-index:3;width:min(430px,88vw); background:#FFFDFA; border:1px solid rgba(255,255,255,.9);border-radius:var(--r);padding:22px 22px 20px; box-shadow:var(--shadow-l); /* stan bazowy = stan koncowy, animacja tylko go poprzedza. Dzieki temu karta jest widoczna nawet gdy animacja sie nie wykona. */ animation:bmx-coty-in 1.35s var(--ease) both } @keyframes bmx-coty-in{ 0%,26%{opacity:0;transform:translateY(28px) scale(.97)} 100%{opacity:1;transform:none} } .bmx-coty__top{display:flex;align-items:center;gap:16px;margin-bottom:18px} .bmx-coty__lbl{display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--red)} .bmx-coty__nm{display:block;font-family:var(--serif);font-weight:500;font-size:1.62rem;line-height:1.12;color:var(--navy);margin-top:6px;transition:color .5s var(--ease)} .bmx-coty__no{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.06em;margin-top:4px} .bmx-coty__chip{ width:62px;height:62px;border-radius:50%;flex-shrink:0;order:-1; box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 10px 22px -10px rgba(0,0,0,.55); transition:background .7s var(--ease) } /* --- klikalne probniki: zmieniaja zdjecie w tle hero --- */ /* flex zamiast sztywnych 8 kolumn — dziala dla 4, 6, 8, 10, 12... odcieni. min/max szerokosci pilnuja, zeby przy malej liczbie kolorow probniki nie urosly do absurdu, a przy duzej — zeby zawinely sie w rowny drugi rzad. */ .bmx-coty__grid{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px;--per:8} .bmx-coty__grid button{ flex:0 0 calc((100% - (var(--per) - 1) * 9px) / var(--per)); min-width:20px } .bmx-coty__grid button{ position:relative;aspect-ratio:1;border-radius:50%;background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); opacity:.72; transition:transform .45s var(--ease),box-shadow .5s var(--ease),opacity .4s var(--ease) } /* niewidoczne powiekszenie pola dotyku do ~46px — same kolka maja ~38px */ .bmx-coty__grid button::before{content:"";position:absolute;inset:-7px;border-radius:50%} .bmx-coty__grid button:hover{opacity:1;transform:translateY(-3px)} /* WYBRANY: pelne nasycenie, jasny pierscien WEWNATRZ probki (nie wychodzi poza kolko, wiec nie zderza sie z sasiadami) + delikatny cien pod spodem */ .bmx-coty__grid button[aria-selected="true"]{ opacity:1;transform:translateY(-3px); box-shadow: inset 0 0 0 3px #FFFDFA, inset 0 0 0 4.5px rgba(11,34,64,.55), 0 8px 16px -8px rgba(11,34,64,.65) } /* kropka pod aktywna probka — dodatkowy, czytelny znacznik */ .bmx-coty__grid button::after{ content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px;border-radius:50%; background:var(--navy);transform:translateX(-50%) scale(0);opacity:0; transition:transform .4s var(--ease),opacity .35s var(--ease) } .bmx-coty__grid button[aria-selected="true"]::after{transform:translateX(-50%) scale(1);opacity:1} @media(max-width:420px){.bmx-coty__grid{gap:7px}} @media(max-width:1080px){ /* hero przestaje być flexem – karta koloru roku układa się POD treścią */ .bmx-hero{display:block} .bmx-coty{ /* relative (nie static) – inaczej tlo hero z z-index:0 przykryloby karte */ position:relative;z-index:3;width:auto;max-width:420px; inset:auto; margin-inline:var(--pad);margin-bottom:clamp(48px,7vw,72px); animation:none;opacity:1;transform:none;box-shadow:var(--shadow-m) } } .bmx-scroll{ position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:9px; font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--navy); text-shadow:0 1px 10px rgba(252,250,246,.9); opacity:0;animation:bmx-fade 1s 1.9s forwards } @keyframes bmx-fade{to{opacity:1}} .bmx-scroll i{display:block;width:1px;height:42px;background:linear-gradient(var(--navy),transparent);position:relative;overflow:hidden} .bmx-scroll i::after{content:"";position:absolute;top:-42px;left:0;width:1px;height:42px;background:var(--red);animation:bmx-drop 2.2s var(--ease-io) infinite} @keyframes bmx-drop{0%{top:-42px}55%,100%{top:42px}} @media(max-width:1080px){.bmx-scroll{display:none}} /* ================= MARQUEE ================= */ .bmx-mq{background:var(--navy);color:rgba(255,255,255,.9);padding-block:15px;overflow:hidden;position:relative} .bmx-mq__t{display:flex;width:max-content;animation:bmx-mq 42s linear infinite} .bmx-mq:hover .bmx-mq__t{animation-play-state:paused} .bmx-mq__g{display:flex;align-items:center;flex-shrink:0} .bmx-mq__g span{ display:flex;align-items:center;gap:16px;padding-inline:26px;white-space:nowrap; font-size:.735rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500 } .bmx-mq__g span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0} @keyframes bmx-mq{to{transform:translateX(-50%)}} /* ================= SIATKA PRODUKTÓW ================= */ .bmx-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)} @media(max-width:1080px){.bmx-prods{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.bmx-prods{grid-template-columns:repeat(2,1fr);gap:12px}} .bmx-card{ background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;position:relative;isolation:isolate; transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s } .bmx-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-m);border-color:transparent} .bmx-card__img{ position:relative;aspect-ratio:1/1;display:grid;place-items:center;padding:12% 16%; background:var(--tint,var(--cream));overflow:hidden;transition:background .6s var(--ease) } .bmx-card__img img{ width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 16px 26px rgba(11,34,64,.16)); transition:transform .75s var(--ease) } .bmx-card:hover .bmx-card__img img{transform:scale(1.09) translateY(-4px)} .bmx-card__tag{ position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--navy); font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:999px; backdrop-filter:blur(6px) } .bmx-card__tag--red{background:var(--red);color:#fff} .bmx-card__b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:7px} .bmx-card__nm{font-size:.955rem;font-weight:600;color:var(--navy);line-height:1.32} .bmx-card__d{font-size:.815rem;color:var(--muted);font-weight:300;flex:1} .bmx-card__f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line-soft)} .bmx-card__p{font-size:1.06rem;font-weight:600;color:var(--navy);white-space:nowrap} .bmx-card__p small{font-size:.68rem;font-weight:400;color:var(--muted);display:block;letter-spacing:.04em} .bmx-card__go{ width:36px;height:36px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--navy);flex-shrink:0; transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease) } .bmx-card:hover .bmx-card__go{background:var(--red);color:#fff;transform:rotate(-45deg)} .bmx-card__lnk{position:absolute;inset:0;z-index:2} .bmx-prods__more{display:flex;justify-content:center;margin-top:clamp(26px,3vw,40px)} /* ================= COLOR TRENDS 2026 ================= */ .bmx-ct{background:var(--cream);position:relative;overflow:clip} .bmx-ct::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(60% 70% at 82% 22%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%); transition:background 1.1s var(--ease) } .bmx-ct>*{position:relative;z-index:1} .bmx-ct__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,72px);align-items:center} @media(max-width:940px){.bmx-ct__grid{grid-template-columns:1fr;gap:36px}} .bmx-ct__stage{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-l);background:var(--sand)} @media(max-width:940px){.bmx-ct__stage{aspect-ratio:4/3.4}} .bmx-ct__stage img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.07); transition:opacity 1s var(--ease),transform 1.6s var(--ease) } .bmx-ct__stage img.is-on{opacity:1;transform:scale(1)} .bmx-ct__cap{ position:absolute;left:18px;bottom:18px;right:18px;z-index:2; display:flex;align-items:center;gap:13px; background:#FFFDFA;border-radius:14px;padding:13px 17px;box-shadow:0 14px 34px -16px rgba(9,26,48,.55) } .bmx-ct__cap i{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background .9s var(--ease)} .bmx-ct__cap strong{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--navy);line-height:1.15} .bmx-ct__cap span{font-size:.7rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} /* auto-fit — liczba kolumn dostosowuje sie do liczby odcieni */ .bmx-sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-block:26px 30px} @media(max-width:520px){.bmx-sw{grid-template-columns:1fr}} @media(max-width:400px){.bmx-coty__grid button{min-width:18px}} .bmx-sw button{ display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:13px;text-align:left;width:100%; background:rgba(255,255,255,.55);border:1px solid transparent; transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease) } .bmx-sw button:hover{background:#fff;transform:translateX(3px)} .bmx-sw button[aria-selected="true"]{background:#fff;border-color:var(--line);box-shadow:var(--shadow-s)} .bmx-sw i{width:34px;height:34px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);position:relative;transition:transform .45s var(--ease)} .bmx-sw button[aria-selected="true"] i{transform:scale(1.08)} .bmx-sw button[aria-selected="true"] i::after{ content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--navy);opacity:.35 } .bmx-sw b{display:block;font-size:.87rem;font-weight:600;color:var(--navy);line-height:1.25} .bmx-sw small{font-size:.7rem;color:var(--muted);letter-spacing:.06em} /* ================= KOLEKCJE PALET ================= */ .bmx-rail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent} .bmx-rail::-webkit-scrollbar{height:4px} .bmx-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px} .bmx-pal{ display:flex;flex-direction:column; flex:0 0 clamp(230px,25vw,300px);scroll-snap-align:start; background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden; transition:transform .55s var(--ease),box-shadow .55s var(--ease) } .bmx-pal:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)} .bmx-pal__s{display:flex;height:118px;flex-shrink:0} .bmx-pal__s span{flex:1;transition:flex .6s var(--ease)} .bmx-pal:hover .bmx-pal__s span:hover{flex:2.1} .bmx-pal__b{display:block;padding:20px 22px 22px} .bmx-pal__b h4{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--navy);line-height:1.2} .bmx-pal__b p{font-size:.75rem;color:var(--muted);margin-top:5px;letter-spacing:.04em} .bmx-rail__nav{display:flex;gap:8px} .bmx-rnav{ position:relative;overflow:hidden;isolation:isolate; width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy); transition:color .4s var(--ease),border-color .4s var(--ease),transform .35s var(--ease) } .bmx-rnav::after{ content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:210%;z-index:-1; background:var(--navy);border-radius:48% 52% 0 0 / 20% 24% 0 0; transform:translateY(102%) rotate(-3deg); transition:transform .85s cubic-bezier(.62,.02,.3,1),border-radius .85s cubic-bezier(.62,.02,.3,1) } .bmx-rnav:hover{color:#fff;border-color:var(--navy);transform:translateY(-2px)} .bmx-rnav:hover::after{transform:translateY(0) rotate(0);border-radius:0} @supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){ .bmx-rnav::after{ left:0;right:0;top:0;bottom:0;height:auto;border-radius:0;transform:none; -webkit-mask-image:var(--brush); mask-image:var(--brush); -webkit-mask-size:300% 100%; mask-size:300% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:100% center; mask-position:100% center; transition:-webkit-mask-position .9s cubic-bezier(.42,.03,.25,1), mask-position .9s cubic-bezier(.42,.03,.25,1) } .bmx-rnav:hover::after{transform:none;-webkit-mask-position:0% center;mask-position:0% center} } /* ================= TECHNOLOGIE ================= Kinowy split: tekst na granacie, zdjecie wychodzi do prawej krawedzi i rozplywa sie w tle. Pod spodem pasek czterech technologii. */ .bmx-tech{background:var(--navy);color:#fff;position:relative;overflow:clip;padding-block:0} .bmx-tech .bmx-h2{color:#fff} .bmx-tech .bmx-lead{color:rgba(255,255,255,.7)} .bmx-tech .bmx-eyebrow{color:#F19DAF} .bmx-tech__split{position:relative;display:flex;align-items:center;min-height:clamp(420px,46vw,600px)} .bmx-tech__t{ position:relative;z-index:2; padding-block:clamp(56px,6.5vw,100px); max-width:min(560px,52%) } .bmx-tech__media{position:absolute;top:0;bottom:0;right:0;width:54%;z-index:0;overflow:hidden} .bmx-tech__media img{width:100%;height:100%;object-fit:cover;will-change:transform} .bmx-tech__media::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,var(--navy) 0%,var(--navy) 7%,rgba(11,34,64,.78) 22%,rgba(11,34,64,.3) 46%,rgba(11,34,64,0) 68%), linear-gradient(to top,rgba(11,34,64,.5),transparent 30%) } @media(max-width:940px){ /* na mobile: najpierw tekst, potem zdjecie (order), zdjecie na pelna szerokosc */ .bmx-tech__split{display:flex;flex-direction:column;min-height:0} .bmx-tech__t{max-width:100%;padding-block:clamp(48px,7vw,72px) clamp(28px,4vw,38px)} .bmx-tech__media{ order:2;position:relative;width:100vw;height:clamp(240px,52vw,380px); margin-left:50%;transform:translateX(-50%) } .bmx-tech__media::after{background:linear-gradient(to top,rgba(11,34,64,.8),rgba(11,34,64,.05) 60%)} } .bmx-tech__row{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.16); padding-bottom:clamp(40px,5vw,64px) } @media(max-width:900px){.bmx-tech__row{grid-template-columns:1fr 1fr}} @media(max-width:520px){.bmx-tech__row{grid-template-columns:1fr}} .bmx-tech__i{position:relative;padding:clamp(26px,3vw,38px) clamp(18px,2vw,30px) clamp(28px,3vw,38px)} .bmx-tech__i+.bmx-tech__i::before{ content:"";position:absolute;left:0;top:clamp(26px,3vw,38px);bottom:clamp(28px,3vw,38px); width:1px;background:rgba(255,255,255,.16) } @media(max-width:900px){ .bmx-tech__i:nth-child(odd)+.bmx-tech__i::before{content:""} .bmx-tech__i:nth-child(3)::before,.bmx-tech__i:nth-child(3)~.bmx-tech__i::before{top:0} .bmx-tech__i:nth-child(odd)::before{display:none} .bmx-tech__i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)} } @media(max-width:520px){ .bmx-tech__i::before{display:none} .bmx-tech__i+.bmx-tech__i{border-top:1px solid rgba(255,255,255,.16)} } /* czerwona krecha narastajaca przy najechaniu */ .bmx-tech__i::after{ content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--red); transition:width .6s var(--ease) } .bmx-tech__i:hover::after{width:100%} .bmx-tech__i svg{color:var(--red);margin-bottom:16px;transition:transform .5s var(--ease)} .bmx-tech__i:hover svg{transform:translateY(-3px) scale(1.06)} .bmx-tech__i h4{font-family:var(--serif);font-size:clamp(1.1rem,1.4vw,1.3rem);font-weight:500;margin-bottom:8px} .bmx-tech__i p{font-size:.83rem;color:rgba(255,255,255,.62);font-weight:300;line-height:1.65} /* ================= SALONY / KONTAKT ================= */ .bmx-find{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(16px,2vw,26px)} @media(max-width:940px){.bmx-find{grid-template-columns:1fr}} .bmx-tile{ position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;display:flex;align-items:flex-end; padding:clamp(24px,3vw,40px);color:#fff;isolation:isolate } .bmx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease)} /* Przyciemnienie tylko tam, gdzie stoi tekst — gora kafla zostaje czytelnym zdjeciem. */ .bmx-tile::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(7,21,40,.93) 0%,rgba(7,21,40,.78) 26%,rgba(7,21,40,.45) 52%,rgba(7,21,40,.12) 78%,rgba(7,21,40,0) 100%) } .bmx-tile:hover img{transform:scale(1.06)} .bmx-tile h3{ font-family:var(--serif);font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:500;line-height:1.16;margin-bottom:9px; text-shadow:0 1px 3px rgba(7,21,40,.9),0 2px 22px rgba(7,21,40,.75) } .bmx-tile p{ font-size:.88rem;color:rgba(255,255,255,.9);max-width:42ch;font-weight:300;margin-bottom:20px; text-shadow:0 1px 3px rgba(7,21,40,.85),0 1px 14px rgba(7,21,40,.6) } .bmx-tile .bmx-eyebrow{text-shadow:0 1px 3px rgba(7,21,40,.9)} .bmx-tile .bmx-eyebrow{color:#fff;opacity:.8} .bmx-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft);margin-top:clamp(40px,5vw,72px)} @media(max-width:900px){.bmx-usp{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.bmx-usp{grid-template-columns:1fr}} .bmx-usp__i{background:var(--paper);padding:26px 22px;display:flex;gap:15px;align-items:flex-start;transition:background .45s} .bmx-usp__i:hover{background:var(--cream)} .bmx-usp__i svg{color:var(--red);flex-shrink:0;margin-top:2px} .bmx-usp__i h4{font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:3px} .bmx-usp__i p{font-size:.79rem;color:var(--muted);font-weight:300;line-height:1.55} /* ================= MAGAZYN / BLOG ================= Miniatury artykułów mają wypalony tekst w grafice, dlatego tytuły są POD obrazkiem, nie na nim. */ .bmx-mag{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)} @media(max-width:1000px){.bmx-mag{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.bmx-mag{grid-template-columns:1fr}} .bmx-m{ display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-soft); border-radius:var(--r);overflow:hidden; transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s } .bmx-m:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:transparent} .bmx-m__f{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sand)} .bmx-m__f img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .bmx-m:hover .bmx-m__f img{transform:scale(1.06)} .bmx-m__tag{ position:absolute;top:13px;left:13px;z-index:2; background:rgba(255,255,255,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--navy); font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:999px; box-shadow:0 4px 14px -8px rgba(0,0,0,.5) } .bmx-m__tag--red{background:var(--red);color:#fff} .bmx-m__b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:9px} .bmx-m__b h4{ font-family:var(--serif);font-weight:500;font-size:clamp(1.06rem,1.3vw,1.22rem);line-height:1.28;color:var(--navy); transition:color .35s } .bmx-m:hover .bmx-m__b h4{color:var(--red)} .bmx-m__b p{font-size:.845rem;color:var(--muted);font-weight:300;line-height:1.6;flex:1} .bmx-m__go{ display:inline-flex;align-items:center;gap:9px;margin-top:6px; font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--red) } .bmx-m__go svg{flex-shrink:0;transition:transform .4s var(--ease)} .bmx-m:hover .bmx-m__go svg{transform:translateX(5px)} /* ================= HISTORIA ================= */ .bmx-story{background:var(--cream)} .bmx-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center} @media(max-width:940px){.bmx-story__grid{grid-template-columns:1fr;gap:36px}} .bmx-story__wrap{position:relative} .bmx-story__img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-l)} .bmx-story__img img{width:100%;height:100%;object-fit:cover;will-change:transform} .bmx-story__yr{ position:absolute;left:clamp(10px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:2; font-family:var(--serif);font-size:clamp(3rem,7vw,5.6rem);line-height:.9;font-weight:400; color:#fff;text-shadow:0 8px 34px rgba(9,26,48,.75);letter-spacing:-.02em;pointer-events:none } .bmx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)} @media(max-width:480px){.bmx-stats{grid-template-columns:1fr 1fr}} .bmx-stat b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.7vw,2.3rem);font-weight:500;color:var(--navy);line-height:1} .bmx-stat span{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px} /* ================= NEWSLETTER ================= Jasna karta w duchu reszty strony – bez granatu i kolorowej poswiaty. */ .bmx-nl{ background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r); padding:clamp(28px,3.6vw,52px);position:relative;overflow:hidden;box-shadow:var(--shadow-s) } .bmx-nl__strip{display:flex;position:absolute;inset:0 0 auto;height:4px} .bmx-nl__strip span{flex:1} .bmx-nl__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.5vw,56px);align-items:center} @media(max-width:860px){.bmx-nl__in{grid-template-columns:1fr;gap:26px}} .bmx-nl h3{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:400;line-height:1.18;color:var(--navy)} .bmx-nl h3 em{font-style:italic;color:var(--red)} .bmx-nl p{color:var(--muted);font-size:.9rem;font-weight:300;margin-top:12px;max-width:46ch} .bmx-nl form{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* --- segmentacja zapisu: dzieli subskrybentow na listy --- */ .bmx-seg{flex:1 1 100%;margin-bottom:2px} .bmx-seg__lbl{display:block;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:9px} .bmx-seg__opts{display:flex;flex-wrap:wrap;gap:7px} .bmx-seg input{position:absolute;opacity:0;width:0;height:0} .bmx-seg label{cursor:pointer} .bmx-seg__opts span{ display:inline-block;padding:8px 15px;border-radius:999px; border:1px solid var(--line);background:var(--cream); font-size:.78rem;color:var(--muted); transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease) } .bmx-seg__opts label:hover span{border-color:rgba(11,34,64,.3);color:var(--navy)} .bmx-seg input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff} .bmx-seg input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px} /* --- pole e-mail: animowana obwodka, plywajaca etykieta, wskaznik poprawnosci --- */ .bmx-fld{position:relative;flex:1;min-width:220px;isolation:isolate;border-radius:999px} .bmx-fld::before{ content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1; background:linear-gradient(90deg,var(--red),#0B2240,var(--red),#0B2240); background-size:300% 100%;opacity:0;transition:opacity .45s var(--ease) } .bmx-fld:hover::before{opacity:.32} .bmx-fld:focus-within::before{opacity:1;animation:bmx-ring 5s linear infinite} @keyframes bmx-ring{to{background-position:300% 0}} .bmx-fld.is-valid:focus-within::before{background:linear-gradient(90deg,#1E7A4B,#2FA469,#1E7A4B,#2FA469);background-size:300% 100%} .bmx-fld input{ width:100%;background:var(--cream);border:1px solid var(--line);color:var(--ink); padding:24px 46px 10px 21px;border-radius:999px;font-size:.95rem;font-family:inherit;line-height:1.2; transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease) } .bmx-fld input:focus{outline:0;background:#fff;border-color:transparent;box-shadow:0 10px 26px -16px rgba(11,34,64,.55)} .bmx-fld input::placeholder{color:transparent} .bmx-fld__lbl{ position:absolute;left:22px;top:50%;transform:translateY(-50%);transform-origin:left center; color:#9AA0A9;font-size:.92rem;pointer-events:none;white-space:nowrap; transition:transform .4s var(--ease),color .4s var(--ease),letter-spacing .4s var(--ease) } .bmx-fld input:focus+.bmx-fld__lbl, .bmx-fld input:not(:placeholder-shown)+.bmx-fld__lbl{ transform:translateY(-118%) scale(.66);color:var(--red);letter-spacing:.12em } .bmx-fld.is-valid input:focus+.bmx-fld__lbl, .bmx-fld.is-valid input:not(:placeholder-shown)+.bmx-fld__lbl{color:#1E7A4B} /* kropka -> ptaszek */ .bmx-fld__dot{ position:absolute;right:19px;top:50%;width:9px;height:9px;border-radius:50%;background:#D6D2C8; transform:translateY(-50%);pointer-events:none; transition:background .4s var(--ease),transform .4s var(--ease),opacity .3s var(--ease) } .bmx-fld.is-typing .bmx-fld__dot{background:var(--red);transform:translateY(-50%) scale(1.25)} .bmx-fld.is-valid .bmx-fld__dot{opacity:0;transform:translateY(-50%) scale(.3)} .bmx-fld__ok{ position:absolute;right:15px;top:50%;transform:translateY(-50%) scale(.5);opacity:0; color:#1E7A4B;pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease) } .bmx-fld.is-valid .bmx-fld__ok{opacity:1;transform:translateY(-50%) scale(1)} .bmx-fld__ok path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .55s var(--ease) .08s} .bmx-fld.is-valid .bmx-fld__ok path{stroke-dashoffset:0} .bmx-fld.is-bad{animation:bmx-shake .5s var(--ease)} @keyframes bmx-shake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)} 100%{transform:none} } /* --- przycisk: tekst -> spinner -> ptaszek --- */ .bmx-nl__btn{min-width:172px;overflow:hidden} .bmx-nl__btn>span,.bmx-nl__btn>svg{transition:opacity .3s var(--ease),transform .35s var(--ease)} .bmx-nl__btn .bmx-nl__t{display:block} .bmx-nl__spin,.bmx-nl__chk{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0} .bmx-nl__spin{ width:19px;height:19px;border-radius:50%; border:2px solid rgba(255,255,255,.32);border-top-color:#fff } .bmx-nl__btn.is-loading .bmx-nl__t{opacity:0;transform:translateY(-9px)} .bmx-nl__btn.is-loading .bmx-nl__spin{opacity:1;animation:bmx-spin .7s linear infinite} @keyframes bmx-spin{to{rotate:360deg}} .bmx-nl__btn.is-done{background:#1E7A4B;border-color:#1E7A4B;pointer-events:none} .bmx-nl__btn.is-done::after{transform:translateY(120%) rotate(-2deg)} .bmx-nl__btn.is-done .bmx-nl__t,.bmx-nl__btn.is-done .bmx-nl__spin{opacity:0;animation:none} .bmx-nl__btn.is-done .bmx-nl__chk{opacity:1} .bmx-nl__chk path{stroke-dasharray:22;stroke-dashoffset:22} .bmx-nl__btn.is-done .bmx-nl__chk path{transition:stroke-dashoffset .5s var(--ease) .1s;stroke-dashoffset:0} /* --- panel podziekowania --- */ .bmx-nl__wrap{position:relative} .bmx-nl__wrap.is-sent .bmx-nl__form{opacity:0;transform:translateY(-10px);pointer-events:none} .bmx-nl__form{transition:opacity .5s var(--ease),transform .5s var(--ease)} .bmx-nl__done{ position:absolute;inset:0;display:flex;align-items:center;gap:15px; opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s } .bmx-nl__wrap.is-sent .bmx-nl__done{opacity:1;transform:none} .bmx-nl__done i{ width:44px;height:44px;border-radius:50%;background:#1E7A4B;color:#fff;flex-shrink:0; display:grid;place-items:center } .bmx-nl__done strong{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--navy)} .bmx-nl__done span{font-size:.84rem;color:var(--muted);font-weight:300} .bmx-nl__ok{font-size:.72rem;color:var(--muted);margin-top:14px;line-height:1.6} .bmx-nl__ok a{color:var(--navy);text-decoration:underline;text-underline-offset:3px} /* ================= FOOTER ================= */ .bmx-ft{background:var(--navy);color:rgba(255,255,255,.68);padding-top:clamp(54px,6vw,86px);font-size:.855rem;font-weight:300} .bmx-ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px);padding-bottom:clamp(40px,5vw,64px)} @media(max-width:940px){.bmx-ft__grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.bmx-ft__grid{grid-template-columns:1fr;gap:32px}} .bmx-ft__logo img{height:52px;width:auto;margin-bottom:22px} .bmx-ft p{line-height:1.75;max-width:40ch} .bmx-ft h5{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:16px} .bmx-ft li a{display:inline-block;padding:4px 0;transition:color .3s,transform .35s var(--ease)} .bmx-ft li a:hover{color:#fff;transform:translateX(4px)} .bmx-ft__soc{display:flex;gap:10px;margin-top:24px} .bmx-ft__soc a{ width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff; transition:background .35s,border-color .35s,transform .35s var(--ease) } .bmx-ft__soc a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)} .bmx-ft__addr{color:#fff;font-weight:400;line-height:1.9} .bmx-ft__addr a{color:rgba(255,255,255,.72);font-weight:300;transition:color .3s} .bmx-ft__addr a:hover{color:#fff} .bmx-ft__addr>a:first-child{color:#fff;font-weight:400;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)} /* czerwien na granacie jest nieczytelna — linki w stopce sa biale */ .bmx-ft .bmx-link{color:#fff} .bmx-ft .bmx-link:hover{color:#F19DAF} .bmx-ft__bar{ border-top:1px solid rgba(255,255,255,.12);padding-block:22px; display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;font-size:.755rem;color:rgba(255,255,255,.45) } .bmx-ft__bar nav{display:flex;flex-wrap:wrap;gap:10px 22px} .bmx-ft__bar a:hover{color:#fff} /* ================= DO GÓRY ================= */ .bmx-up{ position:fixed;right:22px;bottom:22px;z-index:800;width:46px;height:46px;border-radius:50%; background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-m); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .35s } .bmx-up.is-on{opacity:1;visibility:visible;transform:none} .bmx-up:hover{background:var(--red)} /* ================= REDUCED MOTION ================= */ @media(prefers-reduced-motion:reduce){ .bmx *,.bmx *::before,.bmx *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important } .bmx [data-rv]{opacity:1!important;transform:none!important;filter:none!important} .bmx-mask>span{transform:none!important} .bmx-coty,.bmx-scroll{opacity:1!important;transform:none!important} }