(or WooCommerce's wrapper) is the growing middle of the body column. This used to be `main { display: contents }`, which promoted every section to a flex item of - and a flex item whose cross-axis margins are `auto` does NOT stretch, it shrinks to fit-content. That silently collapsed every `max-width + margin: 0 auto` container in the theme (newsletter card, product layout) and pushed content off-screen on mobile. */ body { display: flex; flex-direction: column; min-height: 100vh; } body > main, body > .tb-woo-main { flex: 1 0 auto; width: 100%; min-width: 0; } /* --- hero: brand-level, no longer built around a single ebook --- */ .tb-hero { max-width: 900px; margin: 0 auto; padding: 92px 32px 64px; text-align: center; } .tb-hero__kicker { margin: 0 0 20px; font: 700 12px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); } /* Not --leading-tight (1.02) here: the censor bar paints a background box taller than the line box, so at hero size it crashed straight into the second line. */ .tb-hero h1 { font-size: clamp(42px, 6.2vw, 82px); line-height: 1.08; margin: 0; text-wrap: balance; } .tb-hero__sub { font-size: 20px; max-width: 640px; margin: 26px auto 34px; color: var(--ink-soft); text-wrap: pretty; } .tb-nobr { white-space: nowrap; } /* --- ebook chooser: the homepage's centrepiece --- Every panel carries its own data-book, so each card is always shown in its own palette even before you point at it; pointing at one hands that palette to the whole document. */ .tb-chooser { max-width: var(--container); margin: 0 auto; padding: 8px 32px 84px; } .tb-chooser__head { text-align: center; margin-bottom: 40px; } .tb-chooser__head h2 { font-size: clamp(28px, 3.4vw, 40px); } .tb-chooser__hint { margin: 12px 0 0; font-size: 15px; color: var(--text-muted); } .tb-chooser__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; } .tb-chooser__panel { border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); transition: transform .28s var(--ease-snap), box-shadow .28s ease; } .tb-chooser__panel:hover, .tb-chooser__panel:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .tb-chooser__link { display: flex; flex-direction: column; height: 100%; color: var(--text-body); text-decoration: none; } .tb-chooser__link:hover { color: var(--text-body); } .tb-chooser__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -4px; } .tb-chooser__stage { display: grid; place-items: center; padding: 54px 32px 48px; background: var(--book-tint); perspective: 900px; } .tb-chooser__stage .tb-cover { width: 208px; will-change: transform; transform: rotateX(var(--tb-rx, 0deg)) rotateY(var(--tb-ry, 0deg)); transition: transform .35s var(--ease-snap), box-shadow .3s ease; } .tb-chooser__panel:hover .tb-cover { box-shadow: var(--shadow-lg); } .tb-chooser__body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 26px 28px 28px; } .tb-chooser__kicker { font: 700 11px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--book-accent-strong); } .tb-chooser__title { font: 400 27px var(--font-display); letter-spacing: var(--track-display); line-height: var(--leading-snug); } .tb-chooser__desc { font-size: 15px; color: var(--ink-soft); } .tb-chooser__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; } .tb-chooser__price { font: 700 22px var(--font-body); font-variant-numeric: tabular-nums; } .tb-chooser__go { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--font-body); color: var(--book-accent-strong); } .tb-chooser__go span { transition: transform var(--dur-fast) ease; } .tb-chooser__panel:hover .tb-chooser__go span { transform: translateX(4px); } .tb-chooser__panel.is-soon .tb-chooser__price { font: 600 14px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } /* --- social proof - rendered from real WooCommerce reviews, or a premiere line when there are none --- */ .tb-proof { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-body); } .tb-proof__stars { color: var(--warning); letter-spacing: 2px; font-size: 15px; } .tb-proof__score { font-weight: 700; font-size: 14px; } .tb-proof__count { font-size: 14px; color: var(--text-muted); } /* radius-md, not a pill: the copy wraps to two lines in the narrow buybox and a pill's round caps look accidental once that happens. */ .tb-proof--launch { display: inline-block; padding: 8px 14px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-press); font: 600 14px var(--font-body); text-wrap: balance; } .tb-proof--hero { margin: 22px 0 0; } .tb-proof--buybox { margin: 0 0 14px; } /* --- price + Omnibus-safe launch note --- */ .tb-price-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .tb-price__note { font: 600 12px var(--font-body); color: var(--text-muted); } /* --- why section --- */ .tb-why { max-width: var(--container); margin: 0 auto; padding: 64px 32px; } .tb-why h2 { font-size: 32px; margin-bottom: 24px; } .tb-why__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .tb-why__grid h3 { font-size: 20px; margin-bottom: 8px; } .tb-why__grid p { margin: 0; font-size: 15px; color: var(--ink-soft); } /* --- newsletter --- */ .tb-newsletter { max-width: var(--container); margin: 0 auto; padding: 0 32px 72px; } .tb-newsletter .tb-card { display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: center; background: var(--brand-tint); border-color: transparent; padding: 30px 32px; } .tb-newsletter h3 { font-size: 26px; margin: 0 0 4px; } .tb-newsletter p { margin: 0; font-size: 14px; color: var(--ink-soft); } .tb-newsletter__form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tb-newsletter__form .tb-input { width: 260px; max-width: 100%; } /* --- static pages (page.php): O nas, Regulamin, Prywatność --- */ .tb-page { max-width: var(--container-narrow); margin: 0 auto; padding: 64px 32px 80px; } .tb-page__title { font-size: clamp(38px, 5vw, 56px); margin: 0 0 20px; } .tb-prose > *:first-child { margin-top: 0; } .tb-prose p { font-size: 17px; color: var(--ink-soft); margin: 0 0 18px; } .tb-prose h2 { font-size: 28px; margin: 44px 0 16px; color: var(--text-body); } .tb-prose a { font-weight: 600; } .tb-page__lead { font-size: 21px !important; color: var(--text-body) !important; margin-bottom: 28px !important; text-wrap: pretty; } .tb-note { font-size: 15px !important; color: var(--text-muted) !important; background: var(--surface-dim); border-radius: var(--radius-md); padding: 16px 18px; margin-top: 36px !important; } .tb-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 16px; } .tb-steps li { counter-increment: step; position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px 24px 22px 68px; } .tb-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 24px; top: 23px; font: 600 13px var(--font-mono); color: var(--book-accent); } .tb-steps h3 { font-size: 20px; margin: 0 0 6px; } .tb-steps p { margin: 0; font-size: 15px; } /* --- product page --- */ /* .tb-woo-main is already the max-width container for every WooCommerce view, so this

stays a plain block - two nested containers doubled the side padding. */ .tb-product { max-width: none; margin: 0; padding: 0; } .tb-product__crumb { font: 700 12px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px; } .tb-product__crumb a { color: inherit; } .tb-product__layout { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: start; } .tb-product__cover-col { display: flex; flex-direction: column; gap: 16px; align-items: center; } .tb-product__meta { font: 400 12px var(--font-mono); color: var(--text-muted); } .tb-product__badges { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .tb-product h1 { font-size: 44px; margin: 0 0 6px; } .tb-product__sub { font-size: 18px; color: var(--ink-soft); margin: 0 0 20px; } .tb-buybox { max-width: 520px; } .tb-buybox__price-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; } .tb-buybox__ctas { display: flex; gap: 12px; margin: 18px 0 16px; align-items: center; } .tb-buybox__ctas .tb-btn--primary { flex: 1; } .tb-buybox__ctas form.cart { flex: 1; margin: 0; display: flex; } .tb-buybox__ctas .single_add_to_cart_button { flex: 1; } /* "Coming soon" buy box: a tag, an honest sentence and a notify CTA - no price, no delivery promise, no refund policy, because none of them apply to a book that is not for sale yet. */ .tb-buybox__soon-tag { margin: 0 0 12px; display: inline-block; padding: 6px 12px; border-radius: var(--radius-md); background: var(--book-tint); color: var(--book-deep); font: 700 11px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; } .tb-buybox__soon { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); } .tb-buybox__sure { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .tb-buybox__sure li { font-size: 14px; color: var(--ink-soft); } .tb-buybox__sure .ok { color: var(--success); font-weight: 700; } .tb-product__tabs-wrap { margin-top: 56px; max-width: 760px; } .tb-product__tabpanel { padding: 24px 4px; } /* --- product sales sections: what you'll learn / contents / sample --- */ .tb-product__section { max-width: 760px; margin-top: 56px; } .tb-product__section > h2 { font-size: 30px; margin-bottom: 18px; } /* Each point is a bold claim plus a quiet detail line. As seven equal-weight full-width sentences the list had no entry point for the eye and simply read as a grey block. */ .tb-learn { max-width: 900px; } .tb-learn__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; } .tb-learn__list li { position: relative; padding-left: 34px; } .tb-learn__list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--book-tint); color: var(--book-accent-strong); font: 700 12px var(--font-body); display: grid; place-items: center; } .tb-learn__head { display: block; font: 600 17px var(--font-body); line-height: 1.4; color: var(--text-body); } .tb-learn__detail { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); } /* 22 chapters in one column was a very long scroll. Two columns halve it on desktop, and the JS toggle below caps the height everywhere until the reader asks for the rest. */ .tb-toc { max-width: 900px; } .tb-toc__count { font: 600 14px var(--font-body); color: var(--text-muted); margin-left: 8px; vertical-align: middle; } .tb-toc__wrap { position: relative; } .tb-toc__wrap.is-collapsible { overflow: hidden; transition: max-height var(--dur-med) var(--ease-snap); } .tb-toc__wrap.is-collapsible::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface-page)); opacity: 1; transition: opacity var(--dur-fast) ease; } .tb-toc__wrap.is-open::after { opacity: 0; } .tb-toc__toggle { margin-top: 18px; } .tb-product__toc { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 48px; } .tb-product__toc li { break-inside: avoid; display: grid; grid-template-columns: 34px 1fr; gap: 3px 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); } .tb-toc__num { font: 600 12px var(--font-mono); color: var(--book-accent); } .tb-toc__title { font: 600 16px var(--font-body); } .tb-toc__note { grid-column: 2; font-size: 14px; color: var(--text-muted); } .tb-sample { max-width: 840px; scroll-margin-top: calc(var(--nav-h) + 16px); } .tb-sample__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .tb-sample__head h2 { font-size: 30px; } .tb-sample__label { font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; background: var(--highlight); color: var(--ink); border-radius: var(--radius-pill); padding: 5px 12px; } .tb-sample__time { font: 500 14px var(--font-body); color: var(--text-muted); margin-left: auto; } /* Reading progress. Sticks below the nav for the length of the sample; JS scales the fill. */ .tb-sample__rail { position: sticky; top: var(--nav-h); z-index: 5; height: 3px; margin-bottom: 20px; border-radius: var(--radius-pill); background: var(--border-subtle); overflow: hidden; } .tb-sample__rail-fill { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform 90ms linear; } .tb-sample__body { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px 44px; font-size: 18px; line-height: 1.75; color: var(--ink-soft); } /* Cap the measure at ~64 characters. Research on line length converges on 50-75 CPL; the old full-width 760px column ran to roughly 90 and made every paragraph tiring to track. */ .tb-sample__body > p, .tb-sample__body > .tb-sample__h, .tb-sample__body > .tb-sample__list { max-width: 64ch; } .tb-sample__body p { margin: 0 0 22px; } .tb-sample__body > :last-child { margin-bottom: 0; } /* Direct child only: :first-of-type is scoped to siblings, so without ">" the drop cap also hit the first

inside the chart's

and inside the callout. */ .tb-sample__body > p:first-of-type::first-letter { float: left; margin: 7px 12px 0 0; font-family: var(--font-display); font-size: 3.1em; line-height: 0.84; color: var(--book-accent); } .tb-sample__h { font-family: var(--font-display); font-size: 25px; color: var(--text-body); margin: 38px 0 14px; } .tb-sample__h:first-child { margin-top: 0; } .tb-sample__list { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: tbstep; display: grid; gap: 12px; } .tb-sample__list li { position: relative; padding-left: 34px; } .tb-sample__list--num li { counter-increment: tbstep; } .tb-sample__list--num li::before { content: counter(tbstep); position: absolute; left: 0; top: 4px; width: 23px; height: 23px; border-radius: 50%; background: var(--book-tint); color: var(--book-accent-strong); font: 700 12px var(--font-body); display: grid; place-items: center; } .tb-sample__list--dot li::before { content: ""; position: absolute; left: 9px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--book-accent); } .tb-callout { margin: 30px 0; padding: 22px 24px; background: var(--book-tint); border-left: 3px solid var(--book-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .tb-callout__title { font: 700 12px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--book-accent-strong); margin: 0 0 8px; } .tb-callout p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--book-deep); max-width: 62ch; } /* Bar chart: plain markup, no chart library, and the bar carries its own aria-label. */ .tb-chart { margin: 32px 0; padding: 24px; background: var(--surface-dim); border-radius: var(--radius-lg); } .tb-chart__title { font: 700 12px var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; } .tb-chart__rows { display: grid; gap: 12px; } .tb-chart__row { display: grid; grid-template-columns: minmax(110px, 32%) 1fr auto; align-items: center; gap: 14px; } .tb-chart__label { font-size: 15px; line-height: 1.3; color: var(--ink-soft); } .tb-chart__track { height: 24px; border-radius: var(--radius-pill); background: var(--surface-card); overflow: hidden; } .tb-chart__bar { display: block; height: 100%; width: var(--tb-bar); border-radius: var(--radius-pill); background: var(--book-accent); } .tb-chart__row.is-best .tb-chart__bar { background: var(--book-contrast); } .tb-chart__value { min-width: 52px; text-align: right; font: 700 15px var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-body); } .tb-chart__source { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); } /* Bars grow as the chart scrolls in - pure CSS scroll-driven animation, so it runs on the compositor and needs no JS. Browsers without support just show the final bar. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .tb-chart__bar { animation: tb-bar-grow linear both; animation-timeline: view(); animation-range: entry 25% entry 75%; } @keyframes tb-bar-grow { from { width: 0; } to { width: var(--tb-bar); } } } } .tb-sample__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; } .tb-sample__cta span { font-size: 15px; font-style: italic; color: var(--text-muted); } /* Sticky buy bar, revealed by JS once the real buy box is scrolled past. */ .tb-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface-card); border-top: 1px solid var(--border-subtle); box-shadow: 0 -6px 24px oklch(20% 0.02 60 / 0.10); transform: translateY(110%); transition: transform var(--dur-med) var(--ease-snap); } .tb-buybar.is-visible { transform: translateY(0); } .tb-buybar__inner { max-width: var(--container); margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 16px; } .tb-buybar__title { flex: 1; min-width: 0; font: 400 20px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-buybar__price { font: 700 20px var(--font-body); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .tb-buybar { transition: none; } } /* --- responsive --- */ @media (max-width: 860px) { .tb-hero { padding: 56px 20px 40px; } .tb-hero__sub { font-size: 18px; margin-bottom: 28px; } .tb-chooser { padding: 0 20px 56px; } .tb-chooser__grid { grid-template-columns: 1fr; gap: 20px; } .tb-chooser__stage { padding: 40px 24px 36px; } .tb-chooser__stage .tb-cover { width: 176px; } .tb-why { padding: 48px 20px; } .tb-why__grid { grid-template-columns: 1fr; } .tb-newsletter { padding: 0 20px 56px; } .tb-newsletter .tb-card { grid-template-columns: 1fr; text-align: center; padding: 26px 20px; } .tb-newsletter__form { justify-content: center; } .tb-newsletter__form .tb-input { flex: 1 1 200px; } .tb-woo-main { padding: 24px 20px 56px; } .tb-product__layout { grid-template-columns: 1fr; gap: 32px; } /* The cover is a fixed-width, flex:none box - side by side with the meta line it overflowed the viewport, which body{overflow-x:hidden} then hid instead of fixing. */ .tb-product__cover-col { flex-direction: column; align-items: flex-start; } .tb-product h1 { font-size: 34px; } .tb-product__section { margin-top: 40px; } .tb-product__section > h2, .tb-sample__head h2 { font-size: 26px; } .tb-learn__list { grid-template-columns: 1fr; gap: 16px; } .tb-product__toc { columns: 1; } .tb-sample__body { padding: 26px 22px; font-size: 17px; } .tb-sample__h { font-size: 22px; margin-top: 30px; } .tb-sample__time { margin-left: 0; flex-basis: 100%; } .tb-sample__cta { flex-direction: column; align-items: stretch; text-align: center; } .tb-chart { padding: 18px 16px; } /* Label above the bar: three columns in ~300px squeezed the labels to one word per line. */ .tb-chart__row { grid-template-columns: 1fr auto; gap: 6px 12px; } .tb-chart__label { grid-column: 1 / -1; } .tb-buybox__ctas { flex-wrap: wrap; } .tb-buybox__ctas .tb-btn--secondary { flex: 1 1 100%; } .tb-buybar__inner { padding: 10px 16px; gap: 12px; } .tb-buybar__title { display: none; } .tb-buybar .tb-btn { flex: 1; } } @media (max-width: 700px) { :root { --nav-h: 96px; } /* nav wraps to two rows below this width */ /* Two-row nav: brand + language + cart on top, links underneath - instead of five items fighting for 350px and breaking "O nas" / "Koszyk (0)" mid-word. */ .tb-nav__inner { flex-wrap: wrap; padding: 12px 20px; gap: 10px 14px; } .tb-logo { font-size: 22px; } .tb-nav__links { order: 3; flex: 0 0 100%; gap: 20px; } .tb-footer__inner { padding: 24px 20px; gap: 12px; } .tb-footer__tagline { flex: 1 1 100%; } .tb-footer__links a { margin: 0 20px 0 0; } }