/* ========================================================================== RC-ART — system projektowy Autor: Michał / Claude • 2026 Zasada: siatka + hairline + jeden akcent (złoto) + diagonalne cięcie z logo ========================================================================== */ /* ---------- 1. TOKENY ---------- */ :root{ color-scheme:light; --ink:#0d0e10; --ink-2:#15171a; --ink-3:#1e2225; --paper:#f7f5f1; --paper-2:#efebe3; --paper-3:#e5e0d6; --gold:#e8c34e; --gold-2:#f2d576; --gold-d:#856410; --txt:#14161a; --txt-2:#4a5057; --muted:#656b72; --line:rgba(13,14,16,.14); --line-2:rgba(13,14,16,.07); --line-dark:rgba(247,245,241,.16); --line-dark-2:rgba(247,245,241,.08); --shell:min(1320px, 100% - 2 * var(--pad)); --pad:clamp(18px, 4.2vw, 56px); --sec:clamp(72px, 9vw, 148px); --f-disp:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --cut:14px; /* wielkość ściętego rogu (motyw z logo) */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--txt); font-family:var(--f-disp);font-size:clamp(16px,1.02vw,17.5px); font-variation-settings:'wdth' 100; line-height:1.6;letter-spacing:-.005em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* Zabezpieczenie przed poziomym przewijaniem. Świadomie `clip`, a NIE `hidden`: `overflow-x:hidden` zamienia w kontener przewijania, przez co position:sticky w nagłówku przestaje działać (najczęściej na iOS). `clip` przycina tak samo, ale nie tworzy kontenera — nagłówek zostaje przyklejony. */ html,body{overflow-x:clip} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0} ul,ol{padding:0;list-style:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} ::selection{background:var(--gold);color:var(--ink)} hr{border:0;height:1px;background:var(--line);margin:0} /* ---------- 3. UKŁAD ---------- */ .shell{width:var(--shell);margin-inline:auto} .sec{padding-block:var(--sec)} .sec--tight{padding-block:clamp(52px,6vw,96px)} .grid{display:grid;gap:clamp(20px,2.6vw,40px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .g-12{grid-template-columns:repeat(12,1fr)} @media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}} .dark{background:var(--ink);color:var(--paper);--line:var(--line-dark);--line-2:var(--line-dark-2);--txt:var(--paper);--txt-2:rgba(247,245,241,.72);--muted:rgba(247,245,241,.55)} .tint{background:var(--paper-2)} /* ---------- 4. TYPOGRAFIA ---------- */ .display{ font-weight:800;line-height:.92;letter-spacing:-.035em; font-variation-settings:'wdth' 112; text-transform:uppercase;text-wrap:balance; } .d-1{font-size:clamp(2.45rem,6.6vw,5.6rem)} .d-2{font-size:clamp(2.1rem,4.9vw,4.1rem)} .d-3{font-size:clamp(1.55rem,3vw,2.5rem);letter-spacing:-.028em} .d-4{font-size:clamp(1.15rem,1.65vw,1.45rem);letter-spacing:-.02em;font-variation-settings:'wdth' 104} .d-1 em,.d-2 em,.d-3 em{font-style:normal;color:var(--gold)} .lead{font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.5;color:var(--txt-2);letter-spacing:-.012em;max-width:62ch;text-wrap:pretty} .body p{color:var(--txt-2);max-width:70ch;text-wrap:pretty} .body p + p{margin-top:1.05em} .body h2{margin:2.2em 0 .7em} .body h3{margin:1.9em 0 .55em} .body ul{margin:1.1em 0;display:grid;gap:.55em} .body ul li{position:relative;padding-left:1.6em;color:var(--txt-2)} .body ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%)} .body a:not(.btn){box-shadow:inset 0 -1px 0 var(--gold);transition:box-shadow .25s var(--ease),background .25s var(--ease)} .body a:not(.btn):hover{box-shadow:inset 0 -1.5em 0 var(--gold)} .body strong{font-weight:700;color:var(--txt)} .mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500} .eyebrow{display:inline-flex;align-items:center;gap:.7em;color:var(--muted)} .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)} .eyebrow--num{color:var(--gold)} .eyebrow--num::before{display:none} /* ---------- 5. PRZYCISKI ---------- */ .btn{ --bg:var(--ink);--fg:var(--paper); position:relative;display:inline-flex;align-items:center;gap:.75em; padding:1.02em 1.6em;background:var(--bg);color:var(--fg); font-family:var(--f-mono);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); isolation:isolate;overflow:hidden;transition:color .3s var(--ease); white-space:nowrap; } .btn::after{ content:"";position:absolute;inset:0;z-index:-1;background:var(--gold); transform:translate3d(-122%,0,0) skewX(-12deg) scaleX(1.25); transition:transform .48s var(--ease-out); } .btn:hover::after,.btn:focus-visible::after{transform:translate3d(0,0,0) skewX(-12deg) scaleX(1.25)} .btn:hover,.btn:focus-visible{color:var(--ink)} .btn--gold{--bg:var(--gold);--fg:var(--ink)} .btn--gold::after{background:var(--ink)} .btn--gold:hover,.btn--gold:focus-visible{color:var(--paper)} .btn--ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1px var(--line)} .btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink)} .btn--lg{padding:1.2em 2em;font-size:.8rem} .ico{width:1.05em;height:1.05em;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem} @media (max-width:520px){.hero .btn-row .btn,.phead .btn-row .btn,.alert .btn{width:100%;justify-content:center}} /* link ze strzałką */ .arrow{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500} .arrow .ln{width:26px;height:1px;background:currentColor;transition:width .35s var(--ease)} .arrow:hover .ln{width:44px} .arrow:hover{color:var(--gold-d)} .dark .arrow:hover{color:var(--gold)} /* ---------- 6. NAGŁÓWEK ---------- */ .topbar{ background:var(--ink);color:rgba(247,245,241,.8); font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; border-bottom:1px solid var(--line-dark-2); } .topbar .in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;height:38px} .topbar a:hover{color:var(--gold)} .topbar .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5fd08a;margin-right:.6em;box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:pulse 2.6s infinite} @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}} @media (max-width:860px){.topbar .hide-sm{display:none}} /* najwęższe telefony — zostaje sam komunikat o dostępności, jedna linia */ @media (max-width:369px){.topbar .hide-xs{display:none}} .hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)} .hdr.is-stuck{box-shadow:0 1px 0 var(--line),0 10px 34px -22px rgba(0,0,0,.5)} .hdr .in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:clamp(66px,7vw,86px)} .brand{display:flex;align-items:center;gap:.85rem;flex:none} .brand svg{width:auto;height:clamp(38px,4vw,46px);color:var(--ink)} .brand .wm{display:grid;line-height:1.1} .brand .wm b{font-weight:800;font-size:.98rem;letter-spacing:.16em;font-variation-settings:'wdth' 112} .brand .wm span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* Nazwa marki mieści się także na telefonie — chowamy dopiero na bardzo wąskich ekranach. Wcześniej znikała już przy 420 px, przez co w nagłówku został sam znak graficzny. */ @media (max-width:339px){.brand .wm{display:none}} @media (max-width:520px){.brand .wm span{display:none}} .nav{display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.7rem)} .nav > li > a,.nav > li > button{ display:flex;align-items:center;gap:.4em;padding:.5em 0;position:relative; font-size:.9rem;font-weight:500;letter-spacing:-.01em; } .nav > li > a::after{content:"";position:absolute;left:0;bottom:.1em;height:2px;width:0;background:var(--gold);transition:width .32s var(--ease)} .nav > li > a:hover::after,.nav > li[aria-current] > a::after{width:100%} .nav .caret{width:9px;height:9px;transition:transform .3s var(--ease)} .has-sub{position:relative} .has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)} .sub{ position:absolute;top:calc(100% + 14px);left:-18px;min-width:310px; background:var(--paper);border:1px solid var(--line);padding:8px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s; box-shadow:0 26px 60px -34px rgba(0,0,0,.55); } .has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none} .sub a{display:grid;grid-template-columns:auto 1fr;gap:.2em .85rem;padding:.72rem .85rem;transition:background .2s} .sub a .n{grid-row:span 2;font-family:var(--f-mono);font-size:.66rem;color:var(--gold-d);padding-top:.25em} .sub a b{font-weight:600;font-size:.92rem} .sub a small{color:var(--muted);font-size:.76rem;line-height:1.35} .sub a:hover{background:var(--paper-2)} @media (max-width:1080px){.nav--main{display:none}} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line)} .burger span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative;transition:background .2s} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)} .burger span::before{top:-6px}.burger span::after{top:6px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:1080px){.burger{display:flex}.hdr-cta{display:none}} .drawer{ position:fixed;inset:0 0 0 auto;width:min(440px,100%);z-index:70; background:var(--ink);color:var(--paper);padding:calc(var(--pad)) var(--pad) var(--pad); transform:translateX(101%);transition:transform .46s var(--ease-out); overflow-y:auto;display:flex;flex-direction:column;gap:1.4rem; } .drawer.is-open{transform:none} .drawer .x{position:absolute;top:20px;right:var(--pad);width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-dark)} .drawer nav a{display:block;padding:.62rem 0;font-size:1.32rem;font-weight:700;letter-spacing:-.02em;border-bottom:1px solid var(--line-dark-2);font-variation-settings:'wdth' 106} .drawer nav a:hover{color:var(--gold);padding-left:.5rem;transition:padding .25s var(--ease)} .drawer .sub-list a{font-size:.98rem;font-weight:400;color:rgba(247,245,241,.72);padding:.42rem 0 .42rem 1.2rem;border:0} .scrim{position:fixed;inset:0;background:rgba(8,9,10,.55);backdrop-filter:blur(3px);z-index:65;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s} .scrim.is-open{opacity:1;visibility:visible} body.locked{overflow:hidden} /* ---------- 7. HERO ---------- */ .hero,.phead{--line:var(--line-dark);--line-2:var(--line-dark-2)} .hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate} .hero .in{position:relative;padding-block:clamp(64px,10vw,140px) clamp(56px,7vw,104px)} .hero .in > *{position:relative;z-index:2} .hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px); background-size:clamp(56px,7vw,96px) clamp(56px,7vw,96px); mask-image:radial-gradient(120% 90% at 78% 0%,#000 10%,transparent 78%); } .hero-glow{position:absolute;z-index:0;right:-14%;top:-28%;width:min(920px,88vw);aspect-ratio:1;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(232,195,78,.20),rgba(232,195,78,.05) 42%,transparent 68%);filter:blur(6px)} .hero .d-1{margin:.4em 0 0;max-width:17ch} .hero .lead{margin-top:1.35rem;color:rgba(247,245,241,.76)} .hero .btn-row{margin-top:2.3rem} .hero-head{max-width:20ch} .hero-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,370px);gap:clamp(30px,5vw,72px);align-items:start; margin-top:clamp(34px,4.4vw,60px);padding-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--line-dark-2)} @media (max-width:1024px){.hero-cols{grid-template-columns:1fr}} .d-loc{display:block;font-size:clamp(1.05rem,2.05vw,1.9rem);letter-spacing:.01em;font-weight:600; font-variation-settings:'wdth' 100;color:var(--gold);margin-top:.5em;text-transform:none} .chip{ display:inline-flex;align-items:center;gap:.65em;padding:.5em .95em; border:1px solid var(--line-dark);background:rgba(247,245,241,.045); font-family:var(--f-mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(247,245,241,.82); clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%); } .chip .dot{width:6px;height:6px;border-radius:50%;background:#5fd08a;animation:pulse 2.6s infinite} /* karta „szybki kontakt” w hero */ .hero-card{border:1px solid var(--line-dark);background:rgba(247,245,241,.04);backdrop-filter:blur(6px); clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)} .hero-card .hd{padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-dark-2);display:flex;justify-content:space-between;align-items:center} .hero-card .bd{padding:1.4rem} .hero-card .tel{display:block;font-weight:800;font-size:clamp(1.5rem,2.6vw,1.95rem);letter-spacing:-.02em;font-variation-settings:'wdth' 108} .hero-card .tel:hover{color:var(--gold)} .hero-card ul{margin-top:1.1rem;display:grid;gap:.5rem} .hero-card li{display:flex;gap:.7em;align-items:flex-start;font-size:.88rem;color:rgba(247,245,241,.74)} .hero-card li svg{width:15px;height:15px;flex:none;margin-top:.28em;color:var(--gold)} /* pasek zaufania */ .trust{border-top:1px solid var(--line-dark-2);background:var(--ink-2)} .trust .in{display:grid;grid-template-columns:repeat(4,1fr)} .trust .it{padding:clamp(20px,2.5vw,30px) clamp(14px,2vw,28px);border-left:1px solid var(--line-dark-2)} .trust .it:first-child{border-left:0} .trust .k{font-weight:800;font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.03em;font-variation-settings:'wdth' 110;color:var(--paper)} .trust .k em{font-style:normal;color:var(--gold)} .trust .v{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,241,.55);margin-top:.45em} @media (max-width:820px){.trust .in{grid-template-columns:repeat(2,1fr)}.trust .it:nth-child(3){border-left:0}.trust .it:nth-child(n+3){border-top:1px solid var(--line-dark-2)}} /* ---------- 8. NAGŁÓWKI SEKCJI ---------- */ .sec-hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem 2rem;align-items:end;padding-bottom:clamp(28px,3.4vw,46px);border-bottom:1px solid var(--line);margin-bottom:clamp(34px,4vw,58px)} .sec-hd .mono{margin-bottom:1.1rem} .sec-hd .eyebrow{display:inline-flex} @media (max-width:760px){.sec-hd{grid-template-columns:1fr}} /* ---------- 9. INDEKS USŁUG ---------- */ .idx{margin-top:-1px} .idx-it{position:relative;border-bottom:1px solid var(--line);isolation:isolate} .idx-it > a{display:grid;grid-template-columns:auto minmax(0,1.25fr) minmax(0,1.15fr) auto;gap:clamp(14px,3vw,44px);align-items:center; padding:clamp(22px,2.9vw,38px) clamp(6px,1.4vw,22px);transition:padding-left .4s var(--ease),color .3s} .idx-it::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out)} .idx-it:hover::before,.idx-it:focus-within::before{transform:scaleY(1)} .idx-it:hover > a,.idx-it:focus-within > a{color:var(--paper);padding-left:clamp(14px,2.4vw,34px)} .idx-it .n{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);transition:color .3s} .idx-it:hover .n{color:var(--gold)} .idx-it h3{font-weight:700;font-size:clamp(1.15rem,2.1vw,1.72rem);letter-spacing:-.025em;font-variation-settings:'wdth' 106;line-height:1.12} .idx-it p{font-size:.92rem;color:var(--txt-2);transition:color .3s;text-wrap:pretty} .idx-it:hover p{color:rgba(247,245,241,.66)} .idx-it .go{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);transition:all .35s var(--ease);flex:none} .idx-it:hover .go{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:rotate(-45deg)} .idx-it .go svg{width:14px;height:14px} @media (max-width:900px){ .idx-it > a{grid-template-columns:auto 1fr auto;gap:10px 18px;align-items:start} .idx-it p{grid-column:2/4;font-size:.86rem} .idx-it .go{grid-row:1;grid-column:3} } /* ---------- 10. KARTY / BLOKI ---------- */ .card{position:relative;background:var(--paper);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px); clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); transition:transform .4s var(--ease),border-color .3s} .card:hover{transform:translateY(-4px);border-color:rgba(13,14,16,.3)} .dark .card{background:var(--ink-2);border-color:var(--line-dark)} .card .n{font-family:var(--f-mono);font-size:.7rem;color:var(--gold-d);letter-spacing:.14em} .dark .card .n{color:var(--gold)} .card h3{margin:.9rem 0 .55rem;font-weight:700;font-size:1.14rem;letter-spacing:-.02em} .card p{font-size:.93rem;color:var(--txt-2)} .card .ic{width:44px;height:44px;display:grid;place-items:center;background:var(--paper-2);color:var(--ink);margin-bottom:1.1rem; clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)} .dark .card .ic{background:rgba(232,195,78,.14);color:var(--gold)} .card .ic svg{width:20px;height:20px} .hero-card .hd .ico{width:19px;height:19px;color:var(--gold)} .tag .ico{color:var(--gold-d)} /* proces */ .steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line)} .step{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,1.8vw,26px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);align-items:start} .step::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:.78rem;color:var(--gold-d);padding-top:.4em} .dark .step::before{color:var(--gold)} .step h3{font-weight:700;font-size:clamp(1.1rem,1.8vw,1.4rem);letter-spacing:-.02em;margin-bottom:.5rem} .step p{color:var(--txt-2);max-width:62ch;font-size:.95rem} /* ---------- 11. MARQUEE (obszar działania) ---------- */ .marq{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(14px,1.6vw,20px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marq ul{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite} .marq li{display:flex;align-items:center;gap:clamp(20px,3vw,42px);padding-right:clamp(20px,3vw,42px); font-weight:700;font-size:clamp(1rem,1.7vw,1.35rem);letter-spacing:-.02em;font-variation-settings:'wdth' 108;text-transform:uppercase;white-space:nowrap} .marq li::after{content:"";width:7px;height:7px;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%);flex:none} .marq:hover ul{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marq ul{animation:none}} /* ---------- 12. FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:clamp(20px,2.3vw,28px) 0;cursor:pointer;list-style:none; font-weight:600;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.02em;transition:color .25s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--gold-d)} .dark .faq summary:hover{color:var(--gold)} .faq .pm{position:relative;width:22px;height:22px;flex:none} .faq .pm::before,.faq .pm::after{content:"";position:absolute;background:currentColor;transition:transform .34s var(--ease),opacity .3s} .faq .pm::before{top:50%;left:0;width:22px;height:1.5px;margin-top:-.75px} .faq .pm::after{left:50%;top:0;width:1.5px;height:22px;margin-left:-.75px} .faq details[open] .pm::after{transform:rotate(90deg);opacity:0} .faq details[open] summary{color:var(--gold-d)} .dark .faq details[open] summary{color:var(--gold)} .faq .ans{padding-bottom:clamp(20px,2.3vw,28px);max-width:74ch} .faq .ans p{color:var(--txt-2);font-size:.97rem} .faq .ans p + p{margin-top:.9em} /* ---------- 13. PASEK AWARIA ---------- */ .alert{background:var(--gold);color:var(--ink);position:relative;overflow:hidden} .alert .in{display:grid;grid-template-columns:1fr auto;gap:1.6rem 2.4rem;align-items:center;padding-block:clamp(30px,3.6vw,48px)} .alert h2{font-weight:800;font-size:clamp(1.45rem,3.2vw,2.5rem);letter-spacing:-.03em;text-transform:uppercase;font-variation-settings:'wdth' 112;line-height:1} .alert p{margin-top:.75rem;max-width:56ch;color:rgba(13,14,16,.76);font-size:.98rem} .alert .btn{--bg:var(--ink);--fg:var(--gold)} .alert .btn::after{background:var(--paper)} .alert .btn:hover{color:var(--ink)} @media (max-width:760px){.alert .in{grid-template-columns:1fr}} /* ---------- 14. STOPKA ---------- */ .ftr{background:var(--ink);color:rgba(247,245,241,.68);--line:var(--line-dark)} .ftr .top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,56px);padding-block:clamp(52px,6vw,84px)} @media (max-width:960px){.ftr .top{grid-template-columns:1fr 1fr}} @media (max-width:560px){.ftr .top{grid-template-columns:1fr}} .ftr svg.mark{width:auto;height:56px;color:var(--paper)} .ftr h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;font-weight:500} .ftr li{margin-bottom:.6rem;font-size:.92rem} .ftr a:hover{color:var(--gold)} .ftr .big{display:block;font-weight:800;font-size:1.45rem;letter-spacing:-.025em;color:var(--paper);font-variation-settings:'wdth' 108} .ftr .big:hover{color:var(--gold)} .ftr .bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;padding-block:1.5rem;border-top:1px solid var(--line-dark-2);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,241,.42)} /* ---------- 15. OKRUSZKI + PAGEHEAD ---------- */ .crumbs{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-block:1.15rem;border-bottom:1px solid var(--line)} .crumbs ol{display:flex;flex-wrap:wrap;gap:.5em} .crumbs li::after{content:"/";margin-left:.55em;color:var(--gold-d)} .crumbs li:last-child::after{display:none} .crumbs a:hover{color:var(--txt)} .crumbs [aria-current]{color:var(--txt-2)} .phead{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;isolation:isolate} .phead .in{padding-block:clamp(52px,7vw,104px);position:relative;z-index:2} .phead .lead{color:rgba(247,245,241,.74)} .phead .d-1{margin-top:.3em;font-size:clamp(2.3rem,5.6vw,4.6rem)} /* ---------- 16. FORMULARZ ---------- */ .form{display:grid;gap:1.05rem} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem} @media (max-width:640px){.f-row{grid-template-columns:1fr}} .field{display:grid;gap:.45rem} .field label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .field input,.field textarea,.field select{ width:100%;padding:.92rem 1rem;background:var(--paper);border:1px solid var(--line);color:var(--txt); font:inherit;font-size:.96rem;transition:border-color .25s,box-shadow .25s;border-radius:0; } .dark .field input,.dark .field textarea,.dark .field select{background:var(--ink-2);color:var(--paper)} .field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,195,78,.18)} .field textarea{min-height:132px;resize:vertical} .consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.5} .consent input{width:18px;height:18px;flex:none;margin-top:.15em;accent-color:var(--gold)} .form-note{font-size:.78rem;color:var(--muted)} /* ---------- 17. CENNIK ---------- */ .price{border-top:1px solid var(--line)} .price .row{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--line);align-items:baseline} .price .row b{font-weight:600;font-size:1rem} .price .row small{display:block;color:var(--muted);font-size:.83rem;margin-top:.2em;max-width:60ch} .price .row .v{font-family:var(--f-mono);font-size:.92rem;font-weight:500;color:var(--gold-d);white-space:nowrap} /* ---------- 18. WPISY ---------- */ .posts{display:grid;gap:0;border-top:1px solid var(--line)} .post{border-bottom:1px solid var(--line)} .post a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(22px,2.8vw,34px) 0;transition:padding .35s var(--ease)} .post a:hover{padding-left:clamp(10px,1.6vw,22px)} .post .dt{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);letter-spacing:.1em} .post h3{font-weight:700;font-size:clamp(1.08rem,1.9vw,1.5rem);letter-spacing:-.025em;line-height:1.2} .post a:hover h3{color:var(--gold-d)} .post p{color:var(--txt-2);font-size:.9rem;margin-top:.4rem} @media (max-width:760px){.post a{grid-template-columns:1fr auto}.post .dt{grid-column:1/3;margin-bottom:.4rem}} /* ---------- 19. RÓŻNE ---------- */ .tag{display:inline-flex;align-items:center;gap:.5em;padding:.42em .8em;border:1px solid var(--line);font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2)} .tags{display:flex;flex-wrap:wrap;gap:.5rem} .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,80px);align-items:start} @media (max-width:900px){.split{grid-template-columns:1fr}} .sticky{position:sticky;top:calc(clamp(66px,7vw,86px) + 28px)} .hairline{height:1px;background:var(--line)} .center{text-align:center} .mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem} .ph{position:relative;background:var(--paper-2);border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden} .ph::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(13,14,16,.035) 10px,rgba(13,14,16,.035) 20px)} .ph span{position:relative;z-index:1;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding:1rem} .skip{position:absolute;left:-9999px;top:0;z-index:100;padding:1rem 1.5rem;background:var(--gold);color:var(--ink);font-family:var(--f-mono);font-size:.75rem} .skip:focus{left:0} /* ---------- 20. ANIMACJE WEJŚCIA ---------- */ /* stan początkowy tylko gdy JS działa — bez JS treść jest po prostu widoczna */ .js [data-rev]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .js [data-rev].in{opacity:1;transform:none} [data-rev-d="1"]{transition-delay:.08s}[data-rev-d="2"]{transition-delay:.16s}[data-rev-d="3"]{transition-delay:.24s}[data-rev-d="4"]{transition-delay:.32s} @media (prefers-reduced-motion:reduce){.js [data-rev]{opacity:1;transform:none;transition:none}} /* pływający pasek telefonu (mobile) */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;background:var(--ink);border-top:1px solid var(--line-dark); padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));gap:.6rem;grid-template-columns:1fr 1fr} .callbar .btn{width:100%;justify-content:center;padding:.95em 1rem;font-size:.72rem;clip-path:none} @media (max-width:760px){.callbar{display:grid}body{padding-bottom:76px}} @media print{.hdr,.topbar,.ftr,.callbar,.drawer,.scrim,.alert{display:none}body{background:#fff}} /* ========================================================================== 21. ZGODY NA COOKIES — baner + panel ustawień ========================================================================== */ .cc{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:var(--paper); border-top:1px solid var(--line-dark);transform:translateY(101%);transition:transform .5s var(--ease-out); box-shadow:0 -20px 60px -30px rgba(0,0,0,.8)} .cc.is-on{transform:none} .cc .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem 2.4rem;align-items:center; padding-block:clamp(18px,2.2vw,26px)} .cc h2{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);margin-bottom:.6rem;font-weight:500} .cc p{font-size:.88rem;line-height:1.55;color:rgba(247,245,241,.74);max-width:78ch} .cc p a{box-shadow:inset 0 -1px 0 var(--gold)} .cc p a:hover{color:var(--gold)} .cc .acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} .cc .btn{padding:.85em 1.35em;font-size:.72rem} .cc .lnk{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:rgba(247,245,241,.72);box-shadow:inset 0 -1px 0 var(--line-dark);padding-bottom:2px} .cc .lnk:hover{color:var(--gold);box-shadow:inset 0 -1px 0 var(--gold)} @media (max-width:900px){.cc .in{grid-template-columns:1fr}.cc .acts .btn{flex:1 1 auto;justify-content:center}} @media (max-width:760px){.cc{bottom:0}body.cc-open{padding-bottom:0}} /* panel ustawień */ .ccp{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--pad); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .ccp.is-on{opacity:1;visibility:visible} .ccp::before{content:"";position:absolute;inset:0;background:rgba(8,9,10,.62);backdrop-filter:blur(4px)} .ccp .box{position:relative;width:min(680px,100%);max-height:min(86vh,860px);overflow-y:auto; background:var(--paper);color:var(--txt);border:1px solid var(--line); transform:translateY(14px) scale(.985);transition:transform .42s var(--ease-out); clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)} .ccp.is-on .box{transform:none} .ccp .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem; padding:clamp(24px,3vw,34px) clamp(22px,3vw,36px);border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--paper);z-index:2} .ccp .hd h2{font-weight:800;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.03em; text-transform:uppercase;font-variation-settings:'wdth' 110} .ccp .hd p{font-size:.88rem;color:var(--txt-2);margin-top:.55rem;max-width:52ch} .ccp .x{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--line); transition:background .2s,color .2s} .ccp .x:hover{background:var(--ink);color:var(--paper)} .ccp .bd{padding:clamp(10px,1.6vw,18px) clamp(22px,3vw,36px)} .ccp .cat{border-bottom:1px solid var(--line);padding:1.35rem 0} .ccp .cat:last-child{border-bottom:0} .ccp .cat .row{display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:start} .ccp .cat h3{font-weight:700;font-size:1.02rem;letter-spacing:-.02em} .ccp .cat .tagx{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; color:var(--gold-d);margin-left:.6em} .ccp .cat p{font-size:.88rem;color:var(--txt-2);margin-top:.5rem;max-width:60ch} .ccp .cat table{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:.78rem} .ccp .cat th{text-align:left;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);font-weight:500;padding:.4rem .8rem .4rem 0; border-bottom:1px solid var(--line)} .ccp .cat td{padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--line-2);color:var(--txt-2);vertical-align:top} .ccp .ft{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end;padding:clamp(20px,2.4vw,28px) clamp(22px,3vw,36px); border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--paper)} @media (max-width:560px){.ccp .ft .btn{flex:1 1 100%;justify-content:center}} /* przełącznik */ .sw{position:relative;display:inline-flex;align-items:center;flex:none} .sw input{position:absolute;opacity:0;width:52px;height:30px;margin:0;cursor:pointer} .sw i{width:52px;height:30px;background:var(--paper-3);border:1px solid var(--line); display:block;transition:background .28s var(--ease),border-color .28s;position:relative} .sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .28s var(--ease)} .sw input:checked + i{background:var(--gold);border-color:var(--gold-d)} .sw input:checked + i::after{transform:translateX(22px);background:var(--ink)} .sw input:focus-visible + i{outline:2px solid var(--gold);outline-offset:3px} .sw input:disabled{cursor:not-allowed} .sw input:disabled + i{background:var(--gold);border-color:var(--gold-d);opacity:.5} /* zablokowana treść zewnętrzna (mapa) */ .embed-lock{position:relative;background:var(--paper-2);border:1px solid var(--line); min-height:340px;display:grid;place-items:center;text-align:center;padding:2rem} .embed-lock::after{content:"";position:absolute;inset:0; background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(13,14,16,.035) 10px,rgba(13,14,16,.035) 20px)} .embed-lock > *{position:relative;z-index:1} .embed-lock h3{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.6rem} .embed-lock p{font-size:.88rem;color:var(--txt-2);max-width:46ch;margin:0 auto 1.3rem} .embed-live{border:1px solid var(--line);width:100%;aspect-ratio:16/10;display:block} /* ========================================================================== 22. FORMULARZ — stany walidacji i wysyłki ========================================================================== */ .field.has-err input,.field.has-err select,.field.has-err textarea{ border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)} .f-err{margin:.1rem 0 0;font-size:.79rem;color:#8c1d18;display:flex;gap:.45em;align-items:flex-start} .f-err::before{content:"";flex:none;width:6px;height:6px;margin-top:.5em;background:#b3261e; clip-path:polygon(0 0,100% 0,100% 100%)} .dark .f-err{color:#f2b8b5} .f-status{display:grid;gap:.3rem;padding:1.05rem 1.25rem;border-left:3px solid var(--line); background:var(--paper-2);font-size:.9rem} /* styl autora bije regułę przeglądarki dla [hidden] — trzeba to nadpisać jawnie */ .f-status[hidden]{display:none} .f-status strong{font-weight:700;letter-spacing:-.01em} .f-status span{color:var(--txt-2);font-size:.86rem;line-height:1.5} .f-status.is-ok{border-left-color:#2e7d4f;background:rgba(46,125,79,.07)} .f-status.is-err{border-left-color:#b3261e;background:rgba(179,38,30,.06)} .f-status.is-info{border-left-color:var(--gold);background:rgba(232,195,78,.1)} form[data-rc-form] button[type=submit][disabled]{opacity:.6;cursor:progress} .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* przycisk „Ustawienia cookies” w stopce ma wyglądać jak link */ .ftr .bot button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit; background:none;border:0;padding:0;cursor:pointer} .ftr .bot button:hover{color:var(--gold)} /* ========================================================================== 23. ZDJĘCIA ========================================================================== */ .foto{width:100%;height:100%;object-fit:cover;display:block;background:var(--paper-2)} .fig{margin:0;display:grid;gap:.75rem} .fig figcaption{font-size:.82rem;color:var(--muted);line-height:1.5;max-width:62ch} .body .fig{margin:2.2rem 0} .media{position:relative;overflow:hidden;background:var(--paper-2)} .media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none} .media--cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)} .dark .media,.dark .foto{background:var(--ink-3)} /* trzy branże — pasek zdjęć na stronie głównej */ .branze{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)} @media (max-width:820px){.branze{grid-template-columns:1fr}} .branze a{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;isolation:isolate; clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)} @media (max-width:820px){.branze a{aspect-ratio:16/9}} .branze img{transition:transform 1.1s var(--ease-out);width:100%;height:100%;object-fit:cover} .branze a:hover img{transform:scale(1.05)} .branze a::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,14,16,0) 34%,rgba(13,14,16,.82) 100%)} .branze .lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.2vw,26px);color:var(--paper)} .branze .lab .n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:.5rem} .branze .lab h3{font-weight:800;font-size:clamp(1.1rem,1.9vw,1.4rem);letter-spacing:-.025em; text-transform:uppercase;font-variation-settings:'wdth' 108;line-height:1.05} .branze .lab p{font-size:.85rem;color:rgba(247,245,241,.76);margin-top:.5rem;max-width:34ch} /* zdjęcie w nagłówku podstrony */ .phead--foto .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4.5vw,72px);align-items:center} @media (max-width:900px){.phead--foto .in{grid-template-columns:1fr}} .phead--foto .media{aspect-ratio:4/3} @media (max-width:900px){.phead--foto .media{aspect-ratio:16/9}} /* zdjęcie tła w hero */ .hero-foto{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-foto img{width:100%;height:100%;object-fit:cover;opacity:.42} .hero-foto::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,var(--ink) 26%,rgba(13,14,16,.86) 48%,rgba(13,14,16,.52) 100%)} @media (max-width:900px){ .hero-foto img{opacity:.3} .hero-foto::after{background:linear-gradient(180deg,rgba(13,14,16,.86) 30%,var(--ink) 92%)} } /* ========================================================================== 24. GALERIA „CIĘŻKIE PRZYPADKI” ========================================================================== */ .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.4vw,52px)} @media (max-width:900px){.cases{grid-template-columns:1fr}} .case--wide{grid-column:1/-1} .case--wide .case-media{aspect-ratio:16/9} .case-media{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden; aspect-ratio:4/3;background:var(--paper-2);cursor:zoom-in; clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)} .case-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)} .case-media:hover img{transform:scale(1.035)} .case-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line); pointer-events:none} .case-zoom{position:absolute;right:14px;top:14px;width:38px;height:38px;display:grid; place-items:center;background:rgba(13,14,16,.72);color:var(--paper);backdrop-filter:blur(4px); opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s} .case-media:hover .case-zoom,.case-media:focus-visible .case-zoom{opacity:1;transform:none} .case-zoom .ico{width:17px;height:17px} .dark .case-media{background:var(--ink-3)} .case-txt{padding-top:clamp(16px,1.8vw,22px)} .case-n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--gold-d)} .case-txt h3{font-weight:700;font-size:clamp(1.1rem,1.8vw,1.42rem);letter-spacing:-.025em; margin:.5rem 0 .1rem;line-height:1.15} .case-detal{color:var(--muted);font-size:.66rem;margin-bottom:.75rem} .case-txt p{color:var(--txt-2);font-size:.94rem;max-width:62ch} .case-txt .arrow{margin-top:1rem;font-size:.68rem} /* lightbox */ .lb{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:clamp(12px,3vw,44px); background:rgba(8,9,10,.94);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s} .lb.is-on{opacity:1;visibility:visible} .lb img{max-width:100%;max-height:78vh;object-fit:contain;display:block;margin-inline:auto} .lb figure{margin:0;max-width:min(1200px,100%)} .lb figcaption{margin-top:1.1rem;color:rgba(247,245,241,.78);font-size:.9rem;line-height:1.55; max-width:76ch;margin-inline:auto;text-align:center} .lb figcaption strong{display:block;color:var(--paper);font-size:1.05rem;letter-spacing:-.02em; margin-bottom:.4rem} .lb-btn{position:absolute;width:52px;height:52px;display:grid;place-items:center; background:rgba(247,245,241,.08);color:var(--paper);border:1px solid var(--line-dark); transition:background .2s,color .2s} .lb-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)} .lb-x{top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px)} .lb-prev{left:clamp(8px,2vw,26px);top:50%;margin-top:-26px} .lb-next{right:clamp(8px,2vw,26px);top:50%;margin-top:-26px} .lb-licz{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(12px,2.4vw,26px); font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;color:rgba(247,245,241,.5)} @media (max-width:640px){.lb-prev,.lb-next{top:auto;bottom:clamp(12px,2.4vw,26px);margin-top:0}} /* ========================================================================== 25. POPRAWKI UKŁADU NA MAŁYCH EKRANACH ========================================================================== */ /* Strona kontaktu: dwie kolumny dopiero wtedy, gdy naprawdę się mieszczą. Wcześniej proporcje siedziały w atrybucie style, który bije media query — na telefonie zostawały dwie kolumny i formularz wychodził poza ekran. */ .split--kontakt{grid-template-columns:1fr} @media (min-width:901px){.split--kontakt{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}} /* Pas z wezwaniem do działania */ .cta-row{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center} @media (min-width:761px){.cta-row{grid-template-columns:1fr auto;gap:1.6rem 2.4rem}} /* Wiersz danych kontaktowych: ikona + treść */ .dane-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start} .dane-ico{color:var(--gold-d);margin-top:.15em} /* Długie ciągi bez spacji (adresy e-mail, numery) nie mogą rozpychać układu */ .field input,.field textarea,.field select{max-width:100%} address,.body a,.f-status{overflow-wrap:anywhere}