/* Theme Name: KrakKos Theme URI: https://krakkos.pl/ Author: KrakKos Description: Autorski motyw blokowy (Full Site Editing) dla serwisu KrakKos — przewodnicy po Krakowie. Elegancki, jasny układ oparty na markowej palecie z logo. Bez Elementora i innych page builderów — wyłącznie bloki WordPressa. Version: 1.6.1 Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: krakkos Tags: full-site-editing, block-styles, blog, custom-colors, custom-menu, translation-ready */ /* ============================================================ KrakKos — design system Tokeny pochodzą z theme.json (paleta + fonty), tutaj tylko mapowanie na nazwy używane w komponentach. ============================================================ */ :root { --paper: var(--wp--preset--color--paper); --paper-2: var(--wp--preset--color--surface); --card: #ffffff; --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); --ink-faint: var(--wp--preset--color--ink-faint); --c-blue: var(--wp--preset--color--accent); --c-teal: var(--wp--preset--color--teal); --c-lime: var(--wp--preset--color--lime); --c-orange: var(--wp--preset--color--orange); --c-charcoal: var(--wp--preset--color--charcoal); /* akcent wiodący — nadpisywalny w Wygląd → Edytor → Style */ --wine: var(--wp--preset--color--accent); --wine-700: color-mix(in srgb, var(--wine) 82%, #000); --wine-900: color-mix(in srgb, var(--wine) 52%, #000); --wine-300: color-mix(in srgb, var(--wine) 55%, #fff); --wine-tint: color-mix(in srgb, var(--wine) 12%, #fff); --brass: var(--wine); --brass-soft: color-mix(in srgb, var(--wine) 52%, #fff); --line: rgba(20, 30, 33, 0.10); --line-soft: rgba(20, 30, 33, 0.06); --shadow-sm: 0 1px 2px rgba(20,30,33,.05), 0 1px 6px rgba(20,30,33,.04); --shadow-md: 0 10px 34px rgba(20,30,33,.08), 0 2px 8px rgba(20,30,33,.05); --shadow-lg: 0 26px 60px rgba(12,40,48,.18); --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --container: 1240px; --radius: 4px; --radius-lg: 10px; } /* ---------- podstawy ---------- */ /* * Projekt źródłowy stosował globalne box-sizing: border-box. Przy przenoszeniu do * WordPressa celowo pominąłem globalny reset, żeby nie zaburzać bloków rdzenia — * ale komponenty poniżej nadal ten model zakładają. Element z width:100% i własną * wyściółką wystawał wtedy poza rodzica (przycisk w karcie rezerwacji wychodził * o 55 px). Dlatego ustawiamy border-box punktowo, tam gdzie jest potrzebny. */ .btn, .booking-card, .price-card, .tour-card, .post-card, .feature, .guide-card, .contact-info-card, .voucher-text, .tip, .notice-band, .filter-chip, .stat, .field input, .field textarea, .field select, .kk-form input, .kk-form textarea, .kk-form select { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } ::selection { background: var(--wine); color: #fff; } p { text-wrap: pretty; } .display { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; line-height: 1.02; letter-spacing: -.025em; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--ink-soft); } h2.title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.02em; } /* wrapper dla wzorców przenoszonych 1:1 z projektu */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; } .section { padding: 96px 0; } .section--tight { padding: 64px 0; } @media (max-width: 760px) { .section { padding: 64px 0; } .container { padding: 0 20px; } } /* ---------- eyebrow ---------- */ /* * Celowo display:flex, a nie inline-flex. Układ „constrained" WordPressa * centruje dzieci marginesami auto, a te działają wyłącznie na elementach * blokowych — element inline-flex uciekał wtedy na lewy skraj ekranu * zamiast trzymać się kolumny treści. */ .eyebrow { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wine); display: flex; align-items: center; gap: .7em; } .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--brass); display: inline-block; } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: 30px; height: 1px; background: var(--brass); display: inline-block; } .section-head { max-width: 720px; margin-bottom: 56px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 18px; } .section-head p { margin-top: 18px; color: var(--ink-soft); font-size: 1.12rem; } /* ---------- przyciski ---------- */ .btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: var(--font-body); font-weight: 600; font-size: .97rem; letter-spacing: .01em; padding: 15px 28px; border-radius: var(--radius); transition: all .22s ease; white-space: nowrap; cursor: pointer; line-height: 1; text-decoration: none; } .btn svg { width: 16px; height: 16px; } .btn--primary, .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wine); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wine-700); transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; } .btn--ghost, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--ghost:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wine); color: var(--wine); background: transparent; } .btn--light { background: var(--card); color: var(--wine); } .btn--light:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); } .btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); } .btn--lg, .wp-block-button.is-style-lg .wp-block-button__link { padding: 18px 36px; font-size: 1.05rem; } .link-arrow { color: var(--wine); font-weight: 600; display: inline-flex; align-items: center; gap: .4em; transition: gap .2s; text-decoration: none; } .link-arrow:hover { gap: .7em; text-decoration: none; } /* ---------- pasek marki + topbar ---------- */ .brandbar { height: 4px; background: linear-gradient(90deg, var(--c-blue) 0 25%, var(--c-lime) 25% 50%, var(--c-teal) 50% 75%, var(--c-orange) 75% 100%); } .topbar { background: var(--paper-2); color: var(--ink-soft); font-size: .83rem; border-bottom: 1px solid var(--line-soft); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 18px; } .topbar-info { display: flex; align-items: center; gap: 24px; } .topbar-info a { display: inline-flex; align-items: center; gap: .5em; color: var(--ink-soft); transition: color .2s; text-decoration: none; } .topbar-info a:hover { color: var(--wine); text-decoration: none; } .topbar-info svg { width: 14px; height: 14px; color: var(--wine); opacity: .9; } .topbar-tag { color: var(--ink-faint); font-weight: 500; } @media (max-width: 760px) { .topbar-tag, .topbar-info .tb-fb { display: none; } .topbar-info { gap: 16px; } } /* ---------- nagłówek ---------- */ .site-header-inner { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); transition: box-shadow .3s, background .3s; } .site-header-inner.scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.95); } .site-header-inner .wp-block-group { min-height: 80px; } .brand-logo, .wp-block-site-logo img { height: 50px; width: auto; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; } .brand-name b { color: var(--wine); } /* nawigacja */ .wp-block-navigation .wp-block-navigation-item__content { font-weight: 500; font-size: .97rem; padding: 10px 14px; border-radius: var(--radius); color: var(--ink); transition: color .2s; text-decoration: none; } .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wine); text-decoration: none; } .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wine); position: relative; } .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--brass); } /* przycisk CTA w nagłówku — chowany na wąskich ekranach */ @media (max-width: 1000px) { .site-header-inner .nav-cta { display: none; } } /* przełącznik języka (Polylang) */ .lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .lang-switch a { padding: 7px 12px; font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: var(--ink-faint); transition: all .2s; text-decoration: none; } .lang-switch a.current-lang { background: var(--wine); color: #fff; } .lang-switch a:not(.current-lang):hover { color: var(--wine); text-decoration: none; } /* ---------- kadry zdjęć ---------- */ .shot { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--wine) 7%, transparent) 0 12px, transparent 12px 24px), var(--paper-2); } .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- hero ---------- */ .hero { background: var(--paper); border-bottom: 1px solid var(--line-soft); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 84px 0; } .hero-copy { max-width: 600px; } .hero h1 { margin-bottom: 24px; } .hero .lead { margin-bottom: 36px; font-size: 1.2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-media .shot { aspect-ratio: 4/5; min-height: 460px; box-shadow: var(--shadow-md); } .hero-rating { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); max-width: 560px; } .rating-score { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; } .rating-meta { font-size: .92rem; color: var(--ink-soft); } .stars { color: var(--brass); letter-spacing: 2px; font-size: 1.05rem; } .hero-eyebrow { margin-bottom: 22px; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; } .hero-media { order: -1; } .hero-media .shot { aspect-ratio: 16/10; min-height: 280px; } } /* ---------- cennik ---------- */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .price-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px 32px; position: relative; transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; } .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brass-soft); } .price-card.featured { border: 1px solid var(--wine); box-shadow: var(--shadow-lg); } .price-card.featured::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--wine); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .price-badge { position: absolute; top: -13px; left: 32px; background: var(--brass); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px; border-radius: 3px; } .price-hours { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--wine); line-height: 1; } .price-type { font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 8px; } .price-amount { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; margin: 22px 0 4px; } .price-amount span { font-size: 1rem; font-weight: 500; color: var(--ink-faint); } .price-list { list-style: none; margin: 22px 0 28px; padding: 0; flex: 1; } .price-list li { padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: .93rem; color: var(--ink-soft); display: flex; gap: 8px; } .price-list li::before { content: "+"; color: var(--wine); font-weight: 700; } @media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } } /* ---------- cennik z przełącznikiem języka ---------- */ .kk-lang-toggle { display: flex; justify-content: center; gap: 0; margin: 0 auto 36px; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; width: fit-content; background: var(--card); } .kk-lang-toggle button { padding: 11px 26px; font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--ink-soft); background: none; border: none; cursor: pointer; transition: .2s; } .kk-lang-toggle button:hover { color: var(--wine); } .kk-lang-toggle button.is-active { background: var(--wine); color: #fff; } .kk-price-breakdown { font-size: .82rem; color: var(--ink-faint); margin: -2px 0 0; line-height: 1.45; } .kk-price-switch [hidden] { display: none !important; } /* ---------- atuty ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; } .feature-grid--three { grid-template-columns: repeat(3, 1fr); } .feature { background: var(--paper); padding: 38px 30px; transition: background .25s; } .feature:hover { background: var(--card); } .feature-ic { width: 46px; height: 46px; color: var(--wine); margin-bottom: 20px; } .feature-ic svg { width: 100%; height: 100%; stroke-width: 1.4; } .feature h3 { font-size: 1.18rem; margin-bottom: 10px; } .feature p { font-size: .95rem; color: var(--ink-soft); line-height: 1.55; } .feature:nth-child(4n+1) .feature-ic { color: var(--c-blue); } .feature:nth-child(4n+2) .feature-ic { color: var(--c-teal); } .feature:nth-child(4n+3) .feature-ic { color: var(--c-orange); } .feature:nth-child(4n+4) .feature-ic { color: color-mix(in srgb, var(--c-lime) 76%, #5f6f12); } @media (max-width: 960px) { .feature-grid, .feature-grid--three { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .feature-grid, .feature-grid--three { grid-template-columns: 1fr; } } /* ---------- trasy ---------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .filter-chip { padding: 10px 20px; border: 1px solid var(--line); border-radius: 100px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); transition: .2s; background: var(--card); } .filter-chip:hover { border-color: var(--wine); color: var(--wine); } .filter-chip.active { background: var(--wine); color: #fff; border-color: var(--wine); } .tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .tour-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; transition: .25s; display: flex; flex-direction: column; } .tour-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .tour-card .shot { aspect-ratio: 4/3; border-radius: 0; display: block; } .tour-tag { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--c-blue); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 3px; } .tag-popular { background: var(--c-blue); color: #fff; } .tag-schools { background: var(--c-lime); color: var(--ink); } .tag-pilgrims { background: var(--c-teal); color: #fff; } .tag-unusual { background: var(--c-orange); color: #fff; } .tag-families { background: var(--c-teal); color: #fff; } .tag-companies { background: var(--c-charcoal); color: #fff; } .tour-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .tour-body h3 { font-size: 1.25rem; margin-bottom: 10px; } .tour-body p { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; flex: 1; } .tour-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line-soft); } .tour-dur { font-size: .85rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; } .tour-dur svg { width: 15px; height: 15px; } .is-hidden { display: none !important; } @media (max-width: 960px) { .tour-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .tour-grid { grid-template-columns: 1fr; } } /* ---------- przewodnicy ---------- */ .guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .guide-card { display: grid; grid-template-columns: 170px 1fr; gap: 28px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 28px; align-items: start; } .guide-card .shot { aspect-ratio: 1; border-radius: var(--radius); } .guide-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; } .guide-role { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 6px 0 14px; } .guide-card p { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; } .guide-id { margin-top: 12px; font-size: .82rem; color: var(--ink-faint); font-family: ui-monospace, monospace; } @media (max-width: 860px) { .guides { grid-template-columns: 1fr; } } @media (max-width: 460px) { .guide-card { grid-template-columns: 1fr; } .guide-card .shot { max-width: 160px; } } /* ---------- opinie ---------- */ .testimonials { background: var(--paper-2); position: relative; overflow: hidden; } .tcarousel { position: relative; max-width: 880px; margin: 48px auto 0; } .tslide { display: none; text-align: center; animation: kkfade .5s ease; } .tslide.active { display: block; } @keyframes kkfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tquote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; } .tquote::before { content: "\201C"; color: var(--wine); } .tquote::after { content: "\201D"; color: var(--wine); } .tmeta { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 14px; } .tavatar { width: 48px; height: 48px; border-radius: 50%; background: var(--wine); border: 2px solid var(--brass-soft); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--font-display); } .tname { font-weight: 700; } .tsource { font-size: .85rem; color: var(--ink-faint); } .tcarousel .stars { font-size: 1.2rem; margin-bottom: 24px; display: block; } .tnav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 38px; } .tdot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: .2s; border: none; padding: 0; cursor: pointer; } .tdot.active { background: var(--wine); transform: scale(1.25); } .tarrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: none; color: var(--ink); display: grid; place-items: center; transition: .2s; cursor: pointer; } .tarrow:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: var(--wine); color: var(--wine); } .tarrow svg { width: 18px; height: 18px; } .rating-banner { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; } .rating-banner .rating-score { color: var(--wine); } /* ---------- voucher ---------- */ .voucher-card { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .voucher-text { background: var(--paper-2); padding: 64px 56px; border-right: 1px solid var(--line-soft); } .voucher-text .eyebrow { margin-bottom: 18px; } .voucher-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 18px; } .voucher-text p { color: var(--ink-soft); margin-bottom: 28px; } .voucher-visual { position: relative; min-height: 340px; } .voucher-visual .shot { position: absolute; inset: 0; border-radius: 0; } @media (max-width: 840px) { .voucher-card { grid-template-columns: 1fr; } .voucher-text { padding: 48px 32px; } } /* ---------- blog ---------- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .post-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; transition: .25s; display: flex; flex-direction: column; } .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .post-card .shot { aspect-ratio: 16/10; border-radius: 0; } .post-body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .post-meta { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--brass); text-transform: uppercase; margin-bottom: 12px; display: flex; gap: 12px; } .post-card h3 { font-size: 1.22rem; line-height: 1.25; margin-bottom: 12px; } .post-card p { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; flex: 1; } @media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } /* siatka wpisów oparta na Query Loop */ .kk-query .wp-block-post { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; transition: .25s; display: flex; flex-direction: column; } .kk-query .wp-block-post:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .kk-query .wp-block-post-featured-image { margin: 0; } .kk-query .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; width: 100%; } .kk-query .wp-block-post-title { font-size: 1.22rem; line-height: 1.25; } .kk-query .wp-block-post-title a { color: var(--ink); text-decoration: none; } .kk-query .wp-block-post-title a:hover { color: var(--wine); } .kk-query .wp-block-post-date { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--brass); text-transform: uppercase; } .kk-query .wp-block-post-excerpt { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; } /* ---------- siatka tras (Query Loop) ---------- */ /* * Karta trasy jest kafelkiem: zdjęcie na całą szerokość u góry, etykieta * kategorii nałożona na zdjęcie (jak w projekcie), pod spodem tytuł, opis * i stopka. Etykieta w stopce zabierała miejsce i gubiła związek ze zdjęciem. */ .kk-tours .wp-block-post { position: relative; overflow: hidden; } /* * Zanim zdjęcie się doczyta, widać sam kontener. Płaska szarość wyglądała jak * błąd — zwłaszcza że etykieta kategorii wisi wtedy nad pustką. Markowy wzór * w paski (ten sam co w kadrach .shot) czyta się jako celowy stan ładowania. */ .kk-tours .wp-block-post-featured-image, .kk-query .wp-block-post-featured-image { margin: 0; overflow: hidden; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--wine) 7%, transparent) 0 12px, transparent 12px 24px), var(--paper-2); } .kk-tours .wp-block-post-featured-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; transition: transform .45s cubic-bezier(.2,.7,.2,1); } .kk-tours .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.05); } /* karty bez zdjęcia nie mogą się zapadać — dajemy im markowy wypełniacz */ .kk-tours .wp-block-post:not(:has(.wp-block-post-featured-image))::before { content: ""; display: block; aspect-ratio: 4/3; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--wine) 7%, transparent) 0 12px, transparent 12px 24px), var(--paper-2); } .kk-tours .tour-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .kk-tours .wp-block-post-title { font-size: 1.2rem; line-height: 1.3; margin: 0; } .kk-tours .wp-block-post-title a { color: var(--ink); text-decoration: none; } .kk-tours .wp-block-post:hover .wp-block-post-title a { color: var(--wine); } .kk-tours .wp-block-post-excerpt { font-size: .93rem; color: var(--ink-soft); line-height: 1.55; flex: 1; margin: 0; } .kk-tours .wp-block-post-excerpt p { margin: 0; } .kk-tours .wp-block-post-excerpt__more-text { display: none; } .kk-tours .tour-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); } /* etykieta kategorii nałożona na zdjęcie */ .kk-tours .tour-tag { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; } .kk-tours .tour-tag .wp-block-post-terms__separator { display: none; } /* etykiety renderuje wtyczka jako */ .kk-tours .tour-tag .kk-term, .kk-tours .tour-tag a { background: var(--c-blue); color: #fff; padding: 5px 11px; border-radius: 3px; box-shadow: 0 2px 8px rgba(20,30,33,.18); text-decoration: none; white-space: nowrap; } .kk-tours .tour-tag .kk-term-schools { background: var(--c-lime); color: var(--ink); } .kk-tours .tour-tag .kk-term-pilgrims { background: var(--c-teal); } .kk-tours .tour-tag .kk-term-unusual { background: var(--c-orange); } .kk-tours .tour-tag .kk-term-popular { background: var(--c-blue); } /* przy dwóch kategoriach druga jest wyraźnie mniej istotna */ .kk-tours .tour-tag .kk-term:nth-child(n+2) { opacity: .85; font-size: .66rem; } .kk-tours .wp-block-read-more { color: var(--wine); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; transition: gap .2s; } .kk-tours .wp-block-read-more:hover { gap: .7em; } /* ---------- pasek CTA ---------- */ .cta-band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 64px 0; flex-wrap: wrap; } .cta-inner h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 640px; } .cta-inner .eyebrow { margin-bottom: 14px; } /* ---------- stopka ---------- */ .site-footer { background: var(--ink); color: #C9BEB4; font-size: .93rem; } .site-footer a { color: #C9BEB4; text-decoration: none; } .site-footer a:hover { color: #fff; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 72px 0 56px; } .site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; } .footer-brand p { margin-top: 16px; line-height: 1.6; max-width: 300px; color: #A89C92; } .footer-logo { display: inline-block; background: #fff; border-radius: 12px; padding: 16px 20px; line-height: 0; } .footer-logo img { width: 118px; height: auto; display: block; } .footer-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; } .footer-contact { display: flex; flex-direction: column; gap: 14px; } .footer-contact a, .footer-contact span { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--brass-soft); } .footer-eu { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; color: #8E837A; line-height: 1.6; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: #8E837A; flex-wrap: wrap; gap: 12px; } .footer-bottom a { color: var(--brass-soft); } @media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } } /* ---------- formularze / kontakt ---------- */ /* * Blok Kolumny renderuje się jako flex, a jego reguła .wp-block-columns ma * tę samą specyficzność co sama .contact-grid i ładuje się później — własne * display:grid było więc po cichu ignorowane. Zamiast walczyć o pierwszeństwo * korzystamy z flexa i sterujemy szerokościami we wzorcu. */ .wp-block-columns.contact-grid { gap: 56px; align-items: flex-start; } .contact-grid:not(.wp-block-columns) { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { margin-bottom: 20px; } .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; } .field input, .field textarea, .field select, .wpcf7 input:not([type=submit]), .wpcf7 textarea, .wpcf7 select { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; font-size: .97rem; background: var(--card); color: var(--ink); transition: .2s; } .field input:focus, .field textarea:focus, .field select:focus, .wpcf7 input:not([type=submit]):focus, .wpcf7 textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px var(--wine-tint); } .field textarea { resize: vertical; min-height: 130px; } .contact-info-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 36px; } .contact-info-card .info-row { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); } .contact-info-card .info-row:last-child { border-bottom: none; } .info-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--wine-tint); color: var(--wine); display: grid; place-items: center; } .info-ic svg { width: 19px; height: 19px; } .info-row b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 3px; } .info-row .val { font-size: 1.05rem; font-weight: 500; } .form-note { font-size: .82rem; color: var(--ink-faint); margin-top: 14px; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } } /* ---------- hero podstron ---------- */ .page-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--wine) 10%, #fff) 0%, #fff 72%); position: relative; border-bottom: 1px solid var(--line-soft); padding: 64px 0; } .page-hero .eyebrow { margin-bottom: 18px; } .page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); max-width: 15ch; } .page-hero p { color: var(--ink-soft); max-width: 54ch; margin-top: 18px; font-size: 1.15rem; } .page-hero .hero-actions { margin-top: 30px; } .breadcrumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: inherit; text-decoration: none; } .breadcrumb a:hover { color: var(--wine); } .page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; } .page-hero-grid h1 { max-width: none; } .page-hero-media .shot { aspect-ratio: 4/3; box-shadow: var(--shadow-md); } @media (max-width: 880px) { .page-hero-grid { grid-template-columns: 1fr; gap: 30px; } .page-hero-media { order: -1; } .page-hero-media .shot { aspect-ratio: 16/9; } } /* ---------- treść redakcyjna ---------- */ /* * Treść strony jest teraz pełnej szerokości, żeby sekcje oznaczone jako * szerokie mogły faktycznie sięgnąć 1240 px. Odstęp pionowy dokładamy tutaj, * ale kasujemy go, gdy treść zaczyna się lub kończy sekcją pełnej szerokości * — takie sekcje mają własne wcięcia i podwójny odstęp wyglądałby źle. */ .wp-block-post-content.prose { padding-block: 72px; } .wp-block-post-content.prose > .alignfull:first-child { margin-top: -72px; } .wp-block-post-content.prose > .alignfull:last-child { margin-bottom: -72px; } .prose > * { margin-bottom: 20px; } .prose p { color: var(--ink-soft); line-height: 1.7; } .prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 40px 0 18px; } .prose h3 { margin: 32px 0 14px; } .prose h2:first-child { margin-top: 0; } .prose ul { margin: 0 0 22px 0; padding-left: 0; list-style: none; } .prose ul li { padding: 9px 0 9px 30px; position: relative; color: var(--ink-soft); } .prose ul li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 8px; height: 8px; background: var(--brass); border-radius: 50%; } /* * Pętla zapytań renderuje karty jako