/**
* Izabella Site — frontendowy arkusz stylów.
*
* Konwencja: BEM-like z prefiksem .izs-*.
* Paleta: lawenda + pudrowy róż + śliwka (premium akcent) + cream.
* Typografia: Fraunces (nagłówki), Instrument Sans (body).
*/
/* =========================================
1. Tokeny (kolory i inne nadpisywane w Assets.php).
========================================= */
.izs-app {
--izs-bp-sm: 576px;
--izs-bp-md: 768px;
--izs-bp-lg: 1024px;
--izs-bp-xl: 1280px;
--izs-space-1: 0.25rem;
--izs-space-2: 0.5rem;
--izs-space-3: 0.75rem;
--izs-space-4: 1rem;
--izs-space-5: 1.5rem;
--izs-space-6: 2rem;
--izs-space-7: 3rem;
--izs-space-8: 4rem;
--izs-space-9: 6rem;
--izs-radius-sm: 8px;
--izs-radius-md: 14px;
--izs-radius-lg: 24px;
--izs-radius-xl: 34px;
--izs-shadow-sm: 0 2px 6px rgba(31, 26, 46, 0.04);
--izs-shadow-md: 0 14px 40px rgba(74, 45, 82, 0.08);
--izs-shadow-lg: 0 24px 70px rgba(74, 45, 82, 0.14);
--izs-font-heading: "Fraunces", "Cormorant Garamond", Georgia, serif;
--izs-font-body: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
--izs-font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Fallbacki — nadpisywane przez Assets.php z config/site.php */
--izs-color-lavender: #BFA7F7;
--izs-color-lavender-dark: #7A5FD3;
--izs-color-pink: #FAC1E8;
--izs-color-pink-dark: #F2A7D9;
--izs-color-plum: #4A2D52;
--izs-color-cream: #FAF7F2;
--izs-color-ink: #1F1A2E;
--izs-color-muted: #6B6577;
--izs-color-line: #ECE3F9;
--izs-color-line-strong: #D9CDF0;
--izs-gradient: linear-gradient(135deg, var(--izs-color-lavender) 0%, var(--izs-color-pink) 100%);
}
/* =========================================
2. Reset / bazowe elementy (ograniczone do .izs-app).
========================================= */
.izs-app,
.izs-app *,
.izs-app *::before,
.izs-app *::after {
box-sizing: border-box;
}
.izs-app {
font-family: var(--izs-font-body);
color: var(--izs-color-ink);
line-height: 1.6;
background: var(--izs-color-cream);
}
.izs-app img {
max-width: 100%;
height: auto;
display: block;
}
.izs-app a {
color: var(--izs-color-plum);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.izs-app a:hover,
.izs-app a:focus-visible {
color: var(--izs-color-lavender-dark);
}
.izs-app :focus-visible {
outline: 2px solid var(--izs-color-lavender-dark);
outline-offset: 2px;
border-radius: 4px;
}
.izs-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =========================================
3. Typografia
========================================= */
.izs-app h1,
.izs-app h2,
.izs-app h3 {
font-family: var(--izs-font-heading);
font-weight: 400;
color: var(--izs-color-ink);
line-height: 1.1;
letter-spacing: -0.022em;
font-variation-settings: "opsz" 96, "SOFT" 30;
margin: 0 0 var(--izs-space-4);
}
.izs-app h1 {
font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
}
.izs-app h2 {
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
}
.izs-app h3 {
font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
}
.izs-app p {
margin: 0 0 var(--izs-space-4);
color: var(--izs-color-ink);
}
.izs-app ul,
.izs-app ol {
margin: 0 0 var(--izs-space-4);
padding-left: 1.5rem;
}
.izs-app li {
margin-bottom: var(--izs-space-2);
}
.izs-lead {
font-size: 1.15rem;
color: var(--izs-color-muted);
}
.izs-note {
font-size: 0.9rem;
color: var(--izs-color-muted);
font-style: italic;
}
/* =========================================
4. Layout — container, grid
========================================= */
.izs-container {
width: 100%;
max-width: 1180px;
margin-inline: auto;
/* Więcej oddechu: 1.25rem na telefonie, płynnie do ~4rem na dużym desktopie. */
padding-inline: clamp(1.25rem, 4vw, 4rem);
}
@media (min-width: 768px) {
.izs-container {
padding-inline: clamp(2rem, 5vw, 4.5rem);
}
}
@media (min-width: 1280px) {
.izs-container {
padding-inline: clamp(3rem, 5vw, 5.5rem);
}
}
.izs-section {
padding-block: var(--izs-space-8);
}
@media (min-width: 768px) {
.izs-section {
padding-block: var(--izs-space-9);
}
}
.izs-section--soft {
background: linear-gradient(180deg, var(--izs-color-cream) 0%, #F2E9FC 100%);
}
.izs-section__head {
max-width: 740px;
margin-bottom: var(--izs-space-7);
}
.izs-section__head--center {
margin-inline: auto;
text-align: center;
}
.izs-section__eyebrow {
display: inline-block;
font-family: var(--izs-font-mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--izs-color-lavender-dark);
margin-bottom: var(--izs-space-3);
padding: 0.5rem 0.85rem;
background: rgba(191, 167, 247, 0.12);
border: 1px solid var(--izs-color-line-strong);
border-radius: 999px;
}
.izs-section__heading {
margin-bottom: var(--izs-space-3);
}
.izs-section__lead {
font-size: 1.08rem;
color: var(--izs-color-muted);
}
.izs-section__foot {
margin-top: var(--izs-space-6);
text-align: center;
}
.izs-grid {
display: grid;
gap: var(--izs-space-5);
}
.izs-grid--services {
grid-template-columns: 1fr;
}
.izs-grid--packages,
.izs-grid--entry,
.izs-grid--products,
.izs-grid--bullets {
grid-template-columns: 1fr;
}
.izs-grid--packages {
gap: var(--izs-space-5);
padding-block: var(--izs-space-4);
align-items: stretch;
}
@media (min-width: 640px) {
.izs-grid--services,
.izs-grid--entry,
.izs-grid--bullets {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 960px) {
.izs-grid--services,
.izs-grid--entry,
.izs-grid--products,
.izs-grid--bullets {
grid-template-columns: repeat(3, 1fr);
}
.izs-grid--packages {
grid-template-columns: repeat(3, 1fr);
gap: var(--izs-space-6);
align-items: stretch;
}
}
@media (min-width: 1180px) {
.izs-grid--packages {
gap: var(--izs-space-7);
}
}
@media (min-width: 1180px) {
.izs-grid--services {
grid-template-columns: repeat(4, 1fr);
}
}
/* =========================================
5. Buttons
Uwaga: używamy podwyższonej specyficzności (.izs-app .izs-btn oraz
a.izs-btn), aby zbić regułę .izs-app a { color: var(--izs-color-plum) }.
========================================= */
.izs-app .izs-btn,
.izs-app a.izs-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 1.9rem;
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
border: 1.5px solid transparent;
transition: transform 0.18s ease, background 0.25s ease, color 0.25s ease,
border-color 0.25s ease, box-shadow 0.25s ease;
min-height: 48px;
letter-spacing: 0.01em;
will-change: transform;
}
.izs-app .izs-btn:hover,
.izs-app a.izs-btn:hover {
transform: translateY(-2px);
text-decoration: none;
}
.izs-app .izs-btn:active,
.izs-app a.izs-btn:active {
transform: translateY(0);
}
.izs-app .izs-btn--primary,
.izs-app a.izs-btn--primary {
background: var(--izs-gradient);
background-size: 160% 160%;
background-position: 0% 50%;
color: var(--izs-color-ink);
border-color: transparent;
box-shadow: 0 10px 30px rgba(122, 95, 211, 0.22);
}
.izs-app .izs-btn--primary:hover,
.izs-app .izs-btn--primary:focus-visible,
.izs-app a.izs-btn--primary:hover,
.izs-app a.izs-btn--primary:focus-visible {
background-position: 100% 50%;
color: var(--izs-color-ink);
border-color: transparent;
box-shadow: 0 16px 40px rgba(122, 95, 211, 0.32);
}
.izs-app .izs-btn--secondary,
.izs-app a.izs-btn--secondary {
background: transparent;
color: var(--izs-color-plum);
border-color: var(--izs-color-plum);
}
.izs-app .izs-btn--secondary:hover,
.izs-app .izs-btn--secondary:focus-visible,
.izs-app a.izs-btn--secondary:hover,
.izs-app a.izs-btn--secondary:focus-visible {
background: var(--izs-color-plum);
color: #fff;
border-color: var(--izs-color-plum);
}
/* --- Ghost: dyskretny przycisk dla placeholderów „Wkrótce" --- */
.izs-app .izs-btn--ghost,
.izs-app a.izs-btn--ghost {
background: transparent;
color: var(--izs-color-plum);
border: 1px dashed rgba(122, 95, 211, 0.45);
box-shadow: none;
}
.izs-app .izs-btn--ghost:hover,
.izs-app .izs-btn--ghost:focus-visible,
.izs-app a.izs-btn--ghost:hover,
.izs-app a.izs-btn--ghost:focus-visible {
background: rgba(191, 167, 247, 0.12);
border-style: solid;
color: var(--izs-color-plum);
box-shadow: none;
}
/* --- Cart: subtelny akcent przy przyciskach „Kup teraz" (add-to-cart) --- */
.izs-app .izs-btn--cart::before,
.izs-app a.izs-btn--cart::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: -2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* =========================================
6. Hero
========================================= */
.izs-hero {
position: relative;
padding-block: var(--izs-space-8) var(--izs-space-8);
background:
radial-gradient(circle at 20% 10%, var(--izs-color-pink) 0%, transparent 55%),
radial-gradient(circle at 85% 30%, var(--izs-color-lavender) 0%, transparent 60%),
var(--izs-color-cream);
overflow: hidden;
}
.izs-hero--compact {
padding-block: var(--izs-space-7);
}
.izs-hero__inner {
display: grid;
gap: var(--izs-space-7);
align-items: center;
}
@media (min-width: 900px) {
.izs-hero__inner {
grid-template-columns: 1.3fr 1fr;
}
}
.izs-hero__eyebrow {
display: inline-block;
font-family: var(--izs-font-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--izs-color-lavender-dark);
margin-bottom: var(--izs-space-4);
font-weight: 500;
padding: 0.5rem 0.9rem;
background: rgba(191, 167, 247, 0.12);
border: 1px solid var(--izs-color-line-strong);
border-radius: 999px;
}
.izs-hero__heading {
margin-bottom: var(--izs-space-5);
}
.izs-hero__lead {
font-size: 1.15rem;
color: var(--izs-color-muted);
max-width: 540px;
margin-bottom: var(--izs-space-6);
}
.izs-hero__actions {
display: flex;
gap: var(--izs-space-3);
flex-wrap: wrap;
margin-bottom: var(--izs-space-6);
}
.izs-hero__meta {
display: flex;
gap: var(--izs-space-5);
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
color: var(--izs-color-muted);
font-size: 0.95rem;
}
.izs-hero__meta li::before {
content: "•";
margin-right: 0.5rem;
color: var(--izs-color-plum);
}
.izs-hero__meta li:first-child::before {
display: none;
}
/* Hero media — placeholder / orby */
.izs-hero__media {
position: relative;
aspect-ratio: 4 / 5;
display: flex;
align-items: center;
justify-content: center;
}
.izs-hero__orb {
position: absolute;
border-radius: 50%;
filter: blur(2px);
opacity: 0.9;
}
.izs-hero__orb--pink {
width: 62%;
height: 62%;
background: var(--izs-color-pink);
top: 8%;
left: 5%;
}
.izs-hero__orb--lavender {
width: 55%;
height: 55%;
background: var(--izs-color-lavender);
bottom: 6%;
right: 5%;
}
.izs-hero__photo {
position: relative;
z-index: 1;
width: 72%;
aspect-ratio: 3 / 4;
border-radius: var(--izs-radius-xl);
background: linear-gradient(135deg, #fff 0%, var(--izs-color-cream) 100%);
box-shadow: var(--izs-shadow-lg);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.izs-hero__photo-placeholder {
color: var(--izs-color-muted);
font-style: italic;
font-size: 0.9rem;
padding: 1rem;
text-align: center;
}
/* =========================================
7. Cards bazowe
========================================= */
.izs-card {
position: relative;
background: #fff;
border-radius: var(--izs-radius-lg);
padding: var(--izs-space-6);
box-shadow: var(--izs-shadow-sm);
border: 1px solid var(--izs-color-line-strong);
display: flex;
flex-direction: column;
gap: var(--izs-space-3);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease, border-color 0.35s ease;
}
.izs-card:hover {
transform: translateY(-4px);
box-shadow: var(--izs-shadow-md);
border-color: var(--izs-color-lavender);
}
.izs-badge {
position: absolute;
top: -12px;
left: var(--izs-space-5);
background: var(--izs-color-plum);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
padding: 0.4rem 0.9rem;
border-radius: 999px;
text-transform: uppercase;
}
.izs-badge--inline {
position: static;
display: inline-block;
margin-left: 0.4rem;
}
/* =========================================
8. Service card
========================================= */
.izs-service-card__icon-svg {
width: 48px;
height: 48px;
color: var(--izs-color-plum);
padding: 10px;
background: var(--izs-color-pink);
border-radius: var(--izs-radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.izs-service-card__icon-svg svg {
width: 100%;
height: 100%;
}
.izs-service-card__title {
margin-bottom: 0;
}
.izs-service-card__tagline {
color: var(--izs-color-muted);
font-weight: 500;
}
.izs-service-card__description {
color: var(--izs-color-ink);
}
.izs-service-card__list {
list-style: none;
padding: 0;
margin-top: auto;
}
.izs-service-card__list li {
padding-left: 1.6rem;
position: relative;
color: var(--izs-color-muted);
font-size: 0.95rem;
margin-bottom: var(--izs-space-2);
}
.izs-service-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--izs-color-lavender);
}
/* =========================================
9. Package card — editorial / premium pricing pattern
Inspirowane Linear, Stripe, Vercel: spokojna karta, pewna typografia,
featured wyróżniony głęboką śliwką (nie kolorowym akcentem).
========================================= */
.izs-package-card {
position: relative;
padding: clamp(1.05rem, 0.7rem + 0.7vw, 1.45rem);
background:
linear-gradient(165deg, #FDECF4 0%, #FBDBEC 100%);
border: 1px solid rgba(242, 167, 217, 0.28);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(74, 45, 82, 0.03),
0 8px 24px rgba(242, 167, 217, 0.15);
display: flex;
flex-direction: column;
gap: 0.85rem;
overflow: visible;
transition:
transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.3s ease;
}
.izs-package-card:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(74, 45, 82, 0.05),
0 20px 48px rgba(242, 167, 217, 0.3);
border-color: rgba(242, 167, 217, 0.45);
}
/* Header — duration as micro-caps ABOVE title via flex order */
.izs-package-card__header {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.izs-package-card__duration {
order: -1;
margin: 0;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--izs-color-lavender-dark);
}
.izs-package-card__title {
margin: 0;
font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.35rem);
line-height: 1.2;
color: var(--izs-color-ink);
letter-spacing: -0.015em;
}
.izs-package-card__tagline {
margin: 0;
font-size: 0.875rem;
line-height: 1.45;
color: var(--izs-color-muted);
}
/* Price — editorial hero, no panel wrapper */
.izs-package-card__price {
display: flex;
align-items: baseline;
gap: 0.7rem;
flex-wrap: wrap;
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
}
.izs-package-card__price-current {
font-family: var(--izs-font-heading);
font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.15rem);
line-height: 0.95;
color: var(--izs-color-ink);
letter-spacing: -0.025em;
font-weight: 400;
-webkit-text-fill-color: currentColor;
background: none;
}
.izs-package-card__price-original {
font-size: 0.85rem;
color: var(--izs-color-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: rgba(107, 101, 119, 0.55);
font-weight: 500;
opacity: 0.75;
}
.izs-package-card__discount {
margin: 0;
font-size: 0.73rem;
font-weight: 600;
color: var(--izs-color-lavender-dark);
letter-spacing: 0.01em;
display: block;
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
text-transform: none;
}
.izs-package-card__installments {
margin: 0;
font-size: 0.76rem;
color: var(--izs-color-muted);
font-style: normal;
}
/* Benefits list */
.izs-package-card__list {
list-style: none;
padding: 0.8rem 0 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
border-top: 1px solid rgba(242, 167, 217, 0.35);
}
.izs-package-card__list li {
position: relative;
padding-left: 1.5rem;
font-size: 0.82rem;
line-height: 1.4;
color: var(--izs-color-ink);
margin: 0;
}
.izs-package-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: rgba(184, 167, 229, 0.16);
background-image: url("data:image/svg+xml;utf8,");
background-size: 72%;
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
}
/* remove v1.1 CSS checkmark (we now use SVG) */
.izs-package-card__list li::after {
content: none;
display: none;
}
/* CTA — full width, proportional */
.izs-app .izs-package-card__cta,
.izs-app a.izs-package-card__cta {
margin-top: auto;
align-self: stretch;
width: 100%;
justify-content: center;
font-size: 0.88rem;
padding: 0.7rem 1.25rem;
min-height: 40px;
}
/* =========================================
9a. Package card — FEATURED (dark premium surface)
Linear-style dark card, white text, lavender accents.
========================================= */
.izs-package-card--featured {
background:
radial-gradient(140% 90% at 100% 0%, rgba(184, 167, 229, 0.22) 0%, transparent 55%),
radial-gradient(120% 90% at 0% 100%, rgba(245, 215, 227, 0.08) 0%, transparent 55%),
linear-gradient(165deg, #4A2D52 0%, #2E1733 100%);
border: 1px solid rgba(184, 167, 229, 0.2);
color: #F3EDF8;
box-shadow:
0 2px 6px rgba(46, 23, 51, 0.18),
0 24px 60px rgba(46, 23, 51, 0.28);
}
.izs-package-card--featured:hover {
transform: translateY(-6px);
border-color: rgba(184, 167, 229, 0.38);
box-shadow:
0 4px 10px rgba(46, 23, 51, 0.22),
0 36px 80px rgba(46, 23, 51, 0.38);
}
.izs-package-card--featured .izs-package-card__duration {
color: var(--izs-color-lavender);
}
.izs-package-card--featured .izs-package-card__title {
color: #FFFFFF;
}
.izs-package-card--featured .izs-package-card__tagline {
color: rgba(243, 237, 248, 0.72);
}
.izs-package-card--featured .izs-package-card__price-current {
color: #FFFFFF;
-webkit-text-fill-color: #FFFFFF;
}
.izs-package-card--featured .izs-package-card__price-original {
color: rgba(243, 237, 248, 0.5);
text-decoration-color: rgba(243, 237, 248, 0.35);
}
.izs-package-card--featured .izs-package-card__discount {
color: var(--izs-color-pink);
}
.izs-package-card--featured .izs-package-card__installments {
color: rgba(243, 237, 248, 0.6);
}
.izs-package-card--featured .izs-package-card__list {
border-top-color: rgba(184, 167, 229, 0.22);
}
.izs-package-card--featured .izs-package-card__list li {
color: rgba(243, 237, 248, 0.88);
}
.izs-package-card--featured .izs-package-card__list li::before {
background-color: rgba(184, 167, 229, 0.22);
background-image: url("data:image/svg+xml;utf8,");
}
/* Featured CTA: inverted — biały na ciemnej karcie.
Specyficzność (0,4,1) pokonuje .izs-app a.izs-btn--primary (0,3,1). */
.izs-app .izs-package-card--featured .izs-package-card__cta,
.izs-app .izs-package-card--featured a.izs-package-card__cta {
background: #FFFFFF;
color: var(--izs-color-plum);
border-color: #FFFFFF;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.izs-app .izs-package-card--featured .izs-package-card__cta:hover,
.izs-app .izs-package-card--featured .izs-package-card__cta:focus-visible {
background: var(--izs-color-pink);
color: var(--izs-color-plum);
border-color: var(--izs-color-pink);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26);
}
/* Badge — small, refined, floating above the card */
.izs-package-card .izs-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #FFFFFF;
color: var(--izs-color-plum);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
padding: 0.5rem 0.95rem;
border-radius: 999px;
box-shadow: 0 6px 20px rgba(46, 23, 51, 0.25);
border: 1px solid rgba(74, 45, 82, 0.1);
text-transform: uppercase;
white-space: nowrap;
z-index: 3;
}
.izs-package-card--featured .izs-badge {
background: linear-gradient(135deg, var(--izs-color-pink) 0%, var(--izs-color-lavender) 100%);
color: var(--izs-color-plum);
border-color: transparent;
box-shadow: 0 6px 20px rgba(46, 23, 51, 0.4);
/* Rytm bicia serca — lub-dub … pauza. Cykl 1.4s, ~43 bpm (spoczynkowe). */
animation: izsHeartbeat 1.4s ease-in-out infinite;
transform-origin: center center;
will-change: transform;
}
@keyframes izsHeartbeat {
0% {
transform: translateX(-50%) scale(1);
box-shadow: 0 6px 20px rgba(46, 23, 51, 0.4);
}
14% {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 10px 26px rgba(46, 23, 51, 0.5);
}
28% {
transform: translateX(-50%) scale(1);
box-shadow: 0 6px 20px rgba(46, 23, 51, 0.4);
}
42% {
transform: translateX(-50%) scale(1.08);
box-shadow: 0 9px 24px rgba(46, 23, 51, 0.48);
}
56%,
100% {
transform: translateX(-50%) scale(1);
box-shadow: 0 6px 20px rgba(46, 23, 51, 0.4);
}
}
/* Szacunek dla preferencji systemowych — wyłącz animację, gdy użytkownik
wybrał reduced motion. */
@media (prefers-reduced-motion: reduce) {
.izs-package-card--featured .izs-badge {
animation: none;
}
}
/* =========================================
10. Entry offer card — editorial, spójny z .izs-package-card
========================================= */
.izs-entry-card {
padding: clamp(1.05rem, 0.7rem + 0.7vw, 1.45rem);
background: #FFFFFF;
border: 1px solid rgba(74, 45, 82, 0.08);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(74, 45, 82, 0.02),
0 8px 24px rgba(74, 45, 82, 0.04);
gap: 0.85rem;
transition:
transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.3s ease;
}
.izs-entry-card:hover {
transform: translateY(-4px);
box-shadow:
0 2px 4px rgba(74, 45, 82, 0.04),
0 20px 48px rgba(74, 45, 82, 0.12);
border-color: rgba(74, 45, 82, 0.14);
}
.izs-entry-card > header {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.izs-entry-card__title {
margin: 0;
font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.35rem);
line-height: 1.2;
color: var(--izs-color-ink);
letter-spacing: -0.015em;
}
.izs-entry-card__tagline {
margin: 0;
font-size: 0.875rem;
line-height: 1.45;
color: var(--izs-color-muted);
}
.izs-entry-card__price {
display: flex;
align-items: baseline;
gap: 0.7rem;
flex-wrap: wrap;
margin: 0;
}
.izs-entry-card__price strong {
font-family: var(--izs-font-heading);
font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.15rem);
color: var(--izs-color-ink);
line-height: 0.95;
letter-spacing: -0.025em;
font-weight: 400;
}
.izs-entry-card__price span {
color: var(--izs-color-muted);
font-size: 0.76rem;
font-weight: 500;
}
.izs-entry-card__meta {
display: grid;
grid-template-columns: 1fr;
gap: 0.45rem;
margin: 0;
padding: 0.8rem 0;
border-top: 1px solid rgba(74, 45, 82, 0.08);
border-bottom: 1px solid rgba(74, 45, 82, 0.08);
}
.izs-entry-card__meta div {
display: flex;
gap: 0.75rem;
align-items: baseline;
font-size: 0.82rem;
margin: 0;
}
.izs-entry-card__meta dt {
margin: 0;
color: var(--izs-color-muted);
min-width: 3.5rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.izs-entry-card__meta dd {
margin: 0;
color: var(--izs-color-ink);
font-weight: 500;
}
.izs-entry-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
font-size: 0.82rem;
}
.izs-entry-card__list li {
position: relative;
padding-left: 1.5rem;
line-height: 1.4;
color: var(--izs-color-ink);
margin: 0;
}
.izs-entry-card__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: rgba(184, 167, 229, 0.16);
background-image: url("data:image/svg+xml;utf8,");
background-size: 72%;
background-position: center;
background-repeat: no-repeat;
color: transparent;
font-weight: 400;
}
.izs-entry-card__note {
font-size: 0.78rem;
color: var(--izs-color-muted);
font-style: normal;
margin: 0;
padding: 0.55rem 0.7rem;
background: rgba(184, 167, 229, 0.08);
border-radius: 10px;
border-left: 2px solid var(--izs-color-lavender);
}
.izs-app .izs-entry-card .izs-btn--primary,
.izs-app .izs-entry-card a.izs-btn--primary {
margin-top: auto;
align-self: stretch;
width: 100%;
justify-content: center;
font-size: 0.88rem;
padding: 0.7rem 1.25rem;
min-height: 40px;
}
.izs-grid--entry {
gap: var(--izs-space-5);
padding-block: var(--izs-space-4);
align-items: stretch;
}
/* =========================================
11. Product card
========================================= */
.izs-product-card__cover {
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--izs-color-pink) 0%, var(--izs-color-lavender) 100%);
border-radius: var(--izs-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.izs-product-card__title {
margin-bottom: 0;
}
.izs-product-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--izs-color-muted);
font-size: 0.95rem;
}
.izs-product-card__price {
font-family: var(--izs-font-heading);
font-size: 1.3rem;
color: var(--izs-color-plum);
}
/* --- Placeholder: karta produktu „Wkrótce" (ebooki, szkolenia w przygotowaniu) --- */
.izs-product-card--placeholder {
opacity: 0.82;
position: relative;
}
.izs-product-card--placeholder .izs-product-card__cover {
background:
repeating-linear-gradient(
135deg,
rgba(191, 167, 247, 0.45) 0px,
rgba(191, 167, 247, 0.45) 8px,
rgba(250, 193, 232, 0.35) 8px,
rgba(250, 193, 232, 0.35) 16px
),
linear-gradient(135deg, var(--izs-color-pink) 0%, var(--izs-color-lavender) 100%);
background-blend-mode: overlay;
}
.izs-product-card--placeholder:hover {
opacity: 1;
}
/* =========================================
12. Dla kogo / Dla kogo NIE
========================================= */
.izs-foryou__grid {
display: grid;
gap: var(--izs-space-5);
}
@media (min-width: 768px) {
.izs-foryou__grid {
grid-template-columns: 1fr 1fr;
}
}
.izs-foryou__col {
padding: var(--izs-space-6);
border-radius: var(--izs-radius-lg);
background: #fff;
border: 1px solid var(--izs-color-line);
}
.izs-foryou__col--yes {
border-left: 4px solid var(--izs-color-lavender-dark);
}
.izs-foryou__col--no {
border-left: 4px solid var(--izs-color-pink-dark);
}
.izs-foryou__col ul {
list-style: none;
padding: 0;
}
.izs-foryou__col--yes li,
.izs-foryou__col--no li {
position: relative;
padding-left: 1.6rem;
margin-bottom: var(--izs-space-3);
}
.izs-foryou__col--yes li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--izs-color-lavender-dark);
font-weight: 700;
}
.izs-foryou__col--no li::before {
content: "✕";
position: absolute;
left: 0;
color: var(--izs-color-pink-dark);
font-weight: 700;
}
/* =========================================
13. Testimonials
========================================= */
.izs-testimonials__grid {
display: grid;
gap: var(--izs-space-5);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.izs-testimonials__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.izs-testimonials__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.izs-testimonial {
background: #fff;
border-radius: var(--izs-radius-lg);
padding: var(--izs-space-6);
border: 1px solid var(--izs-color-line);
margin: 0;
}
.izs-testimonial__quote p {
font-family: var(--izs-font-heading);
font-size: 1.1rem;
line-height: 1.5;
color: var(--izs-color-ink);
margin-bottom: var(--izs-space-4);
}
.izs-testimonial__meta {
display: flex;
flex-direction: column;
gap: var(--izs-space-1);
font-size: 0.9rem;
}
.izs-testimonial__name {
font-weight: 600;
color: var(--izs-color-plum);
}
.izs-testimonial__program {
color: var(--izs-color-muted);
}
/* =========================================
14. Process — pionowy timeline (wszystkie breakpointy)
Pionowa linia po lewej, numery jako węzły, tytuł + opis obok.
Na desktopie lista jest wycentrowana z max-width i większymi numerami,
żeby nie rozjeżdżała się w wąską kolumnę po lewej.
========================================= */
.izs-process__list {
position: relative;
list-style: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0;
counter-reset: step;
max-width: 760px;
}
.izs-process__item {
position: relative;
padding: 0 0 var(--izs-space-6) 3.5rem;
background: none;
border: none;
border-radius: 0;
}
.izs-process__item:last-child {
padding-bottom: 0;
}
/* Pionowy konektor między numerami kolejnych kroków */
.izs-process__item::before {
content: "";
position: absolute;
left: 1.15rem;
top: 2.5rem;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom,
var(--izs-color-lavender) 0%,
rgba(184, 167, 229, 0.25) 100%);
z-index: 0;
}
.izs-process__item:last-child::before {
display: none;
}
.izs-process__number {
position: absolute;
left: 0;
top: 0;
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
background: #FFFFFF;
border: 2px solid var(--izs-color-lavender);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--izs-font-heading);
font-size: 0.92rem;
line-height: 1;
color: var(--izs-color-plum);
letter-spacing: 0.02em;
margin: 0;
z-index: 1;
box-shadow: 0 4px 12px rgba(74, 45, 82, 0.08);
transition:
transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
}
.izs-process__item:hover .izs-process__number {
transform: scale(1.1);
border-color: var(--izs-color-plum);
background: linear-gradient(135deg, var(--izs-color-lavender) 0%, var(--izs-color-lavender-dark) 100%);
color: #FFFFFF;
box-shadow: 0 8px 22px rgba(74, 45, 82, 0.22);
}
.izs-process__title {
margin: 0 0 0.35rem;
font-size: 1.1rem;
line-height: 1.25;
color: var(--izs-color-ink);
letter-spacing: -0.01em;
}
.izs-process__description {
margin: 0;
color: var(--izs-color-muted);
font-size: 0.95rem;
line-height: 1.55;
}
/* Desktop: zachowujemy pionowy układ, tylko powiększamy node'y i typografię */
@media (min-width: 1024px) {
.izs-process__item {
padding: 0 0 var(--izs-space-7) 4.5rem;
min-height: 3rem;
}
.izs-process__item::before {
left: 1.4rem;
top: 3rem;
}
.izs-process__number {
width: 2.8rem;
height: 2.8rem;
font-size: 1.05rem;
}
.izs-process__title {
font-size: 1.25rem;
padding-top: 0.25rem;
}
.izs-process__description {
font-size: 1rem;
line-height: 1.6;
}
}
/* =========================================
15. CTA section
========================================= */
.izs-cta {
position: relative;
padding-block: var(--izs-space-8);
background: linear-gradient(135deg, var(--izs-color-lavender) 0%, var(--izs-color-pink) 100%);
overflow: hidden;
isolation: isolate;
}
.izs-cta--newsletter {
background: linear-gradient(135deg, var(--izs-color-cream) 0%, #F2E9FC 100%);
}
/* =========================================
15a. CTA --default — biała sekcja, odpicowany wewnętrzny kontener
Białe tło sekcji, .izs-cta__inner jako ekskluzywna karta:
- subtelny gradient (krem → delikatna lawendowa poświata),
- podwójna obwódka (zewnętrzna ciemna 6% + wewnętrzny highlight),
- mandala ornament nad nagłówkiem,
- animacja shine (ukośny sweep highlightu co ~6 s).
========================================= */
.izs-cta--default {
padding-block: var(--izs-space-9);
background: #ffffff;
}
.izs-cta--default .izs-cta__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin-inline: auto;
padding: clamp(2.25rem, 1.6rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
border-radius: 24px;
background:
radial-gradient(120% 90% at 18% 0%, rgba(191, 167, 247, 0.22) 0%, transparent 58%),
radial-gradient(110% 90% at 82% 100%, rgba(250, 193, 232, 0.22) 0%, transparent 60%),
linear-gradient(180deg, #FCF9FE 0%, #FAF4F9 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 0 0 1px rgba(74, 45, 82, 0.06),
0 24px 48px -28px rgba(122, 95, 211, 0.28),
0 10px 24px -18px rgba(242, 167, 217, 0.22);
overflow: hidden;
isolation: isolate;
}
/* Delikatny wewnętrzny highlight (wytłoczenie) */
.izs-cta--default .izs-cta__inner::after {
content: "";
position: absolute;
inset: 1px;
border-radius: 23px;
border: 1px solid rgba(255, 255, 255, 0.65);
pointer-events: none;
z-index: 0;
}
/* Shine sweep — ukośny highlight przejeżdżający przez kartę */
.izs-cta--default .izs-cta__inner > * {
position: relative;
z-index: 2;
}
.izs-cta--default .izs-cta__inner {
--izs-shine-width: 35%;
}
.izs-cta--default .izs-cta__inner > .izs-cta__shine {
position: absolute;
top: -50%;
left: -60%;
width: var(--izs-shine-width);
height: 200%;
background: linear-gradient(
100deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.0) 42%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.0) 58%,
transparent 65%,
transparent 100%
);
transform: rotate(12deg) translateX(0);
animation: izsCtaShine 6.5s ease-in-out infinite;
pointer-events: none;
z-index: 1;
mix-blend-mode: screen;
}
@keyframes izsCtaShine {
0% { transform: rotate(12deg) translateX(-40%); opacity: 0; }
8% { opacity: 0.7; }
45% { transform: rotate(12deg) translateX(380%); opacity: 0.7; }
55%, 100% { transform: rotate(12deg) translateX(380%); opacity: 0; }
}
/* Mandala ornament nad nagłówkiem */
.izs-cta--default .izs-cta__inner > .izs-cta__heading::before {
content: "";
display: block;
margin: 0 auto var(--izs-space-4);
width: 56px;
height: 56px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%,
var(--izs-color-plum) 0%,
var(--izs-color-plum) 8%,
transparent 9%,
transparent 22%,
var(--izs-color-lavender-dark) 23%,
var(--izs-color-lavender-dark) 28%,
transparent 29%,
transparent 44%,
rgba(122, 95, 211, 0.6) 45%,
rgba(122, 95, 211, 0.6) 48%,
transparent 49%,
transparent 64%,
rgba(191, 167, 247, 0.5) 65%,
rgba(191, 167, 247, 0.5) 69%,
transparent 70%,
transparent 84%,
rgba(250, 193, 232, 0.55) 85%,
rgba(250, 193, 232, 0.55) 100%);
box-shadow:
0 0 0 1px rgba(191, 167, 247, 0.18),
0 0 24px rgba(191, 167, 247, 0.35);
animation: izsEtherealBreath 7s ease-in-out infinite;
transform-origin: center center;
}
@keyframes izsEtherealBreath {
0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
50% { transform: scale(1.06) rotate(180deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.izs-cta--default .izs-cta__inner > .izs-cta__heading::before,
.izs-cta--default .izs-cta__inner > .izs-cta__shine {
animation: none;
}
.izs-cta--default .izs-cta__inner > .izs-cta__shine {
display: none;
}
}
.izs-cta__inner {
max-width: 720px;
margin-inline: auto;
text-align: center;
}
.izs-cta--default .izs-cta__heading,
.izs-cta--discovery .izs-cta__heading,
.izs-cta--shop .izs-cta__heading {
color: var(--izs-color-plum);
}
.izs-cta--default .izs-cta__heading {
font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.75rem);
letter-spacing: -0.015em;
line-height: 1.12;
margin-bottom: var(--izs-space-4);
}
.izs-cta__lead {
font-size: 1.1rem;
color: var(--izs-color-plum);
margin-bottom: var(--izs-space-5);
}
.izs-cta--default .izs-cta__lead {
color: rgba(74, 45, 82, 0.78);
font-size: 1.08rem;
line-height: 1.6;
max-width: 560px;
margin-inline: auto;
margin-bottom: var(--izs-space-6);
}
.izs-cta--newsletter .izs-cta__lead {
color: var(--izs-color-muted);
}
.izs-cta__actions {
display: inline-flex;
flex-wrap: wrap;
gap: var(--izs-space-3);
justify-content: center;
}
.izs-cta--default .izs-btn--secondary {
border-color: var(--izs-color-plum);
color: var(--izs-color-plum);
}
/* =========================================
16. Newsletter form
========================================= */
.izs-newsletter {
max-width: 520px;
margin: 0 auto;
text-align: left;
}
.izs-newsletter__label {
display: block;
font-weight: 600;
margin-bottom: var(--izs-space-2);
color: var(--izs-color-plum);
}
.izs-newsletter__row {
display: flex;
gap: var(--izs-space-2);
flex-wrap: wrap;
}
.izs-newsletter__input {
flex: 1 1 200px;
min-width: 0;
padding: 0.9rem 1.2rem;
border-radius: 999px;
border: 1.5px solid var(--izs-color-line);
font-size: 1rem;
font-family: inherit;
}
.izs-newsletter__input:focus-visible {
border-color: var(--izs-color-lavender-dark);
}
.izs-newsletter__note {
font-size: 0.82rem;
color: var(--izs-color-muted);
margin-top: var(--izs-space-3);
}
.izs-newsletter__status:not(:empty) {
margin-top: var(--izs-space-3);
font-size: 0.9rem;
font-weight: 500;
}
/* =========================================
17. Contact page
========================================= */
.izs-contact__inner {
display: grid;
gap: var(--izs-space-7);
}
@media (min-width: 900px) {
.izs-contact__inner {
grid-template-columns: 1.4fr 1fr;
}
}
.izs-form__field {
margin-bottom: var(--izs-space-4);
}
.izs-form__field label {
display: block;
font-weight: 500;
margin-bottom: var(--izs-space-2);
color: var(--izs-color-ink);
}
.izs-form__field input[type="text"],
.izs-form__field input[type="email"],
.izs-form__field textarea {
width: 100%;
padding: 0.9rem 1.1rem;
border: 1.5px solid var(--izs-color-line);
border-radius: var(--izs-radius-md);
font-size: 1rem;
font-family: inherit;
background: #fff;
}
.izs-form__field textarea {
resize: vertical;
min-height: 150px;
}
.izs-form__field input:focus-visible,
.izs-form__field textarea:focus-visible {
border-color: var(--izs-color-lavender-dark);
}
.izs-form__field--checkbox label {
display: flex;
gap: var(--izs-space-2);
align-items: flex-start;
font-weight: 400;
font-size: 0.95rem;
}
.izs-form__field--checkbox input {
margin-top: 0.2rem;
}
.izs-form__status {
margin-top: var(--izs-space-3);
font-weight: 500;
}
.izs-form__status--success {
color: #2E7D32;
}
.izs-form__status--error {
color: #B54040;
}
.izs-contact__meta {
display: grid;
gap: var(--izs-space-4);
}
.izs-contact__meta dt {
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--izs-color-muted);
margin-bottom: var(--izs-space-1);
}
.izs-contact__meta dd {
margin: 0;
font-weight: 500;
color: var(--izs-color-plum);
}
/* =========================================
18. FAQ
========================================= */
.izs-faq {
display: grid;
gap: var(--izs-space-3);
}
.izs-faq__item {
background: #fff;
border-radius: var(--izs-radius-md);
border: 1px solid var(--izs-color-line);
overflow: hidden;
}
.izs-faq__question {
padding: var(--izs-space-4) var(--izs-space-5);
font-weight: 600;
font-size: 1.02rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: var(--izs-space-3);
}
.izs-faq__question::-webkit-details-marker {
display: none;
}
.izs-faq__question::after {
content: "+";
margin-left: auto;
color: var(--izs-color-lavender-dark);
font-weight: 700;
font-size: 1.3rem;
transition: transform 0.2s ease;
}
.izs-faq__item[open] .izs-faq__question::after {
transform: rotate(45deg);
}
.izs-faq__answer {
padding: 0 var(--izs-space-5) var(--izs-space-4);
color: var(--izs-color-muted);
}
.izs-faq__category-tag {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
background: var(--izs-color-pink);
color: var(--izs-color-plum);
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-weight: 600;
}
.izs-faq-filter {
display: flex;
flex-wrap: wrap;
gap: var(--izs-space-2);
margin-bottom: var(--izs-space-5);
}
.izs-faq-filter__btn {
padding: 0.5rem 1rem;
border-radius: 999px;
background: #fff;
border: 1.5px solid var(--izs-color-line);
color: var(--izs-color-ink);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.izs-faq-filter__btn:hover,
.izs-faq-filter__btn:focus-visible {
border-color: var(--izs-color-lavender-dark);
}
.izs-faq-filter__btn.is-active {
background: var(--izs-color-plum);
color: #fff;
border-color: var(--izs-color-plum);
}
.izs-faq__item.is-hidden {
display: none;
}
/* =========================================
19. Tables, lists, prose
========================================= */
.izs-prose__inner {
max-width: 820px;
margin-inline: auto;
}
.izs-prose__inner--center {
text-align: center;
}
/* =========================================
18a. About → „Moja historia" — układ 2-kolumnowy
Tekst po lewej, portretowe zdjęcie po prawej z sticky.
Na <860px zwija się w kolumnę i wycentrowanane zdjęcie.
========================================= */
.izs-about-story__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
align-items: start;
}
.izs-about-story__content > *:first-child {
margin-top: 0;
}
.izs-about-story__content p {
margin: 0 0 1rem;
}
.izs-about-story__content p:last-child {
margin-bottom: 0;
}
.izs-about-story__media {
position: sticky;
top: calc(var(--hdr-height, 72px) + 24px);
display: flex;
justify-content: center;
}
.izs-about-story__figure {
margin: 0;
width: 100%;
max-width: 420px;
border-radius: 20px;
overflow: hidden;
background: var(--izs-color-pink, #FAC1E8);
box-shadow:
0 8px 32px rgba(74, 45, 82, 0.08),
0 24px 60px rgba(250, 193, 232, 0.2);
aspect-ratio: 1120 / 1240;
}
.izs-about-story__figure picture,
.izs-about-story__figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
@media (max-width: 860px) {
.izs-about-story__inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.izs-about-story__media {
position: static;
top: auto;
order: -1;
}
.izs-about-story__figure {
max-width: 320px;
}
}
/* =========================================
19a. Google Reviews — slider z opiniami wizytówki
========================================= */
.izs-google-reviews {
position: relative;
}
.izs-google-reviews__badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.9rem;
margin: 0 auto var(--izs-space-4);
background: #FFFFFF;
border: 1px solid rgba(74, 45, 82, 0.08);
border-radius: 999px;
box-shadow: 0 2px 10px rgba(74, 45, 82, 0.06);
}
.izs-google-reviews__logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
.izs-google-reviews__badge-score {
font-family: var(--izs-font-heading);
font-size: 1.2rem;
line-height: 1;
color: var(--izs-color-ink);
letter-spacing: -0.01em;
}
.izs-google-reviews__badge-stars {
display: inline-flex;
align-items: center;
font-size: 1rem;
letter-spacing: 0.05em;
}
.izs-google-reviews__badge-count {
font-size: 0.85rem;
color: var(--izs-color-muted);
white-space: nowrap;
}
.izs-google-reviews__star {
line-height: 1;
}
.izs-google-reviews__star--full {
color: #F5B400;
}
.izs-google-reviews__star--half {
background: linear-gradient(90deg, #F5B400 50%, rgba(74, 45, 82, 0.15) 50%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.izs-google-reviews__star--empty {
color: rgba(74, 45, 82, 0.15);
}
/* ----- Slider ----- */
.izs-reviews-slider {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(0.5rem, 0.25rem + 1vw, 1.25rem);
margin-top: var(--izs-space-6);
}
.izs-reviews-slider__nav {
flex-shrink: 0;
width: 44px;
height: 44px;
border: 1px solid rgba(74, 45, 82, 0.12);
border-radius: 50%;
background: #FFFFFF;
color: var(--izs-color-plum);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(74, 45, 82, 0.06);
padding: 0;
}
.izs-reviews-slider__nav:hover,
.izs-reviews-slider__nav:focus-visible {
background: var(--izs-color-lavender-dark);
color: #FFFFFF;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(74, 45, 82, 0.16);
}
.izs-reviews-slider__nav[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.izs-reviews-slider__viewport {
overflow: hidden;
border-radius: 20px;
}
.izs-reviews-slider__viewport:focus-visible {
outline: 2px solid var(--izs-color-lavender-dark);
outline-offset: 4px;
}
.izs-reviews-slider__track {
list-style: none;
padding: 0;
margin: 0;
display: flex;
transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
will-change: transform;
}
.izs-reviews-slider__slide {
/* Szerokość slajdu jest ustawiana inline przez JS (100% / visibleCount).
Tutaj tylko domyślna wartość na wypadek braku JS + reset box-sizing. */
flex: 0 0 100%;
box-sizing: border-box;
min-width: 0;
padding: 6px; /* daje oddech na cień karty podczas przewijania */
}
/* ----- Karta opinii (styl Google) ----- */
.izs-review-card {
background: #FFFFFF;
border: 1px solid rgba(74, 45, 82, 0.08);
border-radius: 18px;
padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
box-shadow:
0 1px 2px rgba(74, 45, 82, 0.03),
0 14px 36px rgba(74, 45, 82, 0.06);
display: flex;
flex-direction: column;
gap: 0.9rem;
min-height: 260px;
}
.izs-review-card__head {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.izs-review-card__avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
line-height: 1;
font-family: var(--izs-font-body);
}
.izs-review-card__who {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.izs-review-card__name {
font-weight: 600;
color: var(--izs-color-ink);
font-size: 1rem;
}
.izs-review-card__meta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--izs-color-muted);
flex-wrap: wrap;
}
.izs-review-card__badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: rgba(26, 115, 232, 0.08);
color: #1A73E8;
font-size: 0.72rem;
font-weight: 600;
}
.izs-review-card__g {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-top: 2px;
opacity: 0.85;
}
.izs-review-card__rating {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 1.05rem;
letter-spacing: 0.05em;
}
.izs-review-card__when {
margin-left: 0.35rem;
font-size: 0.82rem;
color: var(--izs-color-muted);
letter-spacing: 0;
}
.izs-review-card__text {
margin: 0;
color: var(--izs-color-ink);
font-size: 0.98rem;
line-height: 1.65;
white-space: pre-line;
}
@media (max-width: 768px) {
.izs-reviews-slider {
grid-template-columns: minmax(0, 1fr);
}
.izs-reviews-slider__nav {
display: none;
}
.izs-review-card {
min-height: 0;
}
}
.izs-dot-list,
.izs-check-list {
list-style: none;
padding: 0;
}
.izs-dot-list li,
.izs-check-list li {
padding-left: 2rem;
position: relative;
margin-bottom: var(--izs-space-3);
}
.izs-dot-list li::before {
content: "";
position: absolute;
left: 0.3rem;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--izs-color-pink-dark);
}
.izs-check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--izs-color-lavender-dark);
font-weight: 700;
font-size: 1.1rem;
}
/* =========================================
Wartości — prezentacja spirytualna.
Każda wartość jako „talizman": miękka powierzchnia z radialnymi poświatami,
ornament mandali (koncentryczne kręgi CSS) jako symbol, serif dla intro.
========================================= */
.izs-values {
list-style: none;
padding: 0;
margin: var(--izs-space-5) 0;
display: flex;
flex-direction: column;
gap: var(--izs-space-4);
counter-reset: value-item;
}
.izs-values li {
position: relative;
counter-increment: value-item;
padding: var(--izs-space-5) var(--izs-space-5) var(--izs-space-5) calc(var(--izs-space-5) + 3.5rem);
background:
radial-gradient(120% 90% at 0% 0%, rgba(245, 215, 227, 0.28) 0%, transparent 55%),
radial-gradient(130% 80% at 100% 100%, rgba(184, 167, 229, 0.18) 0%, transparent 60%),
#FFFDF9;
border-radius: 22px;
border: 1px solid rgba(184, 167, 229, 0.22);
box-shadow:
0 1px 2px rgba(138, 125, 184, 0.04),
0 10px 30px rgba(138, 125, 184, 0.08);
font-family: var(--izs-font-body);
font-size: 0.98rem;
line-height: 1.65;
color: var(--izs-color-ink);
overflow: hidden;
isolation: isolate;
transition:
transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.35s ease;
}
.izs-values li:hover {
transform: translateY(-3px);
border-color: rgba(184, 167, 229, 0.4);
box-shadow:
0 2px 4px rgba(138, 125, 184, 0.06),
0 18px 48px rgba(138, 125, 184, 0.16);
}
/* Ornament mandali — koncentryczne kręgi, CSS-only.
Ciemna kropka w środku → obręcz → aureola → miękki disc. */
.izs-values li::before {
content: "";
position: absolute;
left: var(--izs-space-5);
top: calc(var(--izs-space-5) + 0.05rem);
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%,
var(--izs-color-plum) 0%,
var(--izs-color-plum) 10%,
transparent 11%,
transparent 28%,
var(--izs-color-lavender-dark) 29%,
var(--izs-color-lavender-dark) 35%,
transparent 36%,
transparent 56%,
rgba(138, 125, 184, 0.55) 57%,
rgba(138, 125, 184, 0.55) 61%,
transparent 62%,
transparent 82%,
rgba(184, 167, 229, 0.35) 83%,
rgba(184, 167, 229, 0.35) 100%);
box-shadow:
0 0 0 1px rgba(184, 167, 229, 0.12),
0 0 24px rgba(184, 167, 229, 0.3);
z-index: 1;
animation: izsMandalaBreath 7s ease-in-out infinite;
transform-origin: center center;
}
.izs-values li:nth-child(2n)::before {
animation-delay: -1.5s;
}
.izs-values li:nth-child(3n)::before {
animation-delay: -3s;
}
@keyframes izsMandalaBreath {
0%, 100% {
transform: scale(1);
opacity: 0.82;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
/* Miękka otoczka — subtelna poświata w tle */
.izs-values li::after {
content: "";
position: absolute;
right: -20%;
top: -25%;
width: 55%;
height: 150%;
background: radial-gradient(ellipse at center,
rgba(245, 215, 227, 0.22) 0%,
transparent 60%);
pointer-events: none;
z-index: 0;
}
.izs-values strong {
display: block;
font-family: var(--izs-font-heading);
font-weight: 400;
font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.25rem);
color: var(--izs-color-plum);
margin: 0 0 0.4rem;
letter-spacing: -0.005em;
line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) {
.izs-values li::before {
animation: none;
}
}
.izs-table-wrap {
overflow-x: auto;
border-radius: var(--izs-radius-md);
background: #fff;
border: 1px solid var(--izs-color-line);
}
.izs-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.izs-table th,
.izs-table td {
padding: var(--izs-space-4);
text-align: left;
border-bottom: 1px solid var(--izs-color-line);
font-size: 0.95rem;
}
.izs-table thead th {
background: var(--izs-color-cream);
font-weight: 600;
color: var(--izs-color-plum);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.8rem;
}
.izs-table tbody th {
font-weight: 600;
color: var(--izs-color-ink);
}
/* =========================================
19a. Tabela --packages — wypasiona wersja dla porównania pakietów
========================================= */
.izs-table-wrap--packages {
border: 1px solid rgba(74, 45, 82, 0.08);
border-radius: 22px;
background: #fff;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 24px 48px -32px rgba(122, 95, 211, 0.22),
0 8px 18px -14px rgba(242, 167, 217, 0.18);
overflow: hidden;
}
.izs-table--packages {
min-width: 780px;
}
.izs-table--packages thead th {
background: linear-gradient(180deg, #FBF7FE 0%, #F5ECFB 100%);
color: var(--izs-color-plum);
font-size: 0.72rem;
letter-spacing: 0.16em;
padding-block: 1.1rem;
border-bottom: 1px solid rgba(74, 45, 82, 0.08);
}
.izs-table--packages tbody tr {
transition: background 0.25s ease, transform 0.25s ease;
}
.izs-table--packages tbody tr:hover {
background: rgba(191, 167, 247, 0.05);
}
.izs-table--packages th,
.izs-table--packages td {
padding: 1.15rem 1.25rem;
border-bottom: 1px solid rgba(74, 45, 82, 0.06);
vertical-align: middle;
}
.izs-table--packages tbody tr:last-child th,
.izs-table--packages tbody tr:last-child td {
border-bottom: none;
}
.izs-table__name {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.izs-table__name-text {
font-family: var(--izs-font-heading, "Fraunces", Georgia, serif);
font-size: 1.08rem;
font-weight: 400;
color: var(--izs-color-plum);
letter-spacing: -0.005em;
}
.izs-table__badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--izs-color-lavender-dark) 0%, var(--izs-color-plum) 100%);
color: #fff;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
box-shadow: 0 6px 14px -6px rgba(122, 95, 211, 0.55);
white-space: nowrap;
}
.izs-table__badge-icon {
flex: 0 0 auto;
color: #FAC1E8;
filter: drop-shadow(0 0 4px rgba(250, 193, 232, 0.6));
}
.izs-table__badge--soft {
background: rgba(191, 167, 247, 0.15);
color: var(--izs-color-lavender-dark);
box-shadow: none;
text-transform: none;
letter-spacing: 0.05em;
font-weight: 500;
}
.izs-table__col-icon,
.izs-table--packages th.izs-table__col-icon,
.izs-table--packages td.izs-table__col-icon {
text-align: center;
width: 1%;
white-space: nowrap;
}
.izs-table__col-price,
.izs-table--packages th.izs-table__col-price,
.izs-table--packages td.izs-table__col-price {
text-align: right;
white-space: nowrap;
}
.izs-table__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(191, 167, 247, 0.18) 0%, rgba(250, 193, 232, 0.22) 100%);
color: var(--izs-color-lavender-dark);
box-shadow: 0 0 0 1px rgba(122, 95, 211, 0.15);
}
.izs-table__dash {
display: inline-block;
color: rgba(74, 45, 82, 0.28);
font-weight: 500;
}
.izs-table__price {
font-family: var(--izs-font-heading, "Fraunces", Georgia, serif);
font-size: 1.25rem;
color: var(--izs-color-plum);
letter-spacing: -0.01em;
}
/* Wiersz bestsellera — wyróżniony subtelnie, ale zauważalnie */
.izs-table__row--bestseller {
position: relative;
background:
linear-gradient(90deg,
rgba(122, 95, 211, 0.06) 0%,
rgba(250, 193, 232, 0.06) 100%);
}
.izs-table__row--bestseller:hover {
background:
linear-gradient(90deg,
rgba(122, 95, 211, 0.10) 0%,
rgba(250, 193, 232, 0.10) 100%);
}
.izs-table__row--bestseller th,
.izs-table__row--bestseller td {
border-top: 1px solid rgba(122, 95, 211, 0.18);
border-bottom: 1px solid rgba(122, 95, 211, 0.18);
}
.izs-table__row--bestseller th:first-child {
position: relative;
box-shadow: inset 3px 0 0 0 var(--izs-color-lavender-dark);
}
.izs-table__row--bestseller .izs-table__name-text {
color: var(--izs-color-lavender-dark);
}
.izs-table__row--bestseller .izs-table__check {
background: linear-gradient(135deg, rgba(122, 95, 211, 0.22) 0%, rgba(242, 167, 217, 0.28) 100%);
color: var(--izs-color-plum);
box-shadow: 0 0 0 1px rgba(122, 95, 211, 0.25);
}
.izs-table__row--bestseller .izs-table__price {
color: var(--izs-color-lavender-dark);
font-weight: 500;
}
@media (max-width: 640px) {
.izs-table__name {
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.izs-table--packages th,
.izs-table--packages td {
padding: 0.95rem 0.8rem;
}
}
/* =========================================
20. About / prose specific
========================================= */
.izs-about-short__inner {
display: grid;
gap: var(--izs-space-7);
align-items: center;
}
@media (min-width: 900px) {
.izs-about-short__inner {
grid-template-columns: 1fr 1.4fr;
}
}
.izs-about-short__photo {
aspect-ratio: 3 / 4;
border-radius: var(--izs-radius-xl);
background: linear-gradient(135deg, var(--izs-color-pink) 0%, var(--izs-color-lavender) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-style: italic;
font-size: 0.9rem;
}
/* =========================================
21. Price block (na package-detail)
========================================= */
.izs-price-block {
display: flex;
align-items: baseline;
gap: var(--izs-space-3);
flex-wrap: wrap;
margin-bottom: var(--izs-space-5);
}
.izs-price-block__original {
text-decoration: line-through;
color: var(--izs-color-muted);
font-size: 1.2rem;
}
.izs-price-block__current {
font-family: var(--izs-font-heading);
font-size: 2.6rem;
color: var(--izs-color-plum);
line-height: 1;
}
.izs-price-block__note,
.izs-price-block__installments {
color: var(--izs-color-lavender-dark);
font-weight: 600;
font-size: 0.95rem;
width: 100%;
}
/* --- Para przycisków (hybrid CTA na stronie pakietu) --- */
.izs-btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--izs-space-3);
align-items: center;
margin-top: var(--izs-space-2);
}
.izs-btn-row .izs-btn {
flex: 0 1 auto;
}
@media (max-width: 560px) {
.izs-btn-row {
flex-direction: column;
align-items: stretch;
gap: var(--izs-space-2);
}
.izs-btn-row .izs-btn {
width: 100%;
justify-content: center;
}
}
.izs-cta-microcopy {
margin-top: var(--izs-space-3);
font-size: 0.92rem;
color: var(--izs-color-muted);
font-style: italic;
max-width: 42ch;
}
/* =========================================
22. Bullet card (landing hipnoza)
========================================= */
.izs-bullet-card {
background: #fff;
border: 1px solid var(--izs-color-line);
border-radius: var(--izs-radius-lg);
padding: var(--izs-space-6);
}
.izs-bullet-card h3 {
color: var(--izs-color-plum);
margin-bottom: var(--izs-space-2);
}
.izs-bullet-card p {
color: var(--izs-color-muted);
font-size: 0.95rem;
margin: 0;
}
.izs-myth-list {
display: grid;
gap: var(--izs-space-3);
margin: 0;
}
.izs-myth-list div {
background: #fff;
border-radius: var(--izs-radius-md);
padding: var(--izs-space-4) var(--izs-space-5);
border: 1px solid var(--izs-color-line);
}
.izs-myth-list dt {
font-weight: 600;
color: var(--izs-color-plum);
margin-bottom: var(--izs-space-1);
}
.izs-myth-list dd {
margin: 0;
color: var(--izs-color-muted);
}
/* =========================================
22b. Uwagi ostrzegawcze (przeciwwskazania, tryb)
========================================= */
.izs-meta-pill {
display: inline-block;
padding: 0.55rem 1rem;
background: var(--izs-color-cream);
border: 1px solid var(--izs-color-line);
border-radius: 999px;
color: var(--izs-color-plum);
font-size: 0.9rem;
margin: 0 0 var(--izs-space-3) 0;
}
.izs-note--warn,
.izs-entry-card__note--warn {
background: #FFF5EA;
border-left: 3px solid #E5A663;
color: #5B3B0C;
padding: 0.75rem 1rem;
border-radius: 4px;
font-size: 0.9rem;
margin-top: var(--izs-space-3);
}
/* =========================================
22c. Zdjęcie portretowe w hero
========================================= */
.izs-hero__photo--portrait {
width: 100%;
max-width: 420px;
aspect-ratio: 4 / 5;
border-radius: var(--izs-radius-lg);
overflow: hidden;
box-shadow: 0 24px 60px rgba(74, 45, 82, 0.18);
}
.izs-hero__photo--portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =========================================
22d. Prywatnie — kafelki pasji
========================================= */
.izs-private-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 1.25rem;
}
.izs-private-tile {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 1.1rem;
border-radius: 999px;
background: var(--izs-color-surface-soft, #f2e9fc);
color: var(--izs-color-text, #2a1f3d);
font-weight: 500;
font-size: 0.95rem;
border: 1px solid rgba(191, 167, 247, 0.35);
box-shadow: 0 2px 6px rgba(191, 167, 247, 0.18);
}
/* =========================================
22f. Blog latest — [izs_blog_latest]
========================================= */
.izs-blog-latest .izs-section__head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.izs-blog-latest__link {
color: var(--izs-color-lavender-dark, #7a5fd3);
font-weight: 600;
text-decoration: none;
font-size: 0.95rem;
}
.izs-blog-latest__link:hover {
color: var(--izs-color-plum, #4a2d52);
}
.izs-grid--blog {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.izs-blog-tile {
display: flex;
flex-direction: column;
background: var(--izs-color-surface, #ffffff);
border-radius: var(--izs-radius-lg, 20px);
overflow: hidden;
box-shadow: 0 4px 16px rgba(74, 45, 82, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.izs-blog-tile:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(191, 167, 247, 0.25);
}
.izs-blog-tile__thumb {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--izs-color-surface-soft, #f2e9fc);
}
.izs-blog-tile__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.izs-blog-tile:hover .izs-blog-tile__thumb img {
transform: scale(1.04);
}
.izs-blog-tile__body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.15rem 1.3rem 1.4rem;
flex-grow: 1;
}
.izs-blog-tile__category {
align-self: flex-start;
padding: 0.2rem 0.65rem;
border-radius: 999px;
background: var(--izs-color-surface-soft, #f2e9fc);
color: var(--izs-color-lavender-dark, #7a5fd3);
text-decoration: none;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.izs-blog-tile__title {
margin: 0;
font-size: 1.2rem;
line-height: 1.3;
}
.izs-blog-tile__title a {
color: var(--izs-color-text, #2a1f3d);
text-decoration: none;
}
.izs-blog-tile__title a:hover {
color: var(--izs-color-lavender-dark, #7a5fd3);
}
.izs-blog-tile__date {
font-size: 0.8rem;
color: rgba(42, 31, 61, 0.65);
}
.izs-blog-tile__excerpt {
margin: 0;
color: var(--izs-color-text, #2a1f3d);
line-height: 1.55;
font-size: 0.95rem;
flex-grow: 1;
}
.izs-blog-tile__read {
align-self: flex-start;
margin-top: 0.25rem;
color: var(--izs-color-lavender-dark, #7a5fd3);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
}
.izs-blog-tile__read:hover {
color: var(--izs-color-plum, #4a2d52);
}
/* =========================================
22e. Regulamin — [izs_terms]
Layout: boczne menu (sticky) na desktopie, accordion na mobile.
========================================= */
.izs-terms-updated {
margin-top: var(--izs-space-4);
font-size: 0.9rem;
color: var(--izs-color-muted);
}
.izs-terms-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--izs-space-6);
align-items: start;
}
@media (min-width: 1024px) {
.izs-terms-layout {
grid-template-columns: 260px minmax(0, 1fr);
gap: var(--izs-space-8);
}
}
/* --- Boczne menu / spis treści ---
Mobile: sticky, zwijany panel przypięty pod górną krawędź.
Desktop (>=1024px): stała, zawsze rozwinięta karta w bocznej kolumnie. --- */
.izs-terms-nav {
display: block;
position: sticky;
top: 0;
z-index: 20;
margin-bottom: var(--izs-space-5);
}
.izs-terms-nav__inner {
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid var(--izs-color-line);
border-radius: var(--izs-radius-md);
box-shadow: var(--izs-shadow-sm);
}
.izs-terms-nav__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--izs-space-3);
margin: 0;
padding: var(--izs-space-4) var(--izs-space-5);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--izs-color-muted);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.izs-terms-nav__title::-webkit-details-marker {
display: none;
}
.izs-terms-nav__chevron {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-right: 2px solid var(--izs-color-lavender-dark);
border-bottom: 2px solid var(--izs-color-lavender-dark);
transform: rotate(45deg);
transition: transform 0.25s ease;
}
.izs-terms-nav__inner[open] .izs-terms-nav__chevron {
transform: rotate(-135deg);
}
.izs-terms-nav__list {
list-style: none;
margin: 0;
padding: 0 var(--izs-space-4) var(--izs-space-4);
display: flex;
flex-direction: column;
gap: 2px;
max-height: 60vh;
overflow-y: auto;
}
@media (min-width: 1024px) {
.izs-terms-nav {
top: var(--izs-space-6);
align-self: start;
margin-bottom: 0;
z-index: auto;
}
.izs-terms-nav__inner {
padding: var(--izs-space-3) 0;
background: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: var(--izs-radius-lg);
}
.izs-terms-nav__title {
padding: var(--izs-space-2) var(--izs-space-5);
cursor: default;
pointer-events: none;
}
.izs-terms-nav__chevron {
display: none;
}
.izs-terms-nav__list {
padding: var(--izs-space-2) var(--izs-space-5) var(--izs-space-2);
max-height: none;
overflow: visible;
}
/* Na desktopie lista zawsze widoczna, nawet gdy jest zamkniety. */
.izs-terms-nav__inner:not([open]) .izs-terms-nav__list {
display: flex;
}
}
.izs-app .izs-terms-nav__link {
display: block;
padding: 0.5rem 0.75rem;
border-left: 2px solid transparent;
border-radius: 0 var(--izs-radius-sm) var(--izs-radius-sm) 0;
color: var(--izs-color-muted);
text-decoration: none;
font-size: 0.92rem;
line-height: 1.35;
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.izs-terms-nav__link:hover {
color: var(--izs-color-plum);
background: var(--izs-color-cream);
}
.izs-terms-nav__link.is-active {
color: var(--izs-color-lavender-dark);
background: var(--izs-color-line);
border-left-color: var(--izs-color-lavender-dark);
font-weight: 600;
}
/* --- Treść / sekcje --- */
.izs-terms-body {
min-width: 0;
}
.izs-terms-section {
background: #fff;
border: 1px solid var(--izs-color-line);
border-radius: var(--izs-radius-lg);
box-shadow: var(--izs-shadow-sm);
padding: 0 var(--izs-space-6);
margin-bottom: var(--izs-space-5);
overflow: hidden;
scroll-margin-top: 5rem;
}
.izs-terms-section__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--izs-space-4);
padding: var(--izs-space-5) 0;
cursor: pointer;
list-style: none;
}
.izs-terms-section__summary::-webkit-details-marker {
display: none;
}
.izs-terms-section__title {
font-family: var(--izs-font-heading);
font-size: 1.25rem;
line-height: 1.25;
color: var(--izs-color-ink);
}
.izs-terms-section__chevron {
flex: 0 0 auto;
width: 22px;
height: 22px;
position: relative;
}
.izs-terms-section__chevron::before,
.izs-terms-section__chevron::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 2px;
border-radius: 2px;
background: var(--izs-color-lavender-dark);
transition: transform 0.25s ease;
}
.izs-terms-section__chevron::before {
left: 2px;
transform: translateY(-50%) rotate(45deg);
}
.izs-terms-section__chevron::after {
right: 2px;
transform: translateY(-50%) rotate(-45deg);
}
.izs-terms-section[open] .izs-terms-section__chevron::before {
transform: translateY(-50%) rotate(-45deg);
}
.izs-terms-section[open] .izs-terms-section__chevron::after {
transform: translateY(-50%) rotate(45deg);
}
.izs-terms-section__body {
padding-top: var(--izs-space-5);
padding-bottom: var(--izs-space-6);
border-top: 1px solid var(--izs-color-line);
}
.izs-terms-section__body > :last-child {
margin-bottom: 0;
}
/* Desktop: sekcje zawsze rozwinięte, summary pełni rolę nagłówka */
@media (min-width: 1024px) {
.izs-terms-section__summary {
cursor: default;
pointer-events: none;
}
.izs-terms-section__chevron {
display: none;
}
.izs-terms-section:not([open]) .izs-terms-section__body {
display: block;
}
}
/* --- Proza wewnątrz sekcji --- */
.izs-terms-p {
margin: 0 0 var(--izs-space-4);
color: var(--izs-color-ink);
line-height: 1.65;
}
.izs-terms-subheading {
margin: var(--izs-space-5) 0 var(--izs-space-3);
font-family: var(--izs-font-heading);
font-size: 1.05rem;
color: var(--izs-color-plum);
}
.izs-terms-bullets {
margin: 0 0 var(--izs-space-4);
padding-left: 1.2rem;
color: var(--izs-color-ink);
line-height: 1.6;
}
.izs-terms-bullets li {
margin-bottom: 0.4rem;
}
/* --- Klauzule (numeracja ciągła) --- */
.izs-terms-clauses {
list-style: none;
margin: 0 0 var(--izs-space-4);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--izs-space-3);
}
.izs-terms-clause {
display: grid;
grid-template-columns: 2rem 1fr;
gap: var(--izs-space-3);
padding: var(--izs-space-4);
background: var(--izs-color-cream);
border: 1px solid var(--izs-color-line);
border-left: 3px solid var(--izs-color-lavender-dark);
border-radius: var(--izs-radius-md);
}
.izs-terms-clause__no {
font-weight: 700;
color: var(--izs-color-lavender-dark);
font-variant-numeric: tabular-nums;
}
.izs-terms-clause__text {
color: var(--izs-color-ink);
line-height: 1.6;
}
/* --- Callouty --- */
.izs-terms-callout {
padding: var(--izs-space-5);
margin: 0 0 var(--izs-space-4);
border-radius: var(--izs-radius-md);
background: var(--izs-color-line);
border: 1px solid var(--izs-color-line-strong);
}
.izs-terms-callout__heading {
margin: 0 0 var(--izs-space-2);
font-size: 1.1rem;
color: var(--izs-color-lavender-dark);
}
.izs-terms-callout p {
margin: 0;
line-height: 1.6;
}
.izs-terms-callout--company {
background: linear-gradient(135deg, rgba(191, 167, 247, 0.16), rgba(250, 193, 232, 0.16));
border-color: var(--izs-color-line-strong);
}
.izs-terms-callout--warn {
background: #fff6f1;
border-color: rgba(220, 120, 80, 0.28);
}
.izs-terms-callout--warn .izs-terms-callout__heading {
color: #b3572a;
}
/* --- Podpisy --- */
.izs-terms-signatures-wrap {
margin-top: var(--izs-space-6);
}
.izs-terms-signatures__note {
font-size: 0.9rem;
color: var(--izs-color-muted);
margin: 0 0 var(--izs-space-5);
}
.izs-terms-signatures {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--izs-space-6);
padding-top: var(--izs-space-5);
border-top: 1px dashed var(--izs-color-line-strong);
}
.izs-terms-signatures__slot {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.izs-terms-signatures__line {
display: block;
height: 1px;
margin-top: var(--izs-space-6);
background: rgba(42, 31, 61, 0.35);
}
.izs-terms-signatures__label {
font-size: 0.85rem;
color: rgba(42, 31, 61, 0.7);
}
@media (max-width: 560px) {
.izs-terms-signatures {
grid-template-columns: 1fr;
gap: var(--izs-space-5);
}
.izs-terms-clause {
grid-template-columns: 1.6rem 1fr;
padding: var(--izs-space-3);
}
.izs-terms-section {
padding: 0 var(--izs-space-4);
}
}
/* =========================================
23. Animacje reduced-motion
========================================= */
@media (prefers-reduced-motion: reduce) {
.izs-app *,
.izs-app *::before,
.izs-app *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* =========================================
24. Ticker — przewijany pasek hasel (prototyp v3)
========================================= */
.izs-ticker {
padding: 26px 0;
border-top: 1px solid var(--izs-color-line);
border-bottom: 1px solid var(--izs-color-line);
overflow: hidden;
white-space: nowrap;
background: var(--izs-color-cream);
position: relative;
}
.izs-ticker__track {
display: inline-flex;
gap: 48px;
animation: izsTicker 36s linear infinite;
font-family: var(--izs-font-heading);
font-size: 1.75rem;
color: var(--izs-color-ink);
letter-spacing: -0.015em;
will-change: transform;
}
.izs-ticker__track span {
display: inline-flex;
align-items: center;
gap: 48px;
}
.izs-ticker__track span::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--izs-color-lavender);
flex-shrink: 0;
}
@keyframes izsTicker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* =========================================
25. Pakiety — pasek zaufania, pomoc w wyborze, CTA śródstronicowy
========================================= */
.izs-section--tight {
padding-block: var(--izs-space-5);
}
/* --- Pasek zaufania --- */
.izs-app .izs-trust-strip {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--izs-color-line-strong);
border: 1px solid var(--izs-color-line-strong);
border-radius: var(--izs-radius-lg);
overflow: hidden;
}
@media (min-width: 880px) {
.izs-app .izs-trust-strip {
grid-template-columns: repeat(4, 1fr);
}
}
.izs-app .izs-trust-strip__item {
margin: 0;
padding: var(--izs-space-5);
background: var(--izs-color-cream);
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.izs-trust-strip__label {
font-family: var(--izs-font-mono);
font-size: 0.64rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--izs-color-lavender-dark);
}
.izs-trust-strip__value {
font-size: 0.95rem;
line-height: 1.45;
color: var(--izs-color-ink);
font-weight: 500;
}
/* --- Pomoc w wyborze --- */
.izs-choose__grid {
display: grid;
gap: var(--izs-space-5);
grid-template-columns: 1fr;
}
@media (min-width: 880px) {
.izs-choose__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.izs-choose__tile {
padding: var(--izs-space-6);
background: var(--izs-color-cream);
border: 1px solid var(--izs-color-line-strong);
border-radius: var(--izs-radius-lg);
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease, border-color 0.35s ease;
}
.izs-choose__tile:hover {
transform: translateY(-4px);
box-shadow: var(--izs-shadow-md);
border-color: var(--izs-color-lavender);
}
.izs-app .izs-choose__tag {
margin: 0;
font-family: var(--izs-font-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--izs-color-lavender-dark);
}
.izs-app .izs-choose__title {
margin: 0;
font-size: 1.3rem;
}
.izs-app .izs-choose__text {
margin: 0;
color: var(--izs-color-muted);
font-size: 0.96rem;
}
.izs-app .izs-choose__hint {
margin: auto 0 0;
padding-top: 0.4rem;
font-size: 0.86rem;
color: var(--izs-color-lavender-dark);
font-weight: 500;
}
.izs-app .izs-choose__hint a {
color: inherit;
text-decoration: none;
font-weight: 600;
}
.izs-app .izs-choose__hint a:hover {
color: var(--izs-color-plum);
}
/* --- CTA śródstronicowy na stronie pakietu --- */
.izs-package-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--izs-space-5);
padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
border-radius: var(--izs-radius-lg);
background:
radial-gradient(140% 120% at 100% 0%, rgba(191, 167, 247, 0.22) 0%, transparent 55%),
linear-gradient(165deg, var(--izs-color-plum) 0%, #2E1733 100%);
color: #F3EDF8;
}
.izs-package-cta__info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.izs-app .izs-package-cta__label {
margin: 0;
font-family: var(--izs-font-mono);
font-size: 0.66rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--izs-color-pink);
}
.izs-app .izs-package-cta__name {
margin: 0;
font-family: var(--izs-font-heading);
font-size: 1.5rem;
line-height: 1.1;
color: #FFFFFF;
}
.izs-app .izs-package-cta__price {
margin: 0.25rem 0 0;
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
}
.izs-package-cta__price-current {
font-family: var(--izs-font-heading);
font-size: 1.9rem;
line-height: 1;
color: #FFFFFF;
}
.izs-package-cta__price-note {
font-size: 0.85rem;
color: rgba(243, 237, 248, 0.72);
}
.izs-package-cta .izs-btn-row {
margin-top: 0;
}
.izs-app .izs-package-cta .izs-btn--secondary,
.izs-app .izs-package-cta a.izs-btn--secondary {
background: transparent;
border-color: rgba(243, 237, 248, 0.5);
color: #F3EDF8;
}
.izs-app .izs-package-cta .izs-btn--secondary:hover,
.izs-app .izs-package-cta .izs-btn--secondary:focus-visible,
.izs-app .izs-package-cta a.izs-btn--secondary:hover,
.izs-app .izs-package-cta a.izs-btn--secondary:focus-visible {
background: #FFFFFF;
color: var(--izs-color-plum);
border-color: #FFFFFF;
}
@media (max-width: 640px) {
.izs-package-cta {
flex-direction: column;
align-items: flex-start;
}
.izs-package-cta .izs-btn-row {
width: 100%;
}
}
/* =========================================
26. Pakiet — grupy korzyści jako wyróżnione karty
========================================= */
.izs-benefits__group {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
background:
radial-gradient(130% 100% at 0% 0%, rgba(191, 167, 247, 0.20) 0%, transparent 55%),
radial-gradient(130% 100% at 100% 100%, rgba(250, 193, 232, 0.20) 0%, transparent 55%),
linear-gradient(160deg, #FFFFFF 0%, var(--izs-color-cream) 100%);
border: 1px solid var(--izs-color-line-strong);
border-radius: var(--izs-radius-lg);
box-shadow: var(--izs-shadow-sm);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.4s ease, border-color 0.4s ease;
}
.izs-benefits__group > * {
position: relative;
z-index: 2;
}
.izs-benefits__group:hover {
transform: translateY(-4px);
box-shadow: var(--izs-shadow-md);
border-color: var(--izs-color-lavender);
}
/* Błysk przejeżdżający po karcie przy najechaniu */
.izs-benefits__group::after {
content: "";
position: absolute;
top: -60%;
left: -65%;
width: 45%;
height: 220%;
background: linear-gradient(100deg,
transparent 35%,
rgba(255, 255, 255, 0.5) 50%,
transparent 65%);
transform: rotate(10deg);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.izs-benefits__group:hover::after {
animation: izsBenefitsShine 0.95s ease-out;
}
@keyframes izsBenefitsShine {
0% { opacity: 0; transform: rotate(10deg) translateX(0); }
18% { opacity: 0.85; }
100% { opacity: 0; transform: rotate(10deg) translateX(620%); }
}
.izs-benefits__group + .izs-benefits__group {
margin-top: var(--izs-space-5);
}
.izs-app .izs-benefits__heading {
margin: 0;
font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
color: var(--izs-color-plum);
}
.izs-app .izs-benefits__lead {
margin: 0.5rem 0 0;
color: var(--izs-color-muted);
font-size: 0.97rem;
}
.izs-app .izs-benefits__list {
margin: var(--izs-space-4) 0 0;
padding: var(--izs-space-4) 0 0;
border-top: 1px solid var(--izs-color-line-strong);
}
@media (min-width: 720px) {
.izs-app .izs-benefits__list {
columns: 2;
column-gap: var(--izs-space-6);
}
.izs-benefits__list li {
break-inside: avoid;
}
}
/* =========================================
27. Tabela porównawcza — wiersz aktualnie przeglądanego pakietu
========================================= */
.izs-table__row--current {
background: linear-gradient(90deg, rgba(122, 95, 211, 0.10) 0%, rgba(250, 193, 232, 0.10) 100%);
}
.izs-table__row--current:hover {
background: linear-gradient(90deg, rgba(122, 95, 211, 0.15) 0%, rgba(250, 193, 232, 0.15) 100%);
}
.izs-table__row--current th,
.izs-table__row--current td {
border-top: 1px solid rgba(122, 95, 211, 0.32);
border-bottom: 1px solid rgba(122, 95, 211, 0.32);
}
.izs-table__row--current th:first-child {
box-shadow: inset 3px 0 0 0 var(--izs-color-lavender-dark);
}
.izs-table__row--current .izs-table__name-text {
color: var(--izs-color-lavender-dark);
}
.izs-table__badge--current {
background: linear-gradient(135deg, var(--izs-color-pink-dark) 0%, var(--izs-color-lavender) 100%);
color: var(--izs-color-plum);
box-shadow: 0 6px 14px -6px rgba(242, 167, 217, 0.6);
}
/* =========================================
28. Flow — płynne wejście sekcji przy przewijaniu
========================================= */
.izs-flow-ready .izs-flow {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
.izs-flow-ready .izs-flow.izs-flow--in {
opacity: 1;
transform: none;
/* Po zakonczeniu animacji zdejmujemy will-change/transform, bo transform-owy
containing block na .izs-section lamie position:sticky bocznego menu regulaminu. */
will-change: auto;
}
/* =========================================
27. Blog — pusty stan, stronicowanie, wpis
========================================= */
.izs-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.izs-blog__count {
margin: 0 0 28px;
font-size: 0.95rem;
color: var(--izs-color-muted, #6B6577);
}
/* --- Pusty stan: gdy nie ma jeszcze zadnego wpisu --- */
.izs-blog-empty {
max-width: 620px;
margin: 8px auto 0;
padding: 56px 36px;
text-align: center;
background: linear-gradient(160deg, rgba(191, 167, 247, 0.14), rgba(250, 193, 232, 0.14));
border: 1px solid var(--izs-color-line, #ECE3F9);
border-radius: 28px;
}
.izs-blog-empty__mark {
margin: 0 0 18px;
font-size: 2rem;
line-height: 1;
color: var(--izs-color-lavender-dark, #7A5FD3);
}
.izs-blog-empty__heading {
margin: 0 0 16px;
font-family: var(--izs-font-heading, "Fraunces", Georgia, serif);
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.25;
color: var(--izs-color-plum, #4A2D52);
}
.izs-blog-empty__text {
margin: 0 0 14px;
color: var(--izs-color-muted, #6B6577);
line-height: 1.7;
}
.izs-blog-empty__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 28px;
}
/* --- Stronicowanie listy wpisow --- */
.izs-pagination {
margin-top: 48px;
}
.izs-pagination ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.izs-pagination li {
margin: 0;
}
.izs-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
font-size: 0.95rem;
color: var(--izs-color-plum, #4A2D52);
text-decoration: none;
background: #fff;
border: 1px solid var(--izs-color-line, #ECE3F9);
border-radius: 999px;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.izs-pagination .page-numbers:hover {
background: var(--izs-color-cream, #FAF7F2);
border-color: var(--izs-color-lavender, #BFA7F7);
transform: translateY(-1px);
}
.izs-pagination .page-numbers.current {
color: #fff;
background: var(--izs-color-lavender-dark, #7A5FD3);
border-color: var(--izs-color-lavender-dark, #7A5FD3);
}
.izs-pagination .page-numbers.dots {
background: none;
border-color: transparent;
}
/* --- Pojedynczy wpis (szablon single.php motywu) --- */
.izs-post {
max-width: 760px;
margin: 0 auto;
}
.izs-post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-bottom: 20px;
font-family: var(--izs-font-mono, "JetBrains Mono", monospace);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--izs-color-muted, #6B6577);
}
.izs-post__meta a {
color: var(--izs-color-lavender-dark, #7A5FD3);
text-decoration: none;
}
.izs-post__meta a:hover {
text-decoration: underline;
}
.izs-post__thumb {
margin: 0 0 36px;
overflow: hidden;
border-radius: 24px;
}
.izs-post__thumb img {
display: block;
width: 100%;
height: auto;
}
.izs-post__body {
font-size: 1.05rem;
line-height: 1.8;
color: var(--izs-color-ink, #1F1A2E);
}
.izs-post__body > * + * {
margin-top: 1.15em;
}
.izs-post__body h2 {
margin-top: 2em;
font-family: var(--izs-font-heading, "Fraunces", Georgia, serif);
font-size: clamp(1.4rem, 2.6vw, 1.85rem);
line-height: 1.3;
color: var(--izs-color-plum, #4A2D52);
}
.izs-post__body h3 {
margin-top: 1.6em;
font-family: var(--izs-font-heading, "Fraunces", Georgia, serif);
font-size: 1.3rem;
color: var(--izs-color-plum, #4A2D52);
}
.izs-post__body img {
max-width: 100%;
height: auto;
border-radius: 18px;
}
.izs-post__body ul,
.izs-post__body ol {
padding-left: 1.35em;
}
.izs-post__body li + li {
margin-top: 0.5em;
}
.izs-post__body blockquote {
margin: 1.6em 0;
padding: 20px 26px;
font-style: italic;
background: var(--izs-color-cream, #FAF7F2);
border-left: 3px solid var(--izs-color-lavender, #BFA7F7);
border-radius: 0 16px 16px 0;
}
.izs-post__footer {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--izs-color-line, #ECE3F9);
}
.izs-post__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 28px;
}
.izs-post__nav {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.izs-post__nav a {
display: block;
padding: 18px 22px;
color: var(--izs-color-plum, #4A2D52);
text-decoration: none;
background: #fff;
border: 1px solid var(--izs-color-line, #ECE3F9);
border-radius: 18px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.izs-post__nav a:hover {
border-color: var(--izs-color-lavender, #BFA7F7);
transform: translateY(-2px);
}
.izs-post__nav span {
display: block;
margin-bottom: 6px;
font-family: var(--izs-font-mono, "JetBrains Mono", monospace);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--izs-color-muted, #6B6577);
}
@media (max-width: 640px) {
.izs-blog-empty {
padding: 40px 22px;
}
}
/* =========================================
28. Okladki wpisow — blog bez zdjec
-----------------------------------------
Zamiast miniatury kazdy wpis dostaje gradientowa okladke z tytulem.
Powod jest praktyczny: klientka publikuje tekst wtedy, kiedy go napisze,
a nie wtedy, kiedy znajdzie do niego zdjecie. Brak grafiki przestaje byc
przeszkoda, a lista nigdy nie ma dziur w ukladzie.
Wariant (1-4) wybiera sie z ID wpisu modulo 4, wiec sasiadujace kafelki
niemal zawsze roznia sie tlem, a ten sam wpis ma zawsze ta sama okladke.
Kontrast sprawdzony obliczeniowo — najslabsza para w kazdym wariancie
wynosi 5.64:1 (WCAG AA wymaga 4.5:1 dla zwyklego tekstu). Dlatego
lawenda na wariantach ciemnych to #6A4DBF, a nie #7A5FD3 z palety:
przy kremowym tekscie jasniejszy odcien dawal 4.46:1, czyli ponizej progu.
========================================= */
.izs-blog-tile__cover {
position: relative;
display: flex;
align-items: flex-end;
min-height: 186px;
padding: 26px 24px;
overflow: hidden;
text-decoration: none;
isolation: isolate;
}
.izs-blog-tile__cover::after {
position: absolute;
top: -70px;
right: -50px;
z-index: -1;
width: 200px;
height: 200px;
content: "";
background: rgba(255, 255, 255, 0.16);
border-radius: 50%;
transition: transform 0.45s ease;
}
.izs-blog-tile:hover .izs-blog-tile__cover::after {
transform: scale(1.18) translate(-6px, 6px);
}
.izs-blog-tile__cover .izs-blog-tile__title {
margin: 0;
font-family: var(--izs-font-heading, "Fraunces", Georgia, serif);
font-size: clamp(1.15rem, 2.1vw, 1.45rem);
font-weight: 600;
line-height: 1.25;
text-wrap: balance;
}
/* Tytul nie jest juz linkiem sam w sobie — linkiem jest cala okladka. */
.izs-blog-tile__cover .izs-blog-tile__title a {
color: inherit;
text-decoration: none;
}
.izs-blog-tile__cover--1 { background: linear-gradient(135deg, #BFA7F7 0%, #FAC1E8 100%); }
.izs-blog-tile__cover--2 { background: linear-gradient(135deg, #4A2D52 0%, #6A4DBF 100%); }
.izs-blog-tile__cover--3 { background: linear-gradient(135deg, #FAC1E8 0%, #FAF7F2 100%); }
.izs-blog-tile__cover--4 { background: linear-gradient(135deg, #6A4DBF 0%, #4A2D52 100%); }
.izs-blog-tile__cover--1 .izs-blog-tile__title,
.izs-blog-tile__cover--3 .izs-blog-tile__title { color: #4A2D52; }
.izs-blog-tile__cover--2 .izs-blog-tile__title,
.izs-blog-tile__cover--4 .izs-blog-tile__title { color: #FAF7F2; }
/* Wariant 3 jest najjasniejszy — dostaje delikatna krawedz,
zeby nie zlewal sie z kremowym tlem sekcji. */
.izs-blog-tile__cover--3 {
border-bottom: 1px solid rgba(74, 45, 82, 0.08);
}
.izs-blog-tile__cover:focus-visible {
outline: 3px solid var(--izs-color-lavender-dark, #7A5FD3);
outline-offset: -3px;
}
/* Body zaczyna sie teraz od kategorii, nie od tytulu — korekta odstepu. */
.izs-blog-tile__body > .izs-blog-tile__category:first-child {
margin-bottom: 10px;
}
@media (max-width: 640px) {
.izs-blog-tile__cover {
min-height: 150px;
padding: 22px 20px;
}
}
/* =========================================
29. Wiadomosci po sesjach — galeria zrzutow + lightbox
Zrzuty maja rozne proporcje (od 749x732 do 709x1252), wiec kafelek
ma stala ramke 3/4 i przycina obraz od gory — tam, gdzie zaczyna sie
rozmowa. Calosc ogladamy dopiero w powiekszeniu.
========================================= */
.izs-shots__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}
.izs-shots__item {
margin: 0;
padding: 0;
}
.izs-shots__tile {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: zoom-in;
-webkit-appearance: none;
appearance: none;
}
.izs-shots__frame {
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--izs-radius-lg, 24px);
background: #0F0F14;
border: 1px solid var(--izs-color-line, #ECE3F9);
box-shadow: var(--izs-shadow-sm, 0 2px 6px rgba(31, 26, 46, 0.04));
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.izs-shots__frame picture,
.izs-shots__frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* left top, nie center top: przy zrzucie zblizonym do kwadratu (opinia-5)
kadrowanie do 3/4 przycina takze w poziomie i „center" ucinal poczatki
zdan po lewej stronie. */
object-position: left top;
}
/* Miekkie sciemnienie dolnej krawedzi — sygnal, ze rozmowa jest dluzsza
niz kafelek, i jednoczesnie tlo pod etykieta „Powieksz". */
.izs-shots__frame::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to bottom, rgba(15, 15, 20, 0) 0%, rgba(15, 15, 20, 0.85) 100%);
pointer-events: none;
}
.izs-shots__zoom {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%) translateY(6px);
z-index: 1;
padding: 7px 16px;
border-radius: 999px;
background: var(--izs-gradient, linear-gradient(135deg, #BFA7F7 0%, #FAC1E8 100%));
color: var(--izs-color-plum, #4A2D52);
font-family: var(--izs-font-mono, ui-monospace, monospace);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.izs-shots__tile:hover .izs-shots__frame,
.izs-shots__tile:focus-visible .izs-shots__frame {
transform: translateY(-4px);
box-shadow: var(--izs-shadow-md, 0 14px 40px rgba(74, 45, 82, 0.08));
}
.izs-shots__tile:hover .izs-shots__zoom,
.izs-shots__tile:focus-visible .izs-shots__zoom {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.izs-shots__tile:focus-visible .izs-shots__frame {
outline: 3px solid var(--izs-color-lavender-dark, #7A5FD3);
outline-offset: 3px;
}
.izs-shots__caption {
display: block;
font-size: 0.92rem;
line-height: 1.5;
color: var(--izs-color-muted, #6B6577);
}
.izs-shots__note {
margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) auto 0;
max-width: 62ch;
text-align: center;
font-size: 0.88rem;
line-height: 1.6;
color: var(--izs-color-muted, #6B6577);
}
/* Jedna kolumna na telefonie i nizsza ramka: przy proporcji 3/4 siedem
kafelkow dawalo ponad 3000 px przewijania. 4/3 pokazuje poczatek rozmowy,
reszta i tak jest do obejrzenia w powiekszeniu. */
@media (max-width: 620px) {
.izs-shots__grid {
grid-template-columns: 1fr;
}
.izs-shots__frame {
aspect-ratio: 4 / 3;
}
}
/* Na dotyku nie ma hoveru — etykieta ma byc widoczna od razu. */
@media (hover: none) {
.izs-shots__zoom {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.izs-shots__frame,
.izs-shots__zoom {
transition: none;
}
}
/* ---------- Lightbox ----------
Element dokladany do , wiec poza zasiegiem tokenow z .izs-app —
kazda zmienna ma tu wartosc zapasowa i to ona faktycznie zadziala. */
.izs-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: clamp(1rem, 3vw, 2.5rem);
background: rgba(20, 15, 28, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
font-family: var(--izs-font-body, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif);
}
.izs-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.izs-lightbox__figure {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
max-width: min(560px, 100%);
}
.izs-lightbox__img {
display: block;
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
background: #0F0F14;
}
.izs-lightbox__caption {
margin: 0;
max-width: 46ch;
text-align: center;
color: #F3ECFA;
font-size: 0.95rem;
line-height: 1.55;
}
.izs-lightbox__counter {
font-family: var(--izs-font-mono, ui-monospace, monospace);
font-size: 0.75rem;
letter-spacing: 0.12em;
color: rgba(243, 236, 250, 0.62);
}
.izs-lightbox__btn {
position: absolute;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid rgba(243, 236, 250, 0.22);
border-radius: 50%;
background: rgba(243, 236, 250, 0.08);
color: #F3ECFA;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.izs-lightbox__btn:hover {
background: rgba(243, 236, 250, 0.18);
border-color: rgba(243, 236, 250, 0.4);
}
.izs-lightbox__btn:focus-visible {
outline: 3px solid #BFA7F7;
outline-offset: 3px;
}
.izs-lightbox__btn--close {
top: clamp(0.75rem, 2vw, 1.5rem);
right: clamp(0.75rem, 2vw, 1.5rem);
}
.izs-lightbox__btn--prev {
left: clamp(0.5rem, 2vw, 1.75rem);
top: 50%;
transform: translateY(-50%);
}
.izs-lightbox__btn--next {
right: clamp(0.5rem, 2vw, 1.75rem);
top: 50%;
transform: translateY(-50%);
}
.izs-lightbox__btn--prev:hover,
.izs-lightbox__btn--next:hover {
transform: translateY(-50%) scale(1.06);
}
.izs-lightbox__btn[hidden] {
display: none;
}
/* Pojedynczy zrzut w galerii — strzalki nie maja czego przelaczac. */
.izs-lightbox--single .izs-lightbox__btn--prev,
.izs-lightbox--single .izs-lightbox__btn--next,
.izs-lightbox--single .izs-lightbox__counter {
display: none;
}
body.izs-lightbox-open {
overflow: hidden;
}
@media (max-width: 560px) {
.izs-lightbox__img {
max-height: 66vh;
}
.izs-lightbox__btn--prev,
.izs-lightbox__btn--next {
top: auto;
bottom: clamp(0.75rem, 3vw, 1.5rem);
transform: none;
}
.izs-lightbox__btn--prev:hover,
.izs-lightbox__btn--next:hover {
transform: scale(1.06);
}
}
@media (prefers-reduced-motion: reduce) {
.izs-lightbox,
.izs-lightbox__btn {
transition: none;
}
}
/* Portret w sekcji „Moja historia" na stronie glownej — zdjecie sylwetkowe
jest wyzsze niz to z podstrony „O mnie", wiec dostaje wlasne proporcje. */
.izs-about-story__figure--portrait {
aspect-ratio: 880 / 1204;
max-width: 380px;
background: #F7C7E4;
}