/* ============================================================ Promptowy — landingi poradników (/lp/) Wspólny system: edytorska czerń, hairline'y, mono-metki. Kolor akcentu ustawia strona przez klasę na : .a-seo / .a-fable5 / .a-muzyka ============================================================ */ :root{ --ink:#07080A; --ink-2:#0C0E11; --ink-3:#12151A; --paper:#ECEAE4; --paper-70:rgba(236,234,228,.72); --paper-45:rgba(236,234,228,.46); --paper-25:rgba(236,234,228,.24); --rule:rgba(236,234,228,.14); --rule-soft:rgba(236,234,228,.08); --accent:#5FB8D6; --accent-dim:rgba(95,184,214,.16); --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Inter Tight','Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace; --wrap:1120px; --gut:clamp(20px,5vw,40px); } .a-seo{ --accent:#5FB8D6; --accent-dim:rgba(95,184,214,.15); } .a-fable5{ --accent:#C8A45C; --accent-dim:rgba(200,164,92,.15); } .a-muzyka{ --accent:#F0563A; --accent-dim:rgba(240,86,58,.15); } .a-gaben{ --accent:#E8581C; --accent-dim:rgba(232,88,28,.15); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--ink);color:var(--paper); font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} ::selection{background:var(--accent);color:var(--ink)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .narrow{max-width:760px} /* ---------- typografia ---------- */ .mono{ font-family:var(--mono);font-size:.71rem;font-weight:400; letter-spacing:.2em;text-transform:uppercase;color:var(--paper-45); } .mono .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);vertical-align:middle;margin:0 .6em} h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.04} h1{font-size:clamp(2.6rem,6.4vw,4.9rem)} h2{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.08} h3{font-size:1.22rem;line-height:1.3;letter-spacing:-.01em} em{font-style:italic} .lead{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--paper-70);line-height:1.6;max-width:60ch} .acc{color:var(--accent)} /* ---------- sekcje i linie ---------- */ section{padding:clamp(72px,10vw,132px) 0;position:relative} .hair{height:1px;background:var(--rule);border:0} .sec-head{margin-bottom:clamp(36px,5vw,60px)} .sec-head .mono{display:block;margin-bottom:18px} .sec-head h2{max-width:20ch} .sec-note{margin-top:18px;color:var(--paper-45);font-size:.95rem;max-width:56ch} /* ---------- topbar ---------- */ .topbar{ position:sticky;top:0;z-index:60;backdrop-filter:blur(14px); background:rgba(7,8,10,.82);border-bottom:1px solid var(--rule-soft); } .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} .brand{font-family:var(--serif);font-size:1.12rem;letter-spacing:-.01em;text-decoration:none} .brand b{font-weight:400} .brand span{color:var(--accent)} .brand-sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-45);margin-left:12px} /* ---------- przyciski ---------- */ .btn{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--sans);font-size:.86rem;font-weight:500; letter-spacing:.1em;text-transform:uppercase;text-decoration:none; padding:15px 26px;border:1px solid var(--accent);color:var(--ink); background:var(--accent);cursor:pointer; transition:background .2s,color .2s,transform .2s; } .btn:hover{background:transparent;color:var(--accent);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--paper);border-color:var(--rule)} .btn-ghost:hover{border-color:var(--paper);color:var(--paper);background:transparent} .btn-sm{padding:11px 18px;font-size:.72rem} .btn .arw{font-family:var(--mono);font-size:.9em} .free-tag{ display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);border:1px solid var(--accent); padding:5px 10px; } /* ---------- hero ---------- */ .hero{padding:clamp(64px,9vw,116px) 0 clamp(56px,7vw,96px)} .hero-grid{display:grid;gap:clamp(40px,6vw,72px);grid-template-columns:1fr} @media(min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr;align-items:center}} .hero h1{margin:20px 0 22px} .hero .lead{margin-bottom:34px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .hero-facts{ display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px; padding-top:22px;border-top:1px solid var(--rule); } .hero-facts span{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-45)} .hero-facts b{color:var(--paper);font-weight:400} /* okładka */ .cover{ position:relative;border:1px solid var(--rule);background:var(--ink-2); padding:clamp(22px,3vw,34px); } .cover::after{ content:'';position:absolute;inset:auto 0 0 0;height:1px; background:linear-gradient(90deg,var(--accent),transparent); } .cover-inner{border:1px solid var(--rule);aspect-ratio:1/1.42;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.6vw,30px);background:var(--ink)} .cover-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)} .cover-title{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.02;letter-spacing:-.02em} .cover-foot{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-45)} .cover-mark{width:clamp(60px,9vw,92px);height:auto;opacity:.9} /* ---------- ticker ---------- */ .ticker{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;background:var(--ink-2)} .ticker-in{display:flex;gap:0;white-space:nowrap;animation:slide 34s linear infinite;will-change:transform} .ticker-in span{font-family:var(--mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-25);padding:0 26px} .ticker-in span i{color:var(--accent);font-style:normal} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker-in{animation:none}} /* ---------- grid kart ---------- */ .cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)} @media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.cards.c3{grid-template-columns:repeat(3,1fr)}} .card{background:var(--ink);padding:clamp(26px,3.2vw,38px);transition:background .25s} .card:hover{background:var(--ink-2)} .card .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:16px} .card h3{margin-bottom:10px} .card p{color:var(--paper-45);font-size:.95rem;line-height:1.6} /* ---------- spis modułów ---------- */ .toc{border-top:1px solid var(--rule)} .toc-row{ display:grid;grid-template-columns:52px 1fr;gap:0 20px;align-items:baseline; padding:22px 4px;border-bottom:1px solid var(--rule-soft);transition:padding-left .25s,background .25s; } .toc-row:hover{padding-left:14px;background:var(--ink-2)} .toc-row .n{font-family:var(--mono);font-size:.78rem;color:var(--accent);letter-spacing:.08em} .toc-row h3{font-size:1.06rem;font-family:var(--sans);font-weight:500;letter-spacing:0;margin-bottom:4px} .toc-row p{color:var(--paper-45);font-size:.9rem} @media(min-width:820px){ .toc-row{grid-template-columns:52px 1fr 1.15fr;align-items:baseline} .toc-row p{margin:0} } /* ---------- fragment / cytat ---------- */ .excerpt{background:var(--ink-2);border:1px solid var(--rule);padding:clamp(28px,4vw,52px)} .excerpt .mono{margin-bottom:20px;display:block} .excerpt h2{margin-bottom:22px;max-width:22ch} .excerpt p{color:var(--paper-70);margin-bottom:18px} .protip{border-left:2px solid var(--accent);background:var(--accent-dim);padding:18px 22px;margin-top:26px} .protip .mono{color:var(--accent);margin-bottom:8px} .protip p{color:var(--paper);font-size:.97rem;margin:0} /* ---------- liczby ---------- */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} @media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--ink);padding:clamp(24px,3vw,36px);text-align:center} .stat b{display:block;font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1;margin-bottom:10px} .stat span{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-45)} /* ---------- dwie kolumny tak/nie ---------- */ .split{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)} @media(min-width:760px){.split{grid-template-columns:1fr 1fr}} .split > div{background:var(--ink);padding:clamp(26px,3.4vw,40px)} .split h3{font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:.02em;margin-bottom:20px} .split ul{list-style:none} .split li{position:relative;padding-left:26px;margin-bottom:14px;color:var(--paper-70);font-size:.97rem;line-height:1.55} .split li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:.9rem} .split .yes li::before{content:'+';color:var(--accent)} .split .no li::before{content:'–';color:var(--paper-25)} .split .no li{color:var(--paper-45)} /* ---------- autor ---------- */ .author{display:grid;gap:26px;align-items:start} @media(min-width:760px){.author{grid-template-columns:auto 1fr;gap:34px}} .author-mark{width:76px;height:76px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.9rem;color:var(--accent)} .author p{color:var(--paper-70);max-width:62ch} /* ---------- blok pobrania ---------- */ .get{border:1px solid var(--rule);background:var(--ink-2);padding:clamp(30px,4.4vw,58px);text-align:center} .get h2{margin:16px 0 12px} .get .price{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4rem);line-height:1;margin:10px 0 6px} .get .price s{color:var(--paper-25);font-size:.32em;font-family:var(--mono);letter-spacing:.1em;margin-left:14px;vertical-align:middle} .get .price-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-45);margin-bottom:30px} .get ul{list-style:none;text-align:left;max-width:520px;margin:0 auto 32px;display:grid;gap:12px} .get li{position:relative;padding-left:28px;color:var(--paper-70);font-size:.97rem} .get li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-size:.9rem} .get .fine{margin-top:18px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-45)} /* ---------- faq ---------- */ .faq details{border-bottom:1px solid var(--rule-soft)} .faq summary{ cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative; font-size:1.04rem;font-weight:500;transition:color .2s; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';position:absolute;right:6px;top:20px;font-family:var(--mono);color:var(--accent);font-size:1.1rem;transition:transform .25s} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--accent)} .faq .a{padding:0 0 24px;color:var(--paper-45);font-size:.98rem;max-width:70ch} /* ---------- inne ebooki ---------- */ .more{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)} @media(min-width:760px){.more{grid-template-columns:repeat(3,1fr)}} .more a{background:var(--ink);padding:clamp(24px,3vw,34px);text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:background .25s} .more a:hover{background:var(--ink-2)} .more .mono{color:var(--paper-45)} .more h3{font-size:1.1rem} .more p{color:var(--paper-45);font-size:.9rem;flex:1} .more .go{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} /* ---------- stopka ---------- */ footer{border-top:1px solid var(--rule);padding:52px 0 64px;text-align:center} footer .brand{font-size:1.3rem} footer p{margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-25)} footer a{color:var(--paper-45);text-decoration:none} footer a:hover{color:var(--paper)} /* ---------- modal pobrania ---------- */ .ov{position:fixed;inset:0;z-index:100;background:rgba(4,5,7,.9);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px} .ov.open{display:flex} .ov-box{position:relative;background:var(--ink-2);border:1px solid var(--rule);max-width:460px;width:100%;padding:clamp(30px,4vw,44px)} .ov-box::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:var(--accent)} .ov-close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--paper-45);font-size:26px;line-height:1;cursor:pointer} .ov-close:hover{color:var(--paper)} .ov h3{font-size:1.9rem;margin:14px 0 10px} .ov p.d{color:var(--paper-45);font-size:.95rem;margin-bottom:22px} .ov input{ width:100%;background:transparent;border:1px solid var(--rule);color:var(--paper); padding:14px 16px;font-family:var(--mono);font-size:.86rem;outline:none;margin-bottom:14px; transition:border-color .2s; } .ov input:focus{border-color:var(--accent)} .ov input::placeholder{color:var(--paper-25)} .ov button.go{width:100%;justify-content:center} .ov .fine{margin-top:14px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-25);text-align:center} .hp{position:absolute;left:-9999px} /* ---------- pojawianie się ---------- */ .fade{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .fade.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}