/* Bloki tresci SEO pod siatka kategorii. Zrodlo: widgety HTML szablonow Elementora #11625 i #11657, gdzie siedzialy jako caly dokument z wlasnym Google Fonts. Selektory maja dzialac tylko w .kd-seo-wrapper. Klasy wspolne ze strona produktu (`.kd-section-title`, `.kd-trust`) sa zamkniete w `:where(.kd-seo-wrapper)`, patrz nizej. */ /* ── RESET & BASE ── */ .kd-seo-wrapper * { box-sizing: border-box; margin: 0; padding: 0; } .kd-seo-wrapper { font-family: var(--kd-font-body); font-size: var(--kd-body-sm-size); line-height: 1.7; color: var(--kd-color-text); max-width: 1200px; margin: 0 auto; padding: 0 16px; /* * Aliasy tego bloku byly wyliczone recznie z turkusu (#e6f9f9, #d4eded, #1a2e2e…) i dlatego * kategoria trzymala stara palete jeszcze dlugo po zmianie tokenow. Teraz kazdy wynika * z tokena. UWAGA: `--kd-radius` i `--kd-shadow` sa tu deklarowane ponownie i przeslanialy * wartosc globalna w calym poddrzewie — dlatego musza wskazywac na te sama rzecz co ona, * inaczej bloki SEO zostalyby zaokraglone przy motywie o prostym kancie. */ --kd-primary: var(--kd-color-accent); --kd-primary-dk: var(--kd-color-text); --kd-primary-lt: color-mix(in srgb, var(--kd-color-accent) 8%, var(--kd-color-background)); --kd-accent: var(--kd-color-surface); --kd-dark: var(--kd-color-text); --kd-mid: var(--kd-color-text-muted); --kd-muted: var(--kd-color-text-muted); --kd-border: var(--kd-color-border); --kd-white: var(--kd-color-background); --kd-radius: var(--kd-radius-md); --kd-radius-lg: var(--kd-radius-md); --kd-shadow: var(--kd-shadow-card-hover); --kd-shadow-md: var(--kd-shadow-card-hover); } /* ── IKONY – shard kryształowy dla kart kamieni ── */ .kd-shard { width: 34px; height: 42px; margin: 0 0 12px; } .kd-shard-inner { width: 100%; height: 100%; background: var(--kd-primary-lt); clip-path: polygon(50% 0%, 100% 22%, 88% 100%, 12% 100%, 0% 22%); display: flex; align-items: center; justify-content: center; padding-top: 6px; } .kd-shard-dot { width: 9px; height: 9px; background: var(--kd-primary); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .kd-hex-icon { width: 42px; height: 42px; margin-bottom: 14px; position: relative; } .kd-occ-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--kd-primary-lt); border: 1.5px solid color-mix(in srgb, var(--kd-primary) 35%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kd-occ-icon svg { width: 17px; height: 17px; } .kd-trust-icon-wrap { width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--kd-primary) 40%, transparent); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .kd-trust-icon-wrap svg { width: 18px; height: 18px; } /* ── INTRO ── */ .kd-intro { background: var(--kd-color-surface); border-radius: var(--kd-radius-lg); padding: 40px 44px; margin: 40px 0 32px; border-left: 2px solid var(--kd-primary); } .kd-intro h2 { font-size: var(--kd-h2-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 12px; line-height: 1.3; } .kd-intro p { font-size: var(--kd-body-size); color: var(--kd-mid); max-width: 820px; line-height: 1.75; } .kd-intro p + p { margin-top: 10px; } .kd-intro strong { color: var(--kd-primary-dk); } /* ── SECTION TITLES ── */ /* ⚠️ `.kd-section-title` i `.kd-trust` to TAKZE klasy strony produktu (naglowki sekcji pod boksem zakupu, znaczki zaufania w `kd_trust_badges()`). Od 23.09.2026 FAQ ma kazdy produkt, wiec ten arkusz laduje sie na kazdym i bez zakresu sciskal znaczki w 4 kolumny, a naglowki wcinal o 14 px. `:where()` zamyka reguly w bloku SEO i nie zmienia ich specyficznosci, wiec kategorie wygladaja jak przed. */ :where(.kd-seo-wrapper) .kd-section-title { font-size: var(--kd-h3-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--kd-border); display: flex; align-items: center; gap: 10px; } :where(.kd-seo-wrapper) .kd-section-title::before { content: ''; display: inline-block; width: 4px; height: 22px; background: var(--kd-primary); border-radius: 0; flex-shrink: 0; } :where(.kd-seo-wrapper) .kd-section-sub { font-size: var(--kd-body-sm-size); color: var(--kd-muted); margin-bottom: 22px; } /* ── TRUST BAR ── */ /* Byla to ciemna plaszczyzna z jasnoszarym podpisem. Po przejsciu aliasow na tokeny `--kd-dark` to kolor pisma strony, a `--kd-muted` szary — czyli ciemny na ciemnym. Zamiast dobierac drugi odcien szarosci pod ciemne tlo, pasek traci wypelnienie: liczby stoja na powierzchni strony, oddzielone wloskowata linia u gory i u dolu. */ :where(.kd-seo-wrapper) .kd-trust { background: none; border-block: 1px solid var(--kd-border); border-radius: 0; padding: 28px 0; margin: 36px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } :where(.kd-seo-wrapper) .kd-trust-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } :where(.kd-seo-wrapper) .kd-trust-num { font-size: var(--kd-h3-size); font-weight: 800; color: var(--kd-primary); line-height: 1.1; } :where(.kd-seo-wrapper) .kd-trust-label { font-size: var(--kd-label-size); color: var(--kd-muted); line-height: 1.4; } /* ── KORZYŚCI ── */ .kd-benefits { margin: 36px 0; } .kd-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .kd-benefit-card { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 24px 20px; transition: box-shadow var(--kd-motion-fast) var(--kd-ease), transform var(--kd-motion-fast) var(--kd-ease); position: relative; overflow: hidden; } .kd-benefit-card:hover { box-shadow: var(--kd-shadow-md); transform: translateY(-2px); } .kd-benefit-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--kd-primary), var(--kd-primary-dk)); } .kd-benefit-card h3 { font-size: var(--kd-body-sm-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 6px; } .kd-benefit-card p { font-size: var(--kd-caption-size); color: var(--kd-muted); line-height: 1.6; } /* ── KAMIENIE ── */ .kd-stones { margin: 36px 0; } .kd-stones-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* * Karta kamienia byla srodkowana. Przy jednym zdaniu to dziala, tu stoi ich dwanascie po cztery * wiersze — kazdy akapit ma wtedy obie krawedzie postrzepione i oko nie ma od czego zaczynac. * Reszta serwisu sklada do lewej od S8; ten blok byl ostatnim wysrodkowanym. */ .kd-stone-card { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 20px 16px 16px; transition: box-shadow var(--kd-motion-fast) var(--kd-ease); } .kd-stone-card:hover { box-shadow: var(--kd-shadow); } .kd-stone-badge { display: inline-block; background: var(--kd-primary-lt); color: var(--kd-primary-dk); font-size: var(--kd-label-size); font-weight: 600; padding: 2px 9px; border-radius: var(--kd-radius-pill); margin-bottom: 7px; } .kd-stone-card h3 { font-size: var(--kd-body-sm-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 4px; } .kd-stone-card p { font-size: var(--kd-caption-size); color: var(--kd-muted); line-height: 1.55; } /* ── DWUKOLUMNOWE ── */ .kd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 36px 0; } .kd-box { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 28px 26px; } .kd-box-teal { background: var(--kd-primary-lt); border-color: color-mix(in srgb, var(--kd-primary) 35%, transparent); } .kd-box h3 { font-size: var(--kd-body-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--kd-border); } .kd-box-teal h3 { border-bottom-color: color-mix(in srgb, var(--kd-primary) 25%, transparent); } /* ── LISTY ── */ .kd-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .kd-list li { font-size: var(--kd-caption-size); color: var(--kd-mid); padding-left: 18px; position: relative; line-height: 1.55; } .kd-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--kd-primary); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .kd-list li strong { color: var(--kd-dark); font-weight: 600; } /* ── CHECK LISTA ── */ .kd-check-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .kd-check-list li { font-size: var(--kd-caption-size); color: var(--kd-mid); padding-left: 22px; position: relative; line-height: 1.55; } .kd-check-list li::before { content: ''; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border: 2px solid var(--kd-primary); border-radius: 3px; background: var(--kd-primary-lt); } .kd-check-list li::after { content: ''; position: absolute; left: 3px; top: 7px; width: 7px; height: 4px; border-left: 2px solid var(--kd-primary-dk); border-bottom: 2px solid var(--kd-primary-dk); transform: rotate(-45deg); } /* ── CALLOUT ── */ .kd-callout { background: var(--kd-primary-lt); border: 1px solid color-mix(in srgb, var(--kd-primary) 30%, transparent); border-left: 4px solid var(--kd-primary); border-radius: var(--kd-radius); padding: 18px 22px; display: flex; align-items: flex-start; gap: 14px; } .kd-callout-icon { flex-shrink: 0; margin-top: 1px; } .kd-callout-text { font-size: var(--kd-caption-size); color: var(--kd-mid); line-height: 1.65; } .kd-callout-text strong { color: var(--kd-primary-dk); } /* ── ZODIAK ── */ .kd-zodiac { margin: 36px 0; } .kd-zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .kd-zodiac-item { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 14px 8px 12px; text-align: center; } .kd-zodiac-glyph { font-size: var(--kd-h4-size); font-weight: 700; color: var(--kd-primary); display: block; margin-bottom: 5px; line-height: 1; } .kd-zodiac-item strong { display: block; color: var(--kd-dark); font-size: var(--kd-caption-size); font-weight: 600; margin-bottom: 3px; } .kd-zodiac-item span { color: var(--kd-muted); font-size: var(--kd-label-size); line-height: 1.4; display: block; } /* ── OKAZJE ── */ .kd-occasions { margin: 36px 0; } .kd-occasions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .kd-occasion-card { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 20px 18px; display: flex; gap: 16px; align-items: flex-start; transition: box-shadow var(--kd-motion-fast) var(--kd-ease); } .kd-occasion-card:hover { box-shadow: var(--kd-shadow); } .kd-occasion-text h3 { font-size: var(--kd-body-sm-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 4px; } .kd-occasion-text p { font-size: var(--kd-caption-size); color: var(--kd-muted); line-height: 1.55; } /* ── PRZEWODNIK ── */ .kd-guide { margin: 36px 0; } .kd-guide-steps { display: flex; flex-direction: column; } .kd-guide-step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--kd-border); align-items: start; } .kd-guide-step:last-child { border-bottom: none; } .kd-step-number { width: 42px; height: 42px; border-radius: 50%; background: var(--kd-primary); color: var(--kd-color-text-on-primary); font-weight: 700; font-size: var(--kd-body-sm-size); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kd-step-content h3 { font-size: var(--kd-body-sm-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 5px; } .kd-step-content p { font-size: var(--kd-caption-size); color: var(--kd-muted); line-height: 1.6; } /* ── PIELĘGNACJA ── */ .kd-care { margin: 36px 0; } .kd-care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .kd-care-block { border-radius: var(--kd-radius); padding: 22px 20px; } .kd-care-do { background: var(--kd-primary-lt); border: 1px solid color-mix(in srgb, var(--kd-primary) 35%, transparent); } .kd-care-dont { background: var(--kd-color-surface); border: 1px solid var(--kd-border); } .kd-care-block h3 { font-size: var(--kd-body-sm-size); font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; } .kd-care-do h3 { color: var(--kd-primary-dk); } .kd-care-dont h3 { color: var(--kd-dark); } .kd-care-block ul { list-style: none; } .kd-care-block ul li { font-size: var(--kd-caption-size); color: var(--kd-mid); padding: 5px 0 5px 20px; position: relative; line-height: 1.5; border-bottom: 1px solid var(--kd-border); } .kd-care-block ul li:last-child { border-bottom: none; } .kd-care-do ul li::before { content: ''; position: absolute; left: 1px; top: 10px; width: 11px; height: 6px; border-left: 2px solid var(--kd-primary); border-bottom: 2px solid var(--kd-primary); transform: rotate(-45deg); } .kd-care-dont ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border: 1.5px solid var(--kd-muted); border-radius: 50%; } .kd-care-dont ul li::after { content: ''; position: absolute; left: 4px; top: 13.5px; width: 7px; height: 1.5px; background: var(--kd-muted); transform: rotate(45deg); } /* ── STYLIZACJA ── */ .kd-styling { margin: 36px 0; } .kd-styling-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .kd-style-card { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 22px 20px; position: relative; overflow: hidden; } .kd-style-num { position: absolute; top: 13px; right: 14px; width: 22px; height: 22px; border: 2px solid var(--kd-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--kd-label-size); font-weight: 700; color: var(--kd-primary); line-height: 1; } .kd-style-card h3 { font-size: var(--kd-body-sm-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 10px; padding-right: 30px; } .kd-style-card p { font-size: var(--kd-caption-size); color: var(--kd-muted); line-height: 1.6; } .kd-style-tag { display: inline-block; background: var(--kd-primary); color: var(--kd-color-text-on-primary); font-size: var(--kd-label-size); font-weight: 600; padding: 2px 10px; border-radius: var(--kd-radius-pill); margin-top: 10px; } /* ── TABELA ── */ .kd-table-wrap { margin: 36px 0; overflow-x: auto; } .kd-table { width: 100%; border-collapse: collapse; font-size: var(--kd-caption-size); } .kd-table thead tr { background: var(--kd-primary); color: var(--kd-color-text-on-primary); } .kd-table thead th { padding: 12px 14px; text-align: left; font-weight: 600; font-size: var(--kd-caption-size); letter-spacing: .02em; } .kd-table tbody tr:nth-child(even) { background: var(--kd-accent); } .kd-table tbody tr:hover { background: var(--kd-primary-lt); } .kd-table td { padding: 10px 14px; border-bottom: 1px solid var(--kd-border); color: var(--kd-mid); vertical-align: top; } .kd-table td:first-child { font-weight: 600; color: var(--kd-dark); } /* ── FAQ ── */ .kd-faq { margin: 36px 0; } .kd-faq-item { border: 1px solid var(--kd-border); border-radius: var(--kd-radius); margin-bottom: 8px; overflow: hidden; } .kd-faq-q { background: var(--kd-white); padding: 15px 48px 15px 44px; font-weight: 600; font-size: var(--kd-body-sm-size); color: var(--kd-dark); cursor: pointer; position: relative; user-select: none; line-height: 1.5; } .kd-faq-q::before { content: 'Q'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: var(--kd-primary); color: var(--kd-color-text-on-primary); border-radius: var(--kd-radius-sm); font-size: var(--kd-label-size); font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 22px; } .kd-faq-q .kd-faq-toggle { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; flex-shrink: 0; } .kd-faq-toggle-h, .kd-faq-toggle-v { position: absolute; background: var(--kd-primary); transition: transform var(--kd-motion-fast) var(--kd-ease), opacity var(--kd-motion-fast) var(--kd-ease); } .kd-faq-toggle-h { width: 14px; height: 2px; top: 8px; left: 2px; } .kd-faq-toggle-v { width: 2px; height: 14px; top: 2px; left: 8px; } .kd-faq-item.kd-faq-open .kd-faq-toggle-v { transform: rotate(90deg); opacity: 0; } .kd-faq-a { display: none; padding: 0 20px 16px 44px; font-size: var(--kd-caption-size); color: var(--kd-muted); line-height: 1.7; background: var(--kd-white); } .kd-faq-a strong { color: var(--kd-primary-dk); } .kd-faq-item.kd-faq-open .kd-faq-q { color: var(--kd-primary-dk); background: var(--kd-primary-lt); } /* ── TEKST DEEP ── */ .kd-deep-text { margin: 36px 0; } .kd-deep-text p { font-size: var(--kd-body-sm-size); color: var(--kd-mid); line-height: 1.8; margin-bottom: 12px; } .kd-deep-text p:last-child { margin-bottom: 0; } .kd-deep-text strong { color: var(--kd-dark); } .kd-deep-text h3 { font-size: var(--kd-body-size); font-weight: 700; color: var(--kd-dark); margin: 22px 0 10px; padding-left: 14px; border-left: 3px solid var(--kd-primary); } /* ── CTA BANNER ── */ /* Gradient w kolorze marki plus dwa biale kola dekoracyjne — to byl baner reklamowy wklejony w tresc. Zostaje powierzchnia strony, wloskowata ramka i zwykly przycisk. */ .kd-cta-banner { background: var(--kd-color-surface); border: 1px solid var(--kd-border); border-radius: var(--kd-radius); padding: 38px 44px; margin: 36px 0 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .kd-cta-text h3 { font-size: var(--kd-h3-size); font-weight: 700; color: var(--kd-dark); margin-bottom: 6px; line-height: 1.3; } .kd-cta-text p { font-size: var(--kd-body-sm-size); color: var(--kd-mid); line-height: 1.6; } .kd-cta-btn { background: var(--kd-btn-bg); color: var(--kd-btn-text); font-family: var(--kd-font-body); font-size: var(--kd-button-size); font-weight: var(--kd-button-weight, 500); letter-spacing: var(--kd-button-ls, 0); text-transform: var(--kd-button-transform, none); padding: 15px 28px; border-radius: var(--kd-radius-button); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; } .kd-cta-btn:hover { background: var(--kd-btn-hover-bg); text-decoration: none; } /* ── INTENCJE PASEK ── */ .kd-intents { margin: 36px 0; } .kd-intents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .kd-intent-pill { background: var(--kd-white); border: 1px solid var(--kd-border); border-radius: var(--kd-radius-pill); padding: 13px 18px; display: flex; align-items: center; gap: 12px; transition: border-color var(--kd-motion-fast) var(--kd-ease), box-shadow var(--kd-motion-fast) var(--kd-ease); } .kd-intent-pill:hover { border-color: var(--kd-primary); box-shadow: var(--kd-shadow); } .kd-intent-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kd-primary); flex-shrink: 0; } .kd-intent-pill strong { font-size: var(--kd-caption-size); color: var(--kd-dark); font-weight: 700; } .kd-intent-pill span { font-size: var(--kd-caption-size); color: var(--kd-muted); display: block; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .kd-benefits-grid { grid-template-columns: repeat(2, 1fr); } .kd-stones-grid { grid-template-columns: repeat(2, 1fr); } .kd-zodiac-grid { grid-template-columns: repeat(3, 1fr); } .kd-occasions-grid{ grid-template-columns: repeat(2, 1fr); } :where(.kd-seo-wrapper) .kd-trust { grid-template-columns: repeat(2, 1fr); } .kd-styling-grid { grid-template-columns: 1fr; } .kd-intents-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kd-intro { padding: 26px 22px; } .kd-intro h2 { font-size: var(--kd-h4-size); } .kd-two-col { grid-template-columns: 1fr; } .kd-benefits-grid { grid-template-columns: 1fr; } .kd-stones-grid { grid-template-columns: repeat(2, 1fr); } .kd-zodiac-grid { grid-template-columns: repeat(2, 1fr); } .kd-occasions-grid{ grid-template-columns: 1fr; } :where(.kd-seo-wrapper) .kd-trust { grid-template-columns: repeat(2, 1fr); padding: 22px 18px; } .kd-care-grid { grid-template-columns: 1fr; } .kd-cta-banner { flex-direction: column; text-align: center; padding: 28px 22px; } .kd-intents-grid { grid-template-columns: 1fr; } }