, so the nav bar stays pinned
to the top of the viewport while the page scrolls. */
.wp-site-blocks > header.wp-block-template-part {
position: sticky;
top: 0;
z-index: 100;
background-color: var( --wp--preset--color--base );
box-shadow: 0 2px 12px rgba( 17, 17, 17, 0.06 );
}
/* ---------- Eyebrow label (used in hero + above section headings) ----------
Plain uppercase brand-green text, no box. */
.cnk-hero-badge,
.cnk-eyebrow {
display: inline-flex;
align-items: center;
color: var( --wp--preset--color--accent-1-dark );
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
/* ---------- Hero ----------
.cnk-hero itself is rendered as alignfull (full viewport width) so its
gradient backdrop goes edge-to-edge with no white margins. The actual
content is kept readable by nesting it in .cnk-hero-inner, which caps the
width at the theme's wide size and re-centres it — same
full-bleed-background / constrained-content pattern as .cnk-section-band. */
.cnk-hero {
position: relative;
isolation: isolate;
text-align: center;
padding-top: var( --wp--preset--spacing--50, 3rem );
padding-bottom: var( --wp--preset--spacing--50, 3rem );
}
/* Soft gradient backdrop instead of a flat background — the first thing a
visitor sees shouldn't be a plain white rectangle. */
.cnk-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient( 160deg, var( --wp--preset--color--accent-1-light ) 0%, var( --wp--preset--color--base ) 65% );
}
.cnk-hero-inner {
position: relative;
z-index: 1;
max-width: var( --wp--style--global--wide-size, 1340px );
margin: 0 auto;
padding: 0 1.5rem;
box-sizing: border-box;
}
.cnk-hero h1 {
max-width: 46rem;
margin-left: auto;
margin-right: auto;
}
.cnk-hero p {
max-width: 38rem;
margin-left: auto;
margin-right: auto;
text-align: left;
color: var( --wp--preset--color--gray-600 );
}
.cnk-hero .wp-block-buttons {
justify-content: center;
}
/* ---------- Split hero (text + circular photo, inspired by prostadieta.com) ----------
Same full-bleed-background/constrained-content split as .cnk-hero-inner
above: .cnk-hero-split carries the two-column grid AND the max-width cap,
so it doubles as the "inner" wrapper for the split hero variant. */
.cnk-hero-split {
position: relative;
z-index: 1;
max-width: var( --wp--style--global--wide-size, 1340px );
margin: 0 auto;
padding: 0 1.5rem;
box-sizing: border-box;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: clamp( 2rem, 5vw, 4rem );
text-align: left;
}
.cnk-hero-split .cnk-hero-text h1,
.cnk-hero-split .cnk-hero-text p {
max-width: none;
margin-left: 0;
margin-right: 0;
text-align: left;
}
.cnk-hero-split .cnk-hero-text .wp-block-buttons {
justify-content: flex-start;
}
.cnk-hero-split .cnk-hero-text .cnk-hero-social-label {
margin: 1.5rem 0 0.75rem;
color: var( --wp--preset--color--gray-600 );
}
.cnk-hero-social {
justify-content: flex-start;
margin: 0;
gap: 1rem;
}
.cnk-hero-social .wp-social-link {
opacity: 0.75;
}
.cnk-hero-social .wp-social-link:hover {
opacity: 1;
}
.cnk-hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
}
.cnk-hero-blob {
position: absolute;
border-radius: 50%;
z-index: 0;
}
.cnk-hero-blob-1 {
width: 82%;
height: 82%;
background: linear-gradient( 135deg, var( --wp--preset--color--accent-1-light ), var( --wp--preset--color--accent-1 ) 130% );
}
.cnk-hero-blob-2 {
width: 90px;
height: 90px;
right: 4%;
top: 2%;
background-color: var( --wp--preset--color--accent-1-dark );
opacity: 0.18;
}
.cnk-hero-blob-3 {
width: 50px;
height: 50px;
left: 6%;
bottom: 6%;
background-color: var( --wp--preset--color--accent-1-dark );
opacity: 0.12;
}
.cnk-hero-photo {
position: relative;
z-index: 1;
width: 76%;
max-width: 420px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
border: 8px solid var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--strong );
animation: cnk-float 6s ease-in-out infinite;
}
@keyframes cnk-float {
0%, 100% { transform: translateY( 0 ); }
50% { transform: translateY( -16px ); }
}
@media ( max-width: 781px ) {
.cnk-hero-split {
grid-template-columns: 1fr;
text-align: center;
}
.cnk-hero-split .cnk-hero-text h1,
.cnk-hero-split .cnk-hero-text p {
text-align: center;
max-width: 38rem;
margin-left: auto;
margin-right: auto;
}
.cnk-hero-split .cnk-hero-text .wp-block-buttons {
justify-content: center;
}
.cnk-hero-social {
justify-content: center;
}
.cnk-hero-visual {
order: -1;
min-height: 260px;
}
}
@media ( prefers-reduced-motion: reduce ) {
.cnk-hero-photo {
animation: none;
}
}
/* ---------- About split (Kim Jestem "O mnie" — photo left, text right) ---------- */
.cnk-about-split {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
align-items: center;
gap: clamp( 2rem, 5vw, 4rem );
text-align: left;
}
.cnk-about-split-photo {
width: 100%;
/* The ![]()
carries width/height HTML attributes (to avoid layout shift
while it loads), which set an explicit pixel height that overrides
aspect-ratio unless height is reset to auto here — otherwise the image
renders at its literal attribute height (800px) regardless of how
narrow the responsive width gets. */
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 1.5rem;
box-shadow: var( --wp--preset--shadow--medium );
}
.cnk-about-split-text p {
color: var( --wp--preset--color--gray-600 );
}
.cnk-about-split-text .wp-block-buttons {
justify-content: flex-start;
margin-top: 1.5rem;
}
.cnk-about-split-social {
margin-top: 1.5rem;
}
.cnk-about-split-social p {
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
@media ( max-width: 781px ) {
.cnk-about-split {
grid-template-columns: 1fr;
text-align: center;
}
.cnk-about-split-photo {
max-width: 320px;
margin: 0 auto;
}
.cnk-about-split-text .wp-block-buttons {
justify-content: center;
}
.cnk-about-split-social .wp-block-social-links {
justify-content: center;
}
}
/* ---------- Contact hero (full-bleed, decorative bleeding photo, inspired by prostadieta.com) ---------- */
.cnk-contact-hero {
overflow: hidden;
}
.cnk-contact-decor {
position: absolute;
inset: 0 auto 0 0;
z-index: 0;
width: min( 42%, 640px );
height: 100%;
object-fit: cover;
opacity: 0.4;
-webkit-mask-image: linear-gradient( 90deg, rgba( 0, 0, 0, 0.9 ) 0%, rgba( 0, 0, 0, 0 ) 85% );
mask-image: linear-gradient( 90deg, rgba( 0, 0, 0, 0.9 ) 0%, rgba( 0, 0, 0, 0 ) 85% );
}
@media ( max-width: 781px ) {
.cnk-contact-decor {
display: none;
}
}
/* On mobile, .cnk-hero's own bottom padding plus the next .cnk-section-band's
top padding (both sized for desktop breathing room) stack into a large
blank stretch with no visual content — most noticeable where the hero has
only a line or two of text (e.g. Kontakt) and no decorative art bleeding
into the next section to break it up. Tightened just for narrow viewports;
desktop spacing is untouched. */
@media ( max-width: 781px ) {
.cnk-hero {
padding-bottom: 1.5rem;
}
.cnk-hero + .cnk-section-band {
margin-top: 0;
padding-top: 1.75rem;
}
/* Same stacking problem between two consecutive section bands (e.g.
Cennik → Proces on Oferta) — each band's own padding plus the
block-gap margin between them adds up to a much bigger gap than
intended once there's no decorative content to fill it visually. */
.cnk-section-band:has( + .cnk-section-band ) {
padding-bottom: 1.75rem;
}
.cnk-section-band + .cnk-section-band {
margin-top: 0;
padding-top: 1.75rem;
}
}
/* ---------- Section heading group (eyebrow + heading + intro, centered & measured) ---------- */
.cnk-section-head {
text-align: center;
max-width: 40rem;
margin-left: auto;
margin-right: auto;
margin-bottom: var( --wp--preset--spacing--40, 2rem );
}
.cnk-section-head p:not( .cnk-eyebrow ) {
color: var( --wp--preset--color--gray-600 );
}
/* ---------- Cards grid ---------- */
.cnk-cards-grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
gap: var( --wp--preset--spacing--40, 2rem );
}
.cnk-card {
background-color: var( --wp--preset--color--base );
border-radius: 1rem;
box-shadow: var( --wp--preset--shadow--soft );
padding: 2rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cnk-card:hover {
transform: translateY( -4px );
box-shadow: var( --wp--preset--shadow--medium );
}
/* ---------- Icon cards (designer-supplied line icons) ---------- */
.cnk-card-icon {
text-align: center;
}
.cnk-card-icon-img {
width: 3.25rem;
height: 3.25rem;
margin: 0 auto 1.1rem;
}
.cnk-card-icon h3 {
margin: 0 0 0.5rem;
}
.cnk-card-icon p {
margin: 0;
color: var( --wp--preset--color--gray-600 );
}
/* ---------- Diet-type icons with a hover/focus tooltip ---------- */
.cnk-diet-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp( 0.75rem, 3vw, 2rem );
}
.cnk-diet-icon {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
width: 9.5rem;
cursor: default;
}
.cnk-diet-icon img {
width: 4.5rem;
height: 4.5rem;
transition: transform 0.2s ease;
}
.cnk-diet-icon:hover img,
.cnk-diet-icon:focus img {
transform: translateY( -3px );
}
.cnk-diet-icon-label {
/* Stretched to the column's own width (align-items:center on the parent
would otherwise size this to its own text, letting a long one-word
label like "Wegetariańska" spill past the column into the next icon).
Font-size is set explicitly (smaller than the inherited body size) so
the longest label fits on one line instead of breaking mid-word. */
width: 100%;
overflow-wrap: break-word;
font-size: 0.95rem;
font-weight: 600;
text-align: center;
line-height: 1.3;
}
.cnk-diet-icon-tooltip {
position: absolute;
bottom: calc( 100% + 0.75rem );
left: 50%;
transform: translateX( -50% ) translateY( 4px );
width: 15rem;
padding: 0.85rem 1rem;
background-color: var( --wp--preset--color--contrast );
color: var( --wp--preset--color--base );
font-size: 0.85rem;
font-weight: 400;
line-height: 1.5;
text-align: left;
border-radius: 0.6rem;
box-shadow: var( --wp--preset--shadow--medium );
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 5;
}
.cnk-diet-icon-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX( -50% );
border: 6px solid transparent;
border-top-color: var( --wp--preset--color--contrast );
}
.cnk-diet-icon:hover .cnk-diet-icon-tooltip,
.cnk-diet-icon:focus .cnk-diet-icon-tooltip,
.cnk-diet-icon:focus-within .cnk-diet-icon-tooltip {
opacity: 1;
visibility: visible;
transform: translateX( -50% ) translateY( 0 );
}
@media ( max-width: 480px ) {
.cnk-diet-icon-tooltip {
width: 12rem;
}
}
/* ---------- Pricing card type icon (above the title) ---------- */
.cnk-pricing-type-icon {
height: 3rem;
width: auto;
margin-bottom: 0.75rem;
}
/* ---------- Decorative background illustrations ----------
Low-opacity food graphics tucked into a section band's background — never
on top of text (z-index:-1 inside the band's own stacking context). */
.cnk-bg-decor {
position: absolute;
z-index: -1;
width: clamp( 110px, 14vw, 220px );
height: auto;
opacity: 0.16;
pointer-events: none;
}
.cnk-bg-decor--top-left {
top: 1rem;
left: 1rem;
}
.cnk-bg-decor--top-right {
top: 1rem;
right: 1rem;
}
.cnk-bg-decor--bottom-left {
bottom: 1rem;
left: 1rem;
}
.cnk-bg-decor--bottom-right {
bottom: 1rem;
right: 1rem;
}
@media ( max-width: 600px ) {
.cnk-bg-decor {
display: none;
}
}
/* ---------- Micro-interactions: buttons & nav ---------- */
.wp-block-button__link {
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button__link:hover {
transform: translateY( -3px );
box-shadow: var( --wp--preset--shadow--medium );
}
.wp-block-navigation-item__content,
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus {
text-decoration: none !important;
transition: color 0.2s ease;
outline: none;
}
/* Keep a visible outline for real keyboard navigation, but not for mouse
clicks (removes the "frame" that was appearing after clicking a link). */
.wp-block-navigation-item__content:focus-visible {
outline: 2px solid #355e22;
outline-offset: 3px;
border-radius: 2px;
}
.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
color: #355e22;
}
/* Wider breathing room between the main menu items */
.wp-block-navigation .wp-block-navigation__container {
gap: 2.25rem;
}
/* Logo + "Czas Na Konkret" must never break onto a second line — a wrapped
title made the brand group taller than the row expected it to be, and at
some widths the extra line visually overlapped the nav sitting next to it. */
.cnk-header-row .wp-block-site-title,
.cnk-header-row .wp-block-site-title a {
white-space: nowrap;
}
/* The brand group (logo+title) and the account/cart group must keep their
natural width — never get squeezed by the row running short on space.
Only the nav, which already wraps its own items, should give way. This
holds in the narrow flex fallback below too (grid takes over at 782px). */
.cnk-header-row > .wp-block-group:first-child,
.cnk-header-row > .wp-block-group:last-child {
flex-shrink: 0;
}
/* Center the main menu within the header row, independent of the logo on
the left and the cart icon on the right (desktop only — on mobile the
nav collapses to a single hamburger button and should stay inline). */
@media ( min-width: 782px ) {
.cnk-header-row {
display: grid !important;
grid-template-columns: auto 1fr auto;
align-items: center;
}
.cnk-header-row > .wp-block-group:first-child {
grid-column: 1;
justify-self: start;
}
.cnk-header-nav {
grid-column: 2;
justify-self: center;
min-width: 0;
}
.cnk-header-row > .wp-block-group:last-child {
grid-column: 3;
justify-self: end;
}
}
/* Mini-cart item-count badge — smaller and in brand green instead of
WooCommerce's default oversized black circle. WooCommerce sets the badge's
background/text colors as inline styles at runtime (Interactivity API),
so !important is needed to override them. */
.wc-block-mini-cart__badge {
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.25rem;
border-radius: 999px;
background-color: var( --wp--preset--color--accent-1 ) !important;
color: var( --wp--preset--color--base ) !important;
font-size: 0.65rem;
line-height: 1.1rem;
}
/* Hides WooCommerce's default "Wysyłka i rabaty są obliczane przy kasie."
note under the mini-cart drawer's subtotal — redundant/unwanted copy per
request. */
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
display: none !important;
}
/* The checkout has no account/login option — guest checkout is the only
path — so WooCommerce's "Składasz zamówienie jako gość." notice just
states the obvious and adds noise. */
.wc-block-checkout__guest-checkout-notice {
display: none !important;
}
/* No focus highlight on any WooCommerce block text input (checkout fields,
the cart/mini-cart coupon field, …), per request. The Kontakt page's form
is Contact Form 7, a separate system with its own styling (see
.cnk-contact-form below) — intentionally left untouched. */
.wc-block-components-text-input input:focus {
outline: none !important;
}
/* ---------- Mini-cart drawer on narrow screens ----------
The drawer is a fixed 480px panel on desktop, where WooCommerce's default
32px title and 3-column item table both fit fine. Below ~480px the drawer
becomes full-viewport-width, but that default sizing doesn't shrink with
it: the title wraps across multiple lines and the item table (image +
details + price/discount-badge columns) overflows the panel, pushing the
price off-screen and forcing horizontal scrolling. */
@media ( max-width: 480px ) {
.wc-block-mini-cart__title {
font-size: 1.35rem;
flex-wrap: wrap;
row-gap: 0.15rem;
}
/* The row is actually CSS Grid (WooCommerce sets display:grid on
tr.wc-block-cart-items__row, not real table layout), with its own
grid-template-columns sizing each track to its content's natural
width. That lets the price/discount-badge column grow past the
available width — same problem on the mini-cart drawer and the
standalone Cart page (/koszyk/), which has an even narrower column
(no sidebar on mobile). A plain width on the cells does nothing here;
the row's own track definition has to be overridden instead. */
.wp-block-woocommerce-mini-cart-items-block .wc-block-cart-items__row,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row {
/* 4 tracks, not 3: the product cell spans columns 2/4 (grid-column:
2 / 4), with the total/price cell auto-placed into column 4. Track
3 is a 1px sliver rather than a literal 0 — some engines handle a
zero-width grid track inconsistently. */
grid-template-columns: 48px 1fr 1px 78px !important;
column-gap: 10px !important;
box-sizing: border-box;
padding-right: 0.65rem;
}
.wp-block-woocommerce-mini-cart-items-block .wc-block-cart-item__image img,
.wp-block-woocommerce-cart-items-block .wc-block-cart-item__image img {
width: 100%;
height: auto;
}
.wp-block-woocommerce-mini-cart-items-block .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wp-block-woocommerce-cart-items-block .wc-block-cart-item__total-price-and-sale-badge-wrapper {
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.wp-block-woocommerce-mini-cart-items-block .wc-block-components-sale-badge,
.wp-block-woocommerce-cart-items-block .wc-block-components-sale-badge {
font-size: 0.65rem;
white-space: normal;
text-align: right;
padding: 0.15rem 0.35rem;
}
}
/* ---------- Process: numbered steps + connected photo column ---------- */
.cnk-process {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp( 2rem, 5vw, 4rem );
align-items: start;
max-width: 56rem;
margin: 0 auto;
}
.cnk-process-left {
display: flex;
flex-direction: column;
}
.cnk-process-steps {
list-style: none;
margin: 0;
padding: 0;
}
.cnk-process-step {
position: relative;
display: flex;
gap: 1.25rem;
padding-bottom: 2rem;
}
.cnk-process-step::before {
content: "";
position: absolute;
left: 23px;
top: 48px;
bottom: 2px;
width: 0;
border-left: 2px dashed var( --wp--preset--color--gray-300 );
}
.cnk-process-step:last-child {
padding-bottom: 0;
}
.cnk-process-step:last-child::before {
display: none;
}
.cnk-process-step-number {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var( --wp--preset--color--accent-1 );
color: var( --wp--preset--color--base );
font-weight: 700;
font-size: 1.15rem;
}
.cnk-process-step-body h3 {
margin: 0.15rem 0 0.35rem;
}
.cnk-process-step-body p {
margin: 0;
color: var( --wp--preset--color--gray-600 );
}
.cnk-process-photos {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
.cnk-process-photo {
width: 70%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 1.5rem;
object-fit: cover;
box-shadow: var( --wp--preset--shadow--medium );
border: 4px solid var( --wp--preset--color--base );
}
.cnk-process-photo:nth-child( 1 ) {
align-self: flex-start;
}
.cnk-process-photo:nth-child( 2 ) {
align-self: center;
width: 56%;
}
.cnk-process-photo:nth-child( 3 ) {
align-self: flex-end;
}
.cnk-process-cta {
margin-top: 1.5rem;
}
@media ( max-width: 781px ) {
.cnk-process {
grid-template-columns: 1fr;
}
/* The photos are purely decorative (aria-hidden) filler for the second
grid column. On a single-column mobile layout that column drops below
the whole steps list instead of sitting beside it, so the photos read
as orphaned content unrelated to any specific step. Since they carry
no information of their own, simplest is to drop them here rather than
force an inline layout they were never designed for. */
.cnk-process-photos {
display: none;
}
}
/* ---------- Pricing cards ----------
Each card lists its own full feature checklist (all four monthly packages
share the exact same array — see $cnk_package_features in setup-pages.php
— so they render at identical height; the row's align-items: stretch
below also matches the shorter workshop card to the same height, with its
footer pinned to the bottom via margin-top: auto). */
.cnk-pricing-card {
position: relative;
display: flex;
flex-direction: column;
background-color: var( --wp--preset--color--gray-100 );
border: 1px solid var( --wp--preset--color--gray-300 );
border-radius: 1.25rem;
box-shadow: var( --wp--preset--shadow--soft );
padding: 1.75rem;
text-align: left;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cnk-pricing-card:hover {
transform: translateY( -4px );
box-shadow: var( --wp--preset--shadow--medium );
}
.cnk-pricing-card.is-popular {
background-color: var( --wp--preset--color--base );
border-color: var( --wp--preset--color--accent-1 );
border-width: 2px;
box-shadow: var( --wp--preset--shadow--medium );
}
/* Decorative corner "flag" in the top-right of every card, purely cosmetic. */
.cnk-pricing-corner {
position: absolute;
top: 0;
right: 0;
width: 3.5rem;
height: 3.5rem;
background-color: var( --wp--preset--color--accent-1-light );
border-top-right-radius: 1.25rem;
border-bottom-left-radius: 3.5rem;
}
.cnk-pricing-card.is-popular .cnk-pricing-corner {
background-color: var( --wp--preset--color--accent-1 );
}
.cnk-pricing-badge {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX( -50% );
padding: 0.3rem 1rem;
border-radius: 999px;
background-color: var( --wp--preset--color--contrast );
color: var( --wp--preset--color--base );
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
z-index: 1;
}
.cnk-pricing-card h3 {
position: relative;
color: var( --wp--preset--color--contrast );
font-size: 1.2rem;
margin: 0 0 0.4rem;
padding-right: 3rem;
}
.cnk-pricing-tagline {
color: var( --wp--preset--color--accent-1-dark );
font-weight: 700;
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
}
.cnk-pricing-divider {
border: none;
border-top: 1px solid var( --wp--preset--color--gray-300 );
margin: 1.1rem 0;
}
.cnk-pricing-features {
list-style: none;
margin: 0;
padding: 0;
}
.cnk-pricing-features li {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0;
color: var( --wp--preset--color--gray-600 );
font-size: 0.88rem;
line-height: 1.3;
}
.cnk-pricing-features li span {
flex-grow: 1;
}
.cnk-feature-icon {
flex-shrink: 0;
width: 1.2rem;
height: 1.2rem;
color: var( --wp--preset--color--accent-1-dark );
}
.cnk-feature-chevron {
flex-shrink: 0;
width: 0.85rem;
height: 0.85rem;
color: var( --wp--preset--color--gray-300 );
}
/* Pushes price + CTA to a shared baseline at the bottom of every card,
regardless of how many feature rows sit above (see .cnk-pricing-row's
align-items: stretch, which equalises card heights across the carousel). */
.cnk-pricing-footer {
margin-top: auto;
padding-top: 1.25rem;
text-align: center;
}
.cnk-pricing-note {
color: var( --wp--preset--color--accent-1-dark );
font-weight: 600;
font-size: 0.82rem;
margin: 0 0 0.75rem;
}
.cnk-pricing-price {
color: var( --wp--preset--color--contrast );
font-size: 2rem;
font-weight: 800;
line-height: 1.1;
margin: 0 0 1.5rem;
}
.cnk-pricing-price span {
font-size: 1rem;
font-weight: 500;
color: var( --wp--preset--color--gray-600 );
}
.cnk-pricing-period {
font-size: 0.9rem !important;
font-weight: 500;
color: var( --wp--preset--color--gray-600 );
}
.cnk-price-old {
font-size: 1.1rem;
font-weight: 500;
color: var( --wp--preset--color--gray-600 );
text-decoration: line-through;
margin-right: 0.4rem;
}
/* [add_to_cart] renders its own
wrapper with an inline border/padding
style — neutralise it so the button sits flush in our card. */
.cnk-pricing-cta p.product {
margin: 0;
border: none !important;
padding: 0 !important;
}
.cnk-pricing-cta .button {
width: 100%;
}
/* WooCommerce appends a "View cart" link after a successful AJAX add-to-cart
— not wanted here, the card already stays visible with its own button. */
.cnk-pricing-cta .added_to_cart {
display: none !important;
}
/* ---------- Testimonials marquee (auto-scrolling, seamless loop) ----------
.cnk-testimonials-track holds the card list twice back to back, flat (no
extra wrapper per set — that would make the seam's gap wider than the
gaps between cards and break the loop). The page source only has the
cards once — animations.js clones them into a second, aria-hidden copy on
load, so there's a single editable copy of each testimonial. Animating
from translateX(0) to translateX(-50%) — half the track's width, i.e. one
full card list — makes the loop seamless: the instant it "resets" to 0%,
the duplicate list is sitting in the exact spot the original just
vacated. */
.cnk-testimonials {
overflow: hidden;
padding-bottom: 1rem;
}
.cnk-testimonials-track {
display: flex;
gap: 1.5rem;
width: max-content;
/* Duration scales with card count (6 cards → 64s) so the scroll speed
(px/s) stays the same as it was with fewer cards — translateX(-50%)
covers more distance as the track gets longer, and a fixed duration
would make it visibly speed up. */
animation: cnk-testimonials-scroll 64s linear infinite;
}
.cnk-testimonials:hover .cnk-testimonials-track,
.cnk-testimonials:focus-within .cnk-testimonials-track {
animation-play-state: paused;
}
@keyframes cnk-testimonials-scroll {
from {
transform: translateX( 0 );
}
to {
transform: translateX( -50% );
}
}
@media ( prefers-reduced-motion: reduce ) {
.cnk-testimonials-track {
animation: none;
}
}
.cnk-testimonial {
flex: 0 0 320px;
background-color: var( --wp--preset--color--gray-100 );
border-radius: 1rem;
padding: 1.75rem;
box-shadow: var( --wp--preset--shadow--soft );
}
.cnk-testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
font-weight: 600;
}
.cnk-review-stars {
color: #f2a93b;
font-size: 1.1rem;
letter-spacing: 0.1em;
}
.cnk-testimonial .cnk-review-stars {
display: block;
margin-bottom: 0.5rem;
}
.cnk-testimonial p {
margin: 0;
font-style: italic;
line-height: 1.6;
}
/* ---------- Contact Form 7 ---------- */
.cnk-contact-form .wpcf7-form p {
margin-bottom: 1.25rem;
}
.cnk-contact-form .wpcf7-form label {
display: block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var( --wp--preset--color--gray-600 );
margin-bottom: 0.5rem;
}
.cnk-contact-form .wpcf7-form label .cnk-required {
color: #c0392b;
}
.cnk-contact-form .wpcf7-form input[type="text"],
.cnk-contact-form .wpcf7-form input[type="email"],
.cnk-contact-form .wpcf7-form input[type="tel"],
.cnk-contact-form .wpcf7-form textarea {
width: 100%;
box-sizing: border-box;
padding: 0.85rem 1.1rem;
border: 1.5px solid var( --wp--preset--color--gray-300 );
border-radius: 0.75rem;
font-family: inherit;
font-size: 1rem;
background-color: var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--soft );
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cnk-contact-form .wpcf7-form input[type="text"]:hover,
.cnk-contact-form .wpcf7-form input[type="email"]:hover,
.cnk-contact-form .wpcf7-form input[type="tel"]:hover,
.cnk-contact-form .wpcf7-form textarea:hover {
border-color: var( --wp--preset--color--accent-1 );
}
.cnk-contact-form .wpcf7-form input[type="text"]:focus,
.cnk-contact-form .wpcf7-form input[type="email"]:focus,
.cnk-contact-form .wpcf7-form input[type="tel"]:focus,
.cnk-contact-form .wpcf7-form textarea:focus {
outline: none;
border-color: var( --wp--preset--color--accent-1 );
}
.cnk-contact-form .wpcf7-form textarea {
min-height: 140px;
resize: vertical;
}
.cnk-contact-form .wpcf7-form .wpcf7-acceptance {
display: block;
margin-bottom: 1.5rem;
}
.cnk-contact-form .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
.cnk-contact-form .wpcf7-form .wpcf7-list-item-label {
display: inline;
font-weight: 400;
}
.cnk-contact-form .wpcf7-form input[type="checkbox"] {
margin-right: 0.5rem;
accent-color: var( --wp--preset--color--accent-1 );
}
.cnk-contact-form .wpcf7-form input[type="submit"] {
display: inline-block;
padding: 0.75rem 2rem;
border: none;
border-radius: 999px;
background-color: var( --wp--preset--color--accent-1 );
color: var( --wp--preset--color--base );
font-family: inherit;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cnk-contact-form .wpcf7-form input[type="submit"]:hover {
background-color: var( --wp--preset--color--accent-1-dark );
transform: translateY( -3px );
box-shadow: var( --wp--preset--shadow--medium );
}
.cnk-contact-form .wpcf7-form input[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Honeypot field: off-screen, not display:none (which some bots skip filling
because it's an obvious tell), kept out of the tab order and hidden from
screen readers so it doesn't confuse real visitors using one. */
.cnk-contact-form .cnk-hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.cnk-contact-form .wpcf7-not-valid-tip {
color: #c0392b;
font-size: 0.85rem;
margin-top: 0.3rem;
}
.cnk-contact-form .wpcf7-response-output {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
border-radius: 0.5rem;
border: 1px solid var( --wp--preset--color--gray-300 );
font-size: 1rem;
line-height: 1.5;
}
/* Generic "one or more fields contain an error" banner is redundant now that
each field shows its own specific message (e.g. "Nieprawidłowy adres email")
via .wpcf7-not-valid-tip, so hide it for the invalid-fields state. */
.cnk-contact-form .wpcf7-form.invalid .wpcf7-response-output {
display: none;
}
.cnk-contact-form .wpcf7-form.sent .wpcf7-response-output {
display: flex;
align-items: center;
gap: 0.75rem;
background-color: var( --wp--preset--color--accent-1-light );
border-color: var( --wp--preset--color--accent-1-dark );
color: var( --wp--preset--color--accent-1-dark );
}
.cnk-contact-form .wpcf7-form.sent .wpcf7-response-output::before {
content: "\2713";
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var( --wp--preset--color--accent-1-dark );
color: var( --wp--preset--color--base );
font-size: 0.85rem;
font-weight: 700;
line-height: 1;
}
/* ---------- Cennik carousel (horizontal-scrolling pricing-card row) ----------
No arrow buttons and no visible scrollbar by design — the row is scrolled
with a trackpad swipe, shift+wheel, or a click-and-drag of the mouse (see
the pointer-drag handler in animations.js). Extra top padding/negative
margin on the row keeps the "Najpopularniejszy" badge (which pokes above
the card via a negative offset) from being clipped by the scroll container. */
#cennik .cnk-band-inner {
max-width: 1680px;
}
.cnk-carousel {
position: relative;
}
.cnk-pricing-row {
display: flex;
flex-wrap: nowrap;
/* Stretches every card to the row's tallest card — the four monthly
packages already share one height (same feature list), and this makes
the workshop card (shorter list) match them too, per cnk-pricing-footer's
margin-top: auto. */
align-items: stretch;
gap: 1.75rem;
list-style: none;
padding: 1.25rem 0 1rem;
margin: -1.25rem 0 -1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
cursor: grab;
scrollbar-width: none;
-ms-overflow-style: none;
}
.cnk-pricing-row.cnk-carousel-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.cnk-pricing-row::-webkit-scrollbar {
display: none;
}
.cnk-pricing-row .cnk-pricing-card {
flex: 0 0 320px;
max-width: 320px;
scroll-snap-align: start;
}
/* On narrow phones, the card's own padding/border were being added on top
of the 320px content width (no box-sizing: border-box here), so the
rendered card could exceed the viewport and not fit in one swipe. Capping
the whole box (border-box) to a viewport-relative width fixes that without
touching the desktop card size, which already works fine as a horizontally
scrollable row. */
@media ( max-width: 480px ) {
.cnk-pricing-row .cnk-pricing-card {
box-sizing: border-box;
/* Narrower than "fill the available width" on purpose — leaving the
next card peeking in from the right edge is what tells a visitor
there's more than one package to swipe through. At 320px/84vw the
next card was basically fully hidden until the first swipe. */
flex-basis: min( 280px, 74vw );
max-width: min( 280px, 74vw );
}
}
/* Explicit prev/next affordance — the row scrolls by drag/wheel too, but
without these a visitor has no visual cue that a card (e.g. the workshop
package) sits off-screen past the last visible one. */
.cnk-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY( -50% );
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var( --wp--preset--color--gray-300 );
border-radius: 50%;
background-color: var( --wp--preset--color--base );
color: var( --wp--preset--color--contrast );
box-shadow: var( --wp--preset--shadow--medium );
cursor: pointer;
transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
z-index: 2;
}
.cnk-carousel-arrow svg {
width: 1.25rem;
height: 1.25rem;
}
.cnk-carousel-arrow:hover {
background-color: var( --wp--preset--color--accent-1-light );
}
.cnk-carousel-arrow-prev {
left: -1.375rem;
}
.cnk-carousel-arrow-next {
right: -1.375rem;
}
.cnk-carousel-arrow.is-hidden {
opacity: 0;
visibility: hidden;
}
@media ( max-width: 782px ) {
.cnk-carousel-arrow {
display: none;
}
}
/* ---------- WooCommerce form fields (cart, checkout, login) ---------- */
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce form select,
.woocommerce form textarea {
border: 1.5px solid var( --wp--preset--color--gray-300 );
border-radius: 0.6rem;
padding: 0.65rem 0.9rem;
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.woocommerce form .input-text:focus,
.woocommerce form input[type="text"]:focus,
.woocommerce form input[type="email"]:focus,
.woocommerce form input[type="tel"]:focus,
.woocommerce form input[type="password"]:focus,
.woocommerce form input[type="number"]:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
outline: none;
border-color: var( --wp--preset--color--accent-1 );
}
.woocommerce form input.qty {
width: 4.5rem;
padding: 0.5rem 0.6rem;
}
/* ---------- Profile photo (Kim Jestem hero) ---------- */
.cnk-profile-photo {
width: 100%;
max-width: 420px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
border: 8px solid var( --wp--preset--color--base );
box-shadow: var( --wp--preset--shadow--strong );
}
/* ---------- Scroll-reveal animations (hidden state only applies once JS confirms it can reveal them again — see functions.php) ---------- */
/* :where() keeps the "html.js" scoping without adding to specificity, so the
.cnk-in-view / reduced-motion override rules below (which only carry one or
two plain class selectors) can still win the cascade. */
:where( html.js ) .cnk-card,
:where( html.js ) .cnk-section-head,
:where( html.js ) .cnk-hero-text,
:where( html.js ) .cnk-section-band {
opacity: 0;
transform: translateY( 24px );
transition: opacity 0.6s ease, transform 0.6s ease;
}
.cnk-card.cnk-in-view,
.cnk-section-head.cnk-in-view,
.cnk-hero-text.cnk-in-view,
.cnk-section-band.cnk-in-view {
opacity: 1;
transform: translateY( 0 );
}
.cnk-cards-grid .cnk-card:nth-child( 2 ) {
transition-delay: 0.08s;
}
.cnk-cards-grid .cnk-card:nth-child( 3 ) {
transition-delay: 0.16s;
}
.cnk-cards-grid .cnk-card:nth-child( 4 ) {
transition-delay: 0.24s;
}
.cnk-cards-grid .cnk-card:nth-child( 5 ) {
transition-delay: 0.32s;
}
.cnk-cards-grid .cnk-card:nth-child( 6 ) {
transition-delay: 0.4s;
}
.cnk-cards-grid .cnk-card:nth-child( 7 ) {
transition-delay: 0.48s;
}
@media ( prefers-reduced-motion: reduce ) {
.cnk-card,
.cnk-section-head,
.cnk-hero-text,
.cnk-section-band {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------- Blog listing (home.html template, posts page) ---------- */
.cnk-blog-main {
padding-top: clamp( 3rem, 6vw, 4.5rem );
}
.cnk-blog-grid {
list-style: none;
margin: 0;
padding: 0;
gap: var( --wp--preset--spacing--40, 2rem );
}
.cnk-blog-grid > li {
margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var( --wp--preset--color--base );
border-radius: 1rem;
box-shadow: var( --wp--preset--shadow--soft );
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cnk-blog-grid > li:hover {
transform: translateY( -4px );
box-shadow: var( --wp--preset--shadow--medium );
}
.cnk-blog-grid .cnk-post-media {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.cnk-blog-grid .cnk-post-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
transition: transform 0.4s ease;
}
.cnk-blog-grid > li:hover .cnk-post-media img {
transform: scale( 1.05 );
}
.cnk-post-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem 1.75rem 1.75rem;
}
.cnk-post-category,
.cnk-post-category a {
color: var( --wp--preset--color--accent-1-dark );
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
.cnk-post-body .wp-block-post-title {
margin: 0;
font-size: 1.25rem;
line-height: 1.3;
}
.cnk-post-body .wp-block-post-title a {
color: var( --wp--preset--color--contrast );
text-decoration: none;
}
.cnk-post-body .wp-block-post-title a:hover {
color: var( --wp--preset--color--accent-1 );
}
/* The excerpt grows to fill the card, so "Czytaj dalej" and the date sit on
the same horizontal line across all cards regardless of excerpt length. */
.cnk-post-body .wp-block-post-excerpt {
display: flex;
flex: 1;
flex-direction: column;
margin: 0;
}
.cnk-post-body .wp-block-post-excerpt__more-text {
margin: auto 0 0;
padding-top: 0.75rem;
}
.cnk-post-body .wp-block-post-excerpt__excerpt {
color: var( --wp--preset--color--gray-600 );
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
.cnk-post-body .wp-block-post-excerpt__more-link {
color: var( --wp--preset--color--accent-1-dark );
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
}
.cnk-post-date {
margin-top: 0.75rem;
font-size: 0.85rem;
color: var( --wp--preset--color--gray-600 );
}
/* ---------- Checkout order summary: keep product names readable ----------
In a narrow column (mobile or a squeezed sidebar) the price used to take
the space the product name needed, so the name wrapped one letter per
line. The name column now takes the remaining width, and the total price
stays on one line. */
.wc-block-components-order-summary-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
}
.wc-block-components-order-summary-item__image {
flex: 0 0 auto;
}
.wc-block-components-order-summary-item__description {
flex: 1 1 9rem;
min-width: 0;
overflow-wrap: break-word;
}
/* When the sidebar is too narrow for the name and the price side by side,
the price drops onto its own line, right-aligned, instead of squeezing the name. */
.wc-block-components-order-summary-item__total-price {
flex: 0 1 auto;
margin-left: auto;
text-align: right;
}
/* ---------- No underline on hover ----------
Hovered links never get a text-decoration line, site-wide (logo, menu,
buttons, text links). !important overrides the underline that block and
WooCommerce styles add on hover. */
a:hover,
a:focus-visible {
text-decoration: none !important;
}
/* Any element's keyboard-focus ring (:focus-visible, see below — mouse
clicks don't show it) was never given a colour, so it fell back to the
browser/WP-core default amber, clashing with the site's green brand —
links, checkboxes (e.g. the Kontakt form's RODO consent box), anything.
Scoped to :focus-visible only, so it doesn't fight the WooCommerce input
rule above that removes the outline there entirely (that rule is more
specific and keeps winning). */
:focus-visible {
outline-color: var( --wp--preset--color--accent-1 );
}
/* ---------- No frame after a mouse click ----------
Browsers draw a focus outline on whatever was clicked. Keyboard users still
get it (:focus-visible); mouse clicks don't. Form fields keep their green
border on focus, just without a glow ring. */
:focus:not( :focus-visible ) {
outline: none !important;
}
/* ---------- Single post: article + "Pozostałe artykuły" ---------- */
.cnk-single-main {
padding-top: 0;
}
.cnk-single-article {
padding-top: clamp( 3rem, 6vw, 4.5rem );
padding-bottom: clamp( 2.5rem, 5vw, 3.5rem );
}
/* The post body's own constrained-layout children (paragraphs, images, …)
are capped by the theme's shared --wp--style--global--content-size token
(645px), same as every other constrained block sitewide — fine for short
text blocks elsewhere, but it reads as cramped for a full article. Widened
just here rather than raising the shared token, which would also widen
headings and sections on every other page that weren't reported as an
issue. */
.cnk-single-article.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ),
.cnk-single-article .wp-block-post-content.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
max-width: 800px;
}
.cnk-related {
padding-top: clamp( 3rem, 6vw, 4.5rem );
padding-bottom: clamp( 3.5rem, 7vw, 5.5rem );
}
.cnk-related-head {
align-items: flex-end;
gap: 1.5rem;
margin-bottom: var( --wp--preset--spacing--40, 2rem );
}
.cnk-related-head .cnk-eyebrow {
margin-bottom: 0.5rem;
}
.cnk-related-head h2 {
margin: 0;
}
.cnk-related-all .wp-block-button__link {
background-color: var( --wp--preset--color--accent-1 );
color: var( --wp--preset--color--base );
border-radius: 999px;
padding: 0.85rem 1.75rem;
font-weight: 600;
}
.cnk-related-all .wp-block-button__link:hover {
background-color: var( --wp--preset--color--accent-1-dark );
}
/* ---------- Site logo (designer sygnet, site-logo block) ----------
Sized up in both the header and the footer — the block's own default
(48px, or less once squeezed) read as barely-there. Flex-shrink was also
crushing the header logo to 0 width whenever the row ran short on space
(narrower viewports, long nav); fixing the size here fixes that too. */
.wp-block-site-logo img {
width: 5.5rem !important;
height: 5.5rem !important;
}
.cnk-header-row .wp-block-site-logo {
flex: 0 0 auto;
}
/* The theme's global block-gap puts margin-top on every top-level block
inside .wp-site-blocks, including the footer template part — showing up
as a strip of the (white) body background between the page's last section
and the footer band on pages where that section has no bg of its own. */
.wp-site-blocks > footer.wp-block-template-part {
margin-top: 0;
}
/* Sticky footer: on a short page (e.g. a cart with one item) viewed on a
tall screen (iPad Pro's 1366px-tall viewport is the extreme case), the
footer used to end wherever the content ran out, leaving a big stretch of
plain white page background below it before the browser's own viewport
ended — easy to mistake for a layout bug. Stretching the wrapper to at
least the viewport height and letting