/* ========================================================================== TRAFNI — podstrony managerskie System layoutu + warstwa efektów. Wersja 2: układ redakcyjny. ZAŁOŻENIA WIZUALNE - Duże, pełnoekranowe kadry. Zdjęcie jest elementem kompozycji, nie ozdobą. - Asymetria: siatka 12-kolumnowa z celowymi przesunięciami; bloki wychodzą poza kontener w lewo albo w prawo. - Brak dekoracyjnych siatek i kratek w tle — tło robią zdjęcia i światło. - Paleta, typografia i „temperatura" marki jak na stronie głównej. ZASADY WARSTWY EFEKTÓW (te same co w efekty.css strony głównej) 1. Stany początkowe odsłon istnieją WYŁĄCZNIE pod klasą .fx na . Klasę nadaje mikroskrypt w ; bez JS i przy prefers-reduced-motion nie powstaje, więc treść jest od razu widoczna. 2. Wycieranie przez mask-image, nigdy przez clip-path. 3. Animujemy tylko transform i opacity. ========================================================================== */ /* ----------------------------------------------------------------- tokeny */ :root{ color-scheme: light; --cream:#FAF7F2; --cream-2:#F3EDE4; --sand:#E2D0BA; --sand-soft:#EFE4D4; --plum:#3A1D3F; --plum-2:#542448; --plum-deep:#2A1330; --plum-ink:#1A0A20; --gold:#D4A945; --gold-2:#E9C878; --gold-3:#F3E0AE; --ink:#2E2430; --ink-soft:#6E6070; --line:#E7DED2; --line-2:#D6C8B6; --display:"Gabarito","Trebuchet MS",system-ui,sans-serif; --serif:"Newsreader",Georgia,"Times New Roman",serif; --util:"Archivo","Helvetica Neue",Arial,sans-serif; --hand:"Caveat","Segoe Script",cursive; --maxw:1240px; --gutter:clamp(20px,5vw,72px); --navh:72px; --ease:cubic-bezier(.22,.68,.24,1); --out:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--util); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} p{margin:0} [hidden]{display:none!important} h1,h2,h3,h4,h5{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; line-height:1.04; margin:0; } ::selection{background:var(--gold);color:var(--plum-deep)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--plum-deep);padding:.8em 1.2em;font-weight:600;text-decoration:none} .skip:focus{left:12px;top:12px} /* --------------------------------------------------------------- layout */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .wrap--wide{max-width:1400px} .sec{position:relative;padding-block:clamp(70px,9.5vw,130px)} .sec--tight{padding-block:clamp(48px,6.5vw,86px)} .sec--sand{background:var(--sand-soft)} .sec--cream2{background:var(--cream-2)} .sec--dark{background:var(--plum-deep);color:var(--cream)} .sec--dark h2,.sec--dark h3{color:#fff} /* siatka 12 kolumn — baza wszystkich asymetrii */ .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)} /* ------------------------------------------------------------ typografia */ .eyebrow{ font-family:var(--util);font-size:.7rem;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft); display:flex;align-items:center;gap:.8em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none} .eyebrow--light{color:rgba(250,247,242,.6)} .h-xl{font-size:clamp(2.3rem,6.2vw,4.6rem);line-height:.98;letter-spacing:-.04em} .h-lg{font-size:clamp(1.95rem,4.4vw,3.2rem);line-height:1.02} .h-md{font-size:clamp(1.45rem,2.8vw,2.1rem)} h2 em,h1 em,h3 em{font-style:normal;color:var(--gold)} .sec--dark h2 em,.ph h1 em,.band em{color:var(--gold-2)} /* serif kursywą wewnątrz nagłówka — kontrast, który nadaje ton redakcyjny */ .ser{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.02em} .lead{font-size:clamp(1.04rem,1.45vw,1.2rem);line-height:1.62;color:var(--ink-soft);max-width:60ch} .lead--light{color:rgba(250,247,242,.76)} .note{font-family:var(--hand);font-size:clamp(1.3rem,2.2vw,1.72rem);color:var(--plum-2);display:inline-block;transform:rotate(-1.6deg)} .rule{height:1px;background:var(--gold);transform-origin:left center;margin-block:clamp(22px,3vw,32px)} /* wielka cyfra jako element graficzny */ .numeral{ font-family:var(--display);font-weight:800;letter-spacing:-.06em;line-height:.74; font-size:clamp(5rem,13vw,12rem);color:var(--sand); pointer-events:none;user-select:none; } .sec--dark .numeral{color:rgba(250,247,242,.09)} /* -------------------------------------------------------------- przyciski */ .btn{ position:relative;display:inline-flex;align-items:center;gap:.65em; font-family:var(--util);font-weight:600;font-size:.95rem; padding:1em 1.7em;border-radius:999px;border:1.5px solid transparent; text-decoration:none;cursor:pointer; transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease),transform .3s var(--out); } .btn--gold{background:var(--gold);color:var(--plum-deep)} .btn--gold:hover{background:var(--gold-2);box-shadow:0 14px 34px -16px rgba(212,169,69,.9)} .btn--plum{background:var(--plum);color:var(--cream)} .btn--plum:hover{background:var(--plum-2);box-shadow:0 14px 34px -16px rgba(58,29,63,.75)} .btn--light{border-color:rgba(250,247,242,.34);color:var(--cream)} .btn--light:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(212,169,69,.08)} .btn--dark{border-color:var(--line-2);color:var(--ink)} .btn--dark:hover{border-color:var(--plum);background:var(--plum);color:var(--cream)} .btn--lg{padding:1.14em 2em;font-size:1rem} .btn .arw{transition:transform .24s var(--ease)} .btn:hover .arw{transform:translateX(5px)} /* link tekstowy ze strzałką */ .alink{ display:inline-flex;align-items:center;gap:.55em;text-decoration:none; font-weight:600;font-size:.9rem;color:var(--plum-2); padding-bottom:.25em;border-bottom:1px solid rgba(84,36,72,.25); transition:color .22s var(--ease),border-color .22s var(--ease); } .alink i{font-style:normal;transition:transform .24s var(--ease)} .alink:hover{color:var(--plum);border-color:var(--gold)} .alink:hover i{transform:translateX(4px)} /* ------------------------------------------------------------ nawigacja */ .nav{ position:fixed;inset:0 0 auto 0;z-index:70;padding-block:16px; transition:background-color .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease); } .nav.solid{ background:rgba(250,247,242,.92);backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 var(--line);padding-block:8px; } .nav .wrap{max-width:1400px} .nav__in{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)} .brand{position:relative;flex:none;display:block;width:clamp(116px,12vw,150px);line-height:0} .brand img{width:100%;transition:opacity .4s var(--ease)} .brand .lg-dark{position:absolute;inset:0;opacity:0} .nav.solid .brand .lg-light{opacity:0} .nav.solid .brand .lg-dark{opacity:1} .nav__links{display:flex;align-items:center;gap:clamp(9px,1.25vw,17px);margin-left:auto} .nav__links a{ position:relative;font-size:.85rem;font-weight:500;text-decoration:none;flex:none;white-space:nowrap; color:rgba(250,247,242,.84);padding:.4em 0;transition:color .22s var(--ease); } .nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold); transform:scaleX(0);transform-origin:right center;transition:transform .32s var(--ease); } .nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left center} .nav__links a:hover,.nav__links a.is-active{color:var(--gold-2)} .nav.solid .nav__links a{color:var(--ink)} .nav.solid .nav__links a:hover,.nav.solid .nav__links a.is-active{color:var(--plum)} .nav .btn{padding:.72em 1.3em;font-size:.86rem;flex:none;white-space:nowrap} .nav__bar{ position:absolute;left:0;bottom:0;height:2px;width:100%; background:linear-gradient(90deg,var(--gold),var(--gold-3)); transform:scaleX(0);transform-origin:left center;opacity:0;transition:opacity .3s var(--ease); } .nav.solid .nav__bar{opacity:1} .burger{margin-left:auto;display:none;width:44px;height:38px;align-items:center;justify-content:center;gap:5px;flex-direction:column;background:none;border:0;cursor:pointer;padding:0} .burger span{display:block;width:22px;height:2px;background:var(--cream);border-radius:2px;transition:background .3s var(--ease),transform .3s var(--ease),opacity .2s var(--ease)} .nav.solid .burger span{background:var(--ink)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile{display:none;background:var(--plum-ink);border-radius:4px;margin-top:12px;padding:14px 22px 18px} .mobile.open{display:block} .mobile a{display:block;padding:.7em 0;text-decoration:none;color:rgba(250,247,242,.85);font-weight:500;border-bottom:1px solid rgba(250,247,242,.1)} .mobile a:last-of-type{border-bottom:0} .totop{ position:fixed;right:clamp(14px,2.5vw,30px);bottom:clamp(14px,2.5vw,30px);z-index:65; width:54px;height:54px;border:0;padding:0;cursor:pointer;background:var(--plum);border-radius:50%; display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .2s var(--ease); } .totop.on{opacity:1;transform:none;pointer-events:auto} .totop:hover{background:var(--plum-2)} .totop svg{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg)} .totop circle{fill:none;stroke-width:2} .totop .tt-bg{stroke:rgba(250,247,242,.18)} .totop .tt-fg{stroke:var(--gold);stroke-linecap:round} .totop i{font-style:normal;color:var(--cream);font-size:1.05rem;line-height:1;position:relative;z-index:1} /* ===================================================== HERO PODSTRONY ==== */ .ph{ position:relative;background:var(--plum-ink);color:var(--cream); overflow:hidden;isolation:isolate; min-height:min(92vh,880px); display:flex;flex-direction:column;justify-content:flex-end; padding-top:calc(var(--navh) + 28px); padding-bottom:clamp(42px,6vw,76px); } /* zdjęcie: panel wychodzący poza prawą krawędź, wyższy niż kolumna tekstu */ .ph__media{ position:absolute;z-index:0;top:0;bottom:0; right:0;left:38%; overflow:hidden; } .ph__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.82) contrast(1.04)} .ph--flip .ph__media{left:0;right:40%} /* przyciemnienie utrzymujące zdjęcie w temperaturze marki i czytelność tekstu */ .ph__tint{ position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg,var(--plum-ink) 0%,rgba(26,10,32,.96) 22%,rgba(26,10,32,.58) 54%,rgba(26,10,32,.34) 100%), linear-gradient(0deg,rgba(26,10,32,.8) 0%,rgba(26,10,32,.05) 62%), linear-gradient(0deg,rgba(58,29,63,.34),rgba(58,29,63,.34)); } .ph--flip .ph__tint{ background: linear-gradient(270deg,var(--plum-ink) 0%,rgba(26,10,32,.96) 22%,rgba(26,10,32,.58) 54%,rgba(26,10,32,.34) 100%), linear-gradient(0deg,rgba(26,10,32,.8) 0%,rgba(26,10,32,.05) 62%), linear-gradient(0deg,rgba(58,29,63,.34),rgba(58,29,63,.34)); } .ph__glow{ position:absolute;z-index:0;pointer-events:none; width:min(58vw,720px);aspect-ratio:1;left:-16vw;top:-18vw; background:radial-gradient(circle at 50% 50%,rgba(212,169,69,.24),rgba(212,169,69,0) 66%); } .ph__grain{ position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* pionowa szyna z etykietą — detal, który odróżnia podstronę od strony głównej */ .ph__rail{ position:absolute;z-index:3;left:clamp(14px,2.2vw,30px);top:calc(var(--navh) + 40px);bottom:clamp(42px,6vw,76px); display:flex;flex-direction:column;align-items:center;gap:16px; } .ph__rail span{ writing-mode:vertical-rl;transform:rotate(180deg); font-size:.64rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase; color:rgba(250,247,242,.42);white-space:nowrap; } .ph__rail i{display:block;width:1px;flex:1;background:linear-gradient(rgba(250,247,242,.05),rgba(212,169,69,.6))} .ph__in{position:relative;z-index:3;width:100%} .ph--flip .ph__in{display:grid;justify-items:end} .ph--flip .ph__in > *{width:min(100%,680px)} .ph--flip .ph__rail{left:auto;right:clamp(14px,2.2vw,30px)} .ph--flip .ph__rail span{transform:none;writing-mode:vertical-rl} .ph--flip .ph__glow{left:auto;right:-16vw} .ph__crumbs{margin-bottom:clamp(26px,4vw,44px)} .ph h1{ font-size:clamp(2rem,4.3vw,3.5rem); line-height:1;letter-spacing:-.035em;font-weight:800;color:#fff; max-width:19ch;margin:0 0 clamp(20px,2.6vw,30px); text-shadow:0 2px 40px rgba(26,10,32,.5); } .ph__lead{ font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.6; color:rgba(250,247,242,.8);max-width:46ch; } .ph__lead + .ph__lead{margin-top:12px;color:rgba(250,247,242,.6)} .ph__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(26px,3.2vw,38px)} /* półka pod hero: pasek faktów zachodzący na zdjęcie, przesunięty w prawo */ .shelf{position:relative;z-index:4;margin-top:clamp(34px,5vw,58px)} .shelf__in{ background:var(--cream);color:var(--ink); display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--line-2); border:1px solid var(--line-2); margin-left:clamp(0px,8vw,150px); /* asymetryczne przesunięcie */ margin-right:0; } .ph--flip .shelf__in{margin-left:0;margin-right:clamp(0px,8vw,150px)} .shelf__it{background:var(--cream);padding:clamp(16px,2vw,24px) clamp(16px,2vw,26px)} .shelf__it b{display:block;font-family:var(--util);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .shelf__it span{font-family:var(--display);font-weight:600;font-size:clamp(.95rem,1.25vw,1.08rem);letter-spacing:-.02em;line-height:1.25;color:var(--ink)} /* pasek „na tej stronie" */ .toc{background:var(--plum-ink);border-bottom:1px solid rgba(250,247,242,.1);position:relative;z-index:5} .toc__in{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;padding-block:13px} .toc__lbl{font-size:.63rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-right:4px} .toc a{font-size:.85rem;color:rgba(250,247,242,.68);text-decoration:none;padding:.3em 0;border-bottom:1px solid transparent;transition:color .22s var(--ease),border-color .22s var(--ease)} .toc a:hover{color:var(--gold-2);border-color:var(--gold)} .crumbs{font-size:.76rem;color:rgba(250,247,242,.5)} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em} .crumbs li::after{content:"/";margin-left:.5em;color:rgba(250,247,242,.26)} .crumbs li:last-child::after{content:none} .crumbs a{text-decoration:none;border-bottom:1px solid rgba(250,247,242,.2)} .crumbs a:hover{color:var(--gold-2);border-color:var(--gold)} /* ========================================================= KOMPOZYCJE ==== */ /* nagłówek sekcji — wariant asymetryczny: etykieta w wąskiej kolumnie z lewej */ .head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,3vw,44px);align-items:start} .head__side{padding-top:.45em} .head__main h2{max-width:17ch} .head__main .lead{margin-top:clamp(16px,2vw,22px)} .head--wide .head__main h2{max-width:24ch} /* zdjęcie w kadrze ze złotą ramką z offsetem */ .shot{position:relative;margin:0;isolation:isolate} .shot picture{display:block;position:relative} .shot img{width:100%;border-radius:2px;position:relative;z-index:1} .shot--frame picture::after, .shot--frame-l picture::after{content:"";position:absolute;z-index:0;border:1px solid var(--gold);pointer-events:none} .shot--frame picture::after{inset:20px -20px -20px 20px} .shot--frame-l picture::after{inset:20px 20px -20px -20px} .shot figcaption{margin-top:18px;font-size:.82rem;color:var(--ink-soft);line-height:1.5;max-width:40ch} /* zdjęcie wychodzące poza kontener */ .bleed-r{margin-right:calc(-1 * (max(0px,(100vw - var(--maxw)) / 2) + var(--gutter)))} .bleed-l{margin-left:calc(-1 * (max(0px,(100vw - var(--maxw)) / 2) + var(--gutter)))} /* pełnoekranowy pas ze zdjęciem i cytatem */ .band{ position:relative;isolation:isolate;overflow:hidden; min-height:min(74vh,660px);display:grid;align-items:center; color:var(--cream);background:var(--plum-ink); } .band__media{position:absolute;inset:0;z-index:0} .band__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%} .band__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(85deg,rgba(26,10,32,.94) 0%,rgba(26,10,32,.8) 38%,rgba(26,10,32,.42) 72%,rgba(26,10,32,.3) 100%); } .band__in{position:relative;z-index:2;padding-block:clamp(56px,8vw,96px)} .band__q{ font-family:var(--serif);font-weight:300;font-style:italic; font-size:clamp(1.55rem,3.4vw,2.85rem);line-height:1.22;letter-spacing:-.02em; color:#fff;max-width:22ch; } .band__q em{font-style:italic;color:var(--gold-2)} .band__foot{margin-top:clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center} .band__meta{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.5)} /* ------------------------------------------- macierz „kogo szukamy" (SVG) */ .mx{margin:0;position:relative} .mx svg{width:100%;height:auto;display:block;overflow:visible} .mx__cap{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .mx text{font-family:var(--util)} .mx .mx-ax{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(250,247,242,.5)} .mx .mx-lb{font-size:11px;fill:rgba(250,247,242,.62)} .mx .mx-on-t{font-family:var(--display);font-weight:800;font-size:16px;fill:#2A1330} .mx .mx-on-s{font-size:11px;fill:rgba(42,19,48,.78)} .mx rect.cell{fill:rgba(250,247,242,.035);stroke:rgba(250,247,242,.16)} .mx rect.on{fill:var(--gold);stroke:var(--gold)} .fx .mx rect.on{transform-box:fill-box;transform-origin:center;transform:scale(.86);opacity:0} .fx .mx.is-in rect.on{transition:transform .8s var(--out) .25s,opacity .6s var(--out) .25s;transform:none;opacity:1} .mx--light .mx-ax{fill:var(--ink-soft)} .mx--light .mx-lb{fill:var(--ink-soft)} .mx--light rect.cell{fill:rgba(46,36,48,.03);stroke:var(--line-2)} /* ------------------------------------------------- profil wag (radar SVG) */ .radar{margin:0} .radar__cap{font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .radar__sub{font-size:.8rem;color:rgba(250,247,242,.5);margin-bottom:16px;max-width:36ch;line-height:1.5} .radar svg{width:100%;height:auto;display:block;overflow:visible} .radar .web{fill:none;stroke:rgba(250,247,242,.14)} .radar .spoke{stroke:rgba(250,247,242,.12)} .radar .area{fill:rgba(212,169,69,.26);stroke:var(--gold);stroke-width:2;stroke-linejoin:round} .radar .dot{fill:var(--gold-2)} .radar text{font-family:var(--util);font-size:10.5px;fill:rgba(250,247,242,.72)} .radar text.hi{fill:var(--gold-2);font-weight:600} .fx .radar .area{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)} .fx .radar.is-in .area{transition:transform 1s var(--out) .15s,opacity .7s var(--out) .15s;opacity:1;transform:none} .fx .radar .dot{opacity:0} .fx .radar.is-in .dot{transition:opacity .5s var(--out) .8s;opacity:1} /* -------------------------------------------- przełącznik poziomu (tabs) */ .sw__tabs{display:inline-grid;grid-auto-flow:column;position:relative;background:var(--cream-2);border:1px solid var(--line-2);border-radius:999px;padding:5px;gap:4px} .sec--sand .sw__tabs{background:var(--cream)} .sw__pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--plum);transition:transform .5s var(--out),width .5s var(--out);z-index:0} .sw__tab{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-family:var(--util);font-weight:600;font-size:.92rem;color:var(--ink-soft);padding:.76em 1.6em;border-radius:999px;transition:color .3s var(--ease);white-space:nowrap} .sw__tab[aria-selected="true"]{color:var(--cream)} .sw__tab:hover{color:var(--plum)} .sw__tab[aria-selected="true"]:hover{color:var(--cream)} .sw__panels{position:relative;margin-top:clamp(30px,4vw,46px)} .sw__panel[hidden]{display:none!important} .sw__panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(26px,4vw,64px);align-items:center} .sw__panel h3{font-size:clamp(1.55rem,3.1vw,2.3rem);margin-bottom:18px;max-width:17ch} .sw__body p{color:var(--ink-soft);line-height:1.68;max-width:52ch} .sw__body p + p{margin-top:14px} .sw__body .btn{margin-top:28px} .sw__panel.is-in > *{animation:swIn .55s var(--out) both} .sw__panel.is-in > *:nth-child(2){animation-delay:.1s} @keyframes swIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .sw__stage{background:var(--plum-deep);padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden} .sw__stage::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 0%,rgba(212,169,69,.16),transparent 70%);pointer-events:none} /* ------------------------------------------------ indeks 14 specjalizacji */ .finder{ margin-top:clamp(26px,3.4vw,40px);display:flex;flex-wrap:wrap;gap:14px 24px; align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--line-2); } .finder__box{position:relative;flex:1 1 380px;max-width:520px} .finder__box input{ width:100%;font-family:var(--util);font-size:1rem;color:var(--ink);background:var(--cream); border:1px solid var(--line-2);padding:.95em 2.6em .95em 2.9em;border-radius:999px; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .finder__box input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,169,69,.16)} .finder__box input::placeholder{color:var(--ink-soft);opacity:.72} .finder__ico{position:absolute;left:1.1em;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;color:var(--ink-soft)} .finder__clear{position:absolute;right:.7em;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;background:var(--sand-soft);color:var(--ink);line-height:1;font-size:.9rem;display:none;place-items:center} .finder__clear.on{display:grid} .finder__out{font-size:.86rem;color:var(--ink-soft);display:flex;align-items:center;gap:.6em} .finder__out b{font-family:var(--display);font-size:1.1rem;color:var(--plum);font-weight:700} .finder__hint{font-size:.82rem;color:var(--ink-soft);flex:1 1 100%} .finder__hint button{border:0;background:none;padding:0 .2em;cursor:pointer;font:inherit;color:var(--plum-2);text-decoration:underline;text-underline-offset:2px} .finder__hint button:hover{color:var(--gold)} .idx{margin-top:clamp(30px,4vw,50px);display:flex;flex-direction:column;gap:clamp(34px,4.6vw,60px)} .idx__group{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(18px,3vw,46px);align-items:start} .idx__group.is-empty{display:none} .idx__gh{position:sticky;top:calc(var(--navh) + 26px)} .idx__gn{font-size:.64rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px} .idx__gh h3{font-size:clamp(1.34rem,2.3vw,1.78rem);margin-bottom:12px;max-width:14ch} .idx__gh p{font-size:.9rem;line-height:1.55;color:var(--ink-soft);max-width:30ch} .idx__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)} .idx__row{border-bottom:1px solid var(--line-2)} .idx__row.is-out{display:none} .idx__row a{ position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 22px; text-decoration:none;padding:26px 22px 24px 20px;margin-inline:-20px; border-left:2px solid transparent; transition:background-color .26s var(--ease),border-color .26s var(--ease); } .idx__row a:hover,.idx__row a:focus-visible{background:var(--cream-2);border-left-color:var(--gold);outline:none} .sec--sand .idx__row a:hover,.sec--sand .idx__row a:focus-visible{background:var(--cream)} .idx__no{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--plum-2);opacity:.38;padding-top:5px;transition:opacity .25s var(--ease),color .25s var(--ease)} .idx__row a:hover .idx__no{color:var(--gold);opacity:1} .idx__body h4{font-size:clamp(1.12rem,1.9vw,1.34rem);margin-bottom:9px;color:var(--ink)} .idx__body > p{font-size:.95rem;line-height:1.58;color:var(--ink-soft);max-width:56ch} .idx__roles{margin-top:13px;font-size:.81rem;line-height:1.6;color:var(--ink-soft);padding-top:11px;border-top:1px dotted var(--line-2);max-width:64ch} .idx__roles b{font-weight:600;color:var(--plum-2)} .idx__roles mark{background:rgba(212,169,69,.45);color:var(--ink);padding:0 .14em;border-radius:2px} .idx__go{grid-column:2;margin-top:15px;font-size:.86rem;font-weight:600;color:var(--plum-2);display:inline-flex;align-items:center;gap:.5em} .idx__go i{font-style:normal;transition:transform .22s var(--ease)} .idx__row a:hover .idx__go{color:var(--plum)} .idx__row a:hover .idx__go i{transform:translateX(5px)} .idx__none{display:none;padding:34px 0;font-size:1rem;color:var(--ink-soft)} .idx__none.on{display:block} /* podgląd zdjęcia obszaru podążający za kursorem */ .peek{ position:fixed;z-index:80;top:0;left:0;width:280px;aspect-ratio:16/10; pointer-events:none;opacity:0;transform:translate3d(-9999px,-9999px,0) scale(.94); border:1px solid var(--gold);background:var(--plum-ink);overflow:hidden; transition:opacity .28s var(--ease),transform .12s linear; box-shadow:0 30px 60px -30px rgba(26,10,32,.8); } .peek img{width:100%;height:100%;object-fit:cover} .peek.on{opacity:1} /* ------------------------------------------------------- drabina i łańcuch */ .ladder{list-style:none;margin:0;padding:0;counter-reset:l} .ladder li{ counter-increment:l;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center; padding:18px 22px;border:1px solid var(--line-2);border-bottom:0;background:var(--cream); font-family:var(--display);font-weight:600;letter-spacing:-.02em; font-size:clamp(.98rem,1.6vw,1.14rem);line-height:1.26;color:var(--ink); transition:transform .32s var(--out),background-color .3s var(--ease); } .ladder li:hover{transform:translateX(8px)} .ladder li:last-child{border-bottom:1px solid var(--line-2)} .ladder li::before{content:counter(l,decimal-leading-zero);font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--ink-soft)} .ladder li:nth-child(1){background:linear-gradient(90deg,rgba(212,169,69,.05),transparent 68%)} .ladder li:nth-child(2){background:linear-gradient(90deg,rgba(212,169,69,.10),transparent 72%)} .ladder li:nth-child(3){background:linear-gradient(90deg,rgba(212,169,69,.15),transparent 76%)} .ladder li:nth-child(4){background:linear-gradient(90deg,rgba(212,169,69,.21),transparent 80%)} .ladder li:nth-child(5){background:linear-gradient(90deg,rgba(212,169,69,.28),transparent 84%)} .ladder li:last-child{background:var(--plum);color:#fff;border-color:var(--plum)} .ladder li:last-child::before{color:var(--gold-2)} .chain{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(250,247,242,.16);border:1px solid rgba(250,247,242,.16)} .chain li{background:var(--plum-deep);padding:24px 18px 26px;display:flex;flex-direction:column;gap:10px;transition:background-color .3s var(--ease),transform .32s var(--out)} .chain li:hover{background:var(--plum-ink);transform:translateY(-4px)} .chain b{font-family:var(--util);font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .chain span{font-family:var(--display);font-weight:600;letter-spacing:-.025em;font-size:1rem;line-height:1.24;color:#fff} .chain li:last-child{background:var(--gold)} .chain li:last-child:hover{background:var(--gold-2)} .chain li:last-child b{color:rgba(42,19,48,.58)} .chain li:last-child span{color:var(--plum-deep);font-weight:800} /* ------------------------------------------------------ proces ze scrubem */ .scrub{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,70px);margin-top:clamp(30px,4vw,50px)} .scrub__stage{position:sticky;top:calc(var(--navh) + 46px);align-self:start} .scrub__no{font-family:var(--display);font-weight:800;letter-spacing:-.06em;line-height:.78;font-size:clamp(4.5rem,11vw,9rem);color:var(--sand);transition:color .4s var(--ease)} .scrub__no.is-hot{color:var(--gold)} .scrub__label{margin-top:12px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);max-width:22ch;line-height:1.5} .scrub__track{margin-top:24px;display:flex;flex-direction:column;gap:10px} .scrub__dot{display:flex;align-items:center;gap:13px;font-size:.87rem;color:var(--ink-soft);transition:color .3s var(--ease)} .scrub__dot i{display:block;width:26px;height:2px;background:var(--line-2);transition:background-color .3s var(--ease),width .3s var(--ease)} .scrub__dot.on{color:var(--plum)} .scrub__dot.on i{background:var(--gold);width:44px} .proc{list-style:none;margin:0;padding:0} .proc > li{padding:clamp(24px,3.2vw,38px) 0;border-top:1px solid var(--line-2)} .proc > li:last-child{border-bottom:1px solid var(--line-2)} .proc__hd{display:flex;align-items:baseline;gap:18px;margin-bottom:14px} .proc__hd b{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--gold);letter-spacing:.06em} .proc h3{font-size:clamp(1.16rem,2.1vw,1.46rem)} .proc p{color:var(--ink-soft);line-height:1.66;max-width:56ch} .proc p + p{margin-top:12px} .qlist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .qlist li{font-size:.85rem;line-height:1.3;color:var(--plum-2);background:var(--cream-2);border:1px solid var(--line);padding:.52em .85em;transition:transform .22s var(--out),border-color .22s var(--ease)} .qlist li:hover{transform:translateY(-3px);border-color:var(--gold)} .sec--sand .qlist li{background:var(--cream)} .qlist--lg{margin-top:clamp(24px,3vw,34px);gap:10px} .qlist--lg li{font-size:.92rem;padding:.64em 1.05em;background:var(--cream);border-color:var(--line-2)} /* ---------------------------------------------------------- karty sytuacji */ .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,4.5vw,52px)} .case{ position:relative;isolation:isolate;border:1px solid var(--line-2);background:var(--cream); padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px; transition:border-color .3s var(--ease),transform .34s var(--out),box-shadow .34s var(--out); } .case::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(212,169,69,.16),transparent 66%);opacity:0;transition:opacity .35s var(--ease)} .case:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(58,29,63,.65)} .case:hover::after{opacity:1} .case__tag{font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} .case h3{font-size:clamp(1.12rem,2vw,1.34rem)} .case p{font-size:.95rem;line-height:1.6;color:var(--ink-soft)} .case--wide{grid-column:span 2;background:var(--plum);border-color:var(--plum);color:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,36px);align-items:start} .case--wide::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(212,169,69,.22),transparent 66%)} .case--wide h3{color:#fff;font-size:clamp(1.3rem,2.6vw,1.86rem)} .case--wide p{color:rgba(250,247,242,.78)} .case--wide .case__tag{color:var(--gold-2)} .case__head{display:flex;flex-direction:column;gap:12px} .case__more{font-size:.95rem;line-height:1.62;color:rgba(250,247,242,.78);border-left:2px solid var(--gold);padding-left:20px} .case__more strong{display:block;color:#fff;font-family:var(--display);font-size:1.04rem;margin-bottom:7px} .case--solo{grid-template-columns:1fr} .case--solo p{color:rgba(250,247,242,.84);font-size:1rem;line-height:1.66;max-width:62ch} /* --------------------------------------------------------------- dlaczego */ .why{list-style:none;margin:clamp(28px,3.6vw,46px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)} .why li{background:var(--cream);padding:clamp(22px,2.4vw,32px);transition:background-color .3s var(--ease)} .why li:hover{background:var(--cream-2)} .why li:nth-child(-n+2){grid-column:span 3;background:var(--cream-2)} .why li:nth-child(-n+2):hover{background:var(--sand-soft)} .why li:nth-child(n+3){grid-column:span 2} .why h3{font-size:1.12rem;margin-bottom:11px;display:flex;align-items:flex-start;gap:12px;max-width:22ch} .why h3::before{content:"";width:22px;height:1px;background:var(--gold);flex:none;margin-top:.62em} .why p{font-size:.94rem;line-height:1.58;color:var(--ink-soft);max-width:46ch} /* ------------------------------------------------------------ dwa poziomy */ .lv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px);margin-top:clamp(30px,4vw,50px)} .lv__card{ position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--line-2);background:var(--cream); transition:border-color .3s var(--ease),transform .34s var(--out),box-shadow .34s var(--out); } .lv__card:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 28px 54px -38px rgba(58,29,63,.65)} .lv__pic{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--plum-ink)} .lv__pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--out)} .lv__card:hover .lv__pic img{transform:scale(1.05)} .lv__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,10,32,.78),rgba(26,10,32,.18))} .lv__tag{position:absolute;z-index:2;left:clamp(18px,2.2vw,26px);bottom:clamp(14px,1.8vw,20px);font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)} .lv__body{padding:clamp(22px,2.8vw,34px);display:flex;flex-direction:column;flex:1} .lv__card--dark{background:var(--plum);border-color:var(--plum);color:var(--cream)} .lv__card--dark h3{color:#fff} .lv__card--dark .lv__body > p{color:rgba(250,247,242,.78)} .lv__card h3{font-size:clamp(1.28rem,2.3vw,1.68rem);margin-bottom:13px;max-width:20ch} .lv__body > p{font-size:.97rem;line-height:1.62;color:var(--ink-soft);max-width:46ch} .roles{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:8px} .lv__card--dark .roles{border-top-color:rgba(250,247,242,.18)} .roles li{font-size:.83rem;line-height:1.3;padding:.5em .8em;border:1px solid var(--line-2);background:var(--cream-2);color:var(--plum-2);transition:transform .22s var(--out),border-color .22s var(--ease),background-color .22s var(--ease)} .roles li:hover{transform:translateY(-3px);border-color:var(--gold);background:var(--cream)} .lv__card--dark .roles li{background:rgba(250,247,242,.07);border-color:rgba(250,247,242,.2);color:rgba(250,247,242,.9)} .lv__card--dark .roles li:hover{border-color:var(--gold);background:rgba(212,169,69,.18)} .lv__foot{margin-top:auto;padding-top:26px} /* -------------------------------------------------------- wybór poziomu */ .pick{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,26px);margin-top:clamp(28px,3.6vw,46px)} .pick__card{ position:relative;isolation:isolate;display:flex;flex-direction:column;gap:13px;text-decoration:none; background:var(--cream);border:1px solid var(--line-2);padding:clamp(24px,3vw,38px); transition:border-color .3s var(--ease),transform .34s var(--out),box-shadow .34s var(--out); } .pick__card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(212,169,69,.16),transparent 68%);opacity:0;transition:opacity .35s var(--ease)} .pick__card:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 26px 50px -36px rgba(58,29,63,.62)} .pick__card:hover::after{opacity:1} .pick__tag{font-family:var(--display);font-weight:700;letter-spacing:-.025em;font-size:clamp(1.26rem,2.2vw,1.6rem);color:var(--ink)} .pick__txt{font-size:.97rem;line-height:1.62;color:var(--ink-soft);max-width:44ch} .pick__go{margin-top:auto;padding-top:18px;font-size:.87rem;font-weight:600;color:var(--plum-2);display:inline-flex;align-items:center;gap:.5em} .pick__go i{font-style:normal;transition:transform .22s var(--ease)} .pick__card:hover .pick__go{color:var(--plum)} .pick__card:hover .pick__go i{transform:translateX(5px)} /* ----------------------------------------------------------------- chipy */ .chips{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px} .chips a{ display:inline-flex;align-items:center;gap:.6em;font-size:.88rem;line-height:1.3;text-decoration:none; padding:.66em 1em;border:1px solid var(--line-2);background:var(--cream);color:var(--ink); transition:transform .24s var(--out),border-color .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease); } .chips a::before{content:"";width:16px;height:1px;background:var(--gold);flex:none} .chips a:hover{transform:translateY(-4px);border-color:var(--gold);background:var(--plum);color:var(--cream)} .chips a[aria-current="page"]{background:var(--plum);color:var(--cream);border-color:var(--plum)} /* ------------------------------------------------------------ siatka „kiedy" */ .when{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(28px,3.6vw,48px)} .when__it{background:var(--cream-2);padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;gap:11px;transition:background-color .3s var(--ease)} .when__it:hover{background:var(--cream)} .sec--sand .when__it{background:var(--cream)} .sec--sand .when__it:hover{background:var(--sand-soft)} .when__no{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.1em;color:var(--gold)} .when__it h3{font-size:clamp(1.12rem,2vw,1.36rem);max-width:22ch} .when__it p{font-size:.95rem;line-height:1.6;color:var(--ink-soft);max-width:48ch} /* --------------------------------------------------------- „co sprawdzamy" */ .asks{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)} .asks li{background:var(--cream);padding:clamp(20px,2.3vw,28px);display:flex;flex-direction:column;gap:10px;transition:background-color .3s var(--ease)} .asks li:hover{background:var(--cream-2)} .sec--sand .asks li{background:var(--cream)} .sec--sand .asks li:hover{background:var(--sand-soft)} .asks b{font-family:var(--util);font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .asks span{font-family:var(--display);font-weight:600;font-size:1.04rem;line-height:1.3;letter-spacing:-.025em;color:var(--ink)} /* punktowana lista kontrolna */ .checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px 40px} .checks li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:12px 0;font-size:.97rem;line-height:1.5;color:var(--ink);border-bottom:1px solid var(--line)} .checks li::before{content:"";width:18px;height:1px;background:var(--gold);margin-top:.78em} .lbl{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px} /* zdanie-puenta */ .punch{ margin-top:clamp(26px,3.4vw,40px);padding-top:clamp(22px,2.8vw,30px);border-top:2px solid var(--plum); font-family:var(--display);font-weight:700;font-size:clamp(1.24rem,2.3vw,1.66rem); letter-spacing:-.03em;line-height:1.22;color:var(--plum);max-width:28ch; } .punch span{display:block;color:var(--ink-soft);font-weight:600;font-size:.72em;margin-bottom:9px} /* --------------------------------------------------------------- FAQ */ .faq{margin-top:clamp(26px,4vw,44px);border-top:1px solid var(--line-2)} .faq details{border-bottom:1px solid var(--line-2)} .faq summary{ list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center; padding:24px 0;font-family:var(--display);font-weight:600;letter-spacing:-.025em; font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.3;color:var(--ink);transition:color .2s var(--ease); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--plum-2)} .faq summary::after{ content:"";width:13px;height:13px;flex:none; background:linear-gradient(var(--plum),var(--plum)) center/13px 1.5px no-repeat,linear-gradient(var(--plum),var(--plum)) center/1.5px 13px no-repeat; transition:transform .32s var(--ease); } .faq details[open] summary::after{transform:rotate(45deg)} .faq details[open] summary{color:var(--plum-2)} .faq__a{padding:0 0 26px;max-width:74ch;overflow:hidden} .faq__a p{color:var(--ink-soft);line-height:1.68} .faq__a p + p{margin-top:12px} .fx .faq details[open] .faq__a{animation:faqIn .42s var(--out) both} @keyframes faqIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} /* ------------------------------------------------------------- CTA i kontakt */ .cta{position:relative;overflow:hidden;background:var(--plum-deep);color:var(--cream);isolation:isolate} .cta__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 70% at 88% 10%,rgba(212,169,69,.2),transparent 70%),radial-gradient(50% 60% at 6% 92%,rgba(140,60,130,.35),transparent 70%)} .cta__in{position:relative;z-index:2;padding-block:clamp(58px,8vw,100px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,70px);align-items:center} .cta h2{font-size:clamp(1.85rem,4vw,2.9rem);color:#fff;margin:18px 0 20px;max-width:18ch} .cta p{color:rgba(250,247,242,.78);line-height:1.66;max-width:50ch} .cta p + p{margin-top:13px} .cta__btn{margin-top:32px} .cta__card{border:1px solid rgba(250,247,242,.2);background:rgba(250,247,242,.05);backdrop-filter:blur(3px);padding:clamp(22px,2.8vw,32px)} .cta__card p{font-size:.95rem;color:rgba(250,247,242,.72);max-width:none} .cta__card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:rgba(250,247,242,.14);border:1px solid rgba(250,247,242,.14);margin-top:16px} .cta__card li{background:var(--plum-deep);padding:14px 16px;font-size:.92rem;color:rgba(250,247,242,.78);line-height:1.45} .cta__card li:last-child{background:var(--gold);color:var(--plum-deep)} .cta__card li:last-child strong{display:block;font-family:var(--display);font-size:1.04rem;margin-bottom:4px} .cta__cap{font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .contact{position:relative;color:var(--cream);overflow:hidden;background:var(--plum-ink);isolation:isolate} .contact__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.28} .contact::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--plum-ink) 16%,rgba(26,10,32,.86) 56%,rgba(84,36,72,.6) 100%)} .contact__in{position:relative;z-index:2;padding-block:clamp(62px,9vw,108px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,74px);align-items:center} .contact h2{font-size:clamp(1.9rem,4.2vw,3rem);color:#fff;margin:18px 0 22px;max-width:18ch} .contact p{font-family:var(--serif);font-size:1.12rem;color:rgba(250,247,242,.8);max-width:46ch} .contact p + p{margin-top:13px} .contact__cta{margin-top:32px} .details{display:flex;flex-direction:column;gap:2px;background:rgba(250,247,242,.06);border:1px solid rgba(250,247,242,.16);padding:clamp(22px,3vw,34px)} .detail{padding:16px 0;border-bottom:1px solid rgba(250,247,242,.12)} .detail:last-child{border-bottom:0} .detail dt{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:7px} .detail dd{margin:0;font-family:var(--display);font-size:1.16rem;font-weight:600;color:#fff;letter-spacing:-.02em} .detail dd a{text-decoration:none;border-bottom:1px solid rgba(212,169,69,.5)} .detail dd a:hover{color:var(--gold-2)} .detail dd small{display:block;font-family:var(--util);font-size:.85rem;font-weight:400;letter-spacing:0;color:rgba(250,247,242,.6);margin-top:5px} /* ------------------------------------------------------------------ stopka */ .foot{background:var(--plum);color:rgba(250,247,242,.7);padding-block:clamp(46px,6vw,72px) 30px} .foot__top{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.7fr));gap:34px;padding-bottom:36px;border-bottom:1px solid rgba(250,247,242,.14)} .foot__brand img{width:180px;margin-bottom:18px} .foot__brand p{font-family:var(--serif);font-size:1rem;max-width:34ch} .foot__addr{font-style:normal;font-size:.92rem;line-height:1.6;margin-top:18px;padding-top:16px;border-top:1px solid rgba(250,247,242,.14);max-width:34ch} .foot__addr a{text-decoration:none;border-bottom:1px solid rgba(212,169,69,.45)} .foot h4{font-family:var(--util);font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px} .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .foot a{text-decoration:none;font-size:.93rem;transition:color .2s var(--ease)} .foot a:hover{color:var(--gold-2)} .foot__bot{padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;font-size:.82rem;color:rgba(250,247,242,.5)} /* ======================================================= WARSTWA EFEKTÓW == Wszystko poniżej działa wyłącznie, gdy ma klasę .fx. ========================================================================= */ /* --- odsłony --- */ .fx [data-rv]{opacity:0;will-change:transform,opacity} .fx [data-rv="up"]{transform:translateY(28px)} .fx [data-rv="down"]{transform:translateY(-22px)} .fx [data-rv="left"]{transform:translateX(-28px)} .fx [data-rv="right"]{transform:translateX(28px)} .fx [data-rv="zoom"]{transform:scale(.96)} .fx [data-rv="mask"]{ opacity:1; mask-image:linear-gradient(90deg,#000 0 0);-webkit-mask-image:linear-gradient(90deg,#000 0 0); mask-size:0% 100%;-webkit-mask-size:0% 100%; mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat; transition:mask-size 1.05s var(--out),-webkit-mask-size 1.05s var(--out); } .fx [data-rv="rule"]{transform:scaleX(0);transform-origin:left center;opacity:1} .fx [data-rv].is-in{opacity:1;transform:none;transition:opacity .78s var(--out),transform .78s var(--out)} .fx [data-rv="mask"].is-in{mask-size:100% 100%;-webkit-mask-size:100% 100%} .fx [data-rv="rule"].is-in{transform:scaleX(1);transition:transform .95s var(--out)} .fx [data-rv].is-done{will-change:auto} /* --- choreografia hero --- */ .fx .ph .h-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} .fx .ph .h-line > span{display:block;transform:translateY(106%);animation:hLine 1.05s var(--out) forwards} .fx .ph .h-line:nth-child(1) > span{animation-delay:.16s} .fx .ph .h-line:nth-child(2) > span{animation-delay:.27s} .fx .ph .h-line:nth-child(3) > span{animation-delay:.38s} .fx .ph .h-line:nth-child(4) > span{animation-delay:.49s} @keyframes hLine{to{transform:none}} .fx .ph [data-hero]{opacity:0;transform:translateY(22px);animation:heroIn .95s var(--out) forwards} .fx .ph [data-hero="1"]{animation-delay:.06s} .fx .ph [data-hero="2"]{animation-delay:.56s} .fx .ph [data-hero="3"]{animation-delay:.66s} .fx .ph [data-hero="4"]{animation-delay:.76s} .fx .ph [data-hero="5"]{animation-delay:.88s} .fx .ph [data-hero="6"]{animation-delay:1s} @keyframes heroIn{to{opacity:1;transform:none}} /* zdjęcie w hero wjeżdża powolnym zoomem — Ken Burns bez pętli */ .fx .ph__media img{animation:phZoom 2.4s var(--out) both} @keyframes phZoom{from{transform:scale(1.08)}to{transform:scale(1)}} /* szyna po lewej rysuje się od góry */ .fx .ph__rail i{transform:scaleY(0);transform-origin:top center;animation:railIn 1.2s var(--out) .5s forwards} @keyframes railIn{to{transform:scaleY(1)}} /* parallaksa kursora — tylko na zdjęciu i poświacie, subtelna */ .fx .ph[data-fx~="parallax"] .ph__media img{ transform:translate3d(calc(var(--px,0) * -16px),calc(var(--py,0) * -12px),0) scale(1.05); transition:transform .8s var(--out); } .fx .ph[data-fx~="parallax"] .ph__glow{ transform:translate3d(calc(var(--px,0) * 22px),calc(var(--py,0) * 18px),0); transition:transform .9s var(--out); } /* --- pochylenie 3D + światło za kursorem --- */ .fx [data-fx~="tilt"]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--out);transform-style:preserve-3d} .fx [data-fx~="tilt"].is-tilting{transition:transform .08s linear} /* --- magnetyczne przyciski --- */ .fx [data-fx~="magnet"].is-pull{transition:transform .12s linear} /* --- licznik --- */ .fx [data-fx~="count"]{font-variant-numeric:tabular-nums} /* --- rysowane ścieżki SVG --- */ .fx [data-fx~="draw"] path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)} .fx [data-fx~="draw"].is-in path{transition:stroke-dashoffset 1.7s var(--out);stroke-dashoffset:0} /* --- mierniki --- */ .meters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px} .meters__cap{font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:4px} .meter b{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-family:var(--util);font-weight:600;font-size:.9rem;color:#fff;margin-bottom:8px} .meter b span{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.5)} .meter i{display:block;height:5px;background:rgba(250,247,242,.12);overflow:hidden} .meter i em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-3));transition:width 1.15s var(--out)} .meter--dim i em{background:linear-gradient(90deg,rgba(226,208,186,.55),rgba(226,208,186,.22))} /* ========================================================= RESPONSYWNOŚĆ == */ @media (max-width:1320px){ .nav__links{display:none} .nav .btn{display:none} .burger{display:flex} } @media (max-width:1080px){ .chain{grid-template-columns:repeat(3,1fr)} .cases{grid-template-columns:repeat(2,1fr)} .case--wide{grid-column:span 2} .asks{grid-template-columns:repeat(2,1fr)} .shelf__in{grid-template-columns:repeat(2,1fr);margin-left:0} } @media (max-width:980px){ /* siatka 12-kolumnowa składa się do jednej kolumny; przypisania kolumn są w atrybutach style, więc trzeba je nadpisać */ .grid{grid-template-columns:1fr} .grid > *{grid-column:1 / -1 !important} .ph{min-height:0;padding-top:calc(var(--navh) + 24px);display:block} .ph__media{position:relative;left:auto;right:auto;height:min(52vh,420px);width:100%} .ph--flip .ph__media{left:auto;right:auto} .ph--flip .ph__in{display:block} .ph--flip .ph__in > *{width:auto} .ph--flip .shelf__in{margin-right:0} .ph__tint,.ph--flip .ph__tint{background:linear-gradient(0deg,rgba(26,10,32,.88) 0%,rgba(26,10,32,.12) 72%)} .ph__rail{display:none} .ph__in{margin-top:clamp(26px,5vw,40px)} .ph h1{max-width:18ch} .ph__lead{max-width:58ch} .head{grid-template-columns:1fr;gap:16px} .head__side{padding-top:0} .head__main h2,.head--wide .head__main h2{max-width:20ch} .sw__panel,.scrub,.cta__in,.contact__in,.lv,.pick{grid-template-columns:1fr} .scrub__stage{position:static;display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap} .scrub__no{font-size:clamp(3rem,12vw,4.6rem)} .scrub__label{margin-top:0;max-width:none} .scrub__track{flex-direction:row;flex-wrap:wrap;margin-top:0;gap:8px 20px} .scrub__dot i{width:18px} .scrub__dot.on i{width:28px} .idx__group{grid-template-columns:1fr;gap:20px} .idx__gh{position:static} .idx__gh p,.idx__gh h3{max-width:56ch} .why{grid-template-columns:1fr} .why li:nth-child(-n+2),.why li:nth-child(n+3){grid-column:span 1} .when{grid-template-columns:1fr} .checks{grid-template-columns:1fr;gap:0} .foot__top{grid-template-columns:1fr 1fr} .bleed-r,.bleed-l{margin-inline:0} .shot--frame::after,.shot--frame-l::after{inset:12px -12px -12px 12px} .band{min-height:0} .band__q{max-width:26ch} .peek{display:none} .fx [data-rv="left"],.fx [data-rv="right"]{transform:translateY(24px)} } @media (max-width:680px){ :root{--navh:62px} /* podświetlenie wiersza indeksu nie może wychodzić poza wąski ekran */ .idx__row a{margin-inline:0;padding-inline:0} .chain{grid-template-columns:1fr} .cases{grid-template-columns:1fr} .case--wide{grid-column:span 1;grid-template-columns:1fr} .asks{grid-template-columns:1fr} .shelf__in{grid-template-columns:1fr} .idx__row a{grid-template-columns:1fr;gap:4px} .idx__go{grid-column:1} .sw__tabs{display:grid;grid-auto-flow:row;width:100%;border-radius:8px} .sw__tab{padding:.82em 1em} .sw__pill{border-radius:6px;left:5px;right:5px} .finder__box{flex:1 1 100%;max-width:none} .foot__top{grid-template-columns:1fr} .totop{width:46px;height:46px} .totop svg{width:46px;height:46px} .ph h1{font-size:clamp(2rem,8.6vw,2.9rem)} } @media (max-width:760px){ .fx .ph__grain{display:none} .fx [data-fx~="tilt"]{transform:none!important} .case::after,.pick__card::after{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }