/* ============================================================
Twoja.AI – Design System
Paleta: pink / purple / teal / amber / coral
Fonty: Playfair Display (display) + DM Sans (body)
============================================================ */
/* ---- SELF-HOSTED FONTS ---- */
/* Playfair Display – normal */
@font-face {
font-family: 'Playfair Display';
src: url('resources/fonts/playfair-display-latin-ext.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
src: url('resources/fonts/playfair-display-latin.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display – italic */
@font-face {
font-family: 'Playfair Display';
src: url('resources/fonts/playfair-display-italic-latin-ext.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Playfair Display';
src: url('resources/fonts/playfair-display-italic-latin.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans – zmienna grubość 300–600 */
@font-face {
font-family: 'DM Sans';
src: url('resources/fonts/dm-sans-latin-ext.woff2') format('woff2');
font-weight: 300 600;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
src: url('resources/fonts/dm-sans-latin.woff2') format('woff2');
font-weight: 300 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- CSS VARIABLES ---- */
:root {
/* Kolory brand – z brandbooku */
--pink-50: #FBEAF0;
--pink-200: #F4C0D1;
--pink-400: #D4537E;
--pink-800: #72243E;
--pink-900: #4B1528;
--purple-50: #EEEDFE;
--purple-100: #E0DEFC;
--purple-200: #CECBF6;
--purple-300: #AFA9EC;
--purple-400: #7F77DD;
--purple-500: #C8B8E8;
--purple-800: #3C3489;
--purple-900: #26215C;
--teal-50: #E1F5EE;
--teal-200: #9FE1CB;
--teal-400: #1D9E75;
--teal-800: #085041;
--sage-50: #EAF3EA; /* warmer mint, używany w gradiencie sekcji #bonus */
--amber-50: #FAEEDA;
--amber-200: #FAC775;
--amber-400: #BA7517;
--amber-800: #412402;
--coral-50: #FAECE7;
--coral-200: #F5C4B3;
--coral-400: #D85A30;
--coral-800: #4A1B0C;
/* Neutralne (warm, brandbook v2) */
--gray-50: #F8F7F4;
--gray-100: #F1EFE8;
--gray-200: #D3D1C7;
--dark: #2C2C2A;
--mid: #5F5E5A;
--light: #6B6A66; /* WCAG AA: ~5:1 na bieli (było #888780 ≈ 3.4:1) */
--page-bg: #FDFCFA;
--cream: var(--page-bg); /* legacy alias */
/* Surface tokens */
--bg-card: #ffffff;
--bg-soft: var(--gray-50);
--bg-hero: linear-gradient(180deg, #F4F3FE 0%, #FDF2F6 100%);
/* CTA / brand-purple semantic tokens */
--cta-bg: var(--purple-400);
--cta-bg-hover: #6E66D2;
--cta-fg: #ffffff;
--ghost-fg: var(--purple-800);
--ghost-border: #C4BFEF;
--ghost-wash: rgba(127, 119, 221, 0.06);
/* Legacy ink tokens (warm dark) */
--ink-900: var(--dark);
--ink-900-hover: #1A1A18;
--ink-700: #3B3A5E;
--ink-500: var(--mid);
--ink-wash: rgba(44, 44, 42, 0.04);
--border: rgba(44, 44, 42, 0.10);
--border-strong: rgba(44, 44, 42, 0.30);
/* Typografia */
--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
/* Spacing wg brandbooku */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s6: 24px;
--s10: 40px;
--s16: 64px;
--s20: 80px;
/* Border radius */
--r-badge: 4px;
--r-input: 8px;
--r-card: 16px;
--r-card-lg: 20px;
--r-pill: 40px;
/* Nawigacja */
--nav-h: 64px;
}
/* ---- RESET & BASE ---- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
color: var(--mid);
background-color: var(--page-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
display: block;
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
font-size: inherit;
}
input, textarea, select {
font-family: var(--font-body);
font-size: 15px;
}
/* ---- LAYOUT ---- */
.container {
max-width: 1160px;
margin: 0 auto;
padding: 0 var(--s10);
}
.section {
padding: var(--s16) 0;
}
.section-lg {
padding: var(--s20) 0;
}
.section-sm {
padding: var(--s10) 0;
}
/* Anchor-target sections: offset, żeby sticky nav nie przykrywał section-label */
.section[id], .section-sm[id], .section-lg[id] {
scroll-margin-top: calc(var(--nav-h) + var(--s3));
}
/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--dark);
line-height: 1.2;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 400; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 400; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 400; }
h1 em, h2 em, h3 em, .section-title em {
font-style: italic;
color: var(--purple-800);
}
.section-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--light);
margin-bottom: var(--s3);
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.5vw, 2.4rem);
color: var(--dark);
margin-bottom: var(--s4);
}
.section-sub {
font-size: 16px;
color: var(--mid);
max-width: 600px;
}
/* ---- NAVIGATION ---- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
height: var(--nav-h);
background: var(--cream);
border-bottom: 1px solid transparent;
display: flex;
align-items: center;
transition: border-color 0.2s;
}
.nav.scrolled {
border-bottom-color: rgba(44, 44, 42, 0.10);
}
.nav-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--s10);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s6);
}
.nav-logo {
font-family: var(--font-display);
font-size: 22px;
color: var(--ink-900);
display: flex;
align-items: center;
gap: var(--s2);
white-space: nowrap;
flex-shrink: 0;
}
.nav-logo img {
height: 36px;
width: auto;
}
/* PLACEHOLDER jeśli brak logo.avif */
.nav-logo-text {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
color: var(--dark);
font-weight: 400;
letter-spacing: 0.2px;
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.nav-logo-dot {
color: var(--purple-400);
font-style: normal;
font-family: var(--font-body);
font-weight: 600;
margin: 0 1px;
}
.nav-logo-ai {
font-family: var(--font-body);
font-style: normal;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--light);
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: var(--s10);
}
.nav-links a {
font-size: 15px;
font-weight: 400;
color: var(--dark);
transition: color 0.15s;
white-space: nowrap;
}
.nav-links a:hover {
color: var(--ink-900);
}
.nav-links a.nav-active {
color: var(--ink-900);
font-weight: 500;
}
.nav-cta {
background: var(--cta-bg);
color: var(--cta-fg) !important;
padding: 10px 24px;
border-radius: var(--r-pill);
font-size: 14px !important;
font-weight: 500 !important;
transition: background 0.2s !important;
white-space: nowrap;
}
.nav-cta:hover {
background: var(--cta-bg-hover) !important;
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
width: 28px;
cursor: pointer;
padding: 4px 0;
}
.hamburger span {
display: block;
height: 2px;
background: var(--dark);
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
/* Mobile nav */
.nav-mobile {
display: none;
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
background: var(--cream);
border-bottom: 1px solid rgba(44, 44, 42, 0.10);
z-index: 999;
padding: var(--s6) var(--s10);
flex-direction: column;
gap: var(--s4);
}
.nav-mobile.open {
display: flex;
}
.nav-mobile a {
font-size: 15px;
font-weight: 500;
color: var(--mid);
padding: var(--s2) 0;
border-bottom: 1px solid var(--gray-100);
}
.nav-mobile a:last-child {
border-bottom: none;
}
.nav-mobile .nav-cta {
text-align: center;
padding: 12px !important;
}
/* Przestrzeń pod nav */
.nav-spacer {
height: var(--nav-h);
}
/* ---- BUTTONS ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s2);
padding: 12px 22px;
border-radius: var(--r-pill);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
border: 1px solid transparent;
white-space: nowrap;
text-decoration: none;
}
.btn-primary {
background: var(--cta-bg);
color: var(--cta-fg);
border-color: var(--cta-bg);
}
.btn-primary:hover {
background: var(--cta-bg-hover);
border-color: var(--cta-bg-hover);
}
.btn-ghost {
background: transparent;
color: var(--ghost-fg);
border-color: var(--ghost-border);
}
.btn-ghost:hover {
border-color: var(--purple-400);
background: var(--ghost-wash);
}
.btn-soft {
background: var(--purple-50);
color: var(--purple-800);
border-color: transparent;
}
.btn-soft:hover {
background: var(--purple-100);
}
/* ---- FOCUS STATES (WCAG AA keyboard nav) ---- */
.btn:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.mood-pill:focus-visible,
.faq-q:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.category-tile:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}
.nav-links a:focus-visible,
.nav-mobile a:focus-visible,
.nav-cta:focus-visible,
.hamburger:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.btn-lg {
padding: 14px 32px;
font-size: 16px;
}
.btn-sm {
padding: 8px 18px;
font-size: 13px;
}
/* ---- CATEGORY PILL (tag) ---- */
.cat-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
}
.cat-pill.zarabiaj { background: var(--purple-50); color: var(--purple-800); }
.cat-pill.instagram { background: var(--pink-50); color: var(--pink-800); }
.cat-pill.ogarnij { background: var(--teal-50); color: var(--teal-800); }
.cat-pill.biznes { background: var(--amber-50); color: var(--amber-800); }
.cat-pill.czas { background: var(--coral-50); color: var(--coral-800); }
/* ---- META PILLS (czas, poziom, format) ---- */
.meta-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: var(--gray-100);
border-radius: var(--r-pill);
font-size: 12px;
color: var(--mid);
font-weight: 400;
}
/* ---- HERO ---- */
.hero {
padding-top: calc(var(--nav-h) + var(--s20));
padding-bottom: var(--s20);
background: var(--bg-hero);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(127, 119, 221, 0.18) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -100px;
left: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(212, 83, 126, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s16);
align-items: center;
position: relative;
z-index: 1;
}
.hero-label {
display: inline-block;
padding: 5px 14px;
background: var(--purple-50);
color: var(--purple-800);
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: var(--s4);
}
.hero .section-label {
color: var(--purple-400);
}
.hero h1 {
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
line-height: 1.15;
margin-bottom: var(--s6);
text-wrap: balance;
}
.hero h1 em {
font-style: italic;
color: var(--purple-400);
}
.hero-sub {
font-size: 17px;
color: var(--mid);
line-height: 1.7;
margin-bottom: var(--s10);
max-width: 480px;
}
.hero-cta {
display: flex;
gap: var(--s4);
flex-wrap: wrap;
}
.hero-img {
position: relative;
}
/* ---- HERO: SVG ORBIT ANIMATION ---- */
.hero-orbit {
position: relative;
width: 100%;
aspect-ratio: 4/3;
overflow: visible;
}
.hero-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.hero-svg image {
image-rendering: auto;
}
/* center glow – breathes */
.hero-svg__glow {
transform-origin: 0 0;
animation: heroGlowPulse 6s ease-in-out infinite;
will-change: transform, opacity;
}
.hero-svg__core-halo {
transform-origin: 0 0;
animation: heroHaloPulse 5.2s ease-in-out infinite;
will-change: opacity;
}
.hero-svg__core {
transform-origin: 0 0;
animation: heroCoreBreathe 5.2s ease-in-out infinite;
will-change: transform;
}
/* Orbiters move along elliptical paths via offset-path */
.hero-svg__orbiter {
offset-rotate: 0deg;
will-change: offset-distance;
}
.hero-svg__orbiter--coffee,
.hero-svg__orbiter--bag {
offset-path: path("M 540 0 A 540 210 0 1 1 -540 0 A 540 210 0 1 1 540 0 Z");
}
.hero-svg__orbiter--coffee { animation: heroOrbitTrace 40s linear infinite; }
.hero-svg__orbiter--bag { animation: heroOrbitTrace 40s linear infinite -20s; }
.hero-svg__orbiter--plant,
.hero-svg__orbiter--laptop {
offset-path: path("M 440 0 A 440 175 0 1 0 -440 0 A 440 175 0 1 0 440 0 Z");
}
.hero-svg__orbiter--plant { animation: heroOrbitTrace 32s linear infinite; }
.hero-svg__orbiter--laptop { animation: heroOrbitTrace 32s linear infinite -16s; }
.hero-svg__orbiter--calendar,
.hero-svg__orbiter--check {
offset-path: path("M 350 0 A 350 140 0 1 1 -350 0 A 350 140 0 1 1 350 0 Z");
}
.hero-svg__orbiter--calendar { animation: heroOrbitTrace 24s linear infinite; }
.hero-svg__orbiter--check { animation: heroOrbitTrace 24s linear infinite -12s; }
/* Counter-rotate inner content so icons stay upright in world frame */
.hero-svg__upright {
transform-origin: 0 0;
transform: rotate(var(--counter, 0deg));
}
/* Floating background dots */
.hero-svg__dot--1 { animation: heroDotFloatA 7.2s ease-in-out infinite; transform-origin: 0 0; }
.hero-svg__dot--2 { animation: heroDotFloatB 9s ease-in-out infinite -2s; transform-origin: 0 0; }
.hero-svg__dot--3 { animation: heroDotFloatA 8s ease-in-out infinite -3s; transform-origin: 0 0; }
.hero-svg__dot--4 { animation: heroDotFloatB 6.6s ease-in-out infinite -1s; transform-origin: 0 0; }
.hero-svg__dot--5 { animation: heroDotFloatA 10s ease-in-out infinite -5s; transform-origin: 0 0; }
.hero-svg__dot--6 { animation: heroDotFloatB 7.5s ease-in-out infinite -4s; transform-origin: 0 0; }
@keyframes heroOrbitTrace {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
@keyframes heroGlowPulse {
0%, 100% { opacity: 0.88; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes heroHaloPulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.85; }
}
@keyframes heroCoreBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.035); }
}
@keyframes heroDotFloatA {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(10px, -12px); }
}
@keyframes heroDotFloatB {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-12px, 10px); }
}
@media (max-width: 768px) {
.hero-img { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-svg__glow,
.hero-svg__core-halo,
.hero-svg__core,
.hero-svg__orbiter,
.hero-svg__dot--1,
.hero-svg__dot--2,
.hero-svg__dot--3,
.hero-svg__dot--4,
.hero-svg__dot--5,
.hero-svg__dot--6 {
animation: none !important;
}
/* Reveal-on-scroll bez ruchu: pokaż treść natychmiast */
.fade-up {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ---- MOOD SELECTOR ---- */
.mood-section {
padding: var(--s10) 0 var(--s16);
background: var(--gray-50);
}
.mood-label {
font-size: 13px;
color: var(--light);
text-align: center;
margin-bottom: var(--s6);
font-weight: 500;
}
.mood-pills {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
justify-content: center;
}
.mood-pill {
display: inline-flex;
align-items: center;
padding: 10px 18px;
background: #fff;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 500;
color: var(--dark);
cursor: pointer;
transition: all 0.15s;
font-family: var(--font-body);
text-decoration: none;
}
.mood-pill:hover {
border-color: var(--pink-200);
color: var(--pink-800);
background: var(--pink-50);
}
.mood-pill.active {
background: var(--pink-50);
border-color: var(--pink-200);
color: var(--pink-800);
}
/* ---- BONUS SECTION (pakiet startowy: 2 e-booki w gratisie) ---- */
.bonus-section {
background: linear-gradient(135deg, var(--sage-50) 0%, var(--teal-50) 100%);
text-align: center;
}
.bonus-section-inner {
max-width: 720px;
margin: 0 auto;
}
.bonus-section-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--r-pill);
background: var(--teal-800);
color: #fff;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--s4);
}
.bonus-section-tag > span {
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.bonus-section-title {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
color: var(--teal-800);
margin-bottom: var(--s4);
line-height: 1.2;
}
.bonus-section-title em {
font-style: italic;
color: var(--teal-800);
font-weight: 400;
}
.bonus-section-lead {
font-size: 16px;
color: var(--teal-800);
line-height: 1.7;
margin-bottom: var(--s6);
}
.bonus-section-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s3);
}
.bonus-section-meta-item {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: var(--r-pill);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(29, 158, 117, 0.22);
color: var(--teal-800);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* ---- DLA KOGO (persony + grafika) ---- */
.audience-section {
background: var(--page-bg);
}
.audience-lead {
max-width: 680px;
margin: 0 auto var(--s10);
text-align: center;
}
.audience-inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--s10);
align-items: center;
}
.audience-figure {
margin: 0;
border-radius: var(--r-card-lg);
overflow: hidden;
background: #fff;
border: 1px solid var(--border);
}
.audience-figure img {
display: block;
width: 100%;
height: auto;
}
.audience-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.audience-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: var(--s4) var(--s4) var(--s4) var(--s6);
background: #fff;
border: 1px solid var(--border);
border-left: 4px solid var(--gray-200);
border-radius: var(--r-input);
}
.audience-item strong {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--dark);
}
.audience-item span {
font-size: 14px;
color: var(--mid);
line-height: 1.55;
}
.audience-item.is-teal { border-left-color: var(--teal-200); }
.audience-item.is-coral { border-left-color: var(--coral-200); }
.audience-item.is-purple { border-left-color: var(--purple-200); }
.audience-item.is-amber { border-left-color: var(--amber-200); }
.audience-item.is-pink { border-left-color: var(--pink-200); }
.audience-item.is-soon {
background: var(--gray-50);
}
.audience-item.is-soon strong {
color: var(--mid);
}
@media (max-width: 860px) {
.audience-inner {
grid-template-columns: 1fr;
gap: var(--s6);
}
.audience-figure {
order: -1;
}
}
/* ---- MOOD PILL: KOLOROWE IKONY (inline SVG w CSS) ----
Ikony wielokolorowe, wektorowe, wklejone jako data-URI – nie są emoji
(spójne renderowanie na wszystkich platformach). Kolory z palety projektu. */
.mood-ico {
display: inline-block;
width: 26px;
height: 26px;
margin-right: 10px;
flex-shrink: 0;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* === chaos → spirala (fiolet) === */
.mood-ico-chaos {
background-image: url("data:image/svg+xml;utf8,");
}
/* === zarabiac → zielony szmaragd/diament === */
.mood-ico-zarabiac {
background-image: url("data:image/svg+xml;utf8,");
}
/* === czas → klepsydra z piaskiem (amber) === */
.mood-ico-czas {
background-image: url("data:image/svg+xml;utf8,");
}
/* === skad → kompas (coral + ciemny wskaźnik) === */
.mood-ico-skad {
background-image: url("data:image/svg+xml;utf8,");
}
/* === instagram → wykres rosnący (teal + coral punkt) === */
.mood-ico-instagram {
background-image: url("data:image/svg+xml;utf8,");
}
/* ---- CATEGORY TILES ---- */
.categories-section {
background: #fff;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s4);
}
.category-tile {
padding: var(--s6) var(--s4);
border-radius: var(--r-card);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s2);
cursor: pointer;
transition: transform 0.15s, border-color 0.2s;
text-align: center;
border: 2px solid transparent;
}
.category-tile:hover {
transform: translateY(-2px);
border-color: currentColor;
}
.category-tile.active {
border-color: currentColor;
}
.category-tile.zarabiaj { background: var(--purple-50); color: var(--purple-800); }
.category-tile.instagram { background: var(--pink-50); color: var(--pink-800); }
.category-tile.ogarnij { background: var(--teal-50); color: var(--teal-800); }
.category-tile.biznes { background: var(--amber-50); color: var(--amber-800); }
.category-tile.czas { background: var(--coral-50); color: var(--coral-800); }
.category-tile-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
}
.category-tile-name {
font-size: 13px;
font-weight: 600;
}
.category-tile-count {
font-size: 11px;
opacity: 0.7;
}
/* ---- EBOOK CARDS ---- */
.ebooks-section {
background: var(--gray-50);
}
.ebooks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s6);
}
.ebook-card {
background: #fff;
border-radius: var(--r-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s, border-color 0.2s;
border: 1px solid var(--gray-200);
}
.ebook-card:hover {
transform: translateY(-3px);
border-color: var(--light);
}
.ebook-card.hidden {
display: none;
}
/* Kolor nagłówka karty wg kategorii */
.ebook-card-header {
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: var(--s4);
}
a.ebook-card-header {
text-decoration: none;
color: inherit;
}
a.ebook-card-header:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: -3px;
}
.ebook-card-title-link {
color: inherit;
text-decoration: none;
transition: color .15s ease;
}
.ebook-card-title-link:hover {
color: var(--purple-800);
}
.ebook-card-title-link:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
border-radius: 4px;
}
.ebook-card-header.zarabiaj { background: linear-gradient(135deg, var(--purple-50), #C9C6F6); }
.ebook-card-header.instagram { background: linear-gradient(135deg, var(--pink-50), #F5C6D6); }
.ebook-card-header.ogarnij { background: linear-gradient(135deg, var(--teal-50), #A8E6D2); }
.ebook-card-header.biznes { background: linear-gradient(135deg, var(--amber-50), #EDD4A0); }
.ebook-card-header.czas { background: linear-gradient(135deg, var(--coral-50), #F2C2B0); }
.ebook-card-header img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ebook-card-body {
padding: var(--s6);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.ebook-card-title {
font-family: var(--font-display);
font-size: 17px;
color: var(--dark);
line-height: 1.3;
}
.ebook-card-excerpt {
font-size: 13px;
color: var(--mid);
line-height: 1.6;
flex: 1;
}
.ebook-card-testimonial {
background: var(--purple-50);
border-radius: var(--r-input);
padding: var(--s3) var(--s4);
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--purple-800);
line-height: 1.5;
}
.ebook-card-testimonial-author {
font-family: var(--font-body);
font-style: normal;
font-size: 11px;
color: var(--light);
margin-top: 4px;
}
.ebook-card-meta {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
.ebook-card-footer {
padding: var(--s4) var(--s6) var(--s6);
border-top: 1px solid var(--gray-100);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
flex-wrap: wrap;
}
.ebook-card-price {
font-size: 22px;
font-weight: 600;
color: var(--dark);
white-space: nowrap;
flex-shrink: 0;
}
.ebook-card-price span {
font-size: 13px;
font-weight: 400;
color: var(--light);
}
/* E-book za 0 zł (lead magnet) – wyróżniamy kolorem "pozytywnym", nie ceną.
Rozmiar zostaje 22px jak przy cenie, żeby stopki kart trzymały wspólną linię bazową. */
.ebook-card-price.is-free {
color: var(--teal-800);
}
/* ---- EBOOK PAGE (ebook.php) ---- */
.ebook-page-hero {
padding-top: calc(var(--nav-h) + var(--s16));
padding-bottom: var(--s16);
}
.ebook-page-inner {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--s16);
align-items: start;
}
.ebook-page-breadcrumb {
font-size: 13px;
color: var(--light);
margin-bottom: var(--s4);
}
.ebook-page-breadcrumb a {
color: var(--purple-800);
}
.ebook-page-title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
margin-bottom: var(--s3);
}
.ebook-page-subtitle {
font-size: 18px;
color: var(--mid);
margin-bottom: var(--s6);
}
.ebook-page-cover {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--r-card-lg);
overflow: hidden;
margin-bottom: var(--s10);
}
.ebook-page-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ebook-page-cover.zarabiaj { background: linear-gradient(135deg, var(--purple-50), #C9C6F6); }
.ebook-page-cover.instagram { background: linear-gradient(135deg, var(--pink-50), #F5C6D6); }
.ebook-page-cover.ogarnij { background: linear-gradient(135deg, var(--teal-50), #A8E6D2); }
.ebook-page-cover.biznes { background: linear-gradient(135deg, var(--amber-50), #EDD4A0); }
.ebook-page-cover.czas { background: linear-gradient(135deg, var(--coral-50), #F2C2B0); }
.ebook-page-meta {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-bottom: var(--s6);
}
.ebook-page-description {
font-size: 16px;
color: var(--mid);
line-height: 1.75;
}
.ebook-page-testimonial {
background: var(--purple-50);
border-left: 3px solid var(--purple-400);
padding: var(--s6);
border-radius: 0 var(--r-card) var(--r-card) 0;
margin: var(--s10) 0;
}
.ebook-page-testimonial blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
color: var(--purple-800);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ebook-page-testimonial cite {
display: block;
margin-top: var(--s3);
font-style: normal;
font-size: 12px;
color: var(--light);
font-family: var(--font-body);
}
/* Sticky order box */
.ebook-order-box {
position: sticky;
top: calc(var(--nav-h) + var(--s6));
background: #fff;
border-radius: var(--r-card);
border: 1.5px solid var(--gray-200);
padding: var(--s6);
}
.ebook-order-box-cover {
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--purple-50), var(--pink-50));
border-radius: var(--r-input);
margin-bottom: var(--s6);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--light);
border: 2px dashed var(--gray-200);
text-align: center;
padding: var(--s4);
}
.ebook-order-box-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ebook-order-box-title {
font-family: var(--font-display);
font-size: 18px;
color: var(--dark);
margin-bottom: var(--s2);
}
.ebook-order-box-price {
font-size: 28px;
font-weight: 600;
color: var(--dark);
margin: var(--s4) 0;
}
.ebook-order-box-list {
list-style: none;
margin-bottom: var(--s6);
}
.ebook-order-box-list li {
font-size: 13px;
color: var(--mid);
padding: 5px 0;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
gap: var(--s2);
}
.ebook-order-box-list li::before {
content: '✓';
color: var(--teal-400);
font-weight: 700;
flex-shrink: 0;
}
/* Bonus box – rozbudowany badge "pakiet startowy w gratisie" w order-boxie */
.bonus-box {
margin-top: var(--s6);
margin-bottom: var(--s6);
padding: var(--s4);
background: var(--teal-50);
border: 1px solid rgba(29, 158, 117, 0.22);
border-radius: var(--r-input);
color: var(--teal-800);
}
.bonus-box-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--r-pill);
background: var(--teal-800);
color: #fff;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--s3);
}
.bonus-box-tag > span {
font-size: 14px;
font-weight: 700;
line-height: 1;
}
.bonus-box-title {
display: block;
font-family: var(--font-display);
font-size: 19px;
line-height: 1.25;
color: var(--teal-800);
margin-bottom: var(--s2);
}
.bonus-box-desc {
font-size: 13px;
color: var(--teal-800);
line-height: 1.55;
margin: 0 0 var(--s3) 0;
}
.bonus-box-meta {
font-size: 11px;
color: var(--teal-800);
opacity: 0.85;
letter-spacing: 0.03em;
font-weight: 600;
margin: 0;
text-transform: uppercase;
}
/* ---- IMAGE PLACEHOLDER ---- */
.img-placeholder {
background: var(--gray-100);
border-radius: var(--r-card);
border: 2px dashed var(--gray-200);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--light);
font-size: 12px;
text-align: center;
padding: var(--s10);
gap: var(--s2);
}
.img-placeholder strong {
font-size: 13px;
color: var(--mid);
font-weight: 500;
}
/* ---- FAQ ---- */
.faq-section {
background: #fff;
}
.faq-list {
max-width: 720px;
margin: var(--s10) auto 0;
}
.faq-item {
border-bottom: 1px solid var(--gray-200);
}
.faq-q {
width: 100%;
text-align: left;
padding: var(--s6) 0;
font-size: 16px;
font-weight: 500;
color: var(--dark);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s4);
background: none;
cursor: pointer;
transition: color 0.15s;
font-family: var(--font-body);
}
.faq-q:hover {
color: var(--purple-800);
}
.faq-q::after {
content: '+';
font-size: 22px;
color: var(--purple-400);
flex-shrink: 0;
line-height: 1;
transition: transform 0.2s;
}
.faq-item.open .faq-q::after {
transform: rotate(45deg);
}
.faq-a {
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
}
.faq-a-inner {
padding: 0 0 var(--s6);
font-size: 15px;
color: var(--mid);
line-height: 1.7;
}
/* ---- ORDER FORM (order.php) ---- */
.order-page {
padding-top: calc(var(--nav-h) + var(--s16));
padding-bottom: var(--s16);
}
.order-inner {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--s10);
align-items: start;
}
.order-form-card {
background: #fff;
border-radius: var(--r-card);
border: 1px solid var(--gray-200);
padding: var(--s10);
}
.order-form-title {
font-family: var(--font-display);
font-size: 22px;
color: var(--dark);
margin-bottom: var(--s6);
}
.form-group {
margin-bottom: var(--s6);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
}
.form-label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--dark);
margin-bottom: var(--s2);
}
.form-input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-input);
font-size: 15px;
color: var(--dark);
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.form-input:focus {
border-color: var(--purple-400);
box-shadow: 0 0 0 3px rgba(127, 119, 221, 0.12);
}
.form-input.error {
border-color: var(--coral-400);
}
.form-error {
font-size: 12px;
color: var(--coral-800);
margin-top: var(--s1);
}
/* Discount code */
.discount-row {
display: flex;
gap: var(--s2);
}
.discount-row .form-input {
flex: 1;
}
.discount-status {
font-size: 13px;
margin-top: var(--s2);
}
.discount-status.ok { color: var(--teal-800); }
.discount-status.err { color: var(--coral-800); }
/* Pusty komunikat nie ma rezerwować pionowego odstępu (kod rabatowy, GUS) */
.discount-status:empty { margin-top: 0; }
/* Sekcja formularza (np. „Dane do faktury") – wizualny podział długiego
checkoutu na bloki, bez cienia (brandbook dopuszcza tylko border + bg). */
.form-section {
margin: var(--s10) 0 var(--s6);
padding-top: var(--s6);
border-top: 1px solid var(--gray-200);
}
.form-section-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 400;
color: var(--dark);
margin: 0 0 var(--s1);
}
.form-section-note {
font-size: 12px;
color: var(--mid);
margin: 0;
line-height: 1.5;
}
/* Gwiazdka „pole wymagane".
--coral-400 na bieli daje 3,9:1 – za mało dla 13px (WCAG AA wymaga 4,5:1).
--coral-800 to token tej samej rodziny, czytelnie odcina się od navy tekstu
etykiety i spełnia kontrast. */
.form-required {
color: var(--coral-800);
font-weight: 600;
}
/* Pola firmowe (NIP + nazwa) – odsłaniane po zaznaczeniu „Kupuję na firmę".
Tło NEUTRALNE, nie purple-50: przycisk „Pobierz z GUS" (.btn-soft) ma
dokładnie takie tło i przezroczysty border, więc na lawendowym bloku
zniknąłby całkowicie. */
.company-fields {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: var(--r-input);
padding: var(--s4);
margin-bottom: var(--s6);
}
.company-fields[hidden] {
display: none;
}
.company-fields .form-group {
margin-bottom: var(--s4);
}
.company-fields .form-group:last-child {
margin-bottom: 0;
}
/* Krótkie pola (nr budynku / nr lokalu) zostają w dwóch kolumnach także
na telefonie – rozciąganie ich na całą szerokość tylko wydłuża formularz. */
.form-row-compact {
grid-template-columns: 1fr 1fr;
}
/* Checkboxes */
.checkbox-group {
display: flex;
align-items: flex-start;
gap: var(--s3);
cursor: pointer;
}
.checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--ink-900);
cursor: pointer;
}
.checkbox-label {
font-size: 13px;
color: var(--mid);
line-height: 1.5;
}
.checkbox-label a {
color: var(--purple-800);
text-decoration: underline;
}
/* Order summary box */
.order-summary-box {
background: #fff;
border-radius: var(--r-card);
border: 1.5px solid var(--gray-200);
padding: var(--s6);
position: sticky;
top: calc(var(--nav-h) + var(--s6));
}
.order-summary-title {
font-size: 13px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
/* --mid, nie --light: przy 13px --light daje 3.6:1 (WCAG AA wymaga 4.5:1) */
color: var(--mid);
margin-bottom: var(--s4);
}
.order-summary-ebook {
display: flex;
gap: var(--s4);
margin-bottom: var(--s4);
padding-bottom: var(--s4);
border-bottom: 1px solid var(--gray-100);
}
.order-summary-ebook-title {
font-size: 14px;
font-weight: 500;
color: var(--dark);
line-height: 1.3;
}
.order-summary-ebook-cat {
font-size: 12px;
color: var(--light);
margin-top: 3px;
}
.order-summary-line {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--mid);
padding: 5px 0;
}
.order-summary-line.discount {
color: var(--teal-800);
}
.order-summary-bonus {
margin-top: var(--s2);
padding: 8px 10px;
background: var(--teal-50);
border: 1px solid rgba(29, 158, 117, 0.22);
border-radius: var(--r-input);
color: var(--teal-800);
font-weight: 500;
}
.order-summary-bonus-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s3);
font-size: 14px;
padding: 3px 0;
}
.order-summary-bonus small {
color: var(--mid);
font-size: 12px;
font-weight: 400;
}
.order-summary-bonus-price {
color: var(--teal-800);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 12px;
}
.order-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--s4);
border-top: 1.5px solid var(--gray-200);
margin-top: var(--s2);
}
.order-summary-total-label {
font-size: 15px;
font-weight: 600;
color: var(--dark);
}
.order-summary-total-price {
font-size: 24px;
font-weight: 600;
color: var(--dark);
}
.order-payment-info {
background: var(--gray-50);
border-radius: var(--r-input);
padding: var(--s4);
margin-top: var(--s4);
font-size: 12px;
/* --mid, nie --light: na --gray-50 --light daje 3.4:1 (WCAG AA wymaga 4.5:1) */
color: var(--mid);
text-align: center;
line-height: 1.5;
}
/* ---- PAYMENT METHODS ---- */
.payment-methods {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
margin-bottom: var(--s4);
}
.payment-option {
position: relative;
cursor: pointer;
}
.payment-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.payment-option-label {
display: block;
border: 2px solid var(--gray-200);
border-radius: var(--r-card);
padding: var(--s4);
text-align: center;
cursor: pointer;
background: #fff;
height: 100%;
transition: border-color 0.2s ease, background 0.2s ease;
}
.payment-option input:checked + .payment-option-label {
border-color: var(--purple-400);
background: var(--purple-50);
}
.payment-option-label:hover {
border-color: var(--purple-400);
}
.payment-option input:focus-visible + .payment-option-label {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.payment-option-icon {
font-size: 13px;
font-weight: 600;
color: var(--dark);
margin-bottom: var(--s2);
padding: var(--s2) 0;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.payment-option input:checked + .payment-option-label .payment-option-icon {
color: var(--purple-800);
}
.paynow-logo-img {
width: 100%;
max-width: 120px;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
}
.payment-option-desc {
font-size: 12px;
color: var(--mid);
line-height: 1.4;
}
.payment-option input:checked + .payment-option-label .payment-option-desc {
color: var(--purple-800);
}
/* Jedyna dostępna metoda (PayNow) – statyczna karta bez radia */
.payment-option-active {
cursor: default;
}
.payment-option-active .payment-option-label {
border-color: var(--purple-400);
background: var(--purple-50);
cursor: default;
}
.payment-option-active .payment-option-label:hover {
border-color: var(--purple-400);
}
.payment-option-active .payment-option-desc {
color: var(--purple-800);
}
/* Bank info box */
.bank-info-box {
display: none;
background: var(--purple-50);
border: 1.5px solid var(--purple-100);
border-radius: var(--r-card);
padding: var(--s6);
margin-top: var(--s4);
}
.bank-info-box.show {
display: block;
}
.bank-info-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--purple-800);
margin-bottom: var(--s4);
}
.bank-info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s4);
padding: var(--s2) 0;
border-bottom: 1px solid var(--purple-100);
font-size: 14px;
}
.bank-info-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bank-info-label {
font-size: 13px;
color: var(--mid);
flex-shrink: 0;
}
.bank-info-value {
font-weight: 600;
color: var(--dark);
text-align: right;
font-size: 13px;
word-break: break-all;
min-width: 0;
}
.bank-info-note {
margin-top: var(--s4);
font-size: 12px;
color: var(--mid);
line-height: 1.55;
background: var(--purple-100);
border-radius: var(--r-input);
padding: var(--s3) var(--s4);
}
/* PayNow info box */
.paynow-info-box {
display: none;
background: var(--teal-50);
border: 1.5px solid rgba(8, 80, 65, 0.15);
border-radius: var(--r-card);
padding: var(--s4) var(--s6);
margin-top: var(--s4);
font-size: 13px;
color: var(--dark);
line-height: 1.6;
text-align: center;
}
.paynow-info-box.show {
display: block;
}
.paynow-info-box strong {
color: var(--teal-800);
}
/* ---- DOWNLOAD PAGE ---- */
.download-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s10);
}
.download-card {
background: #fff;
border-radius: var(--r-card-lg);
padding: var(--s16) var(--s10);
max-width: 480px;
width: 100%;
text-align: center;
border: 1px solid var(--gray-200);
}
.download-icon {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s6);
font-size: 36px;
font-weight: 700;
}
.download-icon.success {
background: var(--teal-50);
color: var(--teal-400);
}
.download-icon.error {
background: var(--coral-50);
color: var(--coral-400);
}
.download-card h1 {
font-size: clamp(1.3rem, 3vw, 1.6rem);
margin-bottom: var(--s4);
}
.download-card p {
font-size: 15px;
color: var(--mid);
line-height: 1.7;
margin-bottom: var(--s6);
}
/* ---- SUCCESS STATE (after payment) ---- */
.payment-success {
text-align: center;
padding: var(--s16) var(--s10);
max-width: 520px;
margin: 0 auto;
}
.payment-success-icon {
width: 80px;
height: 80px;
background: var(--purple-50);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s6);
font-size: 36px;
color: var(--ink-900);
font-weight: 700;
}
/* ---- TESTIMONIALS ---- */
.testimonials-section {
background: var(--page-bg);
}
.testimonials-carousel {
margin-top: var(--s10);
position: relative;
}
.testimonials-track {
display: flex;
gap: var(--s6);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--s2) 2px var(--s4);
}
.testimonials-track::-webkit-scrollbar { display: none; }
.testimonials-track:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 4px;
border-radius: var(--r-card-lg);
}
.testimonial-card {
flex: 0 0 calc((100% - var(--s6) * 2) / 3);
scroll-snap-align: start;
background: var(--purple-50);
border-radius: var(--r-card-lg);
padding: var(--s6);
border: 1px solid var(--gray-200);
display: flex;
flex-direction: column;
gap: var(--s3);
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.2s ease;
}
.testimonial-card.visible {
opacity: 1;
transform: translateY(0);
}
.testimonial-card:hover {
border-color: var(--purple-200);
}
.testimonials-nav {
display: flex;
justify-content: center;
gap: var(--s3);
margin-top: var(--s6);
}
.testimonials-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: transparent;
color: var(--ink-900);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.testimonials-btn:hover:not(:disabled) {
background: var(--ink-900);
border-color: var(--ink-900);
color: #fff;
}
.testimonials-btn:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.testimonials-btn:disabled {
opacity: 0.35;
cursor: default;
}
.testimonial-stars {
color: var(--gold-text);
font-family: Georgia, 'Times New Roman', serif;
font-variant-emoji: text;
font-size: 15px;
letter-spacing: 3px;
line-height: 1;
margin-bottom: var(--s2);
}
.testimonial-quote {
font-family: var(--font-body);
font-style: normal;
font-size: 15px;
color: var(--ink-900);
line-height: 1.65;
flex: 1;
margin: 0;
}
.testimonial-quote::before {
content: '\201E';
color: var(--ink-900);
font-family: var(--font-display);
font-size: 20px;
line-height: 0;
vertical-align: -4px;
margin-right: 1px;
}
.testimonial-author {
font-size: 14px;
color: var(--mid);
margin: var(--s3) 0 0;
line-height: 1.4;
}
@media (max-width: 992px) {
.testimonial-card {
flex-basis: calc((100% - var(--s6)) / 2);
}
}
@media (max-width: 768px) {
.testimonial-card {
flex-basis: 100%;
}
}
/* ---- FLASH MESSAGES ---- */
.flash {
padding: var(--s4) var(--s6);
border-radius: var(--r-input);
margin-bottom: var(--s6);
font-size: 14px;
}
.flash-success {
background: var(--teal-50);
color: var(--teal-800);
border: 1px solid rgba(29, 158, 117, 0.2);
}
.flash-error {
background: var(--coral-50);
color: var(--coral-800);
border: 1px solid rgba(216, 90, 48, 0.2);
}
/* ---- MOBILE CTA (ebook.php – widoczne tylko na mobile, box ukryty) ---- */
.mobile-cta {
display: none;
margin-top: var(--s10);
}
@media (max-width: 992px) {
.mobile-cta { display: block; }
.ebook-order-box { display: none; }
}
@media (min-width: 993px) {
.mobile-cta { display: none; }
}
/* ---- FADE-UP ANIMATION ---- */
.fade-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* ---- CONTACT FORM ---- */
.contact-section {
background: var(--purple-50);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: var(--s16);
align-items: start;
}
.contact-info .section-label { margin-bottom: var(--s3); }
.contact-info .section-title { margin-bottom: var(--s4); }
.contact-info .section-sub { margin-bottom: var(--s10); }
.contact-details {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s4);
}
.contact-details li {
padding: var(--s4) 0;
border-top: 1px solid var(--gray-200);
}
.contact-detail-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mid);
margin-bottom: var(--s2);
}
.contact-details a {
color: var(--purple-800);
font-weight: 500;
text-decoration: none;
transition: color 0.15s;
}
.contact-details a:hover { color: var(--purple-400); }
.contact-form-wrap {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: var(--r-card-lg);
padding: var(--s10);
}
.contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
margin-bottom: var(--s4);
}
.contact-form .form-group { margin-bottom: var(--s4); }
.contact-form .form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--dark);
margin-bottom: var(--s2);
}
.form-optional {
font-weight: 400;
/* --mid, nie --light: przy 13px --light daje 3.6:1 (WCAG AA wymaga 4.5:1) */
color: var(--mid);
}
.contact-form .form-input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--gray-200);
border-radius: var(--r-input);
font-family: var(--font-body);
font-size: 14px;
color: var(--dark);
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-form .form-input:focus {
outline: none;
border-color: var(--purple-400);
box-shadow: 0 0 0 3px rgba(127,119,221,0.15);
}
/* Pole z błędem walidacji (kontur + komunikat, nie tylko kolor) */
.contact-form .form-input[aria-invalid="true"] {
border-color: var(--coral-400);
}
.contact-form .form-input[aria-invalid="true"]:focus {
border-color: var(--coral-400);
box-shadow: 0 0 0 3px rgba(216,90,48,0.15);
}
.contact-form .form-textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.contact-form .form-select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.form-footer {
display: flex;
flex-direction: column;
gap: var(--s4);
margin-top: var(--s6);
}
.form-rodo {
font-size: 12px;
color: var(--mid);
line-height: 1.5;
margin: 0;
}
.contact-form .form-input:disabled {
opacity: 0.6;
cursor: not-allowed;
background: var(--gray-100);
}
.contact-form button[type="submit"] {
align-self: flex-start;
}
.form-success,
.form-error {
display: none;
margin-top: var(--s4);
padding: 14px 16px;
border-radius: var(--r-input);
font-size: 14px;
font-weight: 500;
}
.form-success {
background: var(--teal-50);
color: var(--teal-800);
border: 1px solid var(--teal-400);
}
.form-error {
background: var(--coral-50);
color: var(--coral-800);
border: 1px solid var(--coral-400);
}
.form-success.show,
.form-error.show { display: block; }
@media (max-width: 992px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--s10); }
}
@media (max-width: 768px) {
.contact-form-wrap { padding: var(--s6); }
.contact-form .form-row { grid-template-columns: 1fr; }
}
/* ---- ARTICLE RATING WIDGET ---- */
.art-rating {
margin-top: var(--s10);
padding: var(--s10);
background: var(--purple-50);
border: 1px solid var(--purple-100);
border-radius: var(--r-card);
text-align: center;
}
.art-rating-title {
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--purple-800);
margin-bottom: var(--s4);
}
.art-rating-stars {
display: flex;
justify-content: center;
gap: 6px;
margin-bottom: var(--s3);
}
.art-rating-star {
background: none;
border: none;
font-size: 34px;
color: var(--gray-200);
cursor: pointer;
transition: color 0.12s, transform 0.12s;
line-height: 1;
padding: 2px;
user-select: none;
}
.art-rating-star.lit { color: var(--purple-400); }
.art-rating-star.lit-hover {
color: var(--pink-400);
transform: scale(1.15);
}
.art-rating-star:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 2px;
border-radius: 4px;
}
.art-rating-info {
font-size: 13px;
color: var(--mid);
min-height: 1.3em;
margin-bottom: var(--s4);
}
.art-rating-btn {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: var(--purple-800);
color: #fff;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
border: none;
border-radius: var(--r-input);
cursor: pointer;
transition: background 0.2s, transform 0.2s, opacity 0.2s;
}
.art-rating-btn:disabled {
opacity: 0.4;
cursor: default;
}
.art-rating-btn:not(:disabled):hover {
background: var(--ink-900);
transform: translateY(-1px);
}
.art-rating-btn:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 3px;
}
.art-rating-done {
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--teal-400);
}
.art-rating-stats {
font-size: 13px;
color: var(--mid);
margin-top: var(--s2);
}
@media (max-width: 768px) {
.art-rating { padding: var(--s6) var(--s4); }
.art-rating-star { font-size: 28px; }
}
/* ---- FOOTER ---- */
footer {
background: #F4F3FE;
color: var(--mid);
padding: var(--s16) 0 var(--s10);
border-top: 1px solid #ECEAE3;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
gap: var(--s10);
margin-bottom: var(--s10);
}
.footer-logo {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
color: var(--dark);
margin-bottom: var(--s4);
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.footer-logo-dot {
color: var(--purple-400);
font-style: normal;
font-family: var(--font-body);
font-weight: 600;
margin: 0 1px;
}
.footer-logo-ai {
font-family: var(--font-body);
font-style: normal;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--light);
text-transform: uppercase;
}
.footer-desc {
font-size: 13px;
line-height: 1.7;
margin-bottom: var(--s6);
color: var(--mid);
}
.footer-col-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mid);
margin-bottom: var(--s4);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.footer-links a {
font-size: 14px;
color: var(--mid);
transition: color 0.15s;
}
.footer-links a:hover {
color: var(--purple-800);
}
.footer-links a:focus-visible,
.footer-legal a:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 3px;
border-radius: 2px;
}
.footer-company-data span {
font-size: 14px;
color: var(--mid);
line-height: 1.5;
overflow-wrap: break-word;
}
.footer-payment {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s4);
}
.footer-payment-badge {
background: #fff;
border: 1px solid #ECEAE3;
border-radius: var(--r-badge);
padding: 5px 10px;
font-size: 10px;
color: var(--mid);
font-weight: 600;
letter-spacing: 0.04em;
}
/* PayNow logo + baner metod płatności w footerze */
.footer-payment-badge-wrap {
margin-top: var(--s6);
}
.footer-paynow-logo {
display: block;
width: 100%;
max-width: 140px;
height: auto;
margin-top: var(--s3);
object-fit: contain;
background: #fff;
border: 1px solid #ECEAE3;
border-radius: var(--r-input);
padding: 6px 10px;
}
.footer-payment-methods-wrap {
padding: var(--s6) 0;
border-top: 1px solid #ECEAE3;
margin-top: var(--s6);
}
.footer-payment-methods-img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
background: #fff;
border: 1px solid #ECEAE3;
border-radius: var(--r-input);
padding: 10px 20px;
}
.footer-bottom {
padding-top: var(--s6);
border-top: 1px solid #ECEAE3;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--s4);
}
.footer-copy {
font-size: 12px;
color: var(--mid);
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: var(--s4) var(--s6);
align-items: center;
}
.footer-legal a {
font-size: 12px;
color: var(--mid);
padding: 4px 0;
transition: color 0.15s;
}
.footer-legal a:hover {
color: var(--purple-800);
}
/* Ustawienia cookies – otwiera ponownie panel zgód (initConsent w script.js) */
.footer-legal-btn {
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
line-height: inherit;
color: var(--mid);
background: none;
border: 0;
padding: 4px 0;
cursor: pointer;
transition: color 0.15s;
}
.footer-legal-btn:hover {
color: var(--purple-800);
}
.footer-legal-btn:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 3px;
border-radius: 2px;
}
/* Nota o niezależności od Anthropic – pełna szerokość pod linkami */
.footer-disclaimer {
flex-basis: 100%;
order: 3;
max-width: 78ch;
font-size: 12px;
line-height: 1.6;
color: var(--mid);
margin: 0;
}
.footer-disclaimer a {
color: var(--purple-800);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s;
}
.footer-disclaimer a:hover {
color: var(--purple-400);
}
.footer-disclaimer a:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 3px;
border-radius: 2px;
}
/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
.nav-links { display: none; }
.hamburger { display: flex; }
.hero-inner {
grid-template-columns: 1fr;
text-align: center;
}
.hero-cta { justify-content: center; }
.hero-sub { margin-left: auto; margin-right: auto; }
.hero-img { max-width: 480px; margin: 0 auto; }
.hero::before, .hero::after { display: none; }
.categories-grid {
grid-template-columns: repeat(3, 1fr);
}
.ebooks-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Gdy w gridzie są dokładnie 3 karty, ostatnia (orphan) centruje się w wierszu 2
żeby nie zostawiać pustego slota po prawej. */
.ebooks-grid > .ebook-card:nth-child(3):last-child {
grid-column: 1 / -1;
max-width: calc((100% - var(--s6)) / 2);
margin-left: auto;
margin-right: auto;
}
.ebook-page-inner {
grid-template-columns: 1fr;
}
.ebook-order-box {
position: static;
}
.order-inner {
grid-template-columns: 1fr;
}
.order-summary-box {
position: static;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-grid > div:first-child {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--s10);
align-items: start;
}
.footer-grid > div:first-child .footer-payment-badge-wrap {
margin-top: 0;
}
}
@media (max-width: 768px) {
.container {
padding: 0 var(--s6);
}
.section, .section-lg {
padding: var(--s10) 0;
}
.ebooks-grid {
grid-template-columns: 1fr;
}
/* Reset reguły sieroty z bloku ≤992px – w 1 kolumnie karta ma pełną szerokość */
.ebooks-grid > .ebook-card:nth-child(3):last-child {
grid-column: auto;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.form-row {
grid-template-columns: 1fr;
}
/* Wyjątek: nr budynku / nr lokalu zostają obok siebie */
.form-row.form-row-compact {
grid-template-columns: 1fr 1fr;
}
/* NIP + „Pobierz z GUS" – przycisk pod polem, inaczej input robi się
za wąski na wpisanie 10 cyfr na małym ekranie. */
.company-fields .discount-row {
flex-direction: column;
align-items: stretch;
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--s10);
}
.footer-grid > div:first-child {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-legal {
justify-content: center;
}
.footer-disclaimer {
max-width: none;
}
.mood-pills {
gap: var(--s2);
}
.mood-pill {
font-size: 13px;
padding: 8px 14px 8px 10px;
}
.mood-ico {
width: 22px;
height: 22px;
margin-right: 8px;
}
}
/* ============================================================
BAZA WIEDZY – LISTING
============================================================ */
.baza-hero {
background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
color: var(--light);
padding: var(--s20) 0 var(--s16);
}
.baza-hero .section-label {
color: rgba(255,255,255,0.65);
}
.baza-hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 400;
color: #fff;
margin: var(--s2) 0 var(--s4);
line-height: 1.2;
}
.baza-hero-sub {
font-size: 1.1rem;
color: rgba(255,255,255,0.75);
max-width: 560px;
line-height: 1.6;
}
/* Siatka artykułów */
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s6);
}
.articles-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
/* Karta artykułu */
.article-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--gray-200);
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.article-card:hover {
transform: translateY(-4px);
border-color: var(--light);
}
.article-card-img-wrap {
aspect-ratio: 1200 / 630;
min-height: 160px;
overflow: hidden;
background: var(--gray-100);
}
.article-card-img-wrap--square {
aspect-ratio: 1 / 1;
min-height: 0;
}
.article-card-img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--purple-50) 0%, var(--purple-100) 100%);
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
}
.article-card-img-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.article-card-body {
padding: var(--s6);
flex: 1;
display: flex;
flex-direction: column;
}
.article-card-meta {
display: flex;
align-items: center;
gap: var(--s3);
margin-bottom: var(--s3);
}
.article-card-date {
font-size: 12px;
color: var(--mid);
}
.article-card-stars {
font-size: 12px;
color: var(--amber-400);
letter-spacing: 1px;
}
.article-card-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
color: var(--dark);
margin: 0 0 var(--s3);
line-height: 1.35;
}
.article-card-excerpt {
font-size: 14px;
color: var(--mid);
line-height: 1.6;
flex: 1;
margin-bottom: var(--s4);
}
.article-card-cta {
font-size: 13px;
font-weight: 600;
color: var(--purple-800);
letter-spacing: 0.02em;
}
/* ============================================================
ARTYKUŁ – STRONA POJEDYNCZA
============================================================ */
/* Breadcrumb */
.art-breadcrumb {
background: var(--gray-50);
padding: var(--s3) 0;
font-size: 13px;
color: var(--mid);
border-bottom: 1px solid var(--gray-200);
}
.art-breadcrumb a {
color: var(--purple-800);
text-decoration: none;
}
.art-breadcrumb a:hover {
text-decoration: underline;
}
.art-breadcrumb-sep {
margin: 0 var(--s2);
color: var(--gray-200);
}
/* Hero artykułu */
.art-hero {
padding: var(--s16) 0 var(--s10);
background: #fff;
border-bottom: 1px solid var(--gray-200);
}
.art-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s16);
align-items: center;
}
.art-hero-img-placeholder {
aspect-ratio: 1 / 1;
max-width: 440px;
margin: 0 auto;
background: linear-gradient(135deg, var(--purple-50) 0%, var(--purple-100) 100%);
border-radius: var(--r-card);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--light);
text-align: center;
padding: var(--s6);
}
.art-hero-img-photo {
width: 100%;
height: auto;
max-width: 440px;
margin: 0 auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--r-card);
display: block;
}
.art-hero-content {
display: flex;
flex-direction: column;
gap: var(--s4);
}
.art-meta {
display: flex;
align-items: center;
gap: var(--s4);
}
.art-meta-date {
font-size: 13px;
color: var(--mid);
}
.art-meta-stars {
font-size: 14px;
color: var(--amber-400);
letter-spacing: 1px;
}
.art-star { color: var(--gray-200); }
.art-star.filled { color: var(--amber-400); }
.art-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
font-weight: 400;
color: var(--dark);
line-height: 1.2;
margin: 0;
}
.art-excerpt {
font-size: 1.05rem;
color: var(--mid);
line-height: 1.65;
margin: 0;
}
/* Treść artykułu */
.art-body {
padding: var(--s16) 0;
background: #fff;
}
.art-body-inner {
max-width: 720px;
}
/* Article content typography */
.article-content {
font-size: 1rem;
color: var(--dark);
line-height: 1.75;
}
.article-content .article-lead {
font-size: 1.15rem;
font-weight: 500;
color: var(--purple-800);
line-height: 1.6;
border-left: 3px solid var(--purple-400);
padding-left: var(--s6);
margin-bottom: var(--s10);
}
.article-content h2 {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
color: var(--dark);
margin: var(--s10) 0 var(--s4);
line-height: 1.25;
}
.article-content h3 {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 600;
color: var(--dark);
margin: var(--s6) 0 var(--s3);
}
.article-content p {
margin-bottom: var(--s4);
}
.article-content ul,
.article-content ol {
padding-left: var(--s6);
margin-bottom: var(--s6);
}
.article-content li {
margin-bottom: var(--s2);
}
.article-content strong {
font-weight: 600;
color: var(--dark);
}
.article-content em {
font-style: italic;
}
.article-content blockquote {
background: var(--purple-50);
border-left: 3px solid var(--purple-400);
border-radius: 0 var(--r-input) var(--r-input) 0;
padding: var(--s4) var(--s6);
margin: var(--s6) 0;
font-size: 0.95rem;
color: var(--dark);
line-height: 1.65;
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin: var(--s6) 0;
font-size: 14px;
}
.article-content th {
background: var(--purple-50);
color: var(--purple-800);
font-weight: 600;
padding: var(--s3) var(--s4);
text-align: left;
border-bottom: 2px solid var(--purple-100);
}
.article-content td {
padding: var(--s3) var(--s4);
border-bottom: 1px solid var(--gray-200);
color: var(--mid);
}
.article-content tr:last-child td {
border-bottom: none;
}
.article-content a {
color: var(--purple-800);
text-decoration: underline;
text-underline-offset: 2px;
}
.article-content a:hover {
color: var(--purple-400);
}
.article-content a:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 2px;
border-radius: 2px;
}
/* Sekcja FAQ w artykule */
.article-content .article-faq {
margin-top: var(--s16);
padding-top: var(--s10);
border-top: 1px solid var(--gray-200);
}
.article-content .article-faq h2 {
margin-top: 0;
}
.article-content .article-faq h3 {
margin-top: var(--s6);
padding-top: var(--s6);
border-top: 1px solid var(--gray-100);
color: var(--purple-800);
}
.article-content .article-faq h3:first-of-type {
margin-top: var(--s6);
padding-top: 0;
border-top: none;
}
.article-content .article-faq p {
color: var(--mid);
}
/* Sekcja Źródła w artykule */
.article-content .article-sources {
margin-top: var(--s16);
padding-top: var(--s10);
border-top: 1px solid var(--gray-200);
}
.article-content .article-sources h2 {
margin-top: 0;
font-size: 1.25rem;
}
.article-content .article-sources ol,
.article-content .article-sources ul {
font-size: 0.9rem;
color: var(--mid);
line-height: 1.6;
}
.article-content .article-sources li {
margin-bottom: var(--s3);
}
.article-content .article-sources a {
word-break: break-word;
}
/* Nawigacja prev/next */
.art-nav-bar {
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
padding: var(--s6) 0;
}
.art-nav-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--s6);
align-items: center;
}
.art-nav-prev,
.art-nav-next {
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
color: inherit;
}
.art-nav-prev { align-items: flex-start; }
.art-nav-next { align-items: flex-end; }
.art-nav-dir {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mid);
}
.art-nav-title {
font-size: 14px;
font-weight: 500;
color: var(--purple-800);
line-height: 1.3;
}
.art-nav-prev:hover .art-nav-title,
.art-nav-next:hover .art-nav-title {
text-decoration: underline;
}
.art-nav-all {
font-size: 13px;
color: var(--mid);
text-decoration: none;
padding: var(--s2) var(--s4);
border: 1px solid var(--gray-200);
border-radius: var(--r-pill);
white-space: nowrap;
}
.art-nav-all:hover {
background: var(--gray-100);
}
.art-nav-all:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.article-card:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
/* Related section */
.related-section {
padding: var(--s16) 0;
}
/* ============================================================
BAZA WIEDZY – RESPONSIVE
============================================================ */
@media (max-width: 992px) {
.articles-grid,
.articles-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.art-hero-inner {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
.art-nav-inner {
grid-template-columns: 1fr;
text-align: center;
gap: var(--s4);
}
.art-nav-prev,
.art-nav-next {
align-items: center;
}
}
@media (max-width: 768px) {
.articles-grid,
.articles-grid-3 {
grid-template-columns: 1fr;
}
.art-body-inner {
max-width: 100%;
}
.article-content blockquote {
padding: var(--s3) var(--s4);
}
.art-title {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.payment-methods {
grid-template-columns: 1fr;
}
.bank-info-row {
flex-direction: column;
gap: var(--s1);
}
.bank-info-value {
text-align: left;
}
}
/* ============================================================
EBOOKI PAGE – FILTER BAR, DROPDOWNS, BOTTOM SHEET
============================================================ */
.filter-sticky {
position: sticky;
top: var(--nav-h);
z-index: 40;
background: rgba(244, 239, 231, 0.94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.filter-sticky.is-condensed {
border-bottom-color: var(--border);
}
.filter-sticky-inner {
padding-top: var(--s3);
padding-bottom: var(--s3);
display: flex;
align-items: center;
gap: var(--s3);
flex-wrap: wrap;
}
.filter-sticky-label {
font-size: 13px;
color: var(--ink-500);
}
/* Active chip */
.filter-active-wrap {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--s3);
}
.filter-active-wrap[hidden] { display: none; }
.filter-active {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 8px 10px 8px 14px;
border-radius: var(--r-pill);
background: var(--cta-bg);
color: #fff;
font-size: 13px;
}
.filter-active-x {
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 14px;
line-height: 1;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
padding: 0;
}
.filter-active-x:hover { background: rgba(255, 255, 255, 0.3); }
.filter-sticky-count {
font-size: 13px;
color: var(--ink-500);
}
/* Chevron */
.filter-chevron {
font-size: 10px;
opacity: 0.6;
line-height: 1;
}
/* Desktop dropdown */
.filter-dd { position: relative; }
.filter-dd-btn {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 8px 14px;
border-radius: var(--r-pill);
background: #fff;
border: 1px solid var(--border);
color: var(--ink-900);
font-size: 13px;
font-family: var(--font-body);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.filter-dd-btn:hover { border-color: var(--border-strong); }
.filter-dd-btn:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
.filter-dd-btn.is-active {
background: var(--cta-bg);
color: #fff;
border-color: var(--cta-bg);
}
.filter-dd-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: #fff;
border-radius: var(--r-card);
border: 1px solid var(--border);
padding: var(--s2);
min-width: 260px;
z-index: 50;
display: none;
}
.filter-dd-menu.is-open { display: block; }
.filter-dd-item {
display: flex;
align-items: center;
gap: var(--s3);
width: 100%;
padding: 10px 12px;
border-radius: 10px;
font-size: 14px;
color: var(--ink-900);
text-align: left;
background: transparent;
border: none;
cursor: pointer;
font-family: var(--font-body);
}
.filter-dd-item:hover { background: var(--ink-wash); }
.filter-dd-item.is-active {
background: rgba(28, 27, 58, 0.06);
font-weight: 500;
}
.filter-dd-item .filter-topic-dot {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.filter-dd-item .filter-topic-dot.zarabiaj { background: var(--pink-50); color: var(--pink-800); }
.filter-dd-item .filter-topic-dot.instagram { background: var(--purple-50); color: var(--purple-800); }
.filter-dd-item .filter-topic-dot.ogarnij { background: var(--teal-50); color: var(--teal-800); }
.filter-dd-item .filter-topic-dot.biznes { background: var(--amber-50); color: var(--amber-800); }
.filter-dd-item .filter-topic-dot.czas { background: var(--coral-50); color: var(--coral-800); }
.filter-count-badge {
margin-left: auto;
font-size: 12px;
color: var(--ink-500);
}
/* Mobile pills */
.filter-mobile-pills {
display: none;
gap: var(--s2);
width: 100%;
}
.filter-mobile-pill {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: var(--s2);
padding: 10px 14px;
border-radius: var(--r-pill);
background: #fff;
border: 1px solid var(--border);
color: var(--ink-900);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
overflow: hidden;
cursor: pointer;
}
.filter-mobile-pill:hover:not([aria-pressed="true"]) {
border-color: var(--border-strong);
}
.filter-mobile-pill[aria-pressed="true"] {
background: var(--cta-bg);
color: #fff;
border-color: var(--cta-bg);
}
.filter-mobile-pill-label {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.filter-mobile-pill .filter-active-x {
flex-shrink: 0;
width: 20px;
height: 20px;
font-size: 13px;
}
/* Page section spacing */
.filter-section {
padding-top: var(--s10);
padding-bottom: 0;
}
.filter-section-helper {
text-align: center;
color: var(--ink-500);
font-size: 14px;
margin: 0 0 var(--s6);
}
/* Results head */
.filter-results-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
flex-wrap: wrap;
margin-bottom: var(--s6);
}
.filter-results-head .section-title em {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
color: var(--purple-800);
}
.filter-results-meta {
display: inline-flex;
align-items: center;
gap: var(--s3);
}
.filter-results-count {
font-size: 13px;
color: var(--ink-500);
}
/* Empty state */
.filter-empty {
padding: var(--s16) var(--s6);
text-align: center;
background: var(--bg-card-inset);
border-radius: var(--r-card-lg);
border: 1px dashed var(--border-strong);
color: var(--ink-500);
margin-top: var(--s6);
}
.filter-empty h3 {
font-family: var(--font-display);
font-size: 20px;
color: var(--ink-900);
margin: 0 0 var(--s2);
font-weight: 400;
}
.filter-empty p {
margin: 0 0 var(--s4);
}
/* Bottom sheet */
.filter-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(28, 27, 58, 0.4);
display: none;
align-items: flex-end;
animation: filterFadeIn 0.2s ease both;
}
.filter-sheet-backdrop[hidden] { display: none; }
.filter-sheet-backdrop.is-open { display: flex; }
.filter-sheet {
width: 100%;
background: var(--page-bg);
border-top-left-radius: 24px;
border-top-right-radius: 24px;
padding: 14px 16px 24px;
max-height: 75vh;
overflow: auto;
animation: filterSlideUp 0.25s ease both;
}
.filter-sheet-handle {
width: 44px;
height: 4px;
background: var(--border-strong);
border-radius: 2px;
margin: 0 auto 16px;
}
.filter-sheet-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
margin: 0 0 var(--s4);
text-align: center;
color: var(--ink-900);
}
.filter-sheet-item {
display: flex;
align-items: center;
gap: var(--s3);
padding: 14px 16px;
border-radius: 12px;
width: 100%;
background: transparent;
color: var(--ink-900);
font-size: 15px;
font-family: var(--font-body);
text-align: left;
border: none;
cursor: pointer;
margin-bottom: 4px;
}
.filter-sheet-item.is-active {
background: rgba(28, 27, 58, 0.06);
font-weight: 600;
}
.filter-sheet-item-label { flex: 1; }
.filter-sheet-item-check {
color: var(--ink-500);
font-size: 16px;
}
@keyframes filterFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes filterSlideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Focus-visible dla całej grupy filterów */
.filter-dd-item:focus-visible,
.filter-sheet-item:focus-visible,
.filter-mobile-pill:focus-visible,
.filter-active-x:focus-visible {
outline: 3px solid var(--purple-400);
outline-offset: 2px;
}
/* Responsive */
@media (max-width: 860px) {
.filter-sticky-inner .filter-dd,
.filter-sticky-inner .filter-sticky-label,
.filter-sticky-inner .filter-active-wrap {
display: none;
}
.filter-mobile-pills { display: flex; }
.filter-sticky-inner { gap: 0; }
}
/* ============================================================
KOSZYK (cart)
============================================================ */
/* Przycisk koszyka w navie */
.nav-cart-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-left: var(--s4);
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
color: var(--dark);
}
.nav-cart-btn:hover {
background: rgba(28, 27, 58, 0.06);
border-color: rgba(28, 27, 58, 0.12);
color: var(--ink-900);
}
.nav-cart-btn:focus-visible {
outline: 2px solid var(--ink-900);
outline-offset: 2px;
}
/* Ikona koszyka – czysty CSS (torba) */
.nav-cart-icon {
position: relative;
display: block;
width: 18px;
height: 19px;
}
.nav-cart-icon::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 18px;
height: 14px;
border: 2px solid currentColor;
border-radius: 3px 3px 4px 4px;
}
.nav-cart-icon::after {
content: "";
position: absolute;
left: 4px;
top: 0;
width: 10px;
height: 8px;
border: 2px solid currentColor;
border-bottom: none;
border-radius: 6px 6px 0 0;
}
/* Licznik */
.nav-cart-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--cta-bg);
color: #fff;
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
border-radius: 10px;
transform: scale(0);
transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
pointer-events: none;
font-family: var(--font-body);
letter-spacing: 0;
}
.nav-cart-count.has-items {
transform: scale(1);
}
/* Bump animation po dodaniu */
@keyframes cartBump {
0% { transform: scale(1); }
40% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.nav-cart-btn.cart-bump {
animation: cartBump 0.35s ease-out;
}
/* Backdrop + drawer */
.cart-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(28, 27, 58, 0.45);
z-index: 1000;
opacity: 0;
transition: opacity 0.22s ease;
}
.cart-drawer-backdrop.is-open { opacity: 1; }
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 100vw);
background: var(--cream);
z-index: 1001;
border-left: 1px solid var(--border);
transform: translateX(100%);
transition: transform 0.25s cubic-bezier(0.3, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer:focus { outline: none; }
.cart-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s6) var(--s10);
border-bottom: 1px solid var(--gray-200);
flex-shrink: 0;
}
.cart-drawer-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--ink-900);
margin: 0;
}
.cart-drawer-close {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
font-size: 26px;
line-height: 1;
color: var(--mid);
cursor: pointer;
border-radius: 50%;
transition: background 0.15s;
}
.cart-drawer-close:hover {
background: rgba(28, 27, 58, 0.06);
color: var(--ink-900);
}
.cart-drawer-close:focus-visible {
outline: 2px solid var(--ink-900);
outline-offset: 2px;
}
.cart-drawer-body {
flex: 1;
overflow-y: auto;
padding: var(--s6) var(--s10);
}
/* Pusty koszyk */
.cart-empty {
text-align: center;
padding: var(--s16) var(--s4) var(--s10);
}
.cart-empty-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--s6);
border-radius: 50%;
background: var(--gray-100);
position: relative;
}
.cart-empty-icon::before,
.cart-empty-icon::after {
content: "";
position: absolute;
border: 2px solid var(--mid);
}
.cart-empty-icon::before {
left: 50%;
top: 28px;
transform: translateX(-50%);
width: 28px;
height: 22px;
border-radius: 3px 3px 4px 4px;
}
.cart-empty-icon::after {
left: 50%;
top: 20px;
transform: translateX(-50%);
width: 16px;
height: 12px;
border-bottom: none;
border-radius: 8px 8px 0 0;
}
.cart-empty-title {
font-size: 16px;
font-weight: 500;
color: var(--ink-900);
margin: 0 0 var(--s2);
}
.cart-empty-sub {
font-size: 14px;
color: var(--mid);
margin: 0 0 var(--s6);
line-height: 1.5;
}
/* Lista pozycji */
.cart-item-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.cart-item {
display: flex;
align-items: center;
gap: var(--s3);
padding: var(--s3);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-input);
transition: border-color 0.15s;
}
.cart-item:hover { border-color: rgba(28, 27, 58, 0.18); }
.cart-item-info {
flex: 1;
min-width: 0;
}
.cart-item-title {
font-size: 14px;
font-weight: 500;
color: var(--ink-900);
line-height: 1.35;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.cart-item-price {
font-size: 13px;
font-weight: 500;
color: var(--mid);
}
.cart-item-remove {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--light);
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s, color 0.15s;
}
.cart-item-remove:hover {
background: var(--coral-50);
color: var(--coral-400);
}
.cart-item-remove:focus-visible {
outline: 2px solid var(--coral-400);
outline-offset: 1px;
}
/* Stopka drawera */
.cart-drawer-foot {
flex-shrink: 0;
padding: var(--s6) var(--s10) var(--s10);
background: #fff;
border-top: 1px solid var(--gray-200);
}
.cart-drawer-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--s4);
}
.cart-drawer-total-label {
font-size: 14px;
color: var(--mid);
text-transform: uppercase;
letter-spacing: 1px;
}
.cart-drawer-total-price {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
color: var(--ink-900);
}
.cart-drawer-checkout {
width: 100%;
justify-content: center;
}
.cart-drawer-note {
font-size: 11px;
color: var(--light);
text-align: center;
margin: var(--s3) 0 0;
}
/* Toast */
.cart-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 20px);
display: flex;
align-items: center;
gap: var(--s3);
padding: 12px 20px;
background: var(--cta-bg);
color: #fff;
border-radius: var(--r-pill);
z-index: 1100;
opacity: 0;
transition: transform 0.25s ease, opacity 0.25s ease;
max-width: calc(100vw - 32px);
font-size: 14px;
font-weight: 500;
}
.cart-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.cart-toast-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--teal-400);
color: #fff;
font-size: 12px;
font-weight: bold;
flex-shrink: 0;
}
.cart-toast-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
/* Karta e-booka – wiersz akcji z dwoma przyciskami */
.ebook-card-actions {
display: flex;
gap: var(--s2);
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.ebook-card-actions .btn {
justify-content: center;
white-space: nowrap;
padding-left: var(--s4);
padding-right: var(--s4);
}
/* Stan "w koszyku" */
.cart-add-btn.is-in-cart {
background: var(--teal-50);
color: var(--teal-800);
border-color: var(--teal-400);
}
.cart-add-btn.is-in-cart:hover {
background: var(--teal-50);
color: var(--teal-800);
}
/* Order summary – tryb cart */
.order-summary-empty {
text-align: center;
padding: var(--s6) 0;
color: var(--mid);
font-size: 14px;
}
.order-summary-empty a {
color: var(--purple-800);
text-decoration: underline;
}
.order-summary-ebook-price {
font-size: 12px;
color: var(--mid);
margin-top: 2px;
font-weight: 500;
}
/* Strona download.php – multi-item */
.download-multi-card {
background: #fff;
border-radius: var(--r-card);
padding: var(--s16) var(--s10);
border: 1px solid var(--border);
margin: var(--s10) auto;
}
.download-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.download-list-item {
display: flex;
align-items: center;
gap: var(--s4);
padding: var(--s4);
background: var(--page-bg);
border-radius: var(--r-input);
border: 1px solid var(--border);
}
.download-list-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.download-list-title {
font-size: 15px;
font-weight: 500;
color: var(--ink-900);
line-height: 1.35;
}
.download-list-btn {
flex-shrink: 0;
white-space: nowrap;
}
@media (max-width: 620px) {
.download-list-item {
flex-direction: column;
align-items: flex-start;
}
.download-list-btn {
width: 100%;
justify-content: center;
}
}
/* Mobile drawer – pełna szerokość */
@media (max-width: 480px) {
.cart-drawer {
width: 100vw;
}
.cart-drawer-head,
.cart-drawer-body,
.cart-drawer-foot {
padding-left: var(--s6);
padding-right: var(--s6);
}
.ebook-card-actions {
flex-direction: column;
align-items: stretch;
}
/* WCAG/touch: główne CTA sprzedażowe min. 44px wysokości na mobile */
.ebook-card-actions .btn-sm {
min-height: 44px;
}
}
/* Mobile nav – przesuń cart button */
@media (max-width: 860px) {
.nav-cart-btn {
margin-left: auto;
margin-right: var(--s3);
}
}
/* ---- CONSENT BANNER (RODO + Google Consent Mode v2) ---- */
.consent-banner {
position: fixed;
left: var(--s4);
right: var(--s4);
bottom: var(--s4);
max-width: 720px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: var(--r-card);
padding: var(--s6);
z-index: 1200;
font-family: var(--font-body);
}
.consent-banner[hidden] {
display: none !important;
}
.consent-banner-inner {
display: flex;
flex-direction: column;
gap: var(--s4);
}
.consent-banner-text {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.consent-banner-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
color: var(--dark);
margin: 0;
line-height: 1.25;
}
.consent-banner-desc {
font-size: 13px;
color: var(--mid);
line-height: 1.6;
margin: 0;
}
.consent-banner-desc a {
color: var(--purple-800);
text-decoration: underline;
}
.consent-banner-desc a:hover {
color: var(--purple-400);
}
.consent-banner-actions {
display: flex;
gap: var(--s2);
flex-wrap: wrap;
justify-content: flex-end;
}
.consent-banner-actions .btn {
flex: 0 0 auto;
}
/* Customize panel */
.consent-customize {
margin-top: var(--s2);
padding-top: var(--s4);
border-top: 1px solid var(--gray-100);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.consent-customize[hidden] {
display: none !important;
}
.consent-customize-row {
display: flex;
gap: var(--s3);
align-items: flex-start;
padding: var(--s2) 0;
cursor: pointer;
}
.consent-customize-row input[type="checkbox"] {
margin-top: 4px;
width: 16px;
height: 16px;
accent-color: var(--purple-400);
flex-shrink: 0;
}
.consent-customize-text {
display: block;
flex: 1;
font-size: 14px;
color: var(--dark);
line-height: 1.5;
}
.consent-customize-text strong {
display: block;
font-weight: 500;
margin-bottom: 2px;
}
.consent-customize-desc {
display: block;
font-size: 12px;
color: var(--mid);
font-weight: 400;
line-height: 1.5;
}
.consent-save-btn {
align-self: flex-end;
margin-top: var(--s2);
}
@media (max-width: 600px) {
.consent-banner {
left: var(--s3);
right: var(--s3);
bottom: var(--s3);
padding: var(--s4);
}
.consent-banner-actions {
justify-content: stretch;
}
.consent-banner-actions .btn {
flex: 1 1 auto;
}
.consent-save-btn {
align-self: stretch;
}
}
/* ============================================================
OPINIE KLIENTEK (ebook.php + opinia.php)
============================================================ */
/* Znaki gwiazdek – czysty tekst, kolor amber */
.stars {
color: var(--amber-400);
letter-spacing: 2px;
font-size: 15px;
line-height: 1;
white-space: nowrap;
}
/* Badge oceny pod tytułem produktu */
.ebook-rating-badge {
display: inline-flex;
align-items: center;
gap: var(--s2);
margin-bottom: var(--s4);
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
text-decoration: none;
color: var(--dark);
transition: border-color 0.15s ease;
}
.ebook-rating-badge:hover {
border-color: var(--border-strong);
}
.ebook-rating-value {
font-weight: 600;
font-size: 14px;
}
.ebook-rating-count {
font-size: 13px;
color: var(--mid);
}
/* Sekcja opinii */
.ebook-reviews {
padding: var(--s16) 0;
background: var(--bg-soft);
border-top: 1px solid var(--border);
}
.ebook-reviews-head {
text-align: center;
margin-bottom: var(--s10);
}
.ebook-reviews-title {
font-family: var(--font-display);
font-size: clamp(26px, 4vw, 34px);
color: var(--dark);
margin: 0 0 var(--s3);
}
.ebook-reviews-summary {
display: inline-flex;
align-items: center;
gap: var(--s3);
flex-wrap: wrap;
justify-content: center;
}
.ebook-reviews-avg {
font-weight: 600;
color: var(--dark);
}
.ebook-reviews-total {
color: var(--mid);
font-size: 14px;
}
.ebook-reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--s6);
}
.review-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: var(--s6);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.review-card-head {
display: flex;
align-items: center;
gap: var(--s3);
flex-wrap: wrap;
}
.review-verified {
font-size: 11px;
font-weight: 600;
color: var(--teal-800);
background: var(--teal-50);
border-radius: var(--r-badge);
padding: 2px 8px;
}
.review-card-body {
font-size: 15px;
line-height: 1.65;
color: var(--mid);
margin: 0;
}
.review-card-author {
margin: 0;
font-size: 14px;
color: var(--dark);
}
.review-card-author strong {
font-weight: 600;
}
/* ---- Strona wystawiania opinii (opinia.php) ---- */
.review-page {
padding: var(--s16) 0;
min-height: 60vh;
}
.review-page-box {
max-width: 640px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-card-lg);
padding: var(--s10);
}
.review-page-title {
font-family: var(--font-display);
font-size: clamp(24px, 4vw, 32px);
color: var(--dark);
margin: 0 0 var(--s3);
}
.review-page-lead {
color: var(--mid);
line-height: 1.7;
margin: 0 0 var(--s6);
}
.review-form-forbook {
color: var(--mid);
font-size: 14px;
margin: 0 0 var(--s4);
}
.review-form-group {
margin-bottom: var(--s4);
}
.review-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
}
.review-form-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--dark);
margin-bottom: var(--s2);
}
.review-form-opt {
font-weight: 400;
color: var(--light);
}
.review-form-input {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--r-input);
font-family: var(--font-body);
font-size: 15px;
color: var(--dark);
background: #fff;
}
.review-form-input:focus-visible {
outline: 2px solid var(--purple-400);
outline-offset: 2px;
border-color: var(--purple-400);
}
textarea.review-form-input {
resize: vertical;
line-height: 1.6;
}
.review-form-error {
background: var(--coral-50);
border: 1px solid var(--coral-400);
color: var(--coral-800);
border-radius: var(--r-input);
padding: var(--s3) var(--s4);
margin-bottom: var(--s4);
font-size: 14px;
line-height: 1.5;
}
.review-form-note {
font-size: 12px;
color: var(--light);
text-align: center;
margin: var(--s3) 0 0;
}
/* Gwiazdki jako input (reverse dla efektu hover w CSS) */
.review-stars-input {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 4px;
}
.review-stars-input input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.review-stars-input label {
font-size: 30px;
line-height: 1;
color: var(--gray-200);
cursor: pointer;
transition: color 0.12s ease;
}
.review-stars-input input:checked ~ label,
.review-stars-input label:hover,
.review-stars-input label:hover ~ label {
color: var(--amber-400);
}
/* Widoczny focus klawiaturowy dla ukrytych radio-gwiazdek (a11y) */
.review-stars-input input:focus-visible + label {
outline: 2px solid var(--purple-400);
outline-offset: 2px;
border-radius: 4px;
}
@media (max-width: 768px) {
.review-page-box {
padding: var(--s6);
}
.review-form-row {
grid-template-columns: 1fr;
}
}
/* ============================================================
LANDING DARMOWEGO E-BOOKA (pobierz.php)
Layout dzieli z order.php (.order-page / .order-inner / .order-form-card),
poniżej tylko elementy specyficzne dla lead magnetu.
============================================================ */
/* .order-page dokłada padding-top na wysokość nawigacji, mimo że nad sekcją
stoi już .nav-spacer (64 px) – na landingu to podwójne odsunięcie spycha
badge „Darmowy e-book" o ~190 px w dół. Tu liczy się pierwszy ekran. */
.order-page.lead-page {
padding-top: var(--s10);
}
/* Obie karty mają trzymać wspólną górną krawędź. Domyślny .order-summary-box
jest sticky – przy najmniejszym scrollu przykleja się pod nawigację i zjeżdża
w dół względem formularza. Landing jest krótki, więc sticky nie ma po czym
jechać i tylko rozjeżdża układ. */
/* Obie karty tworzą jeden rząd: wspólna górna i dolna krawędź. .order-inner ma
globalnie align-items: start (w order.php sticky box ma zostać krótki), więc
nadpisujemy tylko na landingu. Kolumny są flexami, żeby karta rozciągnęła się
na pełną wysokość komórki grida – samo stretch na wrapperze nie wystarczy. */
.lead-page .order-inner {
align-items: stretch;
}
.lead-page .order-inner > div {
display: flex;
flex-direction: column;
}
.lead-page .order-inner > div > .order-form-card,
.lead-page .order-inner > div > .order-summary-box {
flex: 1;
}
.lead-page .order-summary-box {
position: static;
/* Karta formularza ma padding --s10, box podsumowania --s6 – przez to
nagłówki „Gdzie wysłać…" i „Co dostajesz" startowały 16 px od siebie.
Wyrównujemy sam padding górny, boki zostają węższe (box ma 360 px). */
padding-top: var(--s10);
}
.lead-intro {
max-width: 640px;
margin: 0 auto var(--s10);
text-align: center;
}
.lead-badge {
display: inline-block;
padding: 5px 14px;
border-radius: var(--r-pill);
background: var(--teal-50);
color: var(--teal-800);
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.lead-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
line-height: 1.15;
color: var(--dark);
margin: var(--s4) 0 var(--s3);
}
.lead-subtitle {
font-size: 18px;
line-height: 1.6;
color: var(--mid);
margin: 0;
}
/* Podpis pod polem formularza (np. „Zajrzyj też do folderu spam”).
--mid, nie --light: przy 12px --light daje 3.6:1, a WCAG AA wymaga 4.5:1. */
.form-hint {
font-size: 12px;
color: var(--mid);
line-height: 1.5;
margin-top: 6px;
}
.lead-summary-cover {
position: relative;
width: 100%;
/* Cap na 480px: poniżej 992px sidebar rozciąga się na całą szerokość
kontenera i okładka (źródło 800 px) byłaby skalowana w górę. */
max-width: 480px;
aspect-ratio: 16 / 9;
border-radius: var(--r-input);
overflow: hidden;
margin: 0 auto var(--s4);
background: var(--gray-100);
}
.lead-summary-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lead-summary-list {
list-style: none;
margin: 0 0 var(--s4);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.lead-summary-list li {
position: relative;
padding-left: 22px;
font-size: 14px;
line-height: 1.5;
color: var(--mid);
}
.lead-summary-list li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: var(--teal-400);
font-weight: 600;
}
/* ---- Ekran sukcesu (po wysłaniu formularza) ---- */
.lead-success {
text-align: center;
}
.lead-success-icon {
width: 56px;
height: 56px;
margin: 0 auto var(--s4);
border-radius: 50%;
background: var(--teal-50);
color: var(--teal-800);
font-size: 26px;
line-height: 56px;
}
.lead-success-title {
font-family: var(--font-display);
font-size: 24px;
color: var(--dark);
margin-bottom: var(--s3);
}
.lead-success-text {
font-size: 15px;
line-height: 1.65;
color: var(--mid);
margin: 0 auto var(--s6);
max-width: 420px;
}
.lead-success-text strong {
color: var(--dark);
word-break: break-word;
}
/* ---- Opis pod formularzem ---- */
.lead-about {
max-width: 680px;
margin: var(--s16) auto 0;
padding-top: var(--s10);
border-top: 1px solid var(--gray-200);
}
.lead-about-title {
font-family: var(--font-display);
font-size: 24px;
color: var(--dark);
margin-bottom: var(--s4);
}
.lead-about p {
font-size: 16px;
line-height: 1.75;
color: var(--mid);
margin: 0;
}
@media (max-width: 768px) {
.order-page.lead-page {
padding-top: var(--s6);
}
.lead-intro {
margin-bottom: var(--s6);
}
.lead-about {
margin-top: var(--s10);
}
}