, a ACF owija InnerBlocks we własny .
Owinięte w body {} — patrz _buttons.scss.
============================================================ */
body .comparison {
position: relative;
isolation: isolate;
padding-block: var(--section-y);
overflow: hidden;
border-top: 1px solid var(--line);
background: radial-gradient(58% 62% at 88% 4%, rgb(var(--paper-100-rgb)/0.55), transparent 68%), radial-gradient(46% 52% at 4% 98%, rgb(var(--paper-200-rgb)/0.45), transparent 70%), var(--white);
}
body .comparison__rules {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: 0.34;
background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ledger-line) - 1px), var(--line) calc(var(--ledger-line) - 1px), var(--line) var(--ledger-line));
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent);
}
body .comparison__grain {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: 0.5;
}
body .comparison__person {
display: none;
}
@media (min-width: 68rem) {
body {
/* Postać siedzi wewnątrz __body i mierzy się do tabeli, a nie do
stałej szerokości. Stała szerokość 30 rem dawała wycinkom 4:5
(np. Monika Koza, 1122 × 1402) 600 px wysokości przy tabeli
730 px, czyli pusty pas nad głową i postać mniejszą niż kolumna.
Ramka: góra na nagłówku tabeli, dół na dolnej linii sekcji
(kontener kończy się nad dolnym paddingiem, stąd zjazd
o --section-y), prawa krawędź ze światłem przed tabelą, lewa na
krawędzi okna. Lewa krawędź to minus odległość __body od okna:
margines wyśrodkowanego kontenera + gutter + 37% treści (tabela
bierze 63%). Obraz mieści się w ramce przez contain i siedzi
w jej prawym dolnym rogu, tuż przy tabeli. */
}
body .comparison__body {
position: relative;
}
body .comparison__person {
position: absolute;
top: 0;
bottom: calc(-1 * var(--section-y));
left: calc(-1 * ((100vw - min(100vw, var(--container))) / 2 + var(--gutter) + 0.37 * (min(100vw, var(--container)) - 2 * var(--gutter))));
right: calc(100% + var(--space-s));
z-index: -1;
display: block;
}
body .comparison__person img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: right bottom;
}
body {
/* Lustrzane odbicie postaci — przełącznik w polach bloku. Sylwetka
ma patrzeć w stronę treści; odwrócenie CSS-em oszczędza drugiego
pliku w bibliotece mediów. scaleX odwraca też object-position,
więc kotwica „left” po odbiciu ląduje przy tabeli. */
}
body .comparison__person.is-odbita img {
transform: scaleX(-1);
object-position: left bottom;
}
body .comparison__body {
width: 63%;
margin-inline-start: auto;
}
}
body .comparison__head {
display: grid;
gap: var(--space-m);
align-items: end;
margin-bottom: var(--space-2xl);
}
@media (min-width: 56rem) {
body .comparison__head {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: var(--space-2xl);
}
}
body .comparison__title {
max-width: 24ch;
margin-top: var(--space-s);
}
body .comparison__lead {
max-width: 46ch;
}
body {
/* Odnośnik w akapicie wprowadzającym — bez tego zlewa się z prozą. */
}
body .comparison__lead a {
color: var(--navy-800);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--brass-500);
}
body .comparison__lead a:hover {
color: var(--navy-700);
}
body .compare {
display: block;
width: 100%;
border-collapse: separate;
border-spacing: 0;
text-align: start;
}
body .compare thead {
display: none;
}
body .compare tbody,
body .compare tr,
body .compare th,
body .compare td {
display: block;
/* th ma w arkuszu przeglądarki wyśrodkowanie, trzeba je zdjąć wprost */
text-align: start;
}
body {
/* Numer wisi na marginesie tematu: wcięcie wiszące (padding + ujemny
text-indent), numer jako inline-block dokładnie na szerokość wcięcia.
Temat łamany na dwa wiersze („Zwolnienie lekarskie”) trzyma lewą
krawędź pod pierwszą literą, a nie pod numerem, jak wcześniej. */
}
body .compare__topic {
padding-block: var(--space-m) var(--space-2xs);
padding-inline-start: 2rem;
text-indent: -2rem;
font-weight: 700;
color: var(--navy-900);
}
body .compare__no {
display: inline-block;
width: 2rem;
text-indent: 0;
font-weight: 500;
}
body .compare__cell {
padding-block: var(--space-2xs);
}
body .compare__label {
margin-bottom: var(--space-3xs);
}
body .compare__cell--cost {
color: var(--fg-muted);
}
body .compare__cell--gain {
padding: var(--space-s);
color: var(--fg-invert);
background: var(--navy-900);
border-radius: var(--radius-m);
}
body .compare__cell--gain .compare__label {
color: var(--fg-invert-muted);
}
body .compare__tick {
display: inline-block;
width: 0.95rem;
height: 0.95rem;
margin-inline-end: 0.45rem;
vertical-align: -0.17em;
color: var(--brass-300);
}
@media (max-width: 53.999rem) {
body {
/* Kreska oddziela kolejne tematy, pierwszy otwiera tabelę */
}
body .compare tr + tr .compare__topic {
margin-top: var(--space-s);
border-top: 1px solid var(--line);
}
}
@media (min-width: 54rem) {
body .compare {
display: table;
table-layout: fixed;
}
body .compare thead {
display: table-header-group;
}
body .compare tbody {
display: table-row-group;
}
body .compare tr {
display: table-row;
}
body {
/* Wspólna linia bazowa: temat, zdanie po lewej i zdanie po prawej
siadają na jednej linii, niezależnie od grubości i kroju. */
}
body .compare th,
body .compare td {
display: table-cell;
vertical-align: baseline;
}
body {
/* Podpisy kolumn to zwykły eyebrow, tylko bez znacznika sekcji.
Selektor z `th`, bo reguła wyżej ustawia wszystkim komórkom `top`. */
}
body .compare th.compare__col {
vertical-align: bottom;
padding-bottom: var(--space-s);
font-weight: 600;
}
body {
/* 23%, nie 21%: z wiszącym numerem tematy typu „Kontrola PIP lub
ZUS” łamią się na dwa wiersze zamiast na trzy. */
}
body .compare__corner,
body .compare__topic {
width: 23%;
padding-inline-end: var(--space-m);
}
body .compare__col--cost,
body .compare__cell--cost {
width: 38%;
padding-inline-end: var(--space-m);
}
body .compare__col--gain,
body .compare__cell--gain {
width: 39%;
padding-inline: var(--space-m);
background: var(--navy-900);
border-radius: 0;
}
body {
/* Płyta zaczyna się główką i kończy ostatnim wierszem. Oba podpisy
kolumn są dosunięte do dołu wiersza, więc stoją w jednej linii. */
}
body .compare th.compare__col--gain {
vertical-align: bottom;
padding-block: var(--space-l) var(--space-s);
border-radius: var(--radius-l) var(--radius-l) 0 0;
}
body {
/* Ostatnia komórka domyka płytę zaokrągleniem. Wyściółka zostaje taka
sama jak w pozostałych wierszach, żeby wysokości się nie rozjechały. */
}
body .compare tbody tr:last-child .compare__cell--gain {
border-radius: 0 0 var(--radius-l) var(--radius-l);
}
body .compare__topic,
body .compare__cell {
padding-block: var(--space-m);
}
body {
/* Linie księgi tylko po lewej stronie konta */
}
body .compare tbody .compare__topic,
body .compare tbody .compare__cell--cost {
border-top: 1px solid var(--line);
}
body .compare tbody tr:first-child .compare__topic,
body .compare tbody tr:first-child .compare__cell--cost {
border-top: 2px solid var(--navy-900);
}
body .compare tbody tr:last-child .compare__topic,
body .compare tbody tr:last-child .compare__cell--cost {
border-bottom: 1px solid var(--line);
}
body {
/* Po prawej linie są jaśniejsze od płyty, bo leżą na granacie */
}
body .compare tbody tr + tr .compare__cell--gain {
border-top: 1px solid var(--line-invert);
}
body {
/* Podpisy kolumn stoją w główkach, w komórkach zostają dla czytnika ekranu */
}
body .compare__label {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
}
}
/* Główka jest dwukolumnowa: rubryka z tytułem po lewej, akapit po prawej.
Grupy w szablonie bloku dają siatce na czym się oprzeć. */
body .comparison__head-main > * + * {
margin-top: var(--space-s);
}
body {
/* Postać jest DZIECKIEM kontenera, nie sekcji — dlatego kończy się
dokładnie na krawędzi kolumny treści, a nie na krawędzi ekranu.
Liczenie tego od szerokości sekcji wymagało arytmetyki w max(),
którą sass i tak upraszczał do postaci odrzucanej przez przeglądarkę. */
}
body .comparison > .container {
position: relative;
}