:root{ --paper:#F4EDDA; --paper2:#F0E7CF; --paper3:#EBDFC0; --card:#FBF6E7; --ink:#262F1B; --forest:#3B4A2A; --khaki:#5A6540; --sand:#8C8259; --rust:#C0491C; --rust-deep:#A63E16; --gold:#B08D2E; --line:#D9CDA8; --f-disp:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"IBM Plex Mono",monospace; } *{box-sizing:border-box; margin:0; padding:0;} html{background:var(--paper);} body{background:var(--paper); color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;} ::selection{background:var(--rust); color:var(--paper);} a{color:inherit;} .mono{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;} .grain{position:fixed; inset:-50%; width:200%; height:200%; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .cur,.cur2{position:fixed; z-index:90; top:0; left:0; pointer-events:none; border-radius:50%; opacity:0;} .cur{width:8px; height:8px; background:var(--rust); transform:translate(-50%,-50%);} .cur2{width:34px; height:34px; border:1px solid rgba(58,70,62,.5); transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s;} .cur2.big{width:58px; height:58px; border-color:var(--rust);} @media(pointer:coarse){.cur,.cur2{display:none;}} .pre{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; background:var(--paper);} .pre .mono{color:var(--khaki);} .pre .num{font-family:var(--f-disp); font-weight:600; font-size:clamp(64px,12vw,120px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;} .pre .bar{width:min(300px,60vw); height:1px; background:var(--line); position:relative; overflow:hidden;} .pre .bar i{position:absolute; inset:0; background:var(--rust); transform:scaleX(0); transform-origin:left;} .pre .stamp-mini{margin-top:8px; opacity:0; font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); border:2px solid var(--rust); border-radius:4px; padding:7px 14px; transform:rotate(-9deg);} .bar-top{position:absolute; top:0; left:0; right:0; z-index:20; padding:26px clamp(20px,4.5vw,56px); display:flex; justify-content:space-between; align-items:baseline;} .bar-top .wordmark{font-family:var(--f-disp); font-weight:600; font-size:17px;} .bar-top .coords{color:var(--khaki);} @media(max-width:640px){.bar-top .coords{display:none;}} /* feather mask — wtapia asset w papier strony */ .feather{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(0deg,transparent 0,#000 8%,#000 92%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(0deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-composite:intersect;} /* ==== hero ==== */ .hero{position:relative;} .hero-pin{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:110px 0 90px; width:100%;} #topo{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.5;} .hero .inner{position:relative; z-index:5; width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(20px,4.5vw,56px); display:grid; grid-template-columns:1.4fr .72fr; gap:clamp(30px,5vw,72px); align-items:center;} @media(max-width:860px){.hero .inner{grid-template-columns:1fr;}} .symptoms{margin-bottom:28px;} .sym-head{color:var(--sand); margin-bottom:13px;} .sym{display:flex; align-items:center; gap:12px; margin:10px 0;} .zgl{position:relative; display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--forest); padding:1px 2px;} .zgl svg{position:absolute; left:-2px; right:-2px; top:50%; height:14px; transform:translateY(-50%); overflow:visible; pointer-events:none;} .zgl svg path{stroke:var(--rust); stroke-width:2.4; fill:none; stroke-linecap:round;} .tag-objaw{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--rust); border:1.2px solid var(--rust); border-radius:3px; padding:2px 6px; transform:rotate(-4deg); display:inline-block;} h1.disp{font-family:var(--f-disp); font-weight:600; font-size:clamp(42px,7.2vw,96px); line-height:.99; letter-spacing:-.022em; margin-bottom:30px;} h1.disp .ln{display:block; overflow:hidden; padding:.08em .06em .24em; margin:-.08em -.06em -.24em;} h1.disp .ln>span{display:inline-block; will-change:transform;} h1.disp em{font-style:italic; font-weight:500; color:var(--rust); position:relative; white-space:nowrap;} h1.disp em svg{position:absolute; left:-1%; bottom:-.14em; width:102%; height:.3em; overflow:visible;} h1.disp em svg path{fill:none; stroke:var(--rust); stroke-width:5; stroke-linecap:round;} .lead{font-size:clamp(15.5px,1.55vw,18px); line-height:1.62; color:#414A2E; max-width:46ch; margin-bottom:26px;} .doms{display:flex; flex-wrap:wrap; gap:8px 6px; margin-bottom:32px;} .doms span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--forest); border:1px solid var(--line); background:rgba(251,246,231,.55); padding:6px 12px; border-radius:999px;} .cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;} .cta{display:inline-flex; align-items:center; gap:12px; text-decoration:none; background:var(--forest); color:var(--paper); font-weight:600; font-size:15.5px; padding:16px 28px; border-radius:999px; transition:background .3s, transform .25s, box-shadow .3s;} .cta:hover{background:var(--rust); transform:translateY(-2px); box-shadow:0 16px 34px rgba(192,73,28,.26);} .cta .arr{transition:transform .3s;} .cta:hover .arr{transform:translateX(5px);} .cta-note{font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--sand);} .por-wrap{position:relative; justify-self:end; width:min(340px,74vw); will-change:transform;} @media(max-width:860px){.por-wrap{justify-self:start; margin-top:6px;}} .por-wrap img{display:block; width:100%; height:auto;} .por-note{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-2.6deg); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,237,218,.85); text-align:center; line-height:2;} /* ==== rekwizyty biurka (hero) ==== */ .props{position:absolute; inset:0; z-index:4; pointer-events:none;} .prop{position:absolute; will-change:transform; filter:drop-shadow(0 10px 18px rgba(38,47,27,.10));} .p-tasma{left:43%; top:9%; width:clamp(70px,8vw,116px);} .p-stempel{right:3%; top:4%; width:clamp(170px,19vw,270px);} .p-kompas{left:62%; bottom:8%; width:clamp(90px,10vw,128px);} .p-lupa{right:15%; bottom:-6%; width:clamp(170px,19vw,260px);} .p-olowek{left:20%; top:3%; width:clamp(120px,13vw,185px);} .p-notes{left:-2%; bottom:5%; width:clamp(100px,11vw,150px);} @media(max-width:860px){.p-lupa,.p-olowek,.p-notes,.p-tasma{display:none;} .p-stempel{left:auto; right:2%; top:2%; width:150px; opacity:.85;} .p-kompas{right:3%; top:auto; bottom:2%; width:90px;}} .cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--khaki);} .cue .mono{font-size:9.5px;} .cue .stick{width:1px; height:40px; background:rgba(58,70,62,.22); overflow:hidden; position:relative;} .cue .stick i{position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--rust); animation:cue 2s cubic-bezier(.6,0,.4,1) infinite;} @keyframes cue{55%{top:100%}100%{top:100%}} /* ==== descent hook ==== */ .descend{position:relative; background:linear-gradient(var(--paper) 0%, var(--paper2) 55%, var(--paper3) 100%);} .descend .pinbox{min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden;} /* R5: .surface-line / .depth (linia „poziom powierzchni · 0 m" + licznik „GŁĘBOKOŚĆ 0,0 m") usunięte z HTML — reguły skasowane razem z nimi. */ .hook-txt{max-width:1000px; margin:0 auto; padding:0 clamp(22px,5vw,56px); position:relative; z-index:3; font-family:var(--f-disp); font-weight:500; font-size:clamp(26px,4.6vw,54px); line-height:1.24; letter-spacing:-.012em; color:var(--ink);} .hook-txt .w{opacity:.13; display:inline-block; will-change:opacity;} .hook-txt .accent{font-style:italic; color:var(--rust);} .hook-kicker{position:absolute; top:calc(18% + 16px); left:clamp(22px,5vw,56px); color:var(--khaki);} /* ==== vignettes ==== */ .vign{position:relative; background:var(--paper3);} .vign .pin2{min-height:100svh; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,60px); align-items:center; max-width:1280px; margin:0 auto; padding:70px clamp(20px,4.5vw,56px);} @media(max-width:899px){.vign .pin2{display:block; min-height:0; padding:72px clamp(20px,4.5vw,56px) 30px;}} .vig-copy{position:relative; z-index:2;} .vig-copy .ghost{position:absolute; z-index:0; top:-8%; left:-3%; font-family:var(--f-disp); font-weight:700; font-size:clamp(120px,20vw,280px); line-height:1; color:rgba(58,70,62,.07); pointer-events:none; user-select:none;} .vig-copy .khead{color:var(--rust); margin-bottom:16px;} .vig-copy h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(30px,4vw,52px); line-height:1.02; letter-spacing:-.02em; margin-bottom:18px;} .vig-copy .intro{font-size:clamp(15px,1.5vw,17.5px); line-height:1.62; color:#414A2E; max-width:42ch; margin-bottom:30px;} .prog{display:flex; align-items:center; gap:14px;} .prog .mono{color:var(--khaki); font-variant-numeric:tabular-nums;} .prog .dots{display:flex; gap:7px;} .prog .dots i{width:26px; height:2px; background:rgba(58,70,62,.2); position:relative; overflow:hidden;} .prog .dots i b{position:absolute; inset:0; background:var(--rust); transform:scaleX(0); transform-origin:left;} @media(max-width:899px){.prog{display:none;}} .deck{position:relative; height:min(640px,78vh); z-index:2;} @media(max-width:899px){.deck{height:auto; margin-top:34px; display:flex; flex-direction:column; gap:40px;}} .bcard{position:absolute; inset:0; margin:auto; width:100%; max-width:560px; height:fit-content; will-change:transform;} @media(max-width:899px){.bcard{position:relative; inset:auto; max-width:none;}} .bcard .face{position:relative;} .bcard .face>img{display:block; width:100%; height:auto; max-height:56vh; object-fit:contain;} .bcard .stampimg{position:absolute; z-index:4; width:34%; top:var(--stamp-top,4%); right:var(--stamp-right,2%); left:var(--stamp-left,auto); mix-blend-mode:multiply; opacity:0; pointer-events:none; transform:rotate(-4deg);} .bcard .strike{position:absolute; z-index:3; left:14%; width:72%; height:34px; top:var(--strike-top,40%); overflow:visible; pointer-events:none;} .bcard .strike path{stroke:var(--rust); stroke-width:5; fill:none; stroke-linecap:round; opacity:.92; mix-blend-mode:multiply;} .bcard .real{margin:2px auto 0; max-width:86%; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 20px 15px; opacity:0; will-change:transform; box-shadow:0 14px 34px rgba(38,47,27,.12);} .bcard .real .mono{color:var(--rust); font-size:9.5px; display:block; margin-bottom:7px;} .bcard .real p{font-size:clamp(15px,1.6vw,18px); line-height:1.45; font-weight:500; color:var(--ink);} .bcard .real p u{text-decoration:none; background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 96%;} /* ==== scena OBIECANE/ZASTANE ==== */ .compare{position:relative; background:var(--paper3);} .compare .pin3{min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:26px; padding:70px clamp(16px,3.5vw,48px); position:relative; overflow:hidden;} .compare .khead{color:var(--khaki); text-align:center;} .compare h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(26px,3.6vw,46px); letter-spacing:-.018em; text-align:center; max-width:26ch; line-height:1.08;} .compare h2 em{font-style:italic; color:var(--rust);} .stagebox{position:relative; width:min(1180px,96vw); aspect-ratio:1920/1071; border-radius:10px; overflow:hidden; box-shadow:0 34px 90px rgba(38,47,27,.22);} .stagebox img,.stagebox video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .stagebox .after{clip-path:inset(0 0 0 100%);} .stagebox .divider{position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--rust); z-index:5; transform:translateX(-2px); box-shadow:0 0 0 1px rgba(244,237,218,.5);} .stagebox .lab{position:absolute; z-index:6; top:14px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border-radius:4px; background:rgba(38,47,27,.72); color:var(--paper);} .stagebox .lab.l{left:14px;} .stagebox .lab.r{right:14px; background:rgba(192,73,28,.85);} .compare .capline{color:var(--khaki); display:flex; gap:14px; align-items:center;} .compare .capline .rule{width:60px; height:1px; background:rgba(90,101,64,.4);} /* ==== closer ==== */ .closer{background:var(--paper3); padding:clamp(90px,14vw,180px) 0 90px;} .closer .inner{max-width:900px; margin:0 auto; padding:0 clamp(22px,5vw,56px);} .closer .big{font-family:var(--f-disp); font-weight:500; font-size:clamp(24px,3.8vw,44px); line-height:1.3; letter-spacing:-.01em; color:var(--ink);} .closer .big .w{display:inline-block; opacity:.13;} .closer .big em{font-style:italic; color:var(--rust);} .closer .next{margin-top:70px; display:flex; align-items:center; gap:18px; color:var(--khaki); flex-wrap:wrap;} .closer .next .rule{flex:1; min-width:60px; height:1px; background:rgba(90,101,64,.35);} /* ==== v4a ==== */ .p-lupa{aspect-ratio:1/1; filter:none; z-index:6;} .lupa-img{position:absolute; inset:0; width:100%; height:100%; z-index:2; mix-blend-mode:multiply; -webkit-mask-image:radial-gradient(ellipse 19% 19% at 37.2% 37.2%, transparent 96%, #000 99%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(0deg,transparent 0,#000 7%,#000 93%,transparent 100%); -webkit-mask-composite:source-in; mask-image:radial-gradient(ellipse 19% 19% at 37.2% 37.2%, transparent 96%, #000 99%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(0deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-composite:intersect;} .lens{position:absolute; left:18.2%; top:18.2%; width:38%; height:38%; border-radius:50%; overflow:hidden; z-index:1; background:var(--paper); box-shadow:inset 0 0 22px rgba(38,47,27,.14);} .lens-inner{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:scale(1.62); white-space:nowrap;} .lens-inner .zgl{font-size:12px;} .lens-inner img{width:280%; max-width:none;} .p-minipoczta{right:17%; bottom:-2%; width:clamp(120px,13vw,170px); z-index:3;} @media(max-width:860px){.p-minipoczta{display:none;}} .doms span{border-radius:3px !important; border:1.6px solid rgba(58,70,62,.6) !important; background:transparent !important; mix-blend-mode:multiply; font-size:11px !important; letter-spacing:.13em !important; padding:7px 13px !important;} .doms span:nth-child(1){transform:rotate(-1.4deg);} .doms span:nth-child(2){transform:rotate(.9deg);} .doms span:nth-child(3){transform:rotate(-.7deg);} .doms span:nth-child(4){transform:rotate(1.3deg);} @keyframes ctaArr{0%,55%,100%{transform:translateX(0)}70%{transform:translateX(5px)}82%{transform:translateX(1px)}} .cta .arr{animation:ctaArr 3.2s ease-in-out 2s infinite;} @keyframes ctaGlow{0%,100%{box-shadow:0 6px 18px rgba(58,70,62,.18)}50%{box-shadow:0 10px 30px rgba(192,73,28,.30)}} .cta{animation:ctaGlow 3.2s ease-in-out infinite;} .cta:hover{animation-play-state:paused;} @keyframes kickPulse{0%,100%{opacity:.55}50%{opacity:1}} .hook-kicker{left:50% !important; transform:translateX(-50%); text-align:center; font-size:clamp(15px,2vw,21px) !important; letter-spacing:.22em !important; color:var(--forest) !important; animation:kickPulse 3.4s ease-in-out infinite; white-space:nowrap;} .vign .pin2{position:relative;} .vig-copy .khead{position:absolute; top:40px; left:0; right:0; text-align:center; font-size:clamp(14px,1.9vw,20px) !important; letter-spacing:.22em !important; color:var(--rust) !important; animation:kickPulse 3.4s ease-in-out infinite; white-space:nowrap; z-index:5;} .compare .khead{font-size:clamp(14px,1.9vw,20px) !important; letter-spacing:.22em !important; animation:kickPulse 3.4s ease-in-out infinite;} .sym-head{font-size:13px; letter-spacing:.16em; color:var(--forest);} .cue .mono{font-size:11px; letter-spacing:.14em; color:var(--forest);} .cta-note{font-size:11px !important; letter-spacing:.1em !important; color:var(--khaki) !important;} .bar-top .coords{font-size:11px; color:var(--khaki);} .tag-objaw{font-size:10.5px !important;} .bcard .stampimg{width:26% !important; z-index:3 !important; filter:contrast(1.06);} .bcard .real{position:relative; z-index:6;} /* ==== v4a runda 2 ==== */ .prop{filter:none !important;} .lupa-img{-webkit-mask-image:none !important; mask-image:none !important; mix-blend-mode:normal !important;} .lens{left:7% !important; top:6.8% !important; width:54.4% !important; height:54.4% !important; box-shadow:inset 0 0 26px rgba(38,47,27,.16);} .por-wrap{width:min(350px,72vw) !important;} .por-note{font-size:12.5px !important; letter-spacing:.18em !important;} .p-kartki{right:21%; top:8%; width:clamp(210px,23vw,320px); z-index:2;} .p-stempel{right:23.5% !important; top:11% !important; width:clamp(180px,20vw,280px) !important; z-index:3;} .p-olowek{right:5% !important; left:auto !important; top:auto !important; bottom:21% !important; width:clamp(120px,13vw,180px) !important;} .p-kompas{right:24% !important; left:auto !important; bottom:13% !important; width:clamp(85px,9vw,120px) !important;} .p-notes{right:12% !important; left:auto !important; bottom:2% !important; width:clamp(95px,11vw,140px) !important;} .p-lupa{left:36% !important; right:auto !important; bottom:3% !important; width:clamp(180px,20vw,255px) !important;} .p-minipoczta{left:39% !important; right:auto !important; bottom:1% !important; width:clamp(130px,14vw,180px) !important;} @media(max-width:860px){.p-kartki{display:none;} .p-olowek,.p-notes{display:none !important;}} .doms span{background:var(--forest) !important; color:#F2EBD8 !important; border:none !important; mix-blend-mode:normal !important; font-size:11.5px !important; letter-spacing:.12em !important; padding:8px 14px !important;} .cue .mono{font-size:14px !important; letter-spacing:.18em !important; color:var(--forest) !important; font-weight:500;} .cue .stick{height:48px;} .bcard{max-width:640px !important;} .bcard .face>img{max-height:60vh !important;} .bcard .stampimg{width:34% !important; z-index:5 !important;} .bcard .strike{top:var(--strike-top,36%) !important; left:7% !important; width:84% !important; transform:rotate(-13deg); z-index:2 !important;} .bcard .real{margin:-34px auto 0 !important; max-width:88% !important; transform:rotate(-.5deg); box-shadow:0 16px 40px rgba(38,47,27,.16) !important;} .vign .pin2{padding-top:118px !important;} .vign .vig-copy{position:static !important;} /* R5 · GHOST „01" — wyrównanie do wzorca pozostałych numerów sekcji. Było: right:-22% liczone od .pin2 (1280px) = -281px → cała cyfra lądowała POZA prawą krawędzią ekranu (pomiar: prawa krawędź ghosta x=1562 przy oknie 1280 → 01 niewidoczne). Wzorzec .s-ghost w sekcjach 02/04/05/07: numer stoi u GÓRY kolumny treści i wystaje 6–8 px poza jej prawą krawędź. Tu kontenerem treści jest .pin2 (position:relative, padding poziomy clamp(20px,4.5vw,56px)), więc ten sam gest to right = padding − 8px. Pion podniesiony wyżej niż w 02/04: prawą kolumnę zajmuje talia kartek, a ghost siedzi pod nią (z-index:0) — przy top wyliczonym z paddingu zostawałby widoczny tylko 36-piksely pasek. Przy top:12px nad krawędzią kartki widać ~55 % cyfry, czyli tyle samo co „02" nad kartą kwalifikacji. */ .vig-copy .ghost{ top:12px !important; bottom:auto !important; left:auto !important; right:calc(clamp(20px,4.5vw,56px) - 8px) !important; font-size:clamp(110px,16vw,210px) !important; color:rgba(31,36,30,.09) !important; /* ton --ghost atmosfery „biurko" (p2), jak w 02/04 */ z-index:0 !important; } /* mobile: numery-widma znikają wszędzie (patrz .s-ghost{display:none} ≤860) */ @media(max-width:860px){ .vig-copy .ghost{display:none !important;} } @media(prefers-reduced-motion:reduce){.cta,.cta .arr,.hook-kicker,.vig-copy .khead,.compare .khead{animation:none !important;}} @media(prefers-reduced-motion:reduce){ .cue .stick i{animation:none;} } html.no-anim .pre{display:none;} /* ==== v4b: chłodna, stonowana paleta (oryzo / maxmilkin) ==== */ :root{ --paper:#E8E6DE; --paper2:#DDDBD0; --paper3:#D0CFC2; --card:#F0EFE8; --ink:#1F241E; --forest:#2C3830; --khaki:#57625A; --sand:#79816F; --rust:#C7480E; --rust-deep:#A23A08; --gold:#8A7833; --line:#C4C3B2; --steel:#3E4A50; } img.prop, .lupa-img, .por-img, .card-img, .lens-inner img{ filter:saturate(.78) hue-rotate(-10deg) contrast(1.06) brightness(.97);} .stampimg{filter:saturate(.85) hue-rotate(-8deg) contrast(1.08) !important;} .stagebox .before{filter:saturate(.9) hue-rotate(-6deg) contrast(1.03);} .stagebox .after{filter:saturate(.8) hue-rotate(-8deg) contrast(1.05) brightness(.95);} .grain{opacity:.065;} .doms span:nth-child(2){background:var(--rust) !important; transform:rotate(.9deg);} .doms span:nth-child(4){background:var(--steel) !important;} .doms span:nth-child(5){background:var(--gold) !important;} .cta{background:var(--ink);} .cta:hover{background:var(--rust);} .stagebox .lab.l{background:rgba(31,36,30,.78);} /* ==== v4b runda 2 ==== */ .p-stos{left:auto; right:11%; bottom:17%; width:clamp(170px,19vw,240px); z-index:6 !important; position:absolute; aspect-ratio:630/481; pointer-events:none;} .p-stempel{right:13% !important; top:7% !important; width:clamp(210px,23vw,310px) !important; z-index:6 !important; pointer-events:none; position:absolute;} h1.disp{font-size:clamp(30px,4.9vw,66px) !important;} h1.disp .ln > span{white-space:nowrap;} .doms{flex-wrap:nowrap !important; gap:6px 5px !important;} .doms span{background:transparent !important; color:var(--rust) !important; border:1.5px solid var(--rust) !important; border-radius:3px !important; mix-blend-mode:multiply !important; white-space:nowrap; font-size:10px !important; letter-spacing:.07em !important; padding:6px 9px !important;} .doms span:nth-child(1){transform:rotate(-1.4deg) !important;} .doms span:nth-child(2){transform:rotate(.9deg) !important; background:transparent !important;} .doms span:nth-child(3){transform:rotate(-.7deg) !important;} .doms span:nth-child(4){transform:rotate(1.3deg) !important; background:transparent !important;} .doms span:nth-child(5){transform:rotate(-1deg) !important; background:transparent !important;} .bcard .stampimg{width:clamp(185px,19vw,240px) !important; top:auto !important; bottom:20px !important; right:-42px !important; left:auto !important; z-index:7 !important; filter:saturate(1.06) contrast(1.15);} .bcard .real p{padding-right:76px;} .bcard .face{width:fit-content; margin:0 auto; position:relative;} .bcard.big{max-width:760px !important;} .bcard.big .face>img{max-height:68vh !important;} .lens{background:transparent !important;} .lens-world{position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none;} /* v4b runda 3 */ .p-lupa{z-index:7 !important; pointer-events:none;} .card-img{filter:drop-shadow(0 20px 34px rgba(31,36,30,.20));} .por-img{filter:drop-shadow(0 16px 30px rgba(31,36,30,.16));} @media(max-width:860px){.p-stos{right:2%; bottom:1%; width:130px;}} /* v4.3: fizyka sznurka (verlet, jedna lina) + stos z 7 osobnych kartek */ #ropeBack,#ropeFront{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;} #ropeBack{z-index:2;} #ropeFront{z-index:6;} #stosJolt{position:absolute; inset:0;} .p-stos .karta{position:absolute; display:block; opacity:1; will-change:transform,opacity; filter:saturate(.55) brightness(1.09) drop-shadow(0 5px 10px rgba(31,36,30,.15));} /* ==== FULL v-0.1: sekcje narracji po compare ==== */ .sekcja{position:relative; padding:clamp(84px,12vh,150px) 6vw; overflow:hidden;} .s-inner{max-width:880px; margin:0 auto; position:relative;} .s-ghost{position:absolute; top:-30px; right:-8px; font-family:Fraunces,serif; font-weight:700; font-size:clamp(110px,16vw,210px); line-height:1; color:rgba(44,56,48,.07); pointer-events:none; user-select:none;} .s-kick{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--rust); margin-bottom:18px;} .s-h2{font-family:Fraunces,serif; font-weight:600; font-size:clamp(28px,3.8vw,50px); line-height:1.12; color:var(--ink); margin:0 0 22px; max-width:20ch;} .s-lead{font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--ink); max-width:56ch; margin:0 0 26px; font-weight:500;} .prose p{font-size:clamp(15.5px,1.25vw,17.5px); line-height:1.7; color:#454D42; max-width:66ch; margin:0 0 18px;} .prose strong{color:var(--ink);} .sekcja-tinted{background:linear-gradient(180deg, rgba(44,56,48,.035), rgba(44,56,48,0) 30%);} /* diagnozy: karty protokolu */ .diag-lista{display:flex; flex-direction:column; gap:clamp(22px,3vw,34px); margin-top:36px;} .diag-karta{background:#F0EFE8; border:1px solid #C4C3B2; border-radius:8px; padding:clamp(20px,3vw,34px); box-shadow:0 14px 34px rgba(31,36,30,.10); position:relative;} .diag-karta:nth-child(odd){transform:rotate(-.4deg);} .diag-karta:nth-child(even){transform:rotate(.35deg);} .diag-karta::before{content:""; position:absolute; top:-12px; left:34px; width:86px; height:24px; background:rgba(121,129,111,.28); transform:rotate(-2deg); border-radius:2px;} .diag-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px;} .diag-num{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; color:#8F8A74;} .diag-zgl{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; padding:6px 10px; border:1.5px solid var(--rust); color:var(--rust); border-radius:3px; text-decoration:line-through; text-decoration-thickness:1.5px;} .diag-real{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; color:var(--forest); text-transform:uppercase;} .diag-karta p{margin:0 0 12px;} .forgiving{margin-top:38px; background:var(--paper); border:1px dashed #B7B29B; border-radius:8px; padding:clamp(20px,2.6vw,30px); transform:rotate(-.3deg); max-width:70ch;} .forgiving p{margin:0;} .metoda{margin-top:30px;} /* --- v-0.4: SPROSTOWANIE (poz. 01) — sekcja-oddech po przykładach --- */ #sprostowanie .prose p{max-width:66ch;} .spr-puenta{margin:34px 0 0; font-family:Fraunces,serif; font-style:italic; font-weight:500; font-size:clamp(20px,2.1vw,27px); line-height:1.4; color:var(--ink); max-width:24ch; text-wrap:balance;} .spr-puenta span{background-image:linear-gradient(rgba(176,141,46,.28), rgba(176,141,46,.28)); background-repeat:no-repeat; background-size:100% .5em; background-position:0 78%; box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .1em;} .spr-next{margin-top:56px; display:flex; align-items:center; gap:18px; color:var(--tx-body); flex-wrap:wrap;} .spr-next .rule{flex:1; min-width:60px; height:1px; background:rgba(69,77,66,.35);} .spr-next .mono{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;} /* showroom: kartoteka */ #showroom .s-inner{max-width:1160px;} .sh-filtry{display:flex; gap:9px; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 12px; margin:26px 0 6px; scrollbar-width:none;} .sh-filtry::-webkit-scrollbar{display:none;} .sh-chip{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:9px 13px; min-height:40px; border-radius:3px; background:transparent; cursor:pointer; white-space:nowrap; border:1.5px solid var(--forest); color:var(--forest); mix-blend-mode:multiply;} .sh-chip:nth-child(odd){transform:rotate(-.8deg);} .sh-chip:nth-child(even){transform:rotate(.6deg);} .sh-chip[data-akcent="rust"]{border-color:var(--rust); color:var(--rust);} .sh-chip[data-akcent="steel"]{border-color:var(--steel); color:var(--steel);} .sh-chip[data-akcent="gold"]{border-color:var(--gold); color:var(--gold);} .sh-chip[aria-pressed="true"]{transform:none; color:var(--paper) !important;} .sh-chip[aria-pressed="true"][data-akcent="rust"]{background:var(--rust);} .sh-chip[aria-pressed="true"][data-akcent="steel"]{background:var(--steel);} .sh-chip[aria-pressed="true"][data-akcent="gold"]{background:var(--gold);} .sh-chip[aria-pressed="true"]:not([data-akcent]){background:var(--forest);} .sh-licznik{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; color:#8F8A74; margin-bottom:22px;} .sh-grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,3vw,30px);} @media(min-width:640px){.sh-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1000px){.sh-grid{grid-template-columns:1fr 1fr 1fr;}} .sh-karta{background:#F0EFE8; border:1px solid #C4C3B2; border-radius:8px; padding:16px 16px 18px; box-shadow:0 14px 34px rgba(31,36,30,.10); position:relative; display:flex; flex-direction:column; gap:10px;} .sh-karta:nth-child(odd){transform:rotate(-.5deg);} .sh-karta:nth-child(even){transform:rotate(.4deg);} @media(hover:hover){.sh-karta{transition:transform .35s ease, box-shadow .35s ease;} .sh-karta:hover{transform:rotate(0) translateY(-4px); box-shadow:0 22px 44px rgba(31,36,30,.14);}} .sh-karta::before{content:""; position:absolute; top:-10px; left:26px; width:70px; height:20px; background:rgba(121,129,111,.28); transform:rotate(-2deg); border-radius:2px;} .sh-top{display:flex; justify-content:space-between; align-items:center; gap:8px;} .sh-poz{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em; color:#8F8A74; font-variant-numeric:tabular-nums;} .sh-kat{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border:1.2px solid; border-radius:3px; transform:rotate(-2deg);} .sh-kat.rust{color:var(--rust); border-color:var(--rust);} .sh-kat.steel{color:var(--steel); border-color:var(--steel);} .sh-kat.gold{color:var(--gold); border-color:var(--gold);} .sh-media{margin:0; border:1px solid #C4C3B2; border-radius:5px; overflow:hidden; background:#E9E7DC; position:relative;} .sh-atrapa{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:repeating-linear-gradient(-45deg, rgba(44,56,48,.04) 0 14px, rgba(44,56,48,0) 14px 28px);} .sh-atrapa .st{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.2em; color:var(--forest); border:1.6px solid var(--forest); padding:7px 11px; border-radius:3px; transform:rotate(-3deg); opacity:.85; text-transform:uppercase;} .sh-atrapa .md{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; color:#8F8A74; text-transform:uppercase;} .sh-tytul{font-family:Fraunces,serif; font-weight:600; font-size:18.5px; line-height:1.25; color:var(--ink); margin:2px 0 0;} .sh-podpis{font-size:13.5px; line-height:1.55; color:#454D42; margin:0;} .sh-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:6px;} .sh-metatxt{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em; color:#8F8A74; text-transform:uppercase;} .sh-anon{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--steel); border:1.2px solid var(--steel); padding:3px 7px; border-radius:3px; transform:rotate(-2deg); text-transform:uppercase;} .sh-cap{display:flex; align-items:center; gap:16px; margin-top:40px;} .sh-cap .rule{flex:1; height:1px; background:#C4C3B2;} .sh-cap span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; color:#8F8A74; text-transform:uppercase; white-space:nowrap;} /* social wstawka + kontakt + stopka */ .social-note{margin-top:44px; max-width:60ch; background:#F0EFE8; border:1px solid #C4C3B2; border-radius:8px; padding:clamp(18px,2.4vw,28px); transform:rotate(.35deg); position:relative;} .social-note h3{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin:0 0 12px;} .social-note p{margin:0 0 10px;} .kontakt-dane{display:flex; gap:clamp(18px,4vw,48px); flex-wrap:wrap; margin:30px 0 34px;} .kd{border:1px solid #C4C3B2; background:#F0EFE8; border-radius:8px; padding:18px 24px; min-width:220px;} .kd .lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; color:#8F8A74; text-transform:uppercase; display:block; margin-bottom:6px;} .kd .val{font-family:Fraunces,serif; font-size:22px; color:var(--ink); font-weight:600;} .stopka{padding:34px 6vw 40px; display:flex; justify-content:space-between; align-items:center; gap:14px; border-top:1px solid #C4C3B2; flex-wrap:wrap;} .stopka .wm{font-family:Fraunces,serif; font-weight:600; font-size:17px; color:var(--ink);} .stopka .mono{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:#8F8A74;} @media(max-width:860px){ .s-ghost{font-size:96px; top:-16px;} .sekcja{padding:64px 6vw;} } /* ==== FULL v-0.2: MOBILE REBUILD (<=860px) — fundament ==== */ @media(max-width:860px){ html, body{ overflow-x:hidden; } .hero-pin{ padding:84px 0 64px; } .inner{ display:block !important; width:min(92vw,560px) !important; } .hero-copy{ width:100% !important; max-width:100% !important; } .symptoms, .hero .lead{ max-width:100% !important; } h1.disp{ font-size:clamp(29px,9.4vw,44px) !important; } h1.disp .ln > span{ white-space:normal !important; } .doms{ flex-wrap:wrap !important; } .p-stempel{ width:clamp(116px,30vw,150px) !important; right:3% !important; top:9% !important; } .symptoms{ max-width:calc(100% - 32vw - 14px) !important; } .hook-kicker{ white-space:normal !important; max-width:92vw; font-size:11px !important; letter-spacing:.14em !important; } .cue{ display:none !important; } .por-wrap{ position:relative !important; margin:26px auto 0 !important; } .p-lupa{ width:clamp(120px,34vw,168px) !important; left:auto !important; right:8% !important; bottom:24% !important; } .p-stos{ right:6% !important; bottom:5% !important; width:clamp(112px,36vw,150px) !important; } .sekcja{ padding:56px 6vw; } .s-ghost{ display:none; } .diag-head{ gap:8px; } .kontakt-dane{ flex-direction:column; } } /* ==== FULL v-0.2: ARCHITEKTURA KOLORÓW ==== */ /* ============================================================ ARCHITEKTURA KOLORÓW v-0.2 — „protokół schodzi głębiej" Zgodność wsteczna: --paper/--paper2/--paper3 aliasowane — zatwierdzone sekcje hero→compare nie zmieniają ani piksela. MAPA (v-0.4, PODPIĘTA — stan faktyczny = plan): hero .atmo-surface | descend: gradient | vign/compare/closer (własne p2) | sprostowanie .atmo-desk | .prog-p2-p3 | geneza .atmo-deep | dlakogo .atmo-deep | .prog-p3-dk | diagnozy .atmo-dark | showroom .atmo-dark (+ .dk-grain + .dk-lamp) | .prog-dk-p1 | bio .atmo-return | zasady .atmo-surface | rozmowa .atmo-desk | .prog-p2-ink | kontakt+stopka .atmo-ink (+ .ink-lamp „lampka na biurku") ============================================================ */ :root{ /* --- oś papieru (zejście) --- */ --p0:#E8E6DE; /* powierzchnia: preloader, hero, zasady */ --p1:#DDDBD0; /* półpiętro: bio (powrót z ciemni) */ --p2:#D0CFC2; /* biurko: vignettes, compare, closer, rozmowa */ --p3:#C2C0B0; /* archiwum: geneza, dla-kogo, diagnozy (NOWY) */ /* --- dokument: stała jasność na każdym papierze --- */ --card:#F0EFE8; --card-edge:#B9B7A6; /* zamiast bladego #C4C3B2 */ --card-tape:rgba(87,98,90,.32); /* washi-tape, multiply */ /* --- atramenty / tekst na jasnym --- */ --ink:#1F241E; --forest:#2C3830; --tx-body:#454D42; /* prose: 4.8:1 nawet na p3 */ --tx-mute:#57625A; /* meta TYLKO p0/p1 (5.1:1 na p0); na p2/p3 meta = var(--tx-body) */ /* KASACJA jako kolory tekstu: #8F8A74 (2.8:1) i #79816F */ /* --- akcenty: role, nie dekoracja --- */ --rust:#C7480E; /* werdykt/działanie: kreski, pieczątki, hover */ --rust-deep:#A23A08; /* rust dla małego tekstu na p0/p1 (5.4:1) */ --rust-lift:#F5803C; /* rust w ciemni (5.4:1 na --dk) */ --steel:#3E4A50; /* aparat protokołu: metadane, anonimizacja */ --steel-lift:#9FB4BC; /* steel w ciemni (6.6:1) */ --gold:#8A7833; /* dorobek/podpis — najrzadszy */ --gold-lift:#C9B45C; /* gold w ciemni (6.9:1) */ /* --- ciemnia (ta sama rodzina hue co forest/ink) --- */ --dk:#232B26; /* ciemnia dowodów (showroom) */ --dk-ink:#1B211C; /* finał: kontakt + stopka */ --dk-card:#2C352E; /* stół podświetleniowy / karty */ --dk-line:rgba(232,230,222,.14); --dk-tx:#E8E6DE; /* 11.3:1 na --dk, 13:1 na --dk-ink */ --dk-tx2:#A9B2A7; /* 6.5:1 na --dk */ --dk-ghost:rgba(232,230,222,.055); /* --- cienie: trzy poziomy zamiast jednego mydła --- */ --sh-rest:0 1px 0 rgba(31,36,30,.05), 0 10px 24px rgba(31,36,30,.10); --sh-lift:0 2px 0 rgba(31,36,30,.05), 0 18px 44px rgba(31,36,30,.17); --sh-float:0 34px 90px rgba(31,36,30,.22); /* max 1 na sekcję */ --sh-dark:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,230,222,.05); /* --- aliasy wsteczne v-0.1 --- */ --paper:var(--p0); --paper2:var(--p1); --paper3:var(--p2); --line:#C4C3B2; --khaki:var(--tx-mute); --sand:#79816F; } /* ===================== ATMOSFERY ===================== */ .atmo{position:relative; background:var(--bg); color:var(--tx,var(--ink));} .atmo-surface{--bg:var(--p0); --tx:var(--ink); --tx2:var(--tx-body); --mut:var(--tx-mute); --kick:var(--rust-deep); --ghost:rgba(31,36,30,.08); --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-rest);} .atmo-return{--bg:var(--p1); --tx:var(--ink); --tx2:var(--tx-body); --mut:var(--tx-mute); --kick:var(--rust-deep); --ghost:rgba(31,36,30,.085); --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-rest);} .atmo-desk{--bg:var(--p2); --tx:var(--ink); --tx2:var(--tx-body); --mut:var(--tx-body); --kick:var(--rust-deep); --ghost:rgba(31,36,30,.09); --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-lift);} .atmo-deep{--bg:var(--p3); --tx:var(--ink); --tx2:var(--tx-body); --mut:var(--tx-body); --kick:var(--ink); --ghost:rgba(240,239,232,.45); /* watermark JAŚNIEJSZY od tła = tłoczenie */ --card-bg:var(--card); --card-line:var(--card-edge); --sh-card:var(--sh-lift);} .atmo-deep .s-kick{color:var(--ink);} .atmo-deep .s-kick::before{content:""; display:inline-block; width:16px; height:3px; background:var(--rust); margin-right:9px; vertical-align:middle;} /* rust-deep na p3 tylko 3.7:1 — dla 11px kicker w ink + rust-kreska */ .atmo-dark{--bg:var(--dk); --tx:var(--dk-tx); --tx2:var(--dk-tx2); --mut:var(--dk-tx2); --kick:var(--rust-lift); --ghost:var(--dk-ghost); --card-bg:var(--dk-card); --card-line:var(--dk-line); --sh-card:var(--sh-dark); color:var(--dk-tx);} .atmo-ink{--bg:var(--dk-ink); --tx:var(--dk-tx); --tx2:var(--dk-tx2); --mut:var(--dk-tx2); --kick:var(--rust-lift); --ghost:var(--dk-ghost); --card-bg:var(--dk-card); --card-line:var(--dk-line); --sh-card:var(--sh-dark); color:var(--dk-tx);} .atmo-dark ::selection,.atmo-ink ::selection{background:var(--rust-lift); color:var(--dk);} /* --- elementy czytają tokeny atmosfery (mapowanie na klasy v-0.1) --- */ .atmo .s-h2,.atmo .s-lead{color:var(--tx);} .atmo .prose p{color:var(--tx2);} .atmo .prose strong{color:var(--tx);} .atmo .s-kick{color:var(--kick);} .atmo .s-ghost{color:var(--ghost);} .atmo .diag-karta,.atmo .sh-karta,.atmo .kd,.atmo .social-note,.atmo .forgiving{ background:var(--card-bg); border-color:var(--card-line); box-shadow:var(--sh-card);} .atmo .diag-karta::before,.atmo .sh-karta::before{background:var(--card-tape); mix-blend-mode:multiply;} .atmo .diag-num,.atmo .sh-poz,.atmo .sh-licznik,.atmo .sh-metatxt, .atmo .sh-cap span,.atmo .kd .lbl,.atmo .sh-atrapa .md{color:var(--mut);} /* --- ciemnia: karty i atrapy = podświetlone slajdy, nie dziury --- */ .atmo-dark .sh-media{background:#1E2620; border-color:var(--dk-line); box-shadow:inset 0 0 34px rgba(0,0,0,.5);} .atmo-dark .sh-atrapa{background:repeating-linear-gradient(-45deg, rgba(232,230,222,.05) 0 14px, rgba(232,230,222,0) 14px 28px);} .atmo-dark .sh-atrapa .st{color:var(--gold-lift); border-color:var(--gold-lift); opacity:1;} .atmo-dark .sh-tytul{color:var(--dk-tx);} .atmo-dark .sh-podpis{color:var(--dk-tx2);} .atmo-dark .sh-kat.rust{color:var(--rust-lift); border-color:var(--rust-lift);} .atmo-dark .sh-kat.steel{color:var(--steel-lift); border-color:var(--steel-lift);} .atmo-dark .sh-kat.gold{color:var(--gold-lift); border-color:var(--gold-lift);} .atmo-dark .sh-anon{color:var(--steel-lift); border-color:var(--steel-lift);} .atmo-dark .sh-chip{border-color:var(--dk-tx2); color:var(--dk-tx2);} .atmo-dark .sh-chip[data-akcent="rust"]{border-color:var(--rust-lift); color:var(--rust-lift);} .atmo-dark .sh-chip[data-akcent="steel"]{border-color:var(--steel-lift); color:var(--steel-lift);} .atmo-dark .sh-chip[data-akcent="gold"]{border-color:var(--gold-lift); color:var(--gold-lift);} .atmo-dark .sh-chip{mix-blend-mode:normal;} .atmo-dark .sh-chip[aria-pressed="true"]{color:var(--dk) !important;} .atmo-dark .sh-chip[aria-pressed="true"][data-akcent="rust"]{background:var(--rust-lift);} .atmo-dark .sh-chip[aria-pressed="true"][data-akcent="steel"]{background:var(--steel-lift);} .atmo-dark .sh-chip[aria-pressed="true"][data-akcent="gold"]{background:var(--gold-lift);} .atmo-dark .sh-chip[aria-pressed="true"]:not([data-akcent]){background:var(--dk-tx2);} /* --- grain lokalny ciemni (globalny multiply gaśnie na ciemnym) --- */ .dk-grain{position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* --- czerwona lampka ciemni (JS ustawia --mx/--my z kursora) --- */ .dk-lamp{position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:screen; background:radial-gradient(420px 420px at var(--mx,50%) var(--my,28%), rgba(199,72,14,.13), transparent 70%);} @media(pointer:coarse){.dk-lamp{background:radial-gradient(60% 40% at 50% 0%, rgba(199,72,14,.08), transparent 70%);}} /* --- lampka na biurku w finale (v-0.4: finał ≠ repryza ciemni akt — cieplejszy, wyraźny stożek światła nad kartą kontaktu + delikatny ambient rust; ciemnia akt zostaje zimna/dokumentalna) --- */ .ink-lamp{position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; background: radial-gradient(640px 460px at 38% 58%, rgba(201,180,92,.22), transparent 72%), radial-gradient(1100px 700px at 62% 30%, rgba(245,128,60,.05), transparent 75%);} /* ===== PASY PRZEJŚCIOWE (zero JS, zero pinów; fallback reduced-motion) mid-stopy w rodzinie forest — środek gradientu nie szarzeje ===== */ .prog{position:relative; pointer-events:none; z-index:0;} .prog-p2-p3{height:26vh; background:linear-gradient(180deg,var(--p2),var(--p3));} .prog-p3-dk{height:34vh; background:linear-gradient(180deg, var(--p3) 0%, #6B7263 34%, #39423A 62%, var(--dk) 100%);} .prog-dk-p1{height:26vh; background:linear-gradient(180deg, var(--dk) 0%, #4A5449 30%, #9AA091 68%, var(--p1) 100%);} .prog-p2-ink{height:22vh; background:linear-gradient(180deg, var(--p2) 0%, #6A7263 40%, var(--dk-ink) 100%);} .prog-label{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#C9CDBF; white-space:nowrap;} /* --- CTA finału (na .atmo-ink) --- */ .cta-ink{display:inline-flex; align-items:center; gap:12px; text-decoration:none; background:var(--rust-deep); color:#FFF6EE; /* 6.3:1 */ font-weight:600; font-size:15.5px; padding:16px 28px; border-radius:999px; box-shadow:0 18px 44px rgba(0,0,0,.4); transition:background .3s, transform .25s;} .cta-ink:hover{background:var(--rust); transform:translateY(-2px);} /* 4.5:1 */ /* --- stopka w finale (v-0.4 P0-fix: footer MA obie klasy na sobie — selektor bez zagnieżdżenia) --- */ .stopka.atmo-ink{border-top:1px solid var(--dk-line);} .stopka.atmo-ink .wm{color:var(--dk-tx);} .stopka.atmo-ink .mono{color:var(--dk-tx2);} /* --- KASACJA mydła v-0.1 --- */ .sekcja-tinted{background:none;} /* tinty rgba(.035) zastąpione osią papieru */ /* ==== FULL v-0.2: SHOWROOM "LINKA DOWODOWA" ==== */ .sh2{ padding-bottom:0; overflow:hidden; } .sh2-lampa{ position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(56% 44% at 50% 42%, rgba(232,230,222,.10), transparent 70%); } /* ==== v-0.4: WARSZTAT (iframe biurka) zamiast galerii linki ==== */ .shb{ position:relative; z-index:2; max-width:1160px; margin:30px auto 0; padding:0 clamp(16px,3vw,32px) 54px; } .shb-ramka{ position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#141a16; box-shadow:var(--sh-dark); border:1px solid var(--dk-line); } .shb-ramka iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; pointer-events:none; } /* uspiony: scroll strony nie wpada w warsztat */ .shb-ramka.aktywny iframe{ pointer-events:auto; } .shb-cloak{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; cursor:pointer; border:0; width:100%; background:linear-gradient(180deg, rgba(20,25,20,.18), rgba(20,25,20,.55) 78%); color:var(--dk-tx); text-align:center; padding:24px; } .shb-cloak[hidden]{ display:none; } .shb-cl-glowny{ font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:#F2EBD8; border:1.6px solid rgba(242,235,216,.85); border-radius:4px; padding:13px 22px; background:rgba(20,25,20,.55); transition:background .25s, transform .25s; } @media(hover:hover){ .shb-cloak:hover .shb-cl-glowny{ background:var(--rust-deep); transform:translateY(-2px); } } .shb-cl-sub{ font-size:13px; line-height:1.5; color:var(--dk-tx2); max-width:52ch; text-shadow:0 1px 8px rgba(0,0,0,.5); } .shb-cloak:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:-4px; } .shb-pasek{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:14px; } .shb-status{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dk-tx2); } .shb-akcje{ display:flex; gap:10px; } .shb-btn{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; color:var(--dk-tx); background:none; border:1.4px solid var(--dk-line); border-radius:4px; padding:8px 14px; transition:border-color .25s, color .25s; } @media(hover:hover){ .shb-btn:hover{ border-color:var(--rust-lift); color:var(--rust-lift); } } .shb-btn:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:2px; } .shb-ramka:fullscreen{ aspect-ratio:auto; border-radius:0; } @media(max-width:860px){ .shb{ padding:0 4vw 40px; } .shb-ramka{ aspect-ratio:4/3; } .shb-cl-sub{ font-size:11.5px; } } /* ==== FULL v-0.2: SCENY ==== */ :root{ --manila:#C9B98C; --manila-c:#BFAE7E; --manila-edge:#A6935F; } /* --- łuk tonalny v-0.4: zejście PODPIĘTE (sprostowanie p2 → geneza/dlakogo p3 → ciemnia). Poprzednie korekty v-0.2 nadpisywały tła po ID i trzymały genezę na p1 (jaśniej niż closer!) — to było sedno „rozjazdu" połówek. Pasy i sekcje idą teraz wg mapy atmosfer. --- */ .prog-p2-p3{background:linear-gradient(180deg,var(--p2),var(--p3));} #geneza.atmo{background:linear-gradient(0deg, rgba(44,56,48,.045), rgba(44,56,48,.045)), var(--p3);} .prog-p3-dk{height:40vh; background:linear-gradient(180deg, var(--p3) 0%, #8A9082 30%, #4A5449 64%, var(--dk) 100%);} .prog-p2-ink{background:linear-gradient(180deg, var(--p2) 0%, #6A7263 40%, var(--dk-ink) 100%);} #rozmowa .s-kick{color:var(--steel);} .prog-depth{position:absolute; left:clamp(14px,3vw,44px); bottom:30px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:#C9CDBF; font-variant-numeric:tabular-nums; font-weight:500;} /* --- LINIA PROTOKOŁU: jedna nić akt w lewym marginesie --- */ .poz{position:absolute; left:clamp(8px,2.2vw,40px); top:0; bottom:0; z-index:3; pointer-events:none; color:var(--mut,#57625A);} .poz-nic{position:absolute; left:0; top:0; bottom:0; width:0; border-left:1px dashed currentColor; opacity:.45; transform-origin:top; display:block;} .poz-tab{position:absolute; left:-5px; top:clamp(84px,12vh,150px); writing-mode:vertical-rl; font-size:9.5px; letter-spacing:.2em; opacity:.75; background:var(--bg); padding:8px 0;} .poz-ink{color:var(--dk-tx2);} .poz-ink .poz-tab{background:transparent;} @media(max-width:899px){ .poz{display:none;} } /* --- STAŁY GRZBIET PROTOKOŁU: zakładki akt zamiast obcej belki UI --- */ .spis{position:fixed; right:clamp(12px,2.4vw,30px); bottom:max(clamp(12px,2.4vw,26px),env(safe-area-inset-bottom)); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:9px;} .spis-sygnatura{display:none;} .spis-btn{display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; color:var(--ink); background:var(--card); min-height:44px; border:1.4px solid var(--card-edge); border-radius:4px; padding:9px 10px; box-shadow:var(--sh-rest); transition:border-color .25s, color .25s;} .spis-btn b{font:inherit; color:var(--rust-deep); letter-spacing:.12em;} @media(hover:hover){ .spis-btn:hover{border-color:var(--rust); color:var(--rust);} } .spis-btn:focus-visible{outline:2px solid var(--rust); outline-offset:2px;} .spis-btn[aria-expanded="true"]{color:var(--rust); border-color:var(--rust);} .spis-lista{list-style:none; width:min(270px,calc(100vw - 24px)); margin:0; padding:10px; background:var(--card); border:1px solid var(--card-edge); border-radius:6px; box-shadow:var(--sh-lift); display:flex; flex-direction:column; gap:2px; max-height:min(70vh,520px); overflow:auto;} .spis-lista[hidden]{display:none;} .spis-lista a{display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; min-height:44px; padding:7px 8px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:#454D42; text-decoration:none; border-radius:3px; white-space:nowrap; transition:background .2s, color .2s, border-color .2s;} .spis-nr{font-weight:600; color:var(--steel); font-variant-numeric:tabular-nums;} .spis-etykieta{overflow:hidden; text-overflow:ellipsis;} .spis-lista a.is-active{background:rgba(199,72,14,.09); color:var(--rust-deep);} .spis-lista a.is-active .spis-nr{color:var(--rust-deep);} @media(hover:hover){ .spis-lista a:hover{background:rgba(199,72,14,.09); color:var(--rust-deep);} } .spis-lista a:focus-visible{outline:2px solid var(--rust); outline-offset:-2px;} .spis-lista .spis-szczyt{border-bottom:1px dashed var(--card-edge); margin-bottom:5px; padding-bottom:5px;} @media(min-width:900px){ .spis{top:50%; bottom:auto; right:clamp(10px,1.55vw,24px); transform:translateY(-50%); gap:7px; pointer-events:none;} .spis-sygnatura{display:block; align-self:flex-end; padding:4px 5px 4px 7px; font-size:7.5px; line-height:1; letter-spacing:.22em; color:var(--tx-mute); background:rgba(240,239,232,.92); border:1px solid var(--card-edge); border-radius:3px; transform:rotate(-.5deg); box-shadow:0 2px 8px rgba(31,36,30,.08);} .spis-btn{display:none;} .spis-lista, .spis-lista[hidden]{position:relative; display:flex; align-items:flex-end; gap:5px; width:auto; padding:8px 0; max-height:none; overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; pointer-events:auto;} .spis-lista::before{content:""; position:absolute; right:16px; top:0; bottom:0; border-right:1px dashed rgba(87,98,90,.42); z-index:-1;} .spis-lista li{display:flex; justify-content:flex-end;} .spis-lista .spis-szczyt{border:0; margin:0 0 4px; padding:0 0 5px;} .spis-lista a{grid-template-columns:32px 0fr; width:34px; min-height:32px; padding:0; min-height:34px; justify-items:center; overflow:hidden; background:rgba(240,239,232,.94); border:1px solid var(--card-edge); border-radius:4px 2px 2px 4px; box-shadow:0 3px 12px rgba(31,36,30,.10); transform:rotate(.2deg); transition:width .22s ease, grid-template-columns .22s ease, background .2s, color .2s, transform .2s;} .spis-lista li:nth-child(even) a{transform:rotate(-.35deg);} .spis-lista a .spis-nr{width:32px; text-align:center;} .spis-lista a .spis-etykieta{width:0; justify-self:start; opacity:0; transition:width .22s ease, opacity .14s ease;} .spis-lista a:hover, .spis-lista a:focus-visible, .spis-lista a.is-active{width:132px; grid-template-columns:32px minmax(0,1fr); justify-items:stretch; background:var(--card); transform:translateX(-2px) rotate(0deg);} .spis-lista a:hover .spis-etykieta, .spis-lista a:focus-visible .spis-etykieta, .spis-lista a.is-active .spis-etykieta{width:auto; opacity:1; padding-right:10px;} .spis-lista a.is-active{border-color:var(--rust); box-shadow:inset 3px 0 0 var(--rust), 0 4px 14px rgba(31,36,30,.13);} } /* --- GENEZA: zeznanie świadka --- */ .gen-cialo{position:relative;} .gen-fraza{border-bottom:2px dotted var(--rust-deep); padding-bottom:1px; cursor:default;} .gen-marker{background-image:linear-gradient(rgba(176,141,46,.30), rgba(176,141,46,.30)); background-repeat:no-repeat; background-size:100% 82%; background-position:0 62%; box-decoration-break:clone; -webkit-box-decoration-break:clone;} .gen-zwrot{font-size:clamp(17px,1.6vw,21px) !important; line-height:1.55 !important; color:var(--tx) !important; font-weight:500; max-width:56ch !important;} .gen-rozplatac{position:relative; white-space:nowrap;} .gen-splot{position:absolute; left:-4%; bottom:-.85em; width:108%; height:.95em; overflow:visible; pointer-events:none;} .gen-splot path{fill:none; stroke:var(--rust); stroke-width:2; stroke-linecap:round; opacity:.9;} .gen-dowody{display:none; position:absolute; right:calc(-1 * clamp(0px, 16vw - 130px, 190px)); top:0; width:132px;} #geneza.gen-on .gen-dowody{display:block;} .gen-dow-head{display:block; font-size:9px; letter-spacing:.18em; color:var(--mut); margin-bottom:10px; text-transform:uppercase;} .gen-dow-lista{display:flex; flex-direction:column; gap:14px;} .gen-mini{position:relative; margin:0; width:100%; will-change:transform;} .gen-mini::before{content:""; position:absolute; top:-8px; left:22%; width:46%; height:15px; background:var(--card-tape); mix-blend-mode:multiply; transform:rotate(-2.5deg); border-radius:2px; z-index:2;} .gen-mini img{display:block; width:100%; height:auto; filter:saturate(.7) contrast(1.04); box-shadow:0 8px 18px rgba(31,36,30,.16); border-radius:3px;} .gen-mini-tag{display:block; font-size:8.5px; letter-spacing:.16em; color:var(--mut); margin-top:5px; text-transform:uppercase;} /* --- DLA KOGO: karta kwalifikacji --- */ .dk2-grid{display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(22px,4vw,52px); align-items:start;} .kwal{position:relative; background:var(--card-bg); border:1px solid var(--card-line); border-radius:8px; padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-card); transform:rotate(.6deg); max-width:380px;} .kwal-tape{position:absolute; top:-12px; left:30px; width:84px; height:22px; background:var(--card-tape); mix-blend-mode:multiply; transform:rotate(-2deg); border-radius:2px;} .kwal-head{color:var(--steel); letter-spacing:.22em; margin-bottom:16px; border-bottom:1px solid var(--card-line); padding-bottom:10px;} .kwal-list{list-style:none; display:flex; flex-direction:column; gap:13px;} .kwal-poz{display:flex; align-items:center; gap:12px;} .kwal-poz .mono{color:var(--tx-body); font-size:10.5px; letter-spacing:.08em;} .kwal-znak{width:20px; height:20px; flex:0 0 20px;} .kwal-znak path{fill:none; stroke:var(--rust); stroke-width:2.6; stroke-linecap:round;} .kwal-x path{stroke:var(--steel);} .kwal-sk{position:relative; display:inline-block; padding:1px 2px;} .kwal-strike{position:absolute; left:-2px; right:-2px; top:50%; height:12px; transform:translateY(-50%); overflow:visible; pointer-events:none;} .kwal-strike path{stroke:var(--rust); stroke-width:2.2; fill:none; stroke-linecap:round;} .kwal-korpo .mono{color:var(--mut);} .kwal-stopka{display:flex; align-items:center; gap:14px; margin-top:20px; border-top:1px dashed var(--card-line); padding-top:14px; color:var(--forest);} .mini-kompas{width:44px; height:44px; flex:0 0 44px;} .kwal-podpis{font-size:9px; letter-spacing:.14em; color:var(--mut); line-height:1.8;} /* --- DIAGNOZY: trzy akta pod lampą --- */ .dg-jasnosc{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:radial-gradient(64% 54% at 50% 42%, rgba(232,230,222,.15), transparent 72%);} .dg-protokol{position:relative; background:var(--card); border:1px solid var(--card-edge); border-radius:4px; padding:14px 18px; margin:26px 0 8px; max-width:380px; box-shadow:var(--sh-dark); display:flex; flex-direction:column; gap:7px; transform:rotate(-.5deg);} .dg-protokol::before{content:""; position:absolute; top:-9px; left:26px; width:64px; height:17px; background:var(--card-tape); mix-blend-mode:multiply; transform:rotate(-2deg); border-radius:2px;} .dg-prot-head{color:#8F8A74; font-size:9px; letter-spacing:.2em;} .dg-prot-poz{display:flex; align-items:center; gap:10px;} .dg-prot-poz s{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--forest); text-decoration-color:var(--rust); text-decoration-thickness:1.8px;} .dg-prot-poz i{font-style:normal; font-size:8.5px; letter-spacing:.14em; color:var(--rust); border:1px solid var(--rust); border-radius:3px; padding:1px 5px; transform:rotate(-3deg);} .dg-prot-cta{color:var(--rust); font-size:9px; letter-spacing:.2em; margin-top:4px;} .dg-prog{display:flex; align-items:center; gap:14px; color:var(--dk-tx2); margin:18px 0 6px; font-variant-numeric:tabular-nums;} .dg-kreski{display:flex; gap:7px;} .dg-kreski i{width:26px; height:3px; background:rgba(232,230,222,.32); position:relative; overflow:hidden; display:block;} .dg-kreski i b{position:absolute; inset:0; background:var(--rust-lift); transform:scaleX(0); transform-origin:left; display:block;} .dg-teczka{position:relative; margin:0 0 30px;} .dg-okladka{position:relative; z-index:3; display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:linear-gradient(180deg, var(--manila), var(--manila-c)); border:1px solid var(--manila-edge); border-radius:8px 8px 0 0; padding:13px 20px; box-shadow:var(--sh-dark); will-change:transform;} .dg-okladka::before{content:""; position:absolute; top:-11px; left:18px; width:120px; height:12px; background:var(--manila); border:1px solid var(--manila-edge); border-bottom:none; border-radius:5px 5px 0 0;} .dg-zakladka{color:#4A4126; font-size:10px; letter-spacing:.2em;} .dg-okl-zgl{position:relative; display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; color:var(--ink); padding:1px 2px;} .dg-okl-zgl svg{position:absolute; left:-2px; right:-2px; top:50%; height:13px; transform:translateY(-50%); overflow:visible; pointer-events:none;} .dg-okl-zgl svg path{stroke:var(--rust); stroke-width:2.4; fill:none; stroke-linecap:round;} .dg-okl-tag{font-size:8.5px; letter-spacing:.16em; color:var(--rust); border:1.2px solid var(--rust); border-radius:3px; padding:2px 6px; transform:rotate(-4deg);} #diagnozy .diag-karta{transform:none; border-radius:0 0 8px 8px; margin-top:-1px; padding-left:clamp(46px,5.5vw,62px); padding-bottom:70px; position:relative;} #diagnozy .diag-karta::before{display:none;} #diagnozy .diag-zgl{text-decoration:none; position:relative; display:inline-block; padding:4px 8px;} .dg-strike{position:absolute; left:2px; right:2px; top:50%; height:13px; transform:translateY(-50%); overflow:visible; pointer-events:none; width:calc(100% - 4px);} .dg-strike path{stroke:var(--rust); stroke-width:2.4; fill:none; stroke-linecap:round;} .dg-nic{position:absolute; left:14px; top:66px; bottom:88px; width:22px; height:auto; pointer-events:none;} .dg-nic path{fill:none; stroke-linecap:round;} .dg-nic-rdzen{stroke:#8A7040; stroke-width:3.4;} .dg-nic-splot{stroke:#D9C79B; stroke-width:1.2; stroke-dasharray:3 4;} #diagnozy .diag-karta .prose u{text-decoration:none; background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat; background-size:100% 2px; background-position:0 96%;} #diagnozy .diag-real{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); border:1.6px solid var(--rust); border-radius:3px; padding:7px 11px; transform:rotate(-1.2deg); margin-top:4px; background:rgba(199,72,14,.05);} .dg-stemp{position:absolute; right:20px; bottom:16px; display:flex; flex-direction:column; align-items:center; gap:1px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--rust); border:2px solid var(--rust); border-radius:4px; padding:7px 12px; transform:rotate(-6deg); mix-blend-mode:multiply; will-change:transform;} .dg-final{position:relative; z-index:4;} /* v-0.4: stemple na CIEMNYCH kartach akt — rust-lift + normal blend (multiply gasił je do zera) */ .atmo-dark .dg-stemp{color:var(--rust-lift); border-color:var(--rust-lift); mix-blend-mode:normal; opacity:.92;} #diagnozy .forgiving{border-color:rgba(232,230,222,.4); background:rgba(240,239,232,.06);} #diagnozy .forgiving p{color:var(--dk-tx);} #diagnozy .metoda p{font-family:Fraunces,serif; font-weight:500; font-size:clamp(17px,1.9vw,25px); line-height:1.45; color:var(--dk-tx); max-width:none;} #diagnozy .metoda strong{color:var(--gold-lift); font-weight:600;} .dg-trzy{margin-top:34px; position:relative; max-width:640px;} .dg-trzy-linia{position:absolute; left:0; right:0; top:8px; width:100%; height:34px; pointer-events:none;} .dg-trzy-linia path{fill:none; stroke:#8A7040; stroke-width:2;} .dg-trzy-teczki{display:flex; gap:clamp(14px,4vw,40px); justify-content:space-between; position:relative;} .dg-mini{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;} .dg-mini i{display:block; width:52px; height:34px; background:linear-gradient(180deg,var(--manila),var(--manila-c)); border:1px solid var(--manila-edge); border-radius:3px; position:relative; box-shadow:0 6px 14px rgba(0,0,0,.35);} .dg-mini i::before{content:""; position:absolute; top:-6px; left:6px; width:20px; height:6px; background:var(--manila); border:1px solid var(--manila-edge); border-bottom:none; border-radius:3px 3px 0 0;} .dg-mini b{font-weight:400; font-size:8.5px; letter-spacing:.12em; color:var(--dk-tx2); text-align:center;} /* diagnozy: tryb pinowanej sceny (JS dodaje .dg-on tylko na desktopie z animacjami) */ #diagnozy.dg-on{padding:0 4vw;} #diagnozy.dg-on .dg-pin{height:100svh; display:flex; align-items:center; overflow:hidden;} #diagnozy.dg-on .s-inner{width:100%; max-width:1060px; height:94svh; display:flex; flex-direction:column; padding-top:4svh; position:relative;} #diagnozy.dg-on .s-ghost{display:none;} #diagnozy.dg-on .s-kick{margin-bottom:10px;} #diagnozy.dg-on .s-h2{font-size:clamp(19px,2.1vw,28px); max-width:30ch; margin-bottom:8px;} #diagnozy.dg-on .dg-protokol{position:absolute; right:0; top:0; margin:0; width:min(330px,32%); z-index:1;} #diagnozy.dg-on .diag-lista{position:relative; flex:1; min-height:0; margin-top:6px;} #diagnozy.dg-on .dg-teczka{position:absolute; inset:0; margin:auto; width:min(660px,94%); height:fit-content; max-height:100%;} #diagnozy.dg-on .dg-okladka{position:absolute; inset:0; border-radius:8px; flex-direction:column; justify-content:center; gap:18px;} #diagnozy.dg-on .dg-okladka::before{top:-11px; left:26px;} #diagnozy.dg-on .dg-zakladka{font-size:13px;} #diagnozy.dg-on .dg-okl-zgl{font-size:15px;} #diagnozy.dg-on .diag-karta{border-radius:8px; margin-top:0;} #diagnozy.dg-on .diag-karta .prose p{font-size:14px; line-height:1.55; max-width:none; margin-bottom:12px;} #diagnozy.dg-on .dg-nic{top:58px; bottom:82px;} #diagnozy.dg-on .dg-final{position:absolute; inset:0; margin:auto; width:min(720px,94%); height:fit-content; display:flex; flex-direction:column; gap:18px; z-index:6; pointer-events:none; opacity:0;} #diagnozy.dg-on .forgiving{margin-top:0;} #diagnozy.dg-on .metoda{margin-top:0;} #diagnozy.dg-on .dg-trzy{margin-top:8px;} #diagnozy.dg-on .dg-prog{position:absolute; left:0; bottom:1.5svh; margin:0;} /* diagnozy: ciasne viewporty — finał musi zmieścić się w pinie */ @media (max-height:900px){ #diagnozy.dg-on .metoda p{font-size:16.5px; line-height:1.4;} #diagnozy.dg-on .forgiving{padding:14px 18px;} #diagnozy.dg-on .forgiving p{font-size:13.5px; line-height:1.55;} #diagnozy.dg-on .dg-final{gap:10px;} #diagnozy.dg-on .dg-trzy{margin-top:2px;} #diagnozy.dg-on .dg-mini i{width:42px; height:27px;} #diagnozy.dg-on .diag-karta .prose p{font-size:13px; line-height:1.5;} #diagnozy.dg-on .diag-karta{padding-bottom:60px;} } /* --- BIO: przebieg trasy --- */ .bio-trasa{position:relative;} #bio.bio-on .bio-trasa{padding-left:clamp(64px,9vw,120px);} #bio.bio-on .bio-rail{display:block;} .bio-rail{display:none; position:absolute; left:0; top:0; bottom:0; width:clamp(48px,7vw,96px); pointer-events:none; color:var(--gold);} .bio-kompas{position:absolute; left:50%; top:-16px; transform:translateX(-50%); width:40px; color:var(--gold);} .bio-kompas .mini-kompas{width:40px; height:40px;} .bio-svg{position:absolute; left:0; top:34px; bottom:44px; width:100%; height:calc(100% - 78px);} .bio-path{fill:none; stroke:var(--gold); stroke-width:2px; stroke-dasharray:7 6; opacity:.85;} .bio-petla{position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:34px; height:34px;} .bio-petla path{fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round;} .bio-dot{position:absolute; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(138,120,51,.18); pointer-events:auto;} @media(hover:hover){ .bio-dot:hover{animation:bioPuls .9s ease-in-out infinite;} } @keyframes bioPuls{ 0%,100%{box-shadow:0 0 0 4px rgba(138,120,51,.18);} 50%{box-shadow:0 0 0 9px rgba(138,120,51,.08);} } .bio-tab{position:absolute; left:calc(50% + 14px); margin-top:-4px; font-size:8.5px; letter-spacing:.16em; color:var(--gold); white-space:nowrap; background:var(--bg); padding:2px 4px; border:1px solid rgba(138,120,51,.4); border-radius:3px; transform:rotate(-1.6deg);} /* v-0.4: bio-final wraca do prozy (ściana 30px serifa grzebała puentę); wyróżnikiem jest TYLKO zdanie .bio-lacz — delikatnie większy Fraunces + podkreślenie */ #bio .bio-final{font-size:17.5px; line-height:1.7; color:var(--tx2); max-width:66ch;} .bio-lacz{position:relative; font-family:Fraunces,serif; font-style:italic; font-weight:500; font-size:clamp(19px,1.9vw,24px); line-height:1.4; color:var(--rust); white-space:normal;} .bio-under{position:absolute; left:-1%; bottom:-.12em; width:102%; height:.28em; overflow:visible; pointer-events:none;} .bio-under path{fill:none; stroke:var(--rust); stroke-width:4; stroke-linecap:round;} /* --- ZASADY: wyłączenia z protokołu --- */ .zas-klauzula{position:relative; margin:0 0 26px;} .zas-nr{display:inline-block; font-size:9.5px; letter-spacing:.22em; color:var(--rust-deep); border-bottom:1px solid rgba(162,58,8,.35); padding-bottom:3px; margin-bottom:9px; text-transform:uppercase;} .zas-cyt{position:relative; display:inline; padding:0 1px;} .zas-cyt svg{position:absolute; left:-2px; right:-2px; top:50%; height:13px; transform:translateY(-50%); overflow:visible; pointer-events:none; width:calc(100% + 4px);} .zas-cyt svg path{stroke:var(--rust); stroke-width:2.2; fill:none; stroke-linecap:round; opacity:.9;} .zas-katalog{position:absolute; right:calc(-1 * clamp(0px, 18vw - 150px, 220px)); top:6px; width:150px; background:var(--card-bg); border:1px solid var(--card-line); border-radius:6px; padding:12px 13px 40px; box-shadow:var(--sh-card); transform:rotate(1.2deg); will-change:transform;} .zk-tyt{display:block; font-size:8.5px; letter-spacing:.14em; color:var(--tx-body); margin-bottom:9px; text-transform:uppercase;} .zk-linia{display:block; height:5px; background:rgba(31,36,30,.14); border-radius:2px; margin:6px 0;} .zk-linia.kr{width:62%;} .zk-stemp{position:absolute; right:8px; bottom:8px; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); border:2px solid var(--rust); border-radius:3px; padding:4px 8px; transform:rotate(-8deg); will-change:transform;} .soc-ikony{display:flex; gap:14px; margin:4px 0 16px;} .soc-kw{display:block; width:48px; height:48px; border:1.5px dashed var(--steel); border-radius:8px; opacity:.9; will-change:transform;} .soc-kw svg{display:block; width:100%; height:100%;} .soc-x{fill:none; stroke:var(--rust); stroke-width:2.6; stroke-linecap:round;} /* --- ROZMOWA: procedura po sznurku --- */ .rz-tor{position:relative; padding-left:clamp(52px,7vw,86px);} .rz-lina{position:absolute; left:clamp(6px,1.4vw,18px); top:6px; bottom:6px; width:30px; height:calc(100% - 12px); pointer-events:none;} .rz-lina-rdzen{fill:none; stroke:#8A7040; stroke-width:3.4px; stroke-linecap:round;} .rz-lina-splot{fill:none; stroke:#D9C79B; stroke-width:1.2px; stroke-dasharray:3 4;} .rz-stacja{position:relative; margin:0 0 34px;} .rz-krok{display:inline-block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); border:1.6px solid var(--steel); border-radius:3px; padding:6px 10px; transform:rotate(-2deg); margin-bottom:12px; background:var(--card-bg); will-change:transform;} /* v-0.4: karty kroków dostają papierowość jak reszta rekwizytów (rotacja; taśma via ::before) */ .rz-stacja:nth-child(2) .rz-karta{transform:rotate(-.35deg);} .rz-stacja:nth-child(3) .rz-karta{transform:rotate(.3deg);} .rz-stacja:nth-child(4) .rz-karta{transform:rotate(-.25deg);} .rz-karta::before{content:""; position:absolute; left:34px; top:-9px; width:74px; height:20px; background:var(--card-tape); transform:rotate(-2deg); mix-blend-mode:multiply; border-radius:2px;} .rz-karta{position:relative; background:var(--card-bg); border:1px solid var(--card-line); border-radius:8px 8px 8px 8px; padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-card); max-width:62ch; will-change:transform;} .rz-karta::after{content:""; position:absolute; right:0; bottom:0; width:0; height:0; border-style:solid; border-width:0 0 22px 22px; border-color:transparent transparent var(--bg) transparent; filter:drop-shadow(-2px -2px 2px rgba(31,36,30,.10)); border-bottom-right-radius:4px;} .rz-karta .prose p{margin:0;} .rz-widelki{position:relative; max-width:400px; margin:0 0 26px; padding-top:2px;} .rz-y{display:block; width:min(220px,70%); height:74px; margin-left:-14px;} .rz-y path{fill:none; stroke-width:3; stroke-linecap:round;} .rz-y-gold{stroke:var(--gold);} .rz-y-steel{stroke:var(--steel);} .rz-tail{position:absolute; font-size:9.5px; letter-spacing:.14em; white-space:nowrap;} .rz-tail-gold{left:-14px; bottom:-8px; color:var(--gold);} .rz-tail-steel{left:150px; bottom:-8px; color:var(--steel);} .rz-margines{position:relative; max-width:56ch; background:var(--paper); border:1px dashed #B7B29B; border-radius:8px; padding:clamp(16px,2.2vw,24px); transform:rotate(-1.6deg); margin-top:10px; will-change:transform;} .rz-margines .prose p{margin:0; font-size:14.5px;} /* --- KONTAKT: nowe zgłoszenie --- */ .kt-biurko{position:relative; margin-top:26px;} .kt-tlo{position:absolute; right:-4%; top:-30px; width:min(300px,40%); z-index:0; opacity:.5; transform:rotate(-5deg); pointer-events:none; filter:saturate(.6) brightness(.8);} .kt-karta{position:relative; z-index:2; background:var(--card); border:1px solid var(--card-edge); border-radius:10px; padding:clamp(22px,3.4vw,40px); padding-bottom:88px; max-width:640px; box-shadow:var(--sh-dark); will-change:transform; /* v-0.4 P0-fix: jasna karta w ciemnej sekcji resetuje tokeny atmosfery — .atmo .prose p / .atmo .kd .lbl czytają --tx2/--mut z NAJBLIŻSZEGO przodka */ --tx:var(--ink); --tx2:#454D42; --mut:#57625A;} .kt-karta .kwal-tape{left:36px;} .kt-stare{display:flex; flex-direction:column; gap:8px; border-bottom:1px dashed var(--card-edge); padding-bottom:16px; margin-bottom:20px;} .kt-head{color:#8F8A74; font-size:9px; letter-spacing:.2em;} .kt-zgl{display:flex; align-items:center; gap:10px; will-change:transform;} .kt-zgl s{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--forest); text-decoration-color:var(--rust); text-decoration-thickness:1.8px;} .kt-zgl i{font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.14em; color:#8F8A74; border:1px solid #B9B7A6; border-radius:3px; padding:1px 5px; text-transform:uppercase; transform:rotate(-2deg);} .kt-nowa{position:relative; display:flex; align-items:center; gap:12px; margin-top:6px; min-height:26px;} .kt-linia{width:min(320px,58%); height:8px; overflow:visible;} .kt-linia path{fill:none; stroke:var(--forest); stroke-width:1.6; stroke-dasharray:4 5; stroke-linecap:round; opacity:.75;} .kt-tag{font-size:8.5px; letter-spacing:.14em; color:#8F8A74; border:1.2px dashed #A9A695; border-radius:3px; padding:2px 6px; transform:rotate(-3deg); text-transform:uppercase;} .kt-olowek{width:74px; height:16px; color:var(--forest); opacity:.8;} .kt-copy p{color:#454D42;} .kt-karta .kontakt-dane{margin:22px 0 10px;} .kt-karta .kd{background:#FBF9F1; border-color:var(--card-edge); text-decoration:none; display:block; box-shadow:0 6px 16px rgba(31,36,30,.10); will-change:transform;} .kt-karta .kd::before{content:""; display:block; width:30px; height:9px; border:2px solid #8F8A74; border-bottom:none; border-radius:6px 6px 0 0; margin:-24px 0 8px 6px; opacity:.7;} .kt-karta .kd .val{background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 98%; transition:background-size .35s;} @media(hover:hover){ .kt-karta .kd:hover .val{background-size:100% 2px;} } .kt-stempel{position:absolute; right:22px; bottom:18px; font-family:'IBM Plex Mono',monospace; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); border:2.6px solid var(--rust); border-radius:4px; padding:9px 16px; transform:rotate(-9deg); mix-blend-mode:multiply; will-change:transform;} /* --- STOPKA: odcinek dla zgłaszającego --- */ footer.stopka.atmo-ink{position:relative; border-top:none; padding-top:40px; will-change:transform;} footer.stopka.atmo-ink::before{content:""; position:absolute; top:14px; left:6vw; right:6vw; height:2px; background:repeating-linear-gradient(90deg, rgba(232,230,222,.4) 0 7px, transparent 7px 16px);} .st-supel{width:76px; height:30px; color:var(--dk-tx2); opacity:.8;} .st-supel path{fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round;} .st-supel circle{fill:currentColor;} /* --- SCENY: mobile (<=860px) --- */ @media(max-width:860px){ .gen-dowody{position:static; width:auto; margin:6px 0 22px;} .gen-dow-lista{flex-direction:row; gap:10px; overflow-x:auto; padding-bottom:6px;} .gen-mini{flex:0 0 64px; width:64px;} .gen-mini::before{height:10px; top:-5px;} .gen-mini-tag{display:none;} .dk2-grid{display:block;} .kwal{margin-top:26px; max-width:420px;} .dg-protokol{max-width:none;} #diagnozy .diag-karta{padding-left:clamp(40px,10vw,52px); padding-bottom:76px;} .dg-nic{left:11px;} .dg-okladka{border-radius:8px 8px 0 0;} .bio-trasa{padding-left:34px;} .bio-rail{width:22px;} .bio-kompas{width:30px;} .bio-kompas .mini-kompas{width:30px; height:30px;} .bio-tab{display:none;} .bio-dot{width:9px; height:9px; margin-left:-4.5px;} .bio-petla{width:26px; height:26px;} .zas-katalog{display:none;} .rz-tor{padding-left:36px;} .rz-lina{left:2px; width:22px;} .rz-tail-steel{left:120px;} .kt-tlo{display:none;} .kt-karta{padding-bottom:76px;} .kt-stempel{font-size:12.5px; right:14px; bottom:14px;} .kt-linia{width:52%;} } /* --- SCENY: fallback bez animacji (stany końcowe) --- */ html.no-anim .dg-jasnosc{opacity:0;} html.no-anim .gen-dowody{display:none;} /* miniatury buduje JS */ html.no-anim .bio-trasa{padding-left:0;} html.no-anim .bio-rail{display:none;} /* hero: dopisek o zleceniach punktowych */ .hero-punkt{margin:14px 0 0; font-size:clamp(13.5px,1.2vw,15px); line-height:1.5; color:var(--tx-body); max-width:46ch;} .hero-punkt a{color:var(--rust); text-decoration:none; border-bottom:1px solid rgba(199,72,14,.4);} .hero-punkt a:hover{border-bottom-color:var(--rust);} /* hero: cta-note (e-mail/telefon) jako klikalne linki — kolor dziedziczony z rodzica, subtelne podkreslenie kropkowane */ .cta-note a{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor;} @media(hover:hover){ .cta-note a:hover{border-bottom-style:solid;} } /* ============================================================================ KRAWĘDZIE OSI PRZEJŚĆ — fragment wdrożeniowy dla pawelszydlowski.pl Dodatek do motywu „szydlowski". NIE nadpisuje motywu — same nowe klasy `.kr-*`. Źródło implementacji: strona/nowa/czesci/krawedzie-warianty.html (KRAW-01/03/06, GRAD-03), zaadaptowane do realnych par kolorów granic (zmienne --od / --do jak radzi mapa łuku). Kolory hosta (z motywu, dostępne globalnie): --p0..--p3, --dk, --dk-ink, --rust, --steel, --gold, --dk-tx2. Krawędzie czytają je przez --od/--do na elemencie. MAPA GRANIC (wg decyzji Pawła): descend → vign ................. KRAW-06 zszywki (.kr-zszywki, p2→p2) 01 sprostowanie → 02 geneza .... KRAW-06 zszywki (.kr-zszywki, p2→p3) [wypada .prog-p2-p3] 02 geneza → 03 dlakogo ......... gradient prosty (.kr-grad-plain, p3→p3) 03 dlakogo → 04 diagnozy ....... KRAW-03 zakładki (.kr-tabs, twarde cięcie p3|dk) [wypada .prog-p3-dk] 06 bio → 07 zasady ............. GRAD-03 warstwice (.kr-warstwice, p1, odwrócone+subtelne) 08b zlecenia → 09 kontakt ...... KRAW-01 wydarte akta (.kr-tear, p2→dk-ink) [wypada .prog-p2-ink] Granice niewymienione (04→05, 05→06, 07→08, 08→08b, 09→stopka) ZOSTAJĄ BEZ ZMIAN. ============================================================================ */ /* =========================================================================== KRAW-06 · ZSZYWKI I SPINACZ — wspólny komponent na DWÓCH granicach Sparametryzowany --od / --do; zero dublowania kodu. • descend → vign : --od:var(--p2); --do:var(--p2) (papier/papier, ten sam ton) • 01 sprostowanie → 02 geneza: --od:var(--p2); --do:var(--p3) (mały skok, wchodzi zamiast .prog-p2-p3) Cichy, dokumentowy szew: linia zagięcia z miękkim cieniem + metalowe zszywki + spinacz. =========================================================================== */ .kr-zszywki{ position:relative; z-index:2; height:30px; background:linear-gradient(180deg, var(--od,var(--p2)) 0 47%, rgba(35,43,38,.10) 50%, var(--do,var(--p3)) 53% 100%); } .kr-zszywki .kr-zszywka{ position:absolute; top:50%; transform:translateY(-50%); width:28px; height:12px; background:linear-gradient(180deg,#d3d6cc,#8f948a); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2011%27%3E%3Cpath%20d%3D%27M2%2010V3h3v7M21%2010V3h3v7M5%203h16%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2011%27%3E%3Cpath%20d%3D%27M2%2010V3h3v7M21%2010V3h3v7M5%203h16%27%20stroke%3D%27%23000%27%20stroke-width%3D%273%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); } .kr-zszywki .kr-spinacz{ position:absolute; top:-7px; z-index:2; width:19px; height:48px; background:linear-gradient(115deg,#c4c8bf 0%,#8b8f86 45%,#d6d9cf 100%); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2084%27%3E%3Cpath%20d%3D%27M11%2078%20V20%20a10%2010%200%200%201%2020%200%20V64%20a15%2015%200%200%201%20-30%200%20V16%20a13%2013%200%200%201%2026%200%20V70%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2084%27%3E%3Cpath%20d%3D%27M11%2078%20V20%20a10%2010%200%200%201%2020%200%20V64%20a15%2015%200%200%201%20-30%200%20V16%20a13%2013%200%200%201%2026%200%20V70%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; filter:drop-shadow(0 2px 2px rgba(0,0,0,.28)); } /* =========================================================================== GRADIENT PROSTY — granica 02 geneza → 03 dlakogo (p3 → p3) „Zwykły stopniowy, bez fajerwerków": gładki, wielostopniowy w oklab (brak bandingu), ZERO ziarna / topo / ozdób. Oba tła to p3 — pas to delikatny oddech (leciutkie pogłębienie w środku i powrót), więc szew nie jest martwy ani krzykliwy. =========================================================================== */ .kr-grad-plain{ position:relative; z-index:0; height:18vh; background:linear-gradient(180deg in oklab, var(--od,var(--p3)) 0%, color-mix(in oklab, var(--od,var(--p3)), var(--forest) 6%) 34%, color-mix(in oklab, var(--od,var(--p3)), var(--forest) 9%) 52%, color-mix(in oklab, var(--do,var(--p3)), var(--forest) 6%) 70%, var(--do,var(--p3)) 100%); } /* Fallback bez color-mix: czysty p3→p3 (płaski, ale poprawny). */ @supports not (background:color-mix(in oklab,red,blue)){ .kr-grad-plain{background:linear-gradient(180deg,var(--od,var(--p3)),var(--do,var(--p3)));} } /* Pierwsza połowa oryginalnego szwu bio → zasady: p1 → p2. W skróconej narracji zostaje sam szew, bez budzenia usuniętej sekcji #zasady-r2. */ .kr-zasady-wejscie{ position:relative; z-index:1; height:96px; pointer-events:none; background:linear-gradient(180deg,var(--p1) 0%,var(--p2) 100%); } .kr-zasady-wejscie::before{ content:""; position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(31,36,30,.05) 13px 14px); -webkit-mask:linear-gradient(180deg,#000,transparent); mask:linear-gradient(180deg,#000,transparent); } /* =========================================================================== KRAW-03 · ZAKŁADKI REGISTRATORA — granica 03 dlakogo → 04 diagnozy Twarde cięcie kolorów (p3 górą | dk dołem, ostry styk 50/50, BEZ gradientu). Zakładki to PRAWDZIWE LINKI do sekcji dalej na stronie (mechanizm skoku jak w spisie). „Lekko wystylizowane": hover/focus unosi języczek. =========================================================================== */ .kr-tabs{ position:relative; z-index:2; height:52px; overflow:hidden; background:linear-gradient(180deg, var(--od,var(--p3)) 0 50%, var(--do,var(--dk)) 50% 100%); /* twarde cięcie — dwa pełne kolory, brak blendu */ } .kr-tabs .kr-zakladka{ position:absolute; bottom:0; height:38px; padding:0 15px; display:flex; align-items:center; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap; color:var(--dk-tx2); background:var(--do,var(--dk)); border:1px solid var(--steel); border-bottom:none; border-radius:9px 9px 0 0; box-shadow:inset 0 3px 0 var(--rust); transition:transform .18s ease, color .18s ease; } .kr-tabs .kr-zakladka:hover, .kr-tabs .kr-zakladka:focus-visible{ transform:translateY(-4px); color:var(--p0); outline:none; } .kr-tabs .kr-zakladka:focus-visible{ box-shadow:inset 0 3px 0 var(--rust), 0 0 0 2px var(--rust-lift,#F5803C); } .kr-tabs .kr-zakladka.z2{box-shadow:inset 0 3px 0 var(--steel)} .kr-tabs .kr-zakladka.z3{box-shadow:inset 0 3px 0 var(--gold)} .kr-tabs .kr-zakladka.z4{box-shadow:inset 0 3px 0 var(--rust)} /* =========================================================================== GRAD-03 · WARSTWICE GŁĘBOKOŚCI — granica 06 bio → 07 zasady (p1 → p1) ODWRÓCONE względem warsztatu (linie gęściej u góry, przy bio) i SUBTELNIEJSZE: opacity warstwic schodzi w dół aż do poziomu faktury tła sekcji 07 (stroke-opacity≈.045), więc pas bezszwowo przechodzi w topograficzną fakturę #zasady. Tło płaskie p1. =========================================================================== */ .kr-warstwice{ position:relative; z-index:1; height:clamp(120px,20vh,240px); background:var(--od,var(--p1)); } .kr-warstwice::before{ content:""; position:absolute; inset:0; pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20preserveAspectRatio='none'%20viewBox='0%200%201200%20340'%3E%3Cg%20fill='none'%20stroke='%232C3830'%20stroke-width='1.4'%3E%3Cpath%20d='M0%2016%20C%20180%202%2C%20360%2032%2C%20560%2012%20S%20940%2028%2C%201200%208'/%3E%3Cpath%20d='M0%2040%20C%20180%2026%2C%20360%2056%2C%20560%2036%20S%20940%2052%2C%201200%2032'/%3E%3Cpath%20d='M0%2068%20C%20180%2054%2C%20360%2084%2C%20560%2064%20S%20940%2080%2C%201200%2060'/%3E%3Cpath%20d='M0%20100%20C%20180%2086%2C%20360%20116%2C%20560%2096%20S%20940%20112%2C%201200%2092'/%3E%3Cpath%20d='M0%20138%20C%20180%20124%2C%20360%20154%2C%20560%20134%20S%20940%20150%2C%201200%20130'/%3E%3Cpath%20d='M0%20182%20C%20180%20168%2C%20360%20198%2C%20560%20178%20S%20940%20194%2C%201200%20174'/%3E%3Cpath%20d='M0%20232%20C%20180%20218%2C%20360%20248%2C%20560%20228%20S%20940%20244%2C%201200%20224'/%3E%3Cpath%20d='M0%20300%20C%20180%20286%2C%20360%20316%2C%20560%20296%20S%20940%20312%2C%201200%20292'/%3E%3C/g%3E%3C/svg%3E") top/100% 100% no-repeat; opacity:.18; /* odwrócone: pełne u góry (bio) → zanik ku dołowi (do poziomu faktury sekcji 07) */ -webkit-mask:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 100%); mask:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 100%); } /* =========================================================================== KRAW-01 · WYDARTE AKTA — granica 08b zlecenia → 09 kontakt (p2 → dk-ink) Kierunek W DÓŁ: jasna kartka (p2) wydarta, odsłania ciemne archiwum kontaktu (dk-ink). Najmocniejszy gest — uzasadniony dużym skokiem wartości do finałowej ciemni. =========================================================================== */ .kr-tear{ position:relative; z-index:2; height:clamp(80px,13vh,150px); background:var(--do,var(--dk-ink)); } .kr-tear::before{ content:""; position:absolute; inset:0; background:var(--od,var(--p2)); filter:drop-shadow(0 6px 5px rgba(15,20,16,.4)); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%201200%20120%27%3E%3Cpath%20d%3D%27M%200%200%20L%201200%200%20L%201200%2073.9%20L%201183.6%2051.7%20L%201163.7%2061.9%20L%201149.1%2055.3%20L%201128.3%2098.2%20L%201104.3%2090.3%20L%201084.0%2049.1%20L%201065.3%2099.1%20L%201038.3%2065.8%20L%201014.0%2071.9%20L%20999.0%2061.9%20L%20974.2%2073.7%20L%20950.8%2074.5%20L%20924.1%2082.4%20L%20900.9%2076.8%20L%20875.2%2069.2%20L%20859.3%2073.4%20L%20842.9%2050.7%20L%20816.7%2078.3%20L%20797.6%2082.2%20L%20774.4%2074.6%20L%20745.2%2075.2%20L%20730.3%2082.4%20L%20700.4%2086.3%20L%20680.2%2052.3%20L%20663.5%2049.9%20L%20647.5%2067.9%20L%20619.5%2062.6%20L%20596.7%2088.3%20L%20568.9%2068.9%20L%20549.2%2088.3%20L%20532.7%2065.6%20L%20515.0%2075.5%20L%20496.8%2060.1%20L%20476.9%2078.1%20L%20451.8%2076.5%20L%20427.0%2061.7%20L%20400.5%2088.0%20L%20380.3%20102.3%20L%20365.3%2062.2%20L%20348.7%2056.0%20L%20332.3%2063.2%20L%20317.8%2088.0%20L%20301.5%2068.1%20L%20281.6%2063.9%20L%20251.8%2074.9%20L%20236.4%2063.3%20L%20218.1%2096.2%20L%20188.9%20101.4%20L%20174.5%2076.9%20L%20146.7%2082.3%20L%20126.8%2065.3%20L%20104.3%2084.9%20L%2086.7%2086.0%20L%2059.1%2085.8%20L%2033.2%2067.3%20L%2013.6%2053.8%20L%200%2082.2%20L%200%2075.4%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27none%27%20viewBox%3D%270%200%201200%20120%27%3E%3Cpath%20d%3D%27M%200%200%20L%201200%200%20L%201200%2073.9%20L%201183.6%2051.7%20L%201163.7%2061.9%20L%201149.1%2055.3%20L%201128.3%2098.2%20L%201104.3%2090.3%20L%201084.0%2049.1%20L%201065.3%2099.1%20L%201038.3%2065.8%20L%201014.0%2071.9%20L%20999.0%2061.9%20L%20974.2%2073.7%20L%20950.8%2074.5%20L%20924.1%2082.4%20L%20900.9%2076.8%20L%20875.2%2069.2%20L%20859.3%2073.4%20L%20842.9%2050.7%20L%20816.7%2078.3%20L%20797.6%2082.2%20L%20774.4%2074.6%20L%20745.2%2075.2%20L%20730.3%2082.4%20L%20700.4%2086.3%20L%20680.2%2052.3%20L%20663.5%2049.9%20L%20647.5%2067.9%20L%20619.5%2062.6%20L%20596.7%2088.3%20L%20568.9%2068.9%20L%20549.2%2088.3%20L%20532.7%2065.6%20L%20515.0%2075.5%20L%20496.8%2060.1%20L%20476.9%2078.1%20L%20451.8%2076.5%20L%20427.0%2061.7%20L%20400.5%2088.0%20L%20380.3%20102.3%20L%20365.3%2062.2%20L%20348.7%2056.0%20L%20332.3%2063.2%20L%20317.8%2088.0%20L%20301.5%2068.1%20L%20281.6%2063.9%20L%20251.8%2074.9%20L%20236.4%2063.3%20L%20218.1%2096.2%20L%20188.9%20101.4%20L%20174.5%2076.9%20L%20146.7%2082.3%20L%20126.8%2065.3%20L%20104.3%2084.9%20L%2086.7%2086.0%20L%2059.1%2085.8%20L%2033.2%2067.3%20L%2013.6%2053.8%20L%200%2082.2%20L%200%2075.4%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; } .kr-tear .kr-strzep{ position:absolute; pointer-events:none; z-index:3; background:var(--od,var(--p2)); filter:drop-shadow(0 3px 3px rgba(15,20,16,.5)); } .kr-tear .kr-strzep.s1{ width:64px; height:28px; left:24%; bottom:-14px; transform:rotate(-7deg); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%203.7%20L%206.4%205.8%20L%2012.9%204.6%20L%2019.3%206.2%20L%2025.7%206.4%20L%2032.1%202.5%20L%2038.6%202.1%20L%2045.0%207.9%20L%2051.4%203.8%20L%2057.9%203.6%20L%2064.3%209.0%20L%2070.7%205.3%20L%2077.1%207.9%20L%2083.6%205.3%20L%2090.0%206.5%20L%2090.0%2038.8%20L%2083.6%2034.9%20L%2077.1%2033.1%20L%2070.7%2035.8%20L%2064.3%2034.1%20L%2057.9%2034.6%20L%2051.4%2039.5%20L%2045.0%2033.9%20L%2038.6%2035.3%20L%2032.1%2037.6%20L%2025.7%2039.8%20L%2019.3%2033.1%20L%2012.9%2036.2%20L%206.4%2034.2%20L%200.0%2033.0%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%203.7%20L%206.4%205.8%20L%2012.9%204.6%20L%2019.3%206.2%20L%2025.7%206.4%20L%2032.1%202.5%20L%2038.6%202.1%20L%2045.0%207.9%20L%2051.4%203.8%20L%2057.9%203.6%20L%2064.3%209.0%20L%2070.7%205.3%20L%2077.1%207.9%20L%2083.6%205.3%20L%2090.0%206.5%20L%2090.0%2038.8%20L%2083.6%2034.9%20L%2077.1%2033.1%20L%2070.7%2035.8%20L%2064.3%2034.1%20L%2057.9%2034.6%20L%2051.4%2039.5%20L%2045.0%2033.9%20L%2038.6%2035.3%20L%2032.1%2037.6%20L%2025.7%2039.8%20L%2019.3%2033.1%20L%2012.9%2036.2%20L%206.4%2034.2%20L%200.0%2033.0%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } .kr-tear .kr-strzep.s2{ width:48px; height:22px; left:70%; bottom:2px; transform:rotate(9deg); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%205.2%20L%206.4%204.6%20L%2012.9%203.0%20L%2019.3%208.1%20L%2025.7%202.0%20L%2032.1%205.5%20L%2038.6%208.3%20L%2045.0%202.6%20L%2051.4%205.9%20L%2057.9%206.3%20L%2064.3%202.3%20L%2070.7%204.7%20L%2077.1%206.9%20L%2083.6%205.2%20L%2090.0%207.1%20L%2090.0%2038.7%20L%2083.6%2038.1%20L%2077.1%2039.1%20L%2070.7%2035.9%20L%2064.3%2032.6%20L%2057.9%2035.3%20L%2051.4%2033.8%20L%2045.0%2036.9%20L%2038.6%2034.0%20L%2032.1%2039.2%20L%2025.7%2037.7%20L%2019.3%2034.6%20L%2012.9%2034.2%20L%206.4%2036.6%20L%200.0%2039.3%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%20viewBox%3D%270%200%2090%2042%27%3E%3Cpath%20d%3D%27M%200.0%205.2%20L%206.4%204.6%20L%2012.9%203.0%20L%2019.3%208.1%20L%2025.7%202.0%20L%2032.1%205.5%20L%2038.6%208.3%20L%2045.0%202.6%20L%2051.4%205.9%20L%2057.9%206.3%20L%2064.3%202.3%20L%2070.7%204.7%20L%2077.1%206.9%20L%2083.6%205.2%20L%2090.0%207.1%20L%2090.0%2038.7%20L%2083.6%2038.1%20L%2077.1%2039.1%20L%2070.7%2035.9%20L%2064.3%2032.6%20L%2057.9%2035.3%20L%2051.4%2033.8%20L%2045.0%2036.9%20L%2038.6%2034.0%20L%2032.1%2039.2%20L%2025.7%2037.7%20L%2019.3%2034.6%20L%2012.9%2034.2%20L%206.4%2036.6%20L%200.0%2039.3%20Z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } /* =========================================================================== MOBILE ≤899px — każda krawędź ma zdefiniowane zachowanie Pasy przejściowe motywu NIE znikają na mobile; krawędzie też zostają, tylko drobiazg chowany. =========================================================================== */ @media (max-width:899px){ .kr-zszywki .kr-zszywka.kr-hide{ display:none; } /* 3 zszywki → 1; spinacz zostaje */ .kr-grad-plain{ height:12vh; } .kr-tabs{ height:46px; } .kr-tabs .kr-zakladka.kr-hide{ display:none; } /* 4 języczki → 2 */ .kr-tabs .kr-zakladka .kr-full{ display:none; } /* skróć etykietę do numeru pozycji */ .kr-tabs .kr-zakladka{ font-size:9.5px; padding:0 11px; height:34px; } .kr-warstwice{ height:clamp(84px,15vh,150px); } .kr-tear{ height:64px; } } @media (max-width:560px){ .kr-tear .kr-strzep{ display:none; } /* strzępki chowane, żeby drobiazg nie gubił rytmu */ } @media (prefers-reduced-motion:reduce){ .kr-tabs .kr-zakladka{ transition:none; } } /* ============================================================================ FRAGMENT HERO: portret przypięty taśmą washi (druk duotonowy) Dopisać na KOŃCU assets/css/main.css (kolejność źródła > wcześniejsze reguły .por-wrap / .por-note; te wcześniejsze bez !important, więc te wygrywają). Nie dotyka fizyki sznurka/kartek ani rekwizytów .prop. ============================================================================ */ /* rama „odbitki”: papierowy passe-partout + cień druku (drop-shadow zostaje z main.css:287) */ #polaroid.por-wrap{ --por-rot: -2deg; /* lekki obrót całości (klimat .rz-karta) */ padding: 12px 12px 34px; /* margines papieru; dół szerszy na podpis */ background: var(--p0, #E8E6DE); border: 1px solid rgba(31,36,30,.12); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 18px 34px rgba(31,36,30,.16), 0 2px 6px rgba(31,36,30,.10); transform: rotate(var(--por-rot)); transform-origin: 50% 18%; } #polaroid .por-img{ width: 100%; height: auto; display: block; border: 1px solid rgba(31,36,30,.14); /* delikatna spójność z filtrem druku strony (main.css:248 daje .por-img saturate/hue) */ } /* podpis: mono „etykieta odbitki” w dolnym pasku passe-partout (nie overlay na twarzy) */ #polaroid .por-note{ position: absolute; left: 12px; right: 12px; bottom: 8px; top: auto; transform: rotate(0); text-align: center; line-height: 1.25; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sand, #79816F); } /* taśma washi: dwa paski na górnych rogach, zachodzą poza krawędź papieru */ #polaroid .por-tape{ position: absolute; z-index: 5; top: -13px; width: 82px; height: 26px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, rgba(255,255,255,0) 3px 6px), linear-gradient(180deg, rgba(62,74,80,.42), rgba(62,74,80,.30)); /* stal, półprzejrzysta */ box-shadow: 0 4px 8px rgba(31,36,30,.14); mix-blend-mode: multiply; } #polaroid .por-tape::after{ /* poszarpane krawędzie taśmy */ content:""; position:absolute; inset:0; border-left: 2px dotted rgba(31,36,30,.10); border-right: 2px dotted rgba(31,36,30,.10); } #polaroid .por-tape--l{ left: -16px; transform: rotate(-24deg); } #polaroid .por-tape--r{ right: -16px; transform: rotate(23deg); background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, rgba(255,255,255,0) 3px 6px), linear-gradient(180deg, rgba(199,72,14,.34), rgba(199,72,14,.24)); /* rdza — jedna taśma cieplejsza */ } /* redukcja ruchu: bez obrotu-hover; dryf w spoczynku i tak wyłączony w main.js (reduce) */ @media (prefers-reduced-motion: reduce){ #polaroid.por-wrap{ transform: rotate(var(--por-rot)); } } /* ——— responsywność ——— */ /* ≤860px: portret pod kolumną copy (main.css:75,426 już przełącza justify/margin) */ @media (max-width: 860px){ #polaroid.por-wrap{ --por-rot: -1.4deg; padding: 10px 10px 30px; } #polaroid .por-tape{ width: 68px; height: 22px; } } /* ≤560px: mniejsze taśmy, mniej obrotu — czytelność na wąskich */ @media (max-width: 560px){ #polaroid.por-wrap{ --por-rot: -1deg; } #polaroid .por-tape--l{ left: -12px; } #polaroid .por-tape--r{ right: -12px; } #polaroid .por-note{ font-size: 9.5px; letter-spacing: .14em; } } /* FIX 2026-07-15: .p-stempel (kartka „PROTOKÓŁ nr 01/2026”, main.css:94/227/273 — pozycjonowana % w stosunku do #heroPin, niezależnie od kolumny gridu portretu) w steady state hero (>860px) zachodziła na górę #polaroid — pas ~330×77px zasłaniał czoło i oczy na portrecie (identycznie w obu motywach, bo hero jest współdzielony). Naprawa: podnieść kartkę i przesunąć w prawo, tak by jej dolna krawędź kończyła się NAD zakładką washi/górą portretu na całym zakresie szerokości >860px (sprawdzone headless 900–1920px, beaty 9.3/12.4/14.6 w heroTl). Ostatnia reguła .p-stempel w kaskadzie (main.css:273) też ma !important — trzeba przebić tą samą wagą. */ @media (min-width: 861px){ .p-stempel{ top: 1% !important; right: 11% !important; width: clamp(190px,20vw,270px) !important; } } /* ============================================================ FRAGMENT: sociale.css — ikonki sociali z flipem (poz. 07 · zasady) Czyta WYŁĄCZNIE tokeny już zdefiniowane w motywie (main.css :root i klasy .atmo-*). Nie definiuje nowych --zmiennych globalnych, nie nadpisuje niczego spoza .soc-grid / .soc-karta / .soc-tekst. Zależności z main.css, których fragment używa (tylko do odczytu): --card-bg, --card-line, --card-tape, --sh-card, --dk, --dk-tx, --dk-line, --steel, --rust, --f-mono / .mono, Fraunces. ============================================================ */ .soc-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px,1.6vw,16px); margin:4px 0 18px; } /* --- karta: kontener 3D --- */ .soc-karta{ position:relative; display:block; width:100%; height:clamp(128px,15vw,152px); padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; touch-action:manipulation; perspective:1200px; will-change:transform; } .soc-karta:focus-visible{ outline:none; } .soc-karta:focus-visible .soc-face{ outline:2px solid var(--rust); outline-offset:2px; } /* rozstrzelenie kart jak w .rz-stacja / .an-poz — papier, nie sztancowany rząd */ .soc-karta:nth-child(1){ transform:rotate(-1.1deg); } .soc-karta:nth-child(2){ transform:rotate(.9deg); } .soc-karta:nth-child(3){ transform:rotate(-.6deg); } .soc-karta:nth-child(4){ transform:rotate(1deg); } @media(hover:hover){ .soc-karta:hover{ transform:translateY(-2px) rotate(0deg); transition:transform .3s ease; } } .soc-inner{ display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.2,.7,.2,1); } .soc-karta[aria-pressed="true"] .soc-inner{ transform:rotateY(180deg); } /* --- obie ściany: rozmiar karty, jedna widoczna naraz --- */ .soc-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:8px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; } /* przód — kartka z protokołu, ikona jako pieczątka atramentem */ .soc-front{ flex-direction:column; gap:9px; background:var(--card-bg); border:1px solid var(--card-line); box-shadow:var(--sh-card); padding:10px 8px 12px; } .soc-front::before{ content:""; position:absolute; left:50%; top:-8px; width:46px; height:16px; margin-left:-23px; background:var(--card-tape); mix-blend-mode:multiply; border-radius:2px; transform:rotate(-2deg); } .soc-karta:nth-child(2) .soc-front::before{ transform:rotate(2.4deg); } .soc-karta:nth-child(3) .soc-front::before{ transform:rotate(-1.6deg); } .soc-karta:nth-child(4) .soc-front::before{ transform:rotate(1.8deg); } .soc-ico{ width:clamp(30px,4.6vw,38px); height:clamp(30px,4.6vw,38px); color:var(--ink); transform:rotate(-3deg); flex-shrink:0; } .soc-lbl{ color:var(--steel); font-size:9.5px; letter-spacing:.16em; } /* rewers — ciemnia protokołu: kontrast 11.3:1 (--dk-tx na --dk), verbatim tokeny motywu */ .soc-back{ background:var(--dk); border:1px solid var(--dk-line); color:var(--dk-tx); padding:14px 12px; transform:rotateY(180deg); } .soc-back-txt{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:clamp(11.5px,1.55vw,13px); line-height:1.42; text-align:center; max-width:22ch; } /* prefers-reduced-motion: podmiana natychmiastowa, bez obrotu 3D */ @media(prefers-reduced-motion:reduce){ .soc-inner{ transition:none; } .soc-karta:hover{ transition:none; } } /* mobile: 4 -> 2x2 */ @media(max-width:640px){ .soc-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; } .soc-karta{ height:150px; } } /* ===== CSS fragmentu: bio ===== */ /* ============================================================================ REDESIGN2 · #bio — poz. 05 · zaplecze · „Podświetlarka — klisza jednego życia" Wszystkie selektory scoped pod #bio-r2 (fragment nie gryzie się z resztą). Tokeny z globalnego motywu (fallbacki dla podglądu w izolacji). ============================================================================ */ #bio-r2{ /* ---- lokalne zmienne sceny ---- */ --bg-p1: var(--p1, #DDDBD0); --tx-body-l: var(--tx-body, #454D42); --ink-l: var(--ink, #1F241E); --rust-l: var(--rust, #C7480E); --gold-l: var(--gold, #8A7833); --gold-ink: #5f5620; /* atrament gold AA na jasnym */ --steel-l: var(--steel, #3E4A50); /* podświetlarka */ --stol-core: #ECE8DC; /* rdzeń ciepła (near-p0) */ --stol-glow: rgba(138,120,51,.34); /* gold low-alpha */ --film-base: #20261F; /* baza taśmy (charcoal) */ --okno-dim: #2A322B; /* klatka zgaszona */ --hole: #ECE8DC; /* perforacja przepuszcza ciepło */ --sweep: 0; /* 0→1, sterowane scrubem z JS */ --f-disp: 'Fraunces', Georgia, serif; --f-text: 'Inter', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; position:relative; isolation:isolate; } /* padding-top oddaje szwowi; dół i boki jak w motywie. overflow:clip (NIE hidden): przycina full-bleed i wysoką szynę kliszy, ale — inaczej niż hidden — NIE tworzy kontenera przewijania, więc position:sticky taśmy działa względem viewportu i taśma dojeżdża do dolnej krawędzi sekcji. */ #bio-r2.sekcja{ padding-top:0; overflow:clip; } /* ========================================================================= WEJŚCIE · szew dk→p1 (full-bleed wewnątrz sekcji) ========================================================================= */ #bio-r2 .bio2-prog{ position:relative; width:100vw; left:50%; transform:translateX(-50vw); height:26vh; min-height:150px; background:linear-gradient(180deg, var(--dk,#232B26) 0%, #4A5449 30%, #9AA091 68%, var(--bg-p1) 100%); pointer-events:none; margin-bottom:clamp(24px,5vh,60px); } #bio-r2 .prog-label{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#C9CDBF; white-space:nowrap; } /* R5: .bio2-prog-glab („0 m ↑ powierzchnia") usunięty z HTML razem z resztą oznaczeń głębokości — reguła skasowana. Zostaje sam .prog-label. */ /* ========================================================================= NAGŁÓWEK (bazuje na motywie; scoped dublet dla wiernego podglądu) ========================================================================= */ #bio-r2 .s-inner{ max-width:1160px; margin:0 auto; position:relative; padding:0 0 clamp(30px,6vh,70px); } #bio-r2 .s-ghost{ position:absolute; top:-18px; right:-6px; font-family:var(--f-disp); font-weight:700; font-size:clamp(120px,17vw,220px); line-height:1; color:var(--ghost,rgba(31,36,30,.085)); pointer-events:none; user-select:none; z-index:0; } #bio-r2 .bio2-head{ position:relative; z-index:2; max-width:760px; } #bio-r2 .s-kick{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--rust-ink,#8F3208); margin:0 0 14px; font-weight:500; /* AA: 5.75:1 na p1 (było 3.47) */ } #bio-r2 .s-h2{ font-family:var(--f-disp); font-weight:600; font-size:clamp(28px,3.8vw,50px); line-height:1.12; color:var(--ink-l); margin:0 0 16px; max-width:20ch; letter-spacing:-.01em; } #bio-r2 .s-lead{ font-family:var(--f-text); font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--ink-l); max-width:56ch; margin:0 0 clamp(30px,5vh,54px); font-weight:500; } /* ========================================================================= GRID: 58fr proza / 42fr klisza ========================================================================= */ #bio-r2 .bio2-grid{ display:grid; grid-template-columns:minmax(0,58fr) minmax(0,42fr); gap:clamp(30px,5vw,72px); align-items:start; position:relative; z-index:2; } /* ---- PROZA ---- */ #bio-r2 .bio2-prose{ display:flex; flex-direction:column; gap:clamp(22px,3.4vh,38px); min-width:0; } #bio-r2 .bio2-p{ font-family:var(--f-text); font-size:clamp(15.5px,1.15vw,17px); line-height:1.72; color:var(--tx-body-l); margin:0; max-width:60ch; position:relative; overflow-wrap:break-word; padding:14px 18px 14px 20px; border-radius:4px; border-left:2px solid transparent; transition:color .5s ease, background-color .5s ease, border-color .5s ease; } /* akapit czytany: +kontrast, +ciepło (sprzężenie tekst↔klatka) */ #bio-r2 .bio2-p.is-lit{ color:var(--ink-l); background:linear-gradient(90deg, rgba(138,120,51,.09), rgba(138,120,51,.02) 70%, transparent); border-left-color:var(--gold-l); } /* etykiety-zakładki data-tab (wstrzykiwane JS) */ #bio-r2 .bio2-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; } #bio-r2 .bio2-tab{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-l); background:rgba(62,74,80,.09); border:1px solid rgba(62,74,80,.22); border-radius:2px; padding:3px 8px; white-space:nowrap; line-height:1.2; } /* finałowe podkreślenie rdzą (jedyny rust w sekcji = werdykt) Tło zamiast pojedynczej ścieżki SVG naciągniętej na całą frazę — to jedyna technika odporna na zawijanie: box-decoration-break:clone maluje falkę osobno pod KAŻDYM fragmentem linii, więc łamanie tekstu na 2 linie (mobile) nie rozjeżdża podkreślenia (jak .spr-puenta span niżej w pliku). */ #bio-r2 .bio2-lacz{ position:relative; font-style:italic; color:var(--ink-l); white-space:normal; padding-bottom:.24em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M0 7 C4 3 7 3 11 7 C15 11 18 11 22 7' fill='none' stroke='%23C7480E' stroke-width='2.4' stroke-linecap='round' stroke-opacity='.82'/%3E%3C/svg%3E"); background-repeat:repeat-x; background-position:0 100%; background-size:22px 12px; box-decoration-break:clone; -webkit-box-decoration-break:clone; } /* ========================================================================= PODŚWIETLARKA + KLISZA ========================================================================= */ #bio-r2 .bio2-klisza-wrap{ position:relative; } #bio-r2 .bio2-sticky{ position:sticky; top:18vh; display:flex; flex-direction:column; align-items:center; } /* R5 (poprawka 5) · KLISZA ZOSTAJE NA MIEJSCU PO ROZWINIĘCIU. Sticky trzymało taśmę przy górnej krawędzi okna aż do końca szyny, więc po zapaleniu ostatniej klatki klisza dalej jechała ze scrollem. Po domknięciu choreografii (BEAT 4 · FINAŁ w initBioR2) JS zdejmuje sticky i osadza taśmę dokładnie tam, gdzie stała w chwili domknięcia — inline `top` liczone jako offset względem .bio2-klisza-wrap, więc zero skoku w kadrze. */ #bio-r2 .bio2-sticky.bio2-osadzona{ position:absolute; left:0; right:0; } /* pula światła podświetlarki — miękka, bezkrawędziowa (NIE karta): pionowo wydłużona łuna, która OBEJMUJE taśmę i gaśnie w tło p1 na długo przed jakąkolwiek krawędzią — światło na stole, nie panel doklejony. */ #bio-r2 .bio2-stol{ position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:clamp(330px,184%,500px); height:122%; z-index:0; pointer-events:none; background: radial-gradient(48% 44% at 50% 49%, rgba(247,242,228,.92) 0%, rgba(238,231,209,.72) 18%, rgba(150,130,60,.34) 42%, rgba(138,120,51,.10) 62%, rgba(138,120,51,0) 80%); filter:blur(12px); opacity:1; /* stan spoczynkowy (no-JS = zapalony stół); ścieżka animowana ustawia 0 i robi flicker */ will-change:opacity; } /* miękki cień kontaktowy — „sadza" taśmę na blacie (osobno od łuny) */ #bio-r2 .bio2-stol::after{ content:""; position:absolute; left:50%; top:53%; width:64%; height:78%; transform:translate(-50%,-50%) rotate(-2.4deg); border-radius:50% / 8%; background:radial-gradient(50% 50% at 50% 50%, rgba(28,22,8,.22) 0%, rgba(28,22,8,.10) 48%, rgba(28,22,8,0) 74%); filter:blur(9px); } #bio-r2 .bio2-film-wrap{ position:relative; z-index:1; width:clamp(176px,78%,224px); max-width:100%; margin:6px auto 0; transform:rotate(-2.4deg); /* niedbale położona taśma, nie pasek w layoucie */ transform-origin:52% 50%; } /* maska: góra i dół taśmy gasną w łunę — widzimy WYCINEK dłuższej rolki */ #bio-r2 .bio2-film{ display:block; width:100%; max-width:100%; height:auto; filter:drop-shadow(0 3px 5px rgba(30,24,8,.30)) drop-shadow(0 18px 30px rgba(30,24,8,.28)); -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); } #bio-r2 .bio2-film-h{ display:none; width:100%; max-width:100%; height:auto; } /* pozioma taśma — tylko mobile */ #bio-r2 .bio2-base{ fill:var(--film-base); } #bio-r2 .bio2-hole{ fill:var(--hole); opacity:.92; } /* klatka zgaszona → warm gdy zapalona (swept / reading / strip-full) */ #bio-r2 .bio2-okno{ fill:var(--okno-dim); transition:fill .55s ease; } #bio-r2 .bio2-okno-sheen{ pointer-events:none; } #bio-r2 .bio2-klatka.swept .bio2-okno{ fill:url(#bio2Warm); } #bio-r2 .bio2-klatka.reading .bio2-okno{ fill:url(#bio2Warm); } /* KADR = pełne zdjęcie kliszy (klisza-kadr-1..4.webp), przycięte do okna. Zgaszona klatka = welon ciemni na fotografii; zapalona (swept/reading) = welon gaśnie, kadr rozświetla się jak na podświetlarce. */ #bio-r2 .bio2-foto{ } #bio-r2 .bio2-veil{ fill:#12160f; opacity:.66; /* dim: kadr jeszcze niezapalony */ transition:opacity .6s ease; } #bio-r2 .bio2-klatka.swept .bio2-veil, #bio-r2 .bio2-klatka.reading .bio2-veil{ opacity:0; } /* zapalony kadr = pełny obraz */ /* scrim pod podpis (dół kadru) — stały, dla czytelności etykiety na foto */ #bio-r2 .bio2-scrim{ fill:url(#bio2Cap); opacity:.9; pointer-events:none; } /* etykieta mono w stopce klatki (rok/okres) + numer klatki w rogu — JASNE na foto */ #bio-r2 .bem-lab{ font-family:var(--f-mono); font-size:8.6px; letter-spacing:.2em; fill:#EFE8D6; opacity:.72; transition:opacity .55s ease; } #bio-r2 .bem-num{ font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; fill:#EFE8D6; opacity:.7; transition:opacity .55s ease; } #bio-r2 .bio2-klatka.swept .bem-lab, #bio-r2 .bio2-klatka.reading .bem-lab{ opacity:.96; } #bio-r2 .bio2-klatka.swept .bem-num, #bio-r2 .bio2-klatka.reading .bem-num{ opacity:.92; } /* klatki „poza kadrem" (rolka biegnie dalej) — zawsze przygaszone */ #bio-r2 .bio2-klatka-ghost .bio2-okno{ fill:var(--okno-dim); } /* czytana klatka: dodatkowy focus */ #bio-r2 .bio2-klatka{ transition:transform .5s ease; } #bio-r2 .bio2-klatka.reading{ transform:translateX(0) scale(1.012); transform-box:fill-box; transform-origin:center; } /* wędrujący backlight (pas światła zjeżdżający z --sweep) */ #bio-r2 .bio2-sweep{ position:absolute; left:-10%; width:120%; height:150px; top:calc(var(--sweep) * 100%); transform:translateY(-50%); background:radial-gradient(60% 100% at 50% 50%, rgba(240,233,214,.85) 0%, rgba(217,180,99,.5) 38%, rgba(169,133,47,0) 72%); mix-blend-mode:screen; filter:blur(7px); pointer-events:none; z-index:2; opacity:calc(.35 + var(--sweep) * .0); /* obecność sterowana JS via .sweeping */ } #bio-r2 .bio2-film-wrap:not(.sweeping) .bio2-sweep{ opacity:0; } #bio-r2 .bio2-film-wrap.sweeping .bio2-sweep{ opacity:.9; } #bio-r2 .bio2-film-wrap.swept-done .bio2-sweep{ opacity:0; transition:opacity .5s ease; } /* ziarno emulsji — feTurbulence (aria-hidden), leciutki oddech */ #bio-r2 .bio2-ziarno{ position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:7px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; opacity:.05; animation:bio2-breath 6.5s ease-in-out infinite; } @keyframes bio2-breath{ 0%,100%{opacity:.045; transform:scale(1);} 50%{opacity:.065; transform:scale(1.015);} } /* stempel-urządzenie pod taśmą */ #bio-r2 .bio2-stempel{ position:relative; z-index:1; margin-top:16px; font-family:var(--f-mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-ink); opacity:.72; } /* ========================================================================= DESKTOP ≥900px — SZYNA KLISZY: taśma (sticky) ma DOJEŻDŻAĆ do dolnej krawędzi sekcji. Problem: sticky w kolumnie gridu = wysokość wiersza (proza) była za niska względem wysokiego negatywu (~1000px), więc taśma odpinała się i gasła na długo przed końcem. Rozwiązanie: kolumna kliszy = ABSOLUTNA szyna o dużej wysokości (obcięta przez #bio-r2 overflow:hidden), dzięki czemu sticky ma pełen zakres i taśma trzyma się do samej krawędzi sekcji. Wyjęcie z flow NIE rozpycha wiersza gridu (proza zostaje w kolumnie 58fr). FIX regresji: 260vh była stałą, zgadywaną wysokością szyny — dla realnej długości prozy przy tym viewporcie/foncie wypadała KRÓTSZA niż sekcja, więc szyna (a z nią zasięg sticky) kończyła się, ZANIM overflow:clip sekcji dojeżdżał do jej właściwej krawędzi — sticky odpinało się w środku sekcji, klisza jeszcze zapalona zostawała obcięta twardą, poziomą krechą zamiast płynnie zjechać z ekranu. Naprawa: JS (initBioR2 → sizeRail) mierzy REALNĄ wysokość .bio2-grid (klisza-wrap jest position:absolute, więc się do niej nie wlicza — to czysta wysokość kolumny prozy) i wstrzykuje ją jako --rail-h na #bio-r2; 260vh zostaje TYLKO jako fallback zanim JS zdąży zmierzyć/bez JS. */ @media (min-width:900px){ #bio-r2 .bio2-klisza-wrap{ position:absolute; top:0; right:0; width:42%; height:var(--rail-h, 260vh); z-index:2; pointer-events:none; } #bio-r2 .bio2-sticky{ top:16vh; } } /* ========================================================================= MOBILE ≤899px — taśma pozioma NAD prozą, „wszystko zapalone", tab hidden ========================================================================= */ @media (max-width:899px){ #bio-r2 .s-ghost{ display:none; } #bio-r2 .bio2-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(24px,5vh,38px); } /* klisza NAD prozą */ #bio-r2 .bio2-klisza-wrap{ order:-1; } #bio-r2 .bio2-sticky{ position:static; top:auto; padding:8px 0 4px; } /* łuna pozioma — szeroka i niska, obejmuje leżącą taśmę */ #bio-r2 .bio2-stol{ width:118%; height:clamp(150px,58vw,230px); background:radial-gradient(48% 46% at 50% 50%, var(--stol-core) 0%, rgba(236,231,214,.6) 22%, var(--stol-glow) 48%, rgba(138,120,51,.05) 68%, rgba(138,120,51,0) 82%); } #bio-r2 .bio2-stol::after{ width:82%; height:52%; transform:translate(-50%,-50%) rotate(-1.4deg); border-radius:8% / 50%; } /* pozioma taśma zamiast pionowej — dedykowany SVG, lekki skos */ #bio-r2 .bio2-film{ display:none; } #bio-r2 .bio2-film-h{ display:block; filter:drop-shadow(0 3px 5px rgba(30,24,8,.28)) drop-shadow(0 14px 24px rgba(30,24,8,.26)); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } #bio-r2 .bio2-film-wrap{ width:min(560px,100%); margin:0 auto; transform:rotate(-1.4deg); transform-origin:50% 50%; } /* sweep OFF, wszystko zapalone statycznie */ #bio-r2 .bio2-sweep{ display:none; } #bio-r2 .bio2-ziarno{ border-radius:9px; } #bio-r2 .bio2-stempel{ margin-top:12px; text-align:center; } #bio-r2 .bio2-tabs{ display:none; } /* jak .bio-tab dziś */ #bio-r2 .bio2-p{ padding:2px 0; border-left:0; max-width:none; } #bio-r2 .bio2-p.is-lit{ background:none; border-left:0; color:var(--ink-l); } } /* ========================================================================= REDUCED MOTION — stany KOŃCOWE, zero ruchu ========================================================================= */ @media (prefers-reduced-motion:reduce){ #bio-r2 .bio2-stol{ opacity:1; } #bio-r2 .bio2-sweep{ display:none; } #bio-r2 .bio2-ziarno{ animation:none; opacity:.05; } #bio-r2 .bio2-klatka .bio2-okno{ fill:url(#bio2Warm); transition:none; } /* ghosty zostają dim */ #bio-r2 .bem-use{ fill:#221c0c; opacity:.9; transition:none; } #bio-r2 .bem-lab{ fill:#2c2510; opacity:.82; transition:none; } #bio-r2 .bem-num{ fill:#2c2510; opacity:.64; transition:none; } #bio-r2 .bio2-p{ color:var(--ink-l); transition:none; } #bio-r2 .bio2-klatka{ transition:none; } } /* ===== CSS fragmentu: zasady ===== */ /* ================================================================= #zasady-r2 · „Pieczęć służbowa / prasa zwrotów" (redesign2) Fragment scoped — KAŻDY selektor zaczyna się od #zasady-r2, żeby nie gryzło się z resztą motywu. Tokeny bierze z main.css: --p2/--p3, --card / --card-bg / --card-line, --sh-rest, --rust, --rust-deep, --steel, --gold, --dk, --dk-ink, --f-mono / --f-disp, --tx-body, --tx-mute, oraz zmienne atmo (--bg/--tx/--kick/--ghost). Sekcja stoi na .atmo-desk => --bg:var(--p2) (o oczko głębiej niż bio). ROLE KOLORU (DNA): rust = werdykt (odciski/skreślenia), steel = metadane/aparat, gold = NIEUŻYTE (to nie dorobek). ================================================================= */ #zasady-r2{ position:relative; overflow:hidden; isolation:isolate; } /* cień odrzuconego stosu osiada u dołu (pociemnienie var(--p2)) */ #zasady-r2::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg, rgba(27,33,28,0) 0%, rgba(27,33,28,.10) 100%); pointer-events:none; z-index:0; } #zasady-r2 .zas2-defs{ position:absolute; width:0; height:0; overflow:hidden; } /* kicker rdzawy w małym stopniu — atrament AA (5.09:1 na p2; nadpisuje .atmo .s-kick=rust-deep 4.26) */ #zasady-r2 .s-kick{ color:var(--rust-ink,#8F3208); } /* ---------- reaktywne światło + ziarno ---------- */ #zasady-r2 .zas2-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(320px 320px at var(--mx,64%) var(--my,30%), rgba(199,72,14,.10), rgba(199,72,14,0) 70%); opacity:.9; transition:opacity .5s ease; } #zasady-r2 .zas2-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:multiply; 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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- edge WEJŚCIE (warstwice p1→p2) ---------- */ #zasady-r2 .zas2-wejscie{ position:absolute; top:0; left:0; right:0; height:96px; z-index:1; pointer-events:none; background:linear-gradient(180deg, var(--p1) 0%, var(--p2) 100%); } #zasady-r2 .zas2-wejscie::before{ content:""; position:absolute; inset:0; opacity:.5; background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(31,36,30,.05) 13px 14px); -webkit-mask:linear-gradient(180deg,#000,transparent); mask:linear-gradient(180deg,#000,transparent); } /* ---------- edge WYJŚCIE (szew p2→p3 + rdzawa smuga) ---------- */ #zasady-r2 .zas2-wyjscie{ position:relative; z-index:2; height:116px; margin-top:clamp(40px,6vw,72px); width:100vw; left:50%; transform:translateX(-50vw); /* start TRANSPARENTNY: szew kontynuuje przyciemnione dno zasad (bez „resetu" do jasnego p2, który dawał widoczny jaśniejszy pasek), miękko dochodzi do p3 = tło #rozmowa. */ background:linear-gradient(180deg, transparent 0%, var(--p3) 86%, var(--p3) 100%); } #zasady-r2 .zas2-szew-smuga{ position:absolute; left:8%; right:8%; top:50%; height:3px; transform:translateY(-50%) rotate(-.35deg); background:linear-gradient(90deg, transparent, rgba(199,72,14,.42) 22%, rgba(199,72,14,.22) 60%, transparent); filter:blur(.4px); border-radius:3px; } /* ===================== STREFA PINU ===================== */ #zasady-r2 .zas2-pin{ position:relative; z-index:2; } #zasady-r2 .s-inner{ position:relative; } /* ---------- ŁOŻE PRASY ---------- */ #zasady-r2 .zas2-loze{ position:relative; margin-top:clamp(26px,4vw,46px); padding-right:clamp(150px,20vw,240px); /* miejsce na szynę + prasę po prawej */ } /* szyna pionowa */ #zasady-r2 .zas2-szyna{ position:absolute; top:-6%; bottom:-2%; right:clamp(72px,10vw,120px); width:2px; background:repeating-linear-gradient(180deg, var(--steel) 0 7px, transparent 7px 14px); opacity:.34; z-index:1; pointer-events:none; } /* ---------- klauzula = kartka na łożu ---------- */ #zasady-r2 .zas2-klauzula{ position:relative; z-index:2; background:var(--card-bg); border:1px solid var(--card-line); border-radius:11px; box-shadow:var(--sh-rest); padding:clamp(16px,2.2vw,24px) clamp(18px,2.4vw,28px) clamp(18px,2.4vw,26px); margin:0 0 clamp(15px,2vw,22px); transform-origin:center; } #zasady-r2 .zas2-klauzula[data-ton="tak"]{ box-shadow:var(--sh-rest), inset 3px 0 0 rgba(199,72,14,.5); } #zasady-r2 .zas2-nr{ display:inline-block; margin-bottom:9px; font-size:9.5px; letter-spacing:.22em; color:var(--steel); border:1px solid var(--card-line); border-radius:3px; padding:2px 8px; transform:rotate(-1.4deg); background:rgba(255,255,255,.18); } #zasady-r2 .zas2-tresc p{ margin:0; color:var(--tx-body); font-size:clamp(14.5px,1.55vw,17px); line-height:1.6; max-width:62ch; } /* skreślenia + cytaty (werdykt rust) — kreska jako background na SPAMIE (nie position:absolute dziecko): per-linia, bo browser tnie background inline boxa per-fragment (bez union-bbox, który uciekał poza kartę przy zawijaniu). Animacja draw = background-size 0%→100% (jak .zas2-u niżej). */ #zasady-r2 .zas2-cyt, #zasady-r2 .zas2-strike{ position:relative; display:inline; padding:0 1px; white-space:normal; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6 C 24 4, 48 8.5, 70 5 S 94 4.5, 99 6' fill='none' stroke='%23C7480E' stroke-width='2.6' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:0 50%; background-size:0% 13px; } #zasady-r2 .zas2-cyt{ font-style:italic; } /* podkreślenie „przyjęte" (kontrapunkt klauzuli 02) */ #zasady-r2 .zas2-u{ text-decoration:none; background-image:linear-gradient(var(--rust), var(--rust)); background-repeat:no-repeat; background-size:0% 2px; background-position:0 96%; padding-bottom:1px; } #zasady-r2 .zas2-tak{ position:absolute; top:12px; right:14px; z-index:4; display:inline-flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.14em; color:var(--rust-deep); border:1.4px solid var(--rust); border-radius:4px; padding:3px 8px; background:rgba(240,239,232,.7); transform:rotate(-4deg); } #zasady-r2 .zas2-tak svg{ width:13px; height:13px; } #zasady-r2 .zas2-tak svg path{ fill:none; stroke:var(--rust); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* odcisk „ODRZUCONE" w ROGU klauzuli (kontrast: nie na korpusie) */ #zasady-r2 .zas2-stemp{ position:absolute; top:-16px; right:-10px; z-index:5; width:clamp(118px,15vw,158px); height:auto; color:var(--rust); mix-blend-mode:multiply; pointer-events:none; } #zasady-r2 .zas2-stemp use{ } /* ---------- mini-karta „Katalog gotowych rozwiązań" ---------- */ #zasady-r2 .zas2-katalog{ position:absolute; z-index:3; top:clamp(6px,1vw,14px); right:clamp(-6px,1vw,10px); width:clamp(148px,17vw,182px); padding:14px 14px 34px; background:var(--card-bg); border:1px solid var(--card-line); border-radius:8px; box-shadow:var(--sh-rest); transform:rotate(1.6deg); transform-origin:top right; } #zasady-r2 .zas2-kat-tyt{ display:block; font-size:8.6px; letter-spacing:.14em; color:var(--steel); line-height:1.5; margin-bottom:11px; } #zasady-r2 .zas2-kat-linia{ display:block; height:5px; border-radius:2px; margin:0 0 8px; background:repeating-linear-gradient(90deg, rgba(62,74,80,.26) 0 12px, transparent 12px 16px); } #zasady-r2 .zas2-kat-linia--kr{ width:62%; } #zasady-r2 .zas2-kat-stemp{ position:absolute; right:-8px; bottom:2px; width:120px; height:auto; color:var(--rust); mix-blend-mode:multiply; transform:rotate(-6deg); pointer-events:none; } /* ---------- licznik ---------- */ #zasady-r2 .zas2-licznik{ position:relative; z-index:3; margin-top:clamp(8px,1.4vw,14px); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } #zasady-r2 .zas2-licznik-num{ font-size:13px; letter-spacing:.2em; color:var(--steel); font-variant-numeric:tabular-nums; } #zasady-r2 .zas2-licznik-stemp{ font-size:10px; letter-spacing:.16em; color:var(--rust-deep); border:1.6px solid var(--rust); border-radius:4px; padding:4px 10px; transform:rotate(-3deg); mix-blend-mode:multiply; } /* ---------- REKWIZYT: prasa ---------- */ #zasady-r2 .zas2-piecz{ position:absolute; z-index:6; top:0; right:clamp(30px,5vw,58px); width:clamp(122px,15vw,188px); will-change:transform; } #zasady-r2 .zas2-piecz-spr{ position:relative; display:block; transform-origin:50% 16%; will-change:transform; filter:drop-shadow(0 22px 26px rgba(27,33,28,.28)); } #zasady-r2 .zas2-piecz-img{ display:block; width:100%; height:auto; } #zasady-r2 .zas2-piecz-svg{ display:none; width:100%; height:auto; } #zasady-r2 .zas2-piecz-svg .zp-obud{ fill:#C9C4B4; stroke:#8f8a76; stroke-width:2; } #zasady-r2 .zas2-piecz-svg .zp-spr{ fill:none; stroke:#8A7f6a; stroke-width:4; stroke-linecap:round; } #zasady-r2 .zas2-piecz-svg .zp-guma{ fill:#2B2B28; stroke:#1c1c1a; stroke-width:1.5; } /* poduszka tuszu pod gumą */ #zasady-r2 .zas2-piecz-glow{ position:absolute; left:50%; bottom:-6px; width:78%; height:26px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(199,72,14,.5), rgba(199,72,14,0)); filter:blur(3px); opacity:.72; pointer-events:none; } /* ===================== ODDECH: sociale ===================== */ #zasady-r2 .zas2-sociale{ margin-top:clamp(48px,7vw,92px); } #zasady-r2 .zas2-soc-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; } #zasady-r2 .zas2-soc-head h3{ margin:0; font-family:var(--f-disp); font-weight:600; font-size:clamp(19px,2.4vw,26px); letter-spacing:-.01em; color:var(--tx,var(--ink)); } #zasady-r2 .zas2-soc-kick{ font-size:10px; letter-spacing:.24em; color:var(--rust-deep); } #zasady-r2 .zas2-soc-kick::before{ content:""; display:inline-block; width:15px; height:2.5px; margin-right:9px; vertical-align:middle; background:var(--rust); } /* restyle awersu: mono „znaczek platformy" + tag offline w rogu */ #zasady-r2 .soc-front{ position:relative; } #zasady-r2 .soc-ico{ color:var(--steel); } #zasady-r2 .soc-lbl{ color:var(--steel); letter-spacing:.2em; } #zasady-r2 .zas2-soc-off{ position:absolute; top:8px; right:8px; font-size:8px; letter-spacing:.16em; color:var(--steel); border:1px solid var(--card-line); border-radius:3px; padding:2px 6px; transform:rotate(3deg); opacity:.8; } /* rewers: blady watermark „ODRZUCONE" (na multiply w ciemni -> screen-owo jaśniejszy) */ #zasady-r2 .soc-back{ position:relative; } #zasady-r2 .zas2-soc-wm{ position:absolute; left:50%; top:50%; width:150px; height:auto; transform:translate(-50%,-50%) rotate(-8deg); color:var(--rust-lift,#F5803C); opacity:.14; pointer-events:none; mix-blend-mode:screen; } #zasady-r2 .soc-back-txt{ position:relative; z-index:1; } /* NOTA pod kartami: dawniej „dziwny pasek" bez kontekstu — teraz jawnie oznaczony przypis „dlaczego" (hairline oddziela kafle od komentarza, mono-kicker mówi wprost, że to uzasadnienie) */ #zasady-r2 .zas2-soc-nota{ margin-top:clamp(16px,2.4vw,26px); padding-top:15px; border-top:1px solid var(--card-line); } #zasady-r2 .zas2-soc-nota-lbl{ display:inline-flex; align-items:center; font-size:9.5px; letter-spacing:.22em; color:var(--rust-deep); margin-bottom:9px; } #zasady-r2 .zas2-soc-nota-lbl::before{ content:""; display:inline-block; width:14px; height:2.5px; margin-right:8px; background:var(--rust); } /* ===================== MOBILE ≤860px ===================== */ @media(max-width:860px){ #zasady-r2 .zas2-loze{ padding-right:0; } #zasady-r2 .zas2-szyna{ right:auto; left:clamp(14px,5vw,26px); top:0; bottom:0; opacity:.24; } /* prasa: uproszczony wariant SVG, mniejsza, na lewej szynie */ #zasady-r2 .zas2-piecz{ width:74px; right:auto; left:calc(clamp(14px,5vw,26px) - 36px); } #zasady-r2 .zas2-piecz-img{ display:none; } #zasady-r2 .zas2-piecz-svg{ display:block; } #zasady-r2 .zas2-piecz-spr{ filter:drop-shadow(0 10px 14px rgba(27,33,28,.26)); } #zasady-r2 .zas2-klauzula{ margin-left:clamp(30px,10vw,52px); } /* mini-karta „Katalog" WIDOCZNA (fix — dawniej hidden <861px) */ #zasady-r2 .zas2-katalog{ position:static; width:auto; max-width:none; margin:6px 0 18px clamp(30px,10vw,52px); transform:rotate(-.6deg); padding-bottom:30px; } #zasady-r2 .zas2-kat-stemp{ right:10px; width:108px; } #zasady-r2 .zas2-stemp{ width:112px; top:-14px; right:-4px; } #zasady-r2 .zas2-grain{ opacity:.03; } /* ziarno lżejsze */ #zasady-r2 .zas2-licznik{ margin-left:clamp(30px,10vw,52px); } /* sociale grid 2-kol — spójnie z globalnym .soc-grid @640; wymuszamy do 860 */ #zasady-r2 .soc-grid{ grid-template-columns:repeat(2,1fr); } } /* ===================== REDUCED MOTION ===================== */ @media(prefers-reduced-motion:reduce){ #zasady-r2 .zas2-glow{ opacity:.5; } /* prasa w stanie już-przybitym: parkuje przy liczniku, wariant wektorowy */ #zasady-r2 .zas2-piecz{ position:static; float:right; width:120px; margin:0 0 8px 18px; transform:rotate(-4deg) scale(.9); } #zasady-r2 .zas2-piecz-img{ display:none; } #zasady-r2 .zas2-piecz-svg{ display:block; } #zasady-r2 .zas2-loze{ padding-right:0; } #zasady-r2 .zas2-szyna{ display:none; } /* wszystkie werdykty w stanie KOŃCOWYM (JS też to ustawia; CSS = bez-JS bezpiecznik) */ #zasady-r2 .zas2-stemp, #zasady-r2 .zas2-kat-stemp, #zasady-r2 .zas2-tak, #zasady-r2 .zas2-licznik-stemp{ opacity:1 !important; } #zasady-r2 .zas2-u{ background-size:100% 2px !important; } #zasady-r2 .zas2-cyt, #zasady-r2 .zas2-strike{ background-size:100% 13px !important; } #zasady-r2 .zas2-katalog{ transform:rotate(-3deg); } } /* ===== CSS fragmentu: rozmowa ===== */ /* ============================================================================ REDESIGN2 · SEKCJA 06 · #rozmowa (procedura) — STYLE (scoped) Koncept: „Paragrafy + widełki rozstrzygnięcia" (Kierunek A). WSZYSTKIE selektory zaczynają się od #rozmowa-r2 — fragment nie gryzie się z resztą strony. Wartości tokenów zdublowane defensywnie (fallback), żeby fragment dało się podejrzeć solo; w integracji pokrywają się 1:1 z :root. ============================================================================ */ /* --- tokeny lokalne (fallback == wartości :root motywu) ------------------- */ #rozmowa-r2{ --p2:#D0CFC2; --p3:#C2C0B0; --card:#F0EFE8; --card-edge:#B9B7A6; --card-tape:rgba(87,98,90,.32); --ink:#1F241E; --forest:#2C3830; --tx-body:#454D42; --rust:#C7480E; --rust-deep:#A23A08; --steel:#3E4A50; --steel-soft:#6A757B; --gold:#8A7833; --gold-aa:#5F5620; /* atrament gold AA na jasnym */ --dk-ink:#1B211C; --f-disp:"Fraunces",Georgia,serif; --f-body:"Inter",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace; --rz2-gutter:clamp(48px,7vw,86px); --sh-card:0 2px 0 rgba(31,36,30,.05), 0 18px 40px rgba(31,36,30,.15); } /* --- powłoka atmosfery (gdy global .atmo-deep nieobecny w podglądzie) ------ */ #rozmowa-r2.atmo-deep{ --bg:var(--p3); --tx:var(--ink); --tx2:var(--tx-body); --mut:var(--tx-body); --kick:var(--ink); --ghost:rgba(240,239,232,.45); --card-bg:var(--card); --card-line:var(--card-edge); } #rozmowa-r2{ position:relative; z-index:0; background:var(--bg,var(--p3)); color:var(--tx,var(--ink)); font-family:var(--f-body); -webkit-font-smoothing:antialiased; } #rozmowa-r2 .mono{font-family:var(--f-mono); font-weight:500;} /* --- plansza: nośnik paddingu + kontekst dla warstw reaktywnych ----------- R5 · WYŚRODKOWANIE TREŚCI (poprawka 6): plansza ZOSTAJE full-bleed — niosą ją warstwy reaktywne (.rz2-lampa, .rz2-grain, .rz2-zmierzch), które muszą sięgać krawędzi ekranu, inaczej rozpada się przejście 06→07. Zwężamy więc nie planszę, tylko TREŚĆ: głowa, układ i rozstrzygnięcie dostają ten sam gorset co .s-inner (max-width:880px; margin:0 auto). Dlaczego 880, a nie 1160 z #bio-r2 / #showroom: tamte sekcje niosą rekwizyt (klisza 35 mm, iframe showroomu) i potrzebują szerokiego kadru. Sekcja 06 to czysta treść tekstowa o dokładnie tej samej budowie co sekcja 02 „Dla kogo to jest" (kolumna prozy + karta-aside), a 02 stoi na 880. Ten sam kształt = ta sama miara. */ #rozmowa-r2{ --rz2-kolumna:880px; } #rozmowa-r2 .rz2-plansza{ position:relative; overflow:hidden; padding:clamp(84px,12vh,150px) clamp(20px,6vw,90px) clamp(96px,14vh,168px); } #rozmowa-r2 .rz2-plansza > *{position:relative; z-index:1;} #rozmowa-r2 .rz2-glowa, #rozmowa-r2 .rz2-uklad, #rozmowa-r2 .rz2-rozstrzyg{ max-width:var(--rz2-kolumna); margin-left:auto; margin-right:auto; } /* ============================ WARSTWY REAKTYWNE ============================ */ /* lampka steel/warm sterowana kursorem (rAF ustawia --mx/--my) */ #rozmowa-r2 .rz2-lampa{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(440px 440px at var(--mx,52%) var(--my,28%), rgba(62,74,80,.10), rgba(138,120,51,.045) 44%, transparent 74%); mix-blend-mode:multiply; opacity:.72; transition:opacity .6s ease; } /* ziarno — powierzchnia p3 nie stoi */ #rozmowa-r2 .rz2-grain{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); background-size:180px 180px; } /* pierwszy ZMIERZCH — dolna winieta p3 → pre-ink (foreshadowing atramentu) */ #rozmowa-r2 .rz2-zmierzch{ position:absolute; left:0; right:0; bottom:0; z-index:0; height:52%; pointer-events:none; background: radial-gradient(120% 90% at 50% 128%, rgba(27,33,28,.30), transparent 62%), linear-gradient(180deg, transparent 0%, rgba(27,33,28,.06) 46%, rgba(27,33,28,.20) 100%); } /* ============================ GRZBIET / GHOST / GŁOWA ====================== */ #rozmowa-r2 .poz{ position:absolute; left:clamp(8px,2.2vw,40px); top:0; bottom:0; z-index:3; pointer-events:none; color:var(--mut,#57625A); } #rozmowa-r2 .poz-nic{ position:absolute; left:0; top:0; bottom:0; width:0; border-left:1px dashed currentColor; opacity:.45; transform:scaleY(1); transform-origin:top; display:block; } #rozmowa-r2 .poz-tab{ position:absolute; left:-5px; top:clamp(84px,12vh,150px); writing-mode:vertical-rl; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:lowercase; white-space:nowrap; padding:8px 3px; color:var(--tx-body); } /* R5: ghost trzyma się PRAWEJ KRAWĘDZI KOLUMNY TREŚCI (jak .s-ghost w 02/04), a nie krawędzi pełnoekranowej planszy — wcześniej wisiał poza ekranem i był ucinany. Wystaje 6 px poza kolumnę, dokładnie jak wzorzec. */ #rozmowa-r2 .s-ghost{ position:absolute; top:-26px; z-index:0; pointer-events:none; right:calc(max(clamp(20px,6vw,90px), (100% - var(--rz2-kolumna)) / 2) - 6px); font-family:var(--f-disp); font-weight:700; line-height:1; font-size:clamp(150px,22vw,300px); color:var(--ghost,rgba(240,239,232,.45)); } /* głowa: pełna szerokość kolumny (miarę tekstu trzyma .s-h2{max-width:20ch}, dokładnie jak w .s-inner pozostałych sekcji) — nagłówek zostaje DO LEWEJ */ #rozmowa-r2 .rz2-glowa{max-width:var(--rz2-kolumna); margin:0 auto clamp(40px,6vh,72px);} #rozmowa-r2 .s-kick{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); margin:0 0 16px; } #rozmowa-r2 .s-kick::before{ content:""; display:inline-block; width:16px; height:3px; background:var(--rust); margin-right:9px; vertical-align:middle; } #rozmowa-r2 .s-h2{ font-family:var(--f-disp); font-weight:600; font-size:clamp(28px,3.9vw,50px); line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:0; max-width:20ch; } /* ================================ UKŁAD =================================== */ #rozmowa-r2 .rz2-uklad{ display:grid; grid-template-columns:minmax(0,1fr) clamp(224px,26%,330px); gap:clamp(30px,5vw,72px); align-items:start; } /* ============================ TOR PARAGRAFÓW ============================== */ #rozmowa-r2 .rz2-tor{position:relative;} #rozmowa-r2 .rz2-stacja{ display:grid; grid-template-columns:var(--rz2-gutter) minmax(0,1fr); column-gap:clamp(12px,1.8vw,24px); margin:0 0 clamp(30px,5vh,52px); } #rozmowa-r2 .rz2-stacja:last-of-type{margin-bottom:clamp(18px,3vh,30px);} /* oś: kolumna z węzłem + segmentem linii (adaptuje się do wysokości karty) */ #rozmowa-r2 .rz2-oskol{ position:relative; display:flex; flex-direction:column; align-items:center; padding-top:4px; } #rozmowa-r2 .rz2-nn{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--steel); margin-bottom:9px; transform:rotate(-1.5deg); white-space:nowrap; } #rozmowa-r2 .rz2-wezel{ position:relative; z-index:2; width:13px; height:13px; border:1.6px solid var(--steel); background:var(--card-bg,var(--card)); transform:rotate(45deg); border-radius:2px; } #rozmowa-r2 .rz2-wezel::after{ content:""; position:absolute; inset:3.5px; background:var(--steel); border-radius:1px; opacity:.55; } /* segment osi — złożone segmenty tworzą ciągłą, celowo NIE-Bézier szynę */ #rozmowa-r2 .rz2-linia{ position:absolute; left:50%; top:34px; bottom:calc(-1 * clamp(30px,5vh,52px) - 4px); width:1.5px; background:var(--steel); opacity:.62; transform:translateX(-50%) scaleY(1); transform-origin:top center; } /* ostatni segment schodzi ku widełkom */ #rozmowa-r2 .rz2-stacja:last-of-type .rz2-linia, #rozmowa-r2 .rz2-linia-ost{bottom:calc(-1 * clamp(18px,3vh,30px) - 6px);} /* treść stacji */ #rozmowa-r2 .rz2-krok{ display:inline-block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); border:1.6px solid var(--steel); border-radius:3px; padding:6px 10px; transform:rotate(-2deg); margin-bottom:13px; background:var(--card-bg,var(--card)); will-change:transform; } #rozmowa-r2 .rz2-karta{ position:relative; background:var(--card-bg,var(--card)); border:1px solid var(--card-line,var(--card-edge)); border-radius:8px; padding:clamp(18px,2.4vw,28px); box-shadow:var(--sh-card); max-width:62ch; will-change:transform; } /* taśma washi */ #rozmowa-r2 .rz2-karta::before{ content:""; position:absolute; left:30px; top:-9px; width:74px; height:20px; background:var(--card-tape); transform:rotate(-2deg); mix-blend-mode:multiply; border-radius:2px; } /* psie ucho */ #rozmowa-r2 .rz2-karta::after{ content:""; position:absolute; right:0; bottom:0; width:0; height:0; border-style:solid; border-width:0 0 22px 22px; border-color:transparent transparent var(--bg,var(--p3)) transparent; filter:drop-shadow(-2px -2px 2px rgba(31,36,30,.10)); border-bottom-right-radius:4px; } /* rest-rotation per stacja (ręczna niedoskonałość) */ #rozmowa-r2 .rz2-stacja[data-krok="1"] .rz2-karta{transform:rotate(-.35deg);} #rozmowa-r2 .rz2-stacja[data-krok="2"] .rz2-karta{transform:rotate(.3deg);} #rozmowa-r2 .rz2-stacja[data-krok="3"] .rz2-karta{transform:rotate(-.22deg);} #rozmowa-r2 .prose p{ margin:0; color:var(--tx2,var(--tx-body)); font-size:clamp(15px,1.55vw,17.5px); line-height:1.62; font-weight:400; } /* rdzawe PODKREŚLENIE frazy-werdyktu (stan finalny = 100%; JS zjeżdża z 0%) */ #rozmowa-r2 .rz2-u{ text-decoration:none; color:var(--ink); font-weight:500; background-image:linear-gradient(var(--rust),var(--rust)); background-repeat:no-repeat; background-size:100% 2px; background-position:0 96%; } /* ============================== MARGINES ================================= */ #rozmowa-r2 .rz2-margines{ position:relative; background:color-mix(in oklab, var(--p3), #fff 22%); border:1px dashed #B7B29B; border-radius:8px; padding:clamp(16px,2.2vw,24px); transform:rotate(-1.5deg); margin-top:clamp(30px,4vh,44px); will-change:transform; box-shadow:0 12px 30px rgba(31,36,30,.10); } @supports not (background:color-mix(in oklab,red,blue)){ #rozmowa-r2 .rz2-margines{background:#D4D2C6;} } /* urwany narożnik (dopięty washi w JS/CSS) */ #rozmowa-r2 .rz2-margines::after{ content:""; position:absolute; left:22px; top:-8px; width:60px; height:17px; background:var(--card-tape); transform:rotate(2.5deg); mix-blend-mode:multiply; border-radius:2px; } #rozmowa-r2 .rz2-margines-metka{ display:inline-block; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-soft); margin-bottom:11px; transform:rotate(-1deg); } #rozmowa-r2 .rz2-margines .prose p{ font-size:14px; line-height:1.55; color:var(--tx-body); } /* ============================ ROZSTRZYGNIĘCIE =========================== */ /* Najważniejszy beat sekcji: po kroku 03 klient wybiera. DWIE RÓWNORZĘDNE pieczęcie decyzji, przybijane kolejno beatem (jak stemple na akcie) — złoto TYLKO na pozytywnej, stal na domknięciu, równa waga obu. Stan CSS = FINALNY (pieczęcie przybite); JS animuje wyłącznie transform (scale/rotation), więc reduced-motion / brak JS = obie pieczęcie widoczne i czytelne. Tekst to zwykły HTML (auto-rozmiar) — nigdy zapiekany w sztywny viewBox. */ #rozmowa-r2 .rz2-rozstrzyg{ position:relative; margin-top:clamp(46px,7vh,88px); padding-top:clamp(26px,4vh,44px); border-top:1px solid rgba(31,36,30,.14); } /* cienka rust-kreska „rozstrzygnięcia" na styku z torem */ #rozmowa-r2 .rz2-rozstrzyg::before{ content:""; position:absolute; left:0; top:-1px; width:54px; height:3px; background:var(--rust); } #rozmowa-r2 .rz2-rozstrzyg-metka{ display:inline-block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); border:1.4px solid var(--steel); border-radius:3px; padding:5px 9px; transform:rotate(-1.4deg); background:var(--card-bg,var(--card)); margin-bottom:clamp(20px,3.4vh,34px); } /* para pieczęci + centralny łącznik „albo" (równorzędność) */ #rozmowa-r2 .rz2-piecz-para{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:clamp(14px,2.6vw,34px); max-width:940px; } #rozmowa-r2 .rz2-albo{ align-self:center; justify-self:center; font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; color:var(--steel-soft); text-transform:lowercase; user-select:none; } /* jedna pieczęć = odcisk stempla na akcie */ #rozmowa-r2 .rz2-piecz{ position:relative; display:flex; align-items:center; gap:clamp(12px,1.6vw,18px); padding:clamp(16px,2.1vw,24px) clamp(18px,2.6vw,30px); border-radius:10px; background:var(--card-bg,var(--card)); box-shadow:var(--sh-card); will-change:transform; } /* podwójny obrys stempla: zewnętrzny pełny + wewnętrzny hairline-dashed */ #rozmowa-r2 .rz2-piecz::before{ content:""; position:absolute; inset:0; border-radius:10px; border:2px solid var(--pz); pointer-events:none; } #rozmowa-r2 .rz2-piecz::after{ content:""; position:absolute; inset:5px; border-radius:7px; border:1px dashed var(--pz); opacity:.5; pointer-events:none; } /* ręczna niedoskonałość — lekki, przeciwny przechył (jak dobity stempel) */ #rozmowa-r2 .rz2-piecz-tak{--pz:var(--gold); transform:rotate(-1.4deg);} #rozmowa-r2 .rz2-piecz-koniec{--pz:var(--steel); transform:rotate(1deg);} /* ikona-sygnet (ZERO liter): ✓ na pozytywnej, kreska-domknięcie na stalowej */ #rozmowa-r2 .rz2-piecz-ikona{ flex:none; width:clamp(34px,3.4vw,44px); height:clamp(34px,3.4vw,44px); } #rozmowa-r2 .rz2-piecz-ikona svg{width:100%; height:100%; overflow:visible; display:block;} #rozmowa-r2 .rz2-pz-ring{fill:none; stroke:var(--pz); stroke-width:2;} #rozmowa-r2 .rz2-pz-ring2{fill:none; stroke:var(--pz); stroke-width:1; stroke-dasharray:2 3; opacity:.6;} #rozmowa-r2 .rz2-pz-mark{fill:none; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;} #rozmowa-r2 .rz2-piecz-tak .rz2-pz-mark{stroke:var(--gold-aa);} #rozmowa-r2 .rz2-piecz-koniec .rz2-pz-mark{stroke:var(--steel);} #rozmowa-r2 .rz2-piecz-txt{ font-size:clamp(12.5px,1.4vw,15px); letter-spacing:.08em; line-height:1.28; font-weight:500; text-transform:uppercase; /* jawnie: odcisk stempla (SR czyta oryginał z DOM) */ } #rozmowa-r2 .rz2-piecz-tak .rz2-piecz-txt{color:var(--gold-aa);} /* atrament gold AA na p3 */ #rozmowa-r2 .rz2-piecz-koniec .rz2-piecz-txt{color:var(--steel);} /* ========================= SZWY (wejście / wyjście) ====================== */ /* Szew #3 · wejście p2 → p3 (odpowiednik global .kr-grad-plain) */ #rozmowa-r2 .kr-wejscie{ position:relative; z-index:0; height:16vh; min-height:96px; background:linear-gradient(180deg in oklab, var(--p2) 0%, color-mix(in oklab, var(--p2), var(--forest) 6%) 40%, color-mix(in oklab, var(--p3), var(--forest) 5%) 68%, var(--p3) 100%); } @supports not (background:color-mix(in oklab,red,blue)){ #rozmowa-r2 .kr-wejscie{background:linear-gradient(180deg,var(--p2),var(--p3));} } #rozmowa-r2 .kr-szew-smuga{ position:absolute; left:8%; right:8%; top:50%; height:3px; transform:translateY(-50%) rotate(-.35deg); background:linear-gradient(90deg,transparent,rgba(199,72,14,.42) 22%,rgba(199,72,14,.22) 60%,transparent); filter:blur(.4px); border-radius:3px; } /* Szew #4 · NOWY .kr-perfo · perforacja p3 → p2 (kierunek 08b: szew i kwity) */ #rozmowa-r2 .kr-perfo{ position:relative; z-index:2; height:clamp(66px,10vh,120px); background:linear-gradient(180deg, var(--p3) 0 50%, var(--p2) 50% 100%); } /* rząd perforacji na styku 50% */ #rozmowa-r2 .kr-perfo-linia{ position:absolute; left:0; right:0; top:50%; height:16px; transform:translateY(-50%); pointer-events:none; background: radial-gradient(circle 3.4px at 13px 50%, rgba(31,36,30,.34) 0 3.2px, transparent 3.6px); background-size:26px 16px; background-repeat:repeat-x; filter:drop-shadow(0 1px 0 rgba(240,239,232,.55)); } #rozmowa-r2 .kr-perfo::after{ content:""; position:absolute; left:0; right:0; top:calc(50% - 5px); height:1px; background:rgba(31,36,30,.10); } /* =============================== MOBILE ================================== */ @media (max-width:899px){ #rozmowa-r2 .poz{display:none;} #rozmowa-r2 .s-ghost{display:none;} #rozmowa-r2 .rz2-uklad{grid-template-columns:1fr; gap:clamp(24px,5vw,40px);} #rozmowa-r2{--rz2-gutter:38px;} /* oś cieńsza */ #rozmowa-r2 .rz2-nn{font-size:8px; margin-bottom:7px;} #rozmowa-r2 .rz2-wezel{width:11px; height:11px;} #rozmowa-r2 .rz2-karta{max-width:none;} #rozmowa-r2 .rz2-margines{margin-top:8px;} /* ROZSTRZYGNIĘCIE → dwie pieczęcie jedna pod drugą, „albo" w środku (obie równe) */ #rozmowa-r2 .rz2-piecz-para{grid-template-columns:1fr; gap:14px; max-width:none;} #rozmowa-r2 .rz2-albo{margin:1px 0;} #rozmowa-r2 .rz2-piecz{justify-content:flex-start;} #rozmowa-r2 .rz2-piecz-txt{white-space:normal;} } @media (max-width:520px){ #rozmowa-r2 .rz2-stacja{grid-template-columns:26px minmax(0,1fr); column-gap:12px;} } /* =========================== REDUCED MOTION ============================== */ /* stan CSS = FINALNY (widoczny). JS animuje TYLKO gdy ruch dozwolony, więc przy reduced-motion / braku JS sekcja stoi w pełni odsłonięta i czytelna. Ten blok dodatkowo gasi wszelkie transitions. */ @media (prefers-reduced-motion:reduce){ #rozmowa-r2 *{animation:none !important; transition:none !important;} #rozmowa-r2 .rz2-lampa{opacity:.55;} } /* ===== CSS fragmentu: zlecenia ===== */ /* ============================================================================ REDESIGN 2 · #zlecenia — poz. 08b · aneks (SCOPED pod #zlecenia-r2) Koncept: perforowany bloczek kwitów + światło dyżurne. Wszystkie selektory zaczynają się od #zlecenia-r2, żeby fragment nie gryzł się z innymi. Tokeny z motywu (--p0..--p3, --dk-ink, --rust, --steel, --gold, --f-*, --sh-*) są READ z :root motywu; poniżej fallbacki na wypadek podglądu fragmentu w izolacji (identyczne wartości co motyw v0.5). ============================================================================ */ #zlecenia-r2{ /* --- fallbacki tokenów (nadpisywane przez :root motywu, te same wartości) --- */ --p0:#E8E6DE; --p1:#DDDBD0; --p2:#D0CFC2; --p3:#C2C0B0; --dk:#232B26; --dk-ink:#1B211C; --rust:#C7480E; --rust-deep:#A23A08; --steel:#3E4A50; --gold:#8A7833; --gold-ink:#5f5620; --tx-body:#454D42; --tx-mute:#57625A; --ink:#1F241E; --f-disp:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"IBM Plex Mono",monospace; --card-edge:#B9B7A6; --sh-rest:0 1px 0 rgba(31,36,30,.05), 0 10px 24px rgba(31,36,30,.10); --sh-lift:0 2px 0 rgba(31,36,30,.05), 0 18px 44px rgba(31,36,30,.17); --sh-float:0 34px 90px rgba(31,36,30,.22); /* --- lokalne --- */ --kwit-bg:#EFEEE7; /* kwit o ton jaśniejszy niż blat p2 = głębia */ --kwit-bg2:#E8E6DE; /* drugi ton dla rytmu */ --perf-col:#B0AE9E; /* kropki perforacji */ --mx:50%; --my:32%; /* reaktywna lampa (JS) */ /* subtelny up-tick względem rozmowy p3: świeży arkusz aneksu p2, dryf ku ink u dołu. Próg ciemnienia zepchnięty do 84% i dno rozjaśnione do #BEBDAE, żeby tekst body (tx-body) trzymał AA >=4.5 na całej wysokości (dawniej #B9B8A9 → 4.38 na styku). */ background: linear-gradient(180deg, var(--p2) 0%, var(--p2) 84%, #BEBDAE 100%); position:relative; isolation:isolate; } /* ===================== [WEJŚCIE] KRAWĘDŹ PERFORACJI ===================== */ #zlecenia-r2 .anx-kr-perfo{ position:absolute; left:0; right:0; top:0; height:clamp(46px,7vh,74px); display:flex; align-items:center; justify-content:center; gap:16px; background:linear-gradient(180deg, var(--p3) 0%, var(--p2) 100%); z-index:1; pointer-events:none; } #zlecenia-r2 .anx-kr-perfo-line{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); width:100%; height:12px; } #zlecenia-r2 .anx-kr-perfo-line line{ stroke:var(--perf-col); stroke-width:4; stroke-linecap:round; stroke-dasharray:0.5 20; } #zlecenia-r2 .anx-kr-perfo-lab{ position:relative; z-index:2; background:var(--p2); padding:3px 12px; font-size:9px; letter-spacing:.22em; color:var(--tx-mute); border:1px solid var(--card-edge); border-radius:2px; transform:rotate(-.6deg); } /* ===================== SEKCJA / GŁÓWKA ===================== */ #zlecenia-r2.sekcja{ position:relative; padding:clamp(104px,15vh,168px) 6vw clamp(0px,0vh,0px); overflow:hidden; } #zlecenia-r2 .s-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; } /* reaktywna ciepła pula światła — CIEPŁA para z czerwoną lampką kontaktu */ #zlecenia-r2 .anx-lampa{ position:absolute; inset:-14vh -12vw; z-index:0; pointer-events:none; background:radial-gradient(340px 300px at var(--mx) var(--my), rgba(138,120,51,.20) 0%, rgba(138,120,51,.10) 34%, rgba(138,120,51,0) 68%); mix-blend-mode:multiply; transition:background .12s linear; } /* faktura papieru */ #zlecenia-r2 .s-inner::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; filter:url(#anxNoise); opacity:.04; mix-blend-mode:multiply; } #zlecenia-r2 .s-ghost{ position:absolute; top:-52px; right:-6px; z-index:0; font-family:var(--f-disp); font-weight:700; font-size:clamp(110px,17vw,220px); line-height:1; color:rgba(31,36,30,.075); pointer-events:none; user-select:none; letter-spacing:-.02em; } #zlecenia-r2 .anx-head{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:22px; } #zlecenia-r2 .anx-head-l{ flex:1 1 auto; min-width:0; } #zlecenia-r2 .s-kick{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--rust-ink,#8F3208); margin-bottom:16px; display:block; /* AA 5.09:1 na p2 (rust-deep dawał 4.26) */ } #zlecenia-r2 .s-kick::before{ content:""; display:inline-block; width:16px; height:3px; background:var(--rust); margin-right:9px; vertical-align:middle; } #zlecenia-r2 .s-h2{ font-family:var(--f-disp); font-weight:600; font-size:clamp(28px,3.8vw,50px); line-height:1.12; letter-spacing:-.018em; color:var(--ink); max-width:20ch; margin:0; } #zlecenia-r2 .s-h2 .anx-gold{ font-style:italic; font-weight:500; color:var(--gold-ink); position:relative; white-space:nowrap; } #zlecenia-r2 .s-h2 .anx-gold::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, rgba(95,86,32,.0), rgba(95,86,32,.5), rgba(95,86,32,.0)); } /* chip „światło dyżurne" — reaguje wraz z lampą (opacity sterowane JS via --anx-glow) */ #zlecenia-r2 .anx-chip-dyzur{ flex:0 0 auto; align-self:flex-start; margin-top:4px; display:inline-flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.18em; color:var(--gold-ink); border:1px solid rgba(138,120,51,.5); border-radius:3px; padding:6px 11px; background:rgba(138,120,51,.06); transform:rotate(.5deg); white-space:nowrap; } #zlecenia-r2 .anx-chip-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(138,120,51,.45); animation:anxDyzur 3.4s ease-in-out infinite; } @keyframes anxDyzur{ 0%,100%{ box-shadow:0 0 0 0 rgba(138,120,51,.5); opacity:.7; } 50%{ box-shadow:0 0 0 5px rgba(138,120,51,0); opacity:1; } } #zlecenia-r2 .prose p{ font-family:var(--f-body); font-size:clamp(15.5px,1.25vw,17.5px); line-height:1.7; color:var(--tx-body); max-width:64ch; margin:22px 0 18px; } /* ===================== BLOCZEK KWITÓW ===================== */ #zlecenia-r2 .anx-bloczek{ position:relative; z-index:2; margin:40px 0 12px; } #zlecenia-r2 .anx-bloczek-top{ display:flex; justify-content:flex-end; margin-bottom:14px; padding-right:8px; } #zlecenia-r2 .anx-stempel{ display:inline-block; font-size:10px; letter-spacing:.2em; color:var(--rust); border:1.6px solid var(--rust); border-radius:4px; padding:5px 12px; transform:rotate(-4.5deg); mix-blend-mode:multiply; box-shadow:inset 0 0 0 1px rgba(199,72,14,.12); } #zlecenia-r2 .anx-kwity{ margin:0; display:flex; flex-direction:column; gap:26px; } /* pojedynczy KWIT — perforowany paragon z rest-rotation */ #zlecenia-r2 .anx-kwit{ position:relative; margin:0; padding:0; background:var(--kwit-bg); box-shadow:var(--sh-rest); transform-origin:50% 50%; will-change:transform; /* perforowane krawędzie: półkola wycięte u góry i u dołu (mask) */ --n:8px; -webkit-mask: radial-gradient(circle var(--n) at 50% 0%, #0000 var(--n), #000 calc(var(--n) + .6px)) top left / 26px 51% repeat-x, radial-gradient(circle var(--n) at 50% 100%, #0000 var(--n), #000 calc(var(--n) + .6px)) bottom left / 26px 51% repeat-x; mask: radial-gradient(circle var(--n) at 50% 0%, #0000 var(--n), #000 calc(var(--n) + .6px)) top left / 26px 51% repeat-x, radial-gradient(circle var(--n) at 50% 100%, #0000 var(--n), #000 calc(var(--n) + .6px)) bottom left / 26px 51% repeat-x; } #zlecenia-r2 .anx-kwit[data-kwit="1"]{ transform:rotate(-.5deg); } #zlecenia-r2 .anx-kwit[data-kwit="2"]{ transform:rotate(.4deg); background:var(--kwit-bg2); } #zlecenia-r2 .anx-kwit[data-kwit="3"]{ transform:rotate(-.3deg); } /* kwit ma klasę .an-poz → globalna reguła .an-poz:nth-of-type(n) .rz-karta{rotate} przechylała TREŚĆ paragonu (podwójny tilt). Kwit sam się przechyla przez data-kwit, więc wewnętrzna karta ma stać prosto. */ #zlecenia-r2 .an-poz .rz-karta{ transform:none; } /* reaktywny lift: kwit najbliższy ciepłej puli (JS .lit) + hover/focus */ #zlecenia-r2 .anx-kwit.lit, #zlecenia-r2 .anx-kwit:hover, #zlecenia-r2 .anx-kwit:focus-within{ box-shadow:var(--sh-float); z-index:4; } #zlecenia-r2 .anx-kwit.lit{ transform:scale(1.02); } #zlecenia-r2 .anx-kwit[data-kwit="1"].lit{ transform:rotate(-.5deg) scale(1.02); } #zlecenia-r2 .anx-kwit[data-kwit="2"].lit{ transform:rotate(.4deg) scale(1.02); } #zlecenia-r2 .anx-kwit[data-kwit="3"].lit{ transform:rotate(-.3deg) scale(1.02); } #zlecenia-r2 .anx-kwit{ transition:box-shadow .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); } /* pasek perforacji (numerator + rysowana linia kropek) */ #zlecenia-r2 .anx-perf{ position:relative; height:26px; display:flex; align-items:center; padding:0 clamp(18px,3vw,30px); } #zlecenia-r2 .anx-perf-top{ padding-top:6px; } #zlecenia-r2 .anx-perf-bot{ padding-bottom:6px; justify-content:flex-end; } #zlecenia-r2 .anx-perf-line{ position:absolute; left:clamp(18px,3vw,30px); right:clamp(18px,3vw,30px); top:50%; transform:translateY(-50%); width:auto; height:8px; } #zlecenia-r2 .anx-perf-line line{ stroke:var(--perf-col); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:0.5 15; } #zlecenia-r2 .anx-num{ position:relative; z-index:2; background:var(--kwit-bg); padding:0 10px 0 0; font-size:9px; letter-spacing:.2em; color:var(--tx-mute); } #zlecenia-r2 .anx-kwit[data-kwit="2"] .anx-num{ background:var(--kwit-bg2); } #zlecenia-r2 .anx-egz{ position:relative; z-index:2; background:var(--kwit-bg); padding:0 0 0 10px; font-size:8.5px; letter-spacing:.18em; color:#8F8A74; } #zlecenia-r2 .anx-kwit[data-kwit="2"] .anx-egz{ background:var(--kwit-bg2); } #zlecenia-r2 .anx-kwit-body{ padding:4px clamp(20px,3.4vw,34px) 8px; } #zlecenia-r2 .anx-kwit-head{ display:flex; align-items:center; gap:12px; margin:2px 0 12px; } /* checkbox atramentem stali */ #zlecenia-r2 .anx-check{ flex:0 0 auto; width:22px; height:22px; display:block; } #zlecenia-r2 .anx-check svg{ width:100%; height:100%; overflow:visible; } #zlecenia-r2 .anx-check-box{ fill:none; stroke:var(--steel); stroke-width:1.8; stroke-linejoin:round; opacity:.85; } #zlecenia-r2 .anx-check-tick{ fill:none; stroke:var(--steel); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } /* etykieta usługi — plain atrament stali (reset boxowanego .rz-krok z motywu: checkbox jest „kratką", etykieta nie dubluje ramki) */ #zlecenia-r2 .anx-usluga{ display:inline-block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); font-weight:500; border:none; background:none; padding:0; margin:0; border-radius:0; transform:rotate(-.8deg); will-change:auto; } /* karta treści usługi — w kwicie płaska (kwit jest papierem) */ #zlecenia-r2 .rz-karta{ position:relative; background:transparent; border:none; box-shadow:none; padding:0; margin:0; } #zlecenia-r2 .rz-karta::before, #zlecenia-r2 .rz-karta::after{ display:none; } #zlecenia-r2 .rz-karta .prose p{ margin:0; max-width:60ch; font-size:clamp(14.5px,1.15vw,16px); } /* ===================== ODDECH / MARGINES / CTA ===================== */ #zlecenia-r2 .anx-oddech{ max-width:62ch; margin-top:34px; } #zlecenia-r2 .anx-oddech .w{ opacity:.16; transition:opacity .18s linear; } #zlecenia-r2 .anx-margines{ position:relative; z-index:2; max-width:54ch; margin:26px 0 0; background:var(--p1); border:1px dashed #B7B29B; border-radius:8px; padding:18px 22px; transform:rotate(-1.1deg); box-shadow:var(--sh-rest); } #zlecenia-r2 .anx-margines::before{ content:""; position:absolute; left:26px; top:-9px; width:70px; height:18px; background:rgba(87,98,90,.26); mix-blend-mode:multiply; transform:rotate(-2deg); } #zlecenia-r2 .anx-margines .prose p{ margin:0; font-size:14.5px; max-width:none; } #zlecenia-r2 .anx-cta-wrap{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:30px; } #zlecenia-r2 .anx-cta{ margin:0; max-width:52ch; color:var(--ink); font-weight:500; } #zlecenia-r2 .anx-stempel-gold{ display:inline-block; font-size:10px; letter-spacing:.2em; color:var(--gold-ink); border:1.6px solid rgba(138,120,51,.6); border-radius:4px; padding:5px 12px; transform:rotate(3.5deg); mix-blend-mode:multiply; white-space:nowrap; } /* ===================== PUENTA + ODERWANIE ===================== */ #zlecenia-r2 .anx-puenta{ margin:36px 0 0; font-family:var(--f-disp); font-style:italic; font-weight:500; font-size:clamp(21px,2.6vw,32px); line-height:1.28; color:var(--ink); max-width:30ch; } #zlecenia-r2 .anx-puenta span{ background-image:linear-gradient(rgba(138,120,51,.26), rgba(138,120,51,.26)); background-repeat:no-repeat; background-size:100% .5em; background-position:0 88%; padding:0 2px; } #zlecenia-r2 .anx-puenta .w{ opacity:.16; transition:opacity .18s linear; } #zlecenia-r2 .anx-puenta .w.anx-hot{ color:var(--rust); font-style:italic; } /* oderwany kwit — czyste oderwanie wzdłuż perforacji */ #zlecenia-r2 .anx-kwit-tear.anx-oderwany{ z-index:5; box-shadow:var(--sh-float); } #zlecenia-r2 .anx-next{ margin-top:54px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--tx-body); position:relative; z-index:2; } #zlecenia-r2 .anx-next .rule{ flex:1; min-width:60px; height:1px; background:rgba(69,77,66,.35); } #zlecenia-r2 .anx-next .mono{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#424A43; } /* AA >=4.8:1 nawet na dnie gradientu (tx-mute dawał 4.06 na p2) */ /* ===================== [WYJŚCIE] KR-TEAR ===================== */ /* korzysta z definicji .kr-tear w motywie; tu tylko kontekst kolorów fragmentu */ #zlecenia-r2 .anx-kr-tear{ position:relative; z-index:2; margin-top:clamp(60px,9vh,110px); --od:var(--p2); --do:var(--dk-ink); } /* ===================== MARGINES AKT (poz) ===================== */ #zlecenia-r2 .poz{ position:absolute; left:0; top:0; bottom:0; width:clamp(30px,5vw,64px); z-index:3; pointer-events:none; } #zlecenia-r2 .poz-nic{ position:absolute; left:22px; top:12%; bottom:10%; width:0; border-left:1px dashed rgba(87,98,90,.5); transform-origin:top; } #zlecenia-r2 .poz-tab{ position:absolute; left:14px; top:16%; writing-mode:vertical-rl; text-orientation:mixed; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-mute); background:var(--p1); border:1px solid var(--card-edge); border-radius:2px 0 0 2px; padding:8px 4px; } #zlecenia-r2 .mono{ font-family:var(--f-mono); } /* ============================================================================ MOBILE ≤899px — kwity stack (już stack), perforacja jako pozioma reguła, oderwanie statyczne, lampa wygaszona. ============================================================================ */ @media (max-width:899px){ #zlecenia-r2.sekcja{ padding:88px 6vw 0; } #zlecenia-r2 .s-ghost{ font-size:90px; top:-30px; } #zlecenia-r2 .anx-head{ flex-direction:column; gap:14px; } #zlecenia-r2 .anx-chip-dyzur{ align-self:flex-start; margin-top:0; } #zlecenia-r2 .anx-lampa{ display:none; } /* lampa wygaszona na mobile */ #zlecenia-r2 .anx-kwit{ --n:6px; } #zlecenia-r2 .anx-perf{ padding:0 16px; } #zlecenia-r2 .anx-perf-line{ left:16px; right:16px; } #zlecenia-r2 .anx-kwit-body{ padding:2px 18px 6px; } #zlecenia-r2 .poz{ display:none; } #zlecenia-r2 .anx-cta-wrap{ gap:12px; } } @media (max-width:560px){ #zlecenia-r2 .anx-kr-perfo-lab{ font-size:8px; letter-spacing:.16em; } #zlecenia-r2 .s-ghost{ display:none; } } /* ============================================================================ REDUCED MOTION — stany KOŃCOWE, jedna kopia treści, zero duplikatów. Wszystko widoczne od razu; oderwany kwit pokazany statycznie odsunięty. ============================================================================ */ @media (prefers-reduced-motion:reduce){ #zlecenia-r2 .anx-chip-dot{ animation:none; } #zlecenia-r2 .anx-lampa{ background:radial-gradient(360px 320px at 50% 30%, rgba(138,120,51,.14), rgba(138,120,51,0) 68%); } #zlecenia-r2 [data-anx-rev]{ opacity:1 !important; transform:none !important; } #zlecenia-r2 .anx-oddech .w, #zlecenia-r2 .anx-puenta .w{ opacity:1 !important; } #zlecenia-r2 .anx-perf-line line, #zlecenia-r2 .anx-kr-perfo-line line{ stroke-dashoffset:0 !important; } #zlecenia-r2 .anx-check-tick{ stroke-dashoffset:0 !important; } #zlecenia-r2 .anx-kwit[data-kwit="3"].anx-kwit-tear{ transform:rotate(-2.6deg) translate(28px,-16px); box-shadow:var(--sh-float); z-index:5; } } /* Stan „uzbrojony" — tylko gdy JS/GSAP przejmuje animację (klasa dodawana z JS). Bez tej klasy (no-JS / reduced) wszystko jest widoczne od razu. */ #zlecenia-r2.anx-armed [data-anx-rev]{ opacity:0; } #zlecenia-r2.anx-armed .anx-oddech .w, #zlecenia-r2.anx-armed .anx-puenta .w{ opacity:.16; } /* ===== CSS fragmentu: kontakt ===== */ /* ========================================================================= REDESIGN2 · #kontakt — poz. 07 · kontakt KONCEPT (FUZJA): „Dziennik podawczy" (oprawiona księga, page-turn) + „mechaniczny datownik" (rolujące bębenki cyfr) + zachowany callback trzech zgłoszeń (kt-stare → „zamknięte"). Style SCOPED pod #kontakt-r2 — wszystkie selektory zaczynają się od id sekcji, żeby fragment nie gryzł się z resztą składanej strony. STAN DOMYŚLNY CSS = STAN KOŃCOWY (wszystko widoczne). initKontaktR2() gsap.set()-uje elementy do stanu startowego i odgrywa je scrollem. Brak JS / reduced-motion / mobile => zostaje stan końcowy (graceful). ========================================================================= */ #kontakt-r2{ /* --- oś papieru / atramenty / role (protokół, 1:1 z tokenami strony) --- */ --p0:#E8E6DE; --p1:#DDDBD0; --p2:#D0CFC2; --p3:#C2C0B0; --card:#F0EFE8; --card-edge:#B9B7A6; --ink:#1F241E; --forest:#2C3830; --tx-body:#454D42; --tx-mute:#57625A; --rust:#C7480E; --rust-deep:#A23A08; --rust-lift:#F5803C; --steel:#3E4A50; --steel-lift:#9FB4BC; --gold:#8A7833; --gold-lift:#C9B45C; --gold-ink:#5f5620; --dk:#232B26; --dk-ink:#1B211C; --dk-card:#2C352E; --dk-line:rgba(232,230,222,.14); --dk-tx:#E8E6DE; --dk-tx2:#A9B2A7; --dk-ghost:rgba(232,230,222,.06); --f-disp:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"IBM Plex Mono",monospace; --sh-dark:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,230,222,.05); --sh-sheet:0 2px 0 rgba(0,0,0,.18), 0 26px 64px rgba(0,0,0,.5); position:relative; background:var(--dk-ink); color:var(--dk-tx); font-family:var(--f-body); overflow:hidden; -webkit-font-smoothing:antialiased; isolation:isolate; } #kontakt-r2 *{box-sizing:border-box;} #kontakt-r2 ::selection{background:var(--rust-lift); color:var(--dk-ink);} #kontakt-r2 .mono{font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.14em;} /* ============ ŚWIATŁO + ZIARNO (ciemnia oddycha) ============ */ /* R5 (poprawka 7): obie warstwy atmosfery sekcji 07 startują od ZERA na samej górze sekcji. Bez tego górne 2 px sekcji były rozjaśnione przez lampę i ziarno (pomiar: dk-ink 27,33,28 nad stykiem vs 31,37,32 pod stykiem), więc krawędź archiwum kończąca się czystym dk-ink dawała widoczny prążek. Maska zdejmuje je na pierwszych 90 px i nie rusza atmosfery w reszcie sekcji. */ #kontakt-r2 .ink-lamp, #kontakt-r2 .dz-grain{ -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0, #000 90px); mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0, #000 90px); } #kontakt-r2 .ink-lamp{ position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen; background: radial-gradient(720px 560px at var(--mx,63%) var(--my,44%), rgba(201,180,92,.22), transparent 68%), radial-gradient(1200px 780px at 66% 24%, rgba(245,128,60,.05), transparent 76%); } #kontakt-r2 .dz-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.06; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============ MARGINES AKT (nić + zakładka pozycji) ============ */ #kontakt-r2 .poz{position:absolute; left:clamp(8px,2.2vw,40px); top:0; bottom:0; z-index:4; pointer-events:none; color:var(--dk-tx2);} #kontakt-r2 .poz-nic{position:absolute; left:0; top:0; bottom:0; width:0; border-left:1px dashed currentColor; opacity:.4; transform-origin:top; display:block;} #kontakt-r2 .poz-tab{position:absolute; left:-5px; top:clamp(90px,13vh,170px); writing-mode:vertical-rl; font-size:9.5px; letter-spacing:.2em; opacity:.78; padding:8px 0;} @media(max-width:899px){ #kontakt-r2 .poz{display:none;} } /* ============ SZEW #5 · WEJŚCIE (wydarte akta: p2 → dk-ink) ============ */ #kontakt-r2 .kr-tear{position:relative; height:clamp(54px,7vh,92px); background:var(--p2); z-index:6; line-height:0;} #kontakt-r2 .kr-tear svg{position:absolute; left:0; bottom:-1px; width:100%; height:100%; display:block;} #kontakt-r2 .kr-tear .fill{fill:var(--dk-ink);} #kontakt-r2 .kr-tear .edge{fill:none; stroke:var(--rust); stroke-width:1.4; opacity:.5; stroke-dasharray:3 5;} /* ============ PIN / SCENA ============ */ #kontakt-r2 .dz-pin{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(70px,10vh,120px) clamp(18px,4.5vw,56px); } #kontakt-r2 .dz-stage{position:relative; width:100%; max-width:1160px; margin:0 auto; z-index:5;} #kontakt-r2 .s-ghost{position:absolute; top:clamp(-58px,-6vw,-30px); right:-6px; z-index:0; font-family:var(--f-disp); font-weight:700; font-size:clamp(120px,17vw,230px); line-height:1; color:var(--dk-ghost); pointer-events:none; user-select:none;} #kontakt-r2 .dz-head{position:relative; z-index:6; text-align:center; margin-bottom:clamp(20px,3.4vw,40px);} #kontakt-r2 .s-kick{font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--rust-lift); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px;} #kontakt-r2 .s-kick::before{content:""; width:18px; height:2px; background:var(--rust-lift); display:inline-block;} #kontakt-r2 .s-h2{font-family:var(--f-disp); font-weight:600; font-size:clamp(30px,4.4vw,58px); line-height:1.06; letter-spacing:-.02em; color:var(--dk-tx); margin:0;} /* ============ REKWIZYT: NOTES → KARTKI-OBIEKTY (przewracane OSOBNO) ============ Blok kartek na PRAWEJ połowie otwartego notesu (tło notes-rozkladowka). Każda kartka = obiekt 3D: awers (asset z wypalonym tekstem) + rewers na wspólnym zawiasie przy GRZBIECIE PO LEWEJ (transform-origin lewa krawędź, rotateY 0→-180). Zero DOM-tekstu na stronach. Stan sterowany scrollem (pin+scrub = jedno źródło prawdy); nawigacja ręczna (dog-ear + przyciski) TYLKO przewija Lenisem do progu beatu. BASE CSS = stan uniwersalny (bez JS / mobile / reduced): kartki jedna pod drugą, awersy w całości, linki aktywne. JS dodaje klasę .dz-3d i włącza scenę. */ /* ---- BASE: kartki jedna pod drugą (uniwersalny, dostępny fallback) ---- */ /* FIX (2026-07): 94vw liczyło się od PEŁNEGO viewportu, nie od rodzica (.dz-stage wewnątrz .dz-pin, który ma własny padding poziomy) — na mobile 390px prawa krawędź .dz-ksiega wystawała ~19px poza rodzica i obcinała margines papieru w asecie. 100% = realna dostępna szerokość rodzica, bez przeliczania z osobna. */ #kontakt-r2 .dz-ksiega{ position:relative; width:min(470px,100%); margin:0 auto; } #kontakt-r2 .dz-scena{ position:relative; } #kontakt-r2 .dz-scena::before{ display:none; } #kontakt-r2 .dz-desk-cien{ display:none; } #kontakt-r2 .dz-oprawa{ display:none; } /* deska CSS tylko w 3D */ #kontakt-r2 .polowka, #kontakt-r2 .gutter, #kontakt-r2 .dz-cover, #kontakt-r2 .dz-blok-cien{ display:none; } /* elementy sceny 3D */ #kontakt-r2 .dz-leaves{ display:flex; flex-direction:column; gap:clamp(14px,2.4vw,18px); } #kontakt-r2 .dz-leaf{ position:relative; width:100%; aspect-ratio:900/1200; } #kontakt-r2 .leaf-face{ position:absolute; inset:0; overflow:hidden; border-radius:6px; } #kontakt-r2 .leaf-face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; } #kontakt-r2 .leaf-front{ box-shadow:var(--sh-sheet); z-index:1; } #kontakt-r2 .leaf-back, #kontakt-r2 .leaf-cien{ display:none; } #kontakt-r2 .dz-page-meta{ position:absolute; left:10.6%; bottom:3.2%; z-index:3; pointer-events:none; padding:2px 5px; background:#E7E7DE; color:#3E4A50; font-size:clamp(5px,.46vw,7px); line-height:1; letter-spacing:.28em; } /* niewidzialne linki na wypalonym mailu/telefonie (bboxy pipeline + hit-padding) */ #kontakt-r2 .leaf-link{ position:absolute; z-index:3; display:block; border-radius:3px; } /* r7: bboxy tekstu maila/tel na strona-kontakt.webp + hit-padding (mail 16.67/53.75→84.28/57.46; tel 16.67/67.29→44.72/70.12) */ #kontakt-r2 .leaf-mail{ left:15.2%; top:52.15%; width:70.6%; height:6.9%; } #kontakt-r2 .leaf-tel{ left:15.2%; top:65.55%; width:31%; height:6.3%; } #kontakt-r2 .leaf-link:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:2px; } /* nawigacja / pióro ukryte w base; pokazuje je .dz-3d */ #kontakt-r2 .dz-naw{ display:none; } #kontakt-r2 .dz-pioro{ display:none; } /* treść dla czytników (assety to grafiki z wypalonym tekstem) */ #kontakt-r2 .dz-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ========================================================================= TRYB 3D (.dz-3d dodawane przez JS: desktop + GSAP + brak reduced-motion) Blok kartek na prawej połowie sceny; każda kartka przewraca się osobno. ========================================================================= */ /* FIX (2026-07): .dz-pin ma min-height:100svh, ale to tylko DOLNA granica — realna wysokość kolumny (nagłówek + notes w aspect-ratio 1800/1200 + pasek .dz-naw + marginesy + padding pinu) potrafiła przekroczyć 100svh na typowych desktopach (np. 1536×864, 1280×800, 1440×900) i nadmiar renderował się POD dolną krawędzią — w pinie nie da się tego odsłonić scrollem (scrub konsumuje scroll zamiast przewijać stronę). Notes musi być HEIGHT-driven: szerokość = min(dotychczasowy limit 940px/94vw, wysokość-z-budżetu-pinu × 1.5 [odwrócony aspect-ratio 1800/1200 → w = h×1.5]). --dz-reserved = suma wszystkiego w pinie OPRÓCZ samego notesu, zmierzona getBoundingClientRect w headless (nie zgadywana): 2× clamp(70px,10vh,120px) pin padding-top + padding-bottom (token .dz-pin) 98px wysokość .dz-head (s-kick+margines+s-h2), zmierzone 97.46875px przy szerokościach ≥1318px (plateau clamp s-h2); przy węższych dz-3d (900–1318px) nagłówek jest NIŻSZY, więc stała lekko nadmiarowa = bezpieczna (mniejszy notes, nigdy overflow) clamp(20px,3.4vw,40px) margin-bottom .dz-head (token istniejący) clamp(20px,3vh,40px) margin-top .dz-naw (token istniejący) 33px wysokość .dz-naw (zmierzone 32px + zapas) 24px bezpieczny zapas Zweryfikowane przeliczeniem na 1536×864 / 1280×800 / 1440×900 / 1920×1080 — pasek .dz-naw w całości w viewport na każdym z nich (patrz notatka w repo). max(320px, …) to twarda podłoga na wypadek ekstremalnie niskich okien — notes nie znika, nawet gdyby budżet wypadł ujemny. */ #kontakt-r2.dz-3d{ --dz-reserved: calc(2 * clamp(70px,10vh,120px) + 98px + clamp(20px,3.4vw,40px) + clamp(20px,3vh,40px) + 33px + 24px); } /* KSIĘGA = box rozkładówki (632/420, jak zaakceptowany podgląd). Szerokość HEIGHT-DRIVEN: min(dotychczasowy limit, wysokość-z-budżetu-pinu × 632/420) — cały pin mieści się w oknie. */ #kontakt-r2.dz-3d .dz-ksiega{ width:min(940px, 94vw, max(320px, calc((100svh - var(--dz-reserved)) * 1.5048))); aspect-ratio:632/420; perspective:1900px; perspective-origin:50% 26%; } #kontakt-r2.dz-3d .dz-scena{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(6deg); } #kontakt-r2.dz-3d .dz-scena::before{ content:""; display:block; position:absolute; left:-12%; right:-12%; top:2%; bottom:-22%; z-index:0; background:radial-gradient(56% 46% at 50% 48%, rgba(201,180,92,.16), transparent 72%); transform:translateZ(-40px); pointer-events:none; } /* cień kontaktowy: miękka elipsa pod notesem (biurko dk-ink), nie płyta */ #kontakt-r2.dz-3d .dz-desk-cien{ display:block; position:absolute; z-index:0; pointer-events:none; left:6%; right:6%; bottom:-6%; height:20%; background:radial-gradient(50% 60% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.28) 46%, transparent 72%); filter:blur(10px); transform:translateZ(-60px) rotateX(-6deg); transform-origin:50% 100%; } /* OTWARTA OPRAWA = DESKA CSS (teal gradient, cienka ramka ~1.6%, radius, inset-shadow). ZERO fotografii (wypieczone białe krawędzie robiły pasy). Odsłaniana przy otwarciu. */ #kontakt-r2.dz-3d .dz-oprawa{ display:block; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(145deg,#263C36 0%, #1E2F2A 55%, #182521 100%); border-radius:clamp(7px,1.05vw,12px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 2px 6px rgba(0,0,0,.4); filter:drop-shadow(0 4px 8px rgba(0,0,0,.34)) drop-shadow(0 20px 40px rgba(0,0,0,.44)); } /* LEWA STRONA po otwarciu = wyklejka jako czysta strona (scale 1.14, zielony turn-in poza kadrem) */ #kontakt-r2.dz-3d .polowka{ display:block; position:absolute; top:2.381%; height:95.238%; width:48.418%; overflow:hidden; } #kontakt-r2.dz-3d .polowka.lewa{ left:1.582%; z-index:2; border-radius:6px 2px 2px 6px; } #kontakt-r2.dz-3d .polowka img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:fill; } #kontakt-r2.dz-3d .polowka.lewa img.wyklejka{ transform:scale(1.14); transform-origin:60% 50%; } /* dolina grzbietu = gradient NA kartkach (nie zielona) */ #kontakt-r2.dz-3d .gutter{ display:block; position:absolute; top:2.381%; left:47.15%; width:6.33%; height:95.238%; z-index:6; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(20,26,22,.32) 46%, rgba(20,26,22,.36) 54%, rgba(0,0,0,0) 100%); } /* PRAWA POŁOWA: stos kartek-obiektów; grzbiet = lewa krawędź wrappera (środek sceny). Zamknięty: wrapper wyśrodkowany (xPercent -50); otwarty: zjeżdża na prawą połowę (0). */ #kontakt-r2.dz-3d .dz-leaves{ position:absolute; top:2.381%; height:95.238%; left:50%; width:48.418%; z-index:4; display:block; transform-style:preserve-3d; transform-origin:0% 50%; } #kontakt-r2.dz-3d .dz-leaf{ position:absolute; inset:0; aspect-ratio:auto; transform-style:preserve-3d; transform-origin:0% 50%; will-change:transform; --lf-shadow:1; } /* 1=pełny cień, 0=wygaszony; JS gasi go tylko w wąskim oknie wokół edge-on (90°) */ /* ŚCIANKI: translateZ OBOWIĄZKOWO (bez niego Safari spłaszcza ścianki → lustrzany awers). */ #kontakt-r2.dz-3d .leaf-face{ position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:2px 6px 6px 2px; } #kontakt-r2.dz-3d .leaf-face img{ object-fit:fill; } /* box-shadow alpha przez calc(var(--lf-shadow)): przy rotationY≈-90° (kartka widziana krawędziowo, spłaszczona w X) blur/spread NIE skalują się z tą kompresją i „wystrzeliwują" poza bbox jako pionowy spike — dokładnie ten sam mechanizm co przy okładce (.dz-cover), tam już wygaszanej przed edge-on. Tu gasimy tylko alpha cienia w wąskim oknie, żeby kartka nadal była widoczna przez pełne -180°. */ #kontakt-r2.dz-3d .leaf-front{ transform:rotateY(0deg) translateZ(.5px); box-shadow:0 2px 0 rgba(0,0,0,calc(.14 * var(--lf-shadow))), 0 20px 42px rgba(0,0,0,calc(.42 * var(--lf-shadow))); z-index:1; } #kontakt-r2.dz-3d .leaf-back{ display:block; transform:rotateY(180deg) translateZ(.5px); border-radius:6px 2px 2px 6px; box-shadow:0 2px 0 rgba(0,0,0,calc(.12 * var(--lf-shadow))), 0 18px 40px rgba(0,0,0,calc(.4 * var(--lf-shadow))); } /* ARMOR anty-lustro (podwójna ochrona niezależna od backface): po przekroczeniu 90° JS dodaje .past90 → front twardo znika. */ #kontakt-r2.dz-3d .dz-leaf.past90 .leaf-front{ visibility:hidden; } /* wędrujący cień na awersie podczas przewracania (JS animuje opacity) */ #kontakt-r2.dz-3d .leaf-cien{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; border-radius:inherit; background:linear-gradient(100deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.42) 100%); } /* OKŁADKA (osobny obiekt): unosi się na LEWYM zawiasie (grzbiet), przy edge-on ~88° gaśnie i znika ze sceny. Jednostronna (widzimy tylko awers okladka-cut); overhang jak deska. */ #kontakt-r2.dz-3d .dz-cover{ display:block; position:absolute; top:0; bottom:0; left:0; width:100%; z-index:90; transform-style:preserve-3d; transform-origin:0% 50%; will-change:transform, opacity; } #kontakt-r2.dz-3d .dz-cover .leaf-face{ overflow:visible; border-radius:0; } #kontakt-r2.dz-3d .dz-cover .leaf-front{ position:absolute; left:-2.6%; top:-3.4%; width:107%; height:106.8%; box-shadow:none; transform:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)) drop-shadow(0 20px 34px rgba(0,0,0,.5)); } #kontakt-r2.dz-3d .dz-cover .leaf-front img{ border-radius:0; object-fit:fill; } #kontakt-r2.dz-3d .dz-cover-poz{ position:absolute; left:50%; top:49.35%; z-index:3; transform:translate(-50%,-50%); padding:2px 7px; background:#F0EFE8; color:var(--rust-deep); pointer-events:none; font-size:clamp(5px,.46vw,7px); line-height:1; letter-spacing:.28em; white-space:nowrap; } /* cień unoszonej okładki na bloku kartek (widoczny gdy zamknięty / otwierający się) */ #kontakt-r2.dz-3d .dz-blok-cien{ display:block; position:absolute; inset:0; z-index:80; pointer-events:none; opacity:0; border-radius:2px 6px 6px 2px; transform:translateZ(1px); background:linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.22) 34%, rgba(0,0,0,0) 72%); } /* linki aktywne tylko gdy KONTAKT jest bieżącą stroną */ #kontakt-r2.dz-3d .leaf-link{ pointer-events:none; } #kontakt-r2.dz-3d[data-page="2"] .leaf-link{ pointer-events:auto; } #kontakt-r2.dz-3d .dz-naw{ display:flex; } #kontakt-r2.dz-3d .dz-pioro{ display:block; } /* ---- wygląd nawigacji (display sterowany wyżej) ---- */ #kontakt-r2 .dz-naw{ position:relative; z-index:6; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px); margin-top:clamp(20px,3vh,40px); } #kontakt-r2 .dz-naw-btn{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dk-tx2); background:transparent; border:1px solid var(--dk-line); border-radius:4px; padding:8px 16px; cursor:pointer; transition:color .2s, border-color .2s, opacity .2s; } #kontakt-r2 .dz-naw-btn:hover{ color:var(--rust-lift); border-color:var(--rust-lift); } #kontakt-r2 .dz-naw-btn:focus-visible{ outline:2px solid var(--rust-lift); outline-offset:3px; } #kontakt-r2 .dz-naw-btn[aria-disabled="true"]{ opacity:.26; pointer-events:none; } #kontakt-r2 .dz-naw-licz{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--dk-tx2); opacity:.72; min-width:6ch; text-align:center; } /* ---- PIÓRO na biurku, tuż pod dolną krawędzią notesu ---- */ #kontakt-r2 .dz-pioro{ position:absolute; z-index:7; right:-14%; bottom:-8%; width:clamp(78px,10.5vw,120px); height:auto; transform:rotate(-8deg); transform-origin:80% 20%; filter:saturate(.85) brightness(.98) drop-shadow(0 14px 16px rgba(0,0,0,.6)); pointer-events:none; } /* ========================================================================= MOBILE ≤899px — kartki jedna pod drugą (base już to robi; domykamy detale) ========================================================================= */ @media(max-width:899px){ #kontakt-r2 .dz-pin{ min-height:auto; padding:clamp(48px,9vh,80px) 5vw; } #kontakt-r2 .s-ghost{ display:none; } #kontakt-r2 .dz-naw, #kontakt-r2 .dz-pioro{ display:none !important; } } /* ========================================================================= REDUCED-MOTION — stan końcowy: wszystkie trzy strony jedna pod drugą (kompletność informacji, zwłaszcza kontakt). Zero ruchu. Base CSS już to daje; tu tylko gasimy animacje i twardo blokujemy tryb 3D, gdyby klasa została dodana przy zmianie preferencji w trakcie sesji. ========================================================================= */ @media(prefers-reduced-motion:reduce){ #kontakt-r2 .poz-nic{ transform:scaleY(1) !important; } #kontakt-r2 .dz-naw, #kontakt-r2 .dz-pioro{ display:none !important; } #kontakt-r2 *{ animation:none !important; transition:none !important; } } /* ===== CSS fragmentu: stopka ===== */ /* ===================================================================== REDESIGN2 · footer #stopka → #stopka-r2 KONCEPT: FUZJA „Sygnatura" (nić→węzeł + matowa pieczęć-tłoczenie + złoty podpis) Wszystkie selektory scoped pod #stopka-r2. Tokeny czytane z globalnego :root motywu, z literalnym fallbackiem (fragment działa też samodzielnie). ===================================================================== */ #stopka-r2{ /* --- tokeny (fallbacki = wartości z DNA protokołu/papieru) --- */ --st-ink: var(--dk-ink, #1B211C); /* baza finału */ --st-dno: #151A16; /* DNO łuku głębokości (winieta) */ --st-tx: var(--dk-tx, #E8E6DE); --st-tx2: var(--dk-tx2, #A9B2A7); --st-line: var(--dk-line, rgba(232,230,222,.14)); --st-rust: var(--rust-lift, #F5803C); /* nić / węzeł / flourish-akcent — działanie domykające */ --st-gold: var(--gold-lift, #C9B45C); /* ślad podpisu — najrzadszy */ --st-steel: var(--steel-lift, #9FB4BC);/* współrzędne — metadane, AA na ciemni */ --f-disp: var(--f-disp, "Fraunces", Georgia, serif); --f-mono: var(--f-mono, "IBM Plex Mono", ui-monospace, monospace); position:relative; overflow:hidden; isolation:isolate; /* R5: wydech niesie już treść (mapa pozycji + dane), więc z centrowanego flexa robi się kolumna z tą samą miarą co reszta protokołu. */ min-height:clamp(180px,28vh,320px); display:block; padding:clamp(38px,6vh,72px) clamp(20px,5vw,64px) clamp(48px,8vh,88px); /* SZEW #6 = BRAK szwu: jedno wspólne dk-ink z #kontakt, bez ciemniejszego żłobka na styku (dawny gradient st-dno→st-ink robił widoczne przejście). Głębia tylko u DNA strony przez .st2-winieta, nie na granicy dziennik→podpis. */ background:var(--st-ink); color:var(--st-tx); } /* ---- światło / atmosfera ------------------------------------------------ */ #stopka-r2 .st2-lamp{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:1; background: radial-gradient(560px 420px at var(--mx,50%) var(--my,42%), rgba(201,180,92,.20), transparent 70%), radial-gradient(1000px 640px at 50% 30%, rgba(245,128,60,.045), transparent 74%); transition:opacity .6s ease; } #stopka-r2 .st2-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #stopka-r2 .st2-winieta{ position:absolute; inset:0; z-index:2; pointer-events:none; /* domknięcie najciemniejszej: pogłębienie ku dolnej krawędzi do dna łuku */ background: radial-gradient(150% 120% at 50% 0%, transparent 42%, rgba(0,0,0,.30) 100%), linear-gradient(180deg, transparent 46%, var(--st-dno) 122%); opacity:.62; /* JS pogłębia do 1 w beacie 5 */ transition:opacity .6s ease; } /* ---- treść zamknięcia -------------------------------------------------- Podpis, pieczęć i koordynaty zostają na PRAWEJ stronie rozkładówki w #kontakt (.dz-piecz, .dz-podpis, .dz-coords, .dz-stempel, .dz-pioro). R5 dokłada tu to, czego rozkładówka nie unosi: spis pozycji i dane wprost. Wszystko nad .st2-winieta (z-index 2) — stąd z-index:3 na .st2-stopa. */ #stopka-r2 .st2-stopa{ position:relative; z-index:3; max-width:880px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,56px); align-items:start; padding-bottom:clamp(22px,3.5vh,34px); border-bottom:1px dashed var(--st-line); } #stopka-r2 .st2-etykieta{ display:block; margin:0 0 12px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--st-tx2); } /* --- mapa pozycji: te same numery i etykiety co pływający .spis --- */ #stopka-r2 .st2-mapa{ min-width:0; } /* grid item: bez tego min-width:auto rozpycha kolumnę */ #stopka-r2 .st2-mapa-lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px clamp(14px,2.5vw,32px); } #stopka-r2 .st2-mapa-lista a{ display:grid; grid-template-columns:26px minmax(0,1fr); align-items:baseline; gap:8px; min-height:32px; padding:5px 6px 5px 0; color:var(--st-tx); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; } #stopka-r2 .st2-nr{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--st-tx2); font-variant-numeric:tabular-nums; transition:color .2s; } #stopka-r2 .st2-nazwa{ font-size:14.5px; line-height:1.3; } @media(hover:hover){ #stopka-r2 .st2-mapa-lista a:hover{ color:var(--st-rust); border-bottom-color:var(--st-rust); } #stopka-r2 .st2-mapa-lista a:hover .st2-nr{ color:var(--st-rust); } } #stopka-r2 .st2-mapa-lista a:focus-visible{ outline:2px solid var(--st-rust); outline-offset:3px; } /* --- dane wprost --- */ #stopka-r2 .st2-dane{ display:flex; flex-direction:column; align-items:flex-start; } #stopka-r2 .st2-dana{ display:inline-block; padding:5px 0; font-size:16.5px; line-height:1.45; color:var(--st-tx); text-decoration:none; border-bottom:1px dotted color-mix(in srgb, var(--st-tx) 45%, transparent); transition:color .2s, border-color .2s; } @media(hover:hover){ #stopka-r2 .st2-dana:hover{ color:var(--st-rust); border-bottom-color:var(--st-rust); } } #stopka-r2 .st2-dana:focus-visible{ outline:2px solid var(--st-rust); outline-offset:3px; } /* --- linia zamykająca --- */ #stopka-r2 .st2-zamkniecie{ position:relative; z-index:3; max-width:880px; margin:clamp(18px,2.6vh,26px) auto 0; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--st-tx2); } @media(max-width:899px){ #stopka-r2{ min-height:auto; padding:clamp(30px,5vh,48px) 22px clamp(40px,7vh,72px); } /* pływający .spis siedzi w prawym dolnym rogu (fixed) — zostawiamy mu pas po prawej, żeby nie przykrywał ostatnich pozycji mapy i linii zamykającej */ #stopka-r2 .st2-stopa{ grid-template-columns:minmax(0,1fr); gap:26px; } #stopka-r2 .st2-mapa-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); } #stopka-r2 .st2-zamkniecie{ padding-right:120px; } } @media(max-width:420px){ #stopka-r2 .st2-mapa-lista{ grid-template-columns:minmax(0,1fr); } } /* ======================= REDUCED-MOTION (stan końcowy) ================== Lampa w spoczynkowej jasności, winieta w pełni pogłębiona. Bez JS/scrub. */ @media(prefers-reduced-motion:reduce){ #stopka-r2 .st2-lamp{ opacity:.7 !important; } #stopka-r2 .st2-winieta{ opacity:1 !important; } } /* --- an-* (baza pozycji aneksu; reużywana przez #zlecenia-r2 redesignu) --- */ .an-pozycje{margin:34px 0 6px;} .an-poz{position:relative; margin:0 0 34px;} .an-poz:nth-of-type(1) .rz-karta{transform:rotate(-.35deg);} .an-poz:nth-of-type(2) .rz-karta{transform:rotate(.3deg);} .an-poz:nth-of-type(3) .rz-karta{transform:rotate(-.25deg);} /* =========================================================================== KRAWĘDZIE PRZEJŚĆ — runda 2026-07-23 (technika Radia Bielany) Zasada: kolory sekcji mocno różne → przejście TWARDE (dwa płaskie kolory, linia podziału JEST rysunkiem). Kolory zbliżone → gradient rozłożony. Każda krawędź to własny blok: margin -1px (zabija szew subpikselowy), font-size/line-height 0 (zabija szparę po inline-block), pointer-events:none. =========================================================================== */ /* --- 05 zaplecze (p1) → 06 procedura (p3): akta znad sekcji --- */ #bio-r2 + .kr-akta, .kr-akta{ position:relative; z-index:2; margin-top:-1px; margin-bottom:-1px; font-size:0; line-height:0; pointer-events:none; background:var(--p1); /* ciągłość z sekcją górną */ height:78px; } .kr-akta-svg{ display:block; width:100%; height:78px; } /* --- 06 procedura (p3) → 07 kontakt (ciemnia): archiwum nocą --- */ .kr-archiwum{ position:relative; z-index:2; margin-top:-1px; margin-bottom:-1px; font-size:0; line-height:0; pointer-events:none; overflow:hidden; background:var(--p3); /* ciągłość z sekcją górną */ height:170px; } .kr-arch-svg{ display:block; width:100%; height:170px; position:relative; z-index:2; } .kr-arch-daleki{ opacity:.42; } /* plan daleki = głębia, jak dalsze drzewa w parku */ .kr-arch-poswiata{ /* ciepłe światło latarni archiwisty */ position:absolute; z-index:1; left:36%; top:-6px; width:500px; height:264px; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(255,231,176,.62) 0%, rgba(138,120,51,.40) 24%, rgba(138,120,51,.14) 56%, rgba(138,120,51,0) 100%); pointer-events:none; /* R5 (poprawka 7): łuna latarni zaczynała się na samej krawędzi krawędzi i ocieplała pierwsze piksele przejścia (pomiar w osi x=640: 194,191,177 nad stykiem vs 189,187,167 pod stykiem — delta 10 na kanale niebieskim). Maska wprowadza ją dopiero ~26 px niżej; sam kadr latarni bez zmian. */ -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0 10%, #000 26%); mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0 10%, #000 26%); } /* --- fallback: gradient rozłożony, TYLKO przy zbliżonych kolorach sekcji --- */ .kr-grad-fallback{ position:relative; z-index:1; margin-top:-1px; margin-bottom:-1px; font-size:0; line-height:0; pointer-events:none; height:120px; background:linear-gradient(180deg, var(--od,var(--p2)) 0%, var(--do,var(--p3)) 100%); } /* --- mobile: gesty zostają, drobiazg się redukuje --- */ @media (max-width:899px){ .kr-akta, .kr-akta-svg{ height:52px; } .kr-archiwum, .kr-arch-svg{ height:112px; } .kr-arch-poswiata{ width:320px; height:170px; } .kr-grad-fallback{ height:84px; } } /* --- korekta styku: sekcja procedury trzyma płaski kolor aż do krawędzi --- Zasada z Radia Bielany: „sekcja zostaje ciemna do dołu, przejście przejmuje krawędź”. Warstwa zmierzchu przyciemniała dno sekcji, a krawędź resetowała kolor do płaskiego p3 → na styku powstawał jaśniejszy pas. Zmierzch wygasza się teraz PRZED stykiem, a krawędź archiwum startuje od dokładnie tego samego tonu, na którym sekcja się kończy. */ /* R5 (poprawka 7) · STYK 06→07 CO DO PIKSELA. Poprzednia wersja wciąż zostawiała resztkę: zmierzch kończył się „prawie" przezroczysty, a .kr-archiwum startowało własnym przyciemnieniem rgba(27,33,28,.10) — dwa różne tony na styku dawały widoczny prążek. Teraz twardo: • zmierzch gaśnie DO ZERA na ostatnich ~12% swojej wysokości, więc dolna krawędź sekcji 06 to czyste, płaskie var(--p3); • .kr-archiwum ma płaskie var(--p3) BEZ jakiegokolwiek gradientu na starcie, a jego dolna krawędź to var(--dk-ink) malowany przez w SVG (y=136..170) — czyli dokładnie tło sekcji 07. Weryfikacja: piksel 2 px nad stykiem i 2 px pod stykiem musi być identyczny (pomiar w raporcie R5). */ #rozmowa-r2 .rz2-zmierzch{ height:42%; background: radial-gradient(120% 90% at 50% 118%, rgba(27,33,28,.16), transparent 62%), linear-gradient(180deg, transparent 0%, rgba(27,33,28,.05) 52%, rgba(27,33,28,.10) 88%, transparent 100%); /* GWARANT styku: maska wygasza CAŁĄ warstwę zmierzchu (obie gradientowe składowe naraz — także radialną, której środek leży pod sekcją i sama z siebie nie schodzi do zera przy dolnej krawędzi) na ostatnich 16 % wysokości. Dzięki temu dno sekcji 06 to matematycznie czyste var(--p3). */ -webkit-mask-image:linear-gradient(180deg, #000 0 84%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, #000 0 84%, rgba(0,0,0,0) 100%); } /* to samo dla ziarna: krawędź archiwum jest gładka, więc ostatnie piksele sekcji 06 też muszą być gładkie — inaczej na styku zmienia się faktura, nawet gdy średni kolor się zgadza */ #rozmowa-r2 .rz2-grain{ -webkit-mask-image:linear-gradient(180deg, #000 0 calc(100% - 34px), rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, #000 0 calc(100% - 34px), rgba(0,0,0,0) 100%); } .kr-archiwum{ background:var(--p3); /* płasko — bez własnego przyciemnienia na starcie */ } /* =========================================================================== KOREKTY 2026-07-23 (R6) =========================================================================== */ /* 1 · STOPKA = dokładnie to samo tło co sekcja notesu (bez żadnego przejścia). Winieta pogłębiała dno do ~#151A16, przez co na styku 07→stopka widać było zmianę tonu. Sekcja kontaktu stoi na płaskim var(--dk-ink) — stopka też. */ #stopka-r2{ background:var(--dk-ink) !important; } #stopka-r2 .st2-winieta{ display:none !important; } /* 2 · PRZEJŚCIE „na powierzchnię": showroom (--dk) → zaplecze (--p1). Poprzednio kończyło się na var(--bg-p1) — zmienna NIE ISTNIEJE w motywie, więc końcowy kolor był nieprawidłowy i nie zgadzał się z tłem sekcji 05. Teraz oba końce są dokładnie kolorami sąsiadujących sekcji. */ #bio-r2 .bio2-prog{ background:linear-gradient(180deg, var(--dk) 0%, #39443A 34%, #8E9488 70%, var(--p1) 100%) !important; } /* =========================================================================== R7 — 2026-07-23 =========================================================================== */ /* 6 · „Prawdziwy problem…" w rdzy zamiast khaki */ .hook-kicker{ color:var(--rust) !important; } /* 2 · JEDNA poświata na całej ciemni, nie osobna per sekcja. Stopka miała własną lampę (.st2-lamp), przez co ciemnia rozbijała się na dwa oddzielnie podświetlone pola. Świeci tylko lampa archiwisty z sekcji dziennika; stopka zostaje płaską kontynuacją tej samej ciemni. */ #stopka-r2 .st2-lamp{ display:none !important; } /* 3 · Dziennik: dystans od góry sekcji do notesu ścięty do ~1/4. Było clamp(70,10vh,120) paddingu + 40px marginesu nagłówka. */ #kontakt-r2 .dz-pin{ padding-top:clamp(18px,2.5vh,30px) !important; } #kontakt-r2 .dz-head{ margin-bottom:clamp(8px,1vw,12px) !important; } @media (max-width:899px){ #kontakt-r2 .dz-pin{ padding-top:clamp(14px,2vh,22px) !important; } } /* 5 · Sekcja 03 „Metoda w praktyce”: odstępy góra/dół mocno ścięte. */ #diagnozy.sekcja{ padding-top:clamp(30px,4vh,52px) !important; padding-bottom:clamp(30px,4vh,52px) !important; } #diagnozy .dg-pin{ padding-top:0 !important; } #diagnozy.dg-on .s-inner{ padding-top:1.5svh !important; } @media (max-width:899px){ #diagnozy.sekcja{ padding-top:26px !important; padding-bottom:26px !important; } }