/* ========================================================================= Bank Promos Shell — chrome (header / nav / footer / main). Zasada: NIE nadpisujemy klas .bpc wtyczki. Własny prefiks .bps-*. Tokeny --bpc-* wtyczka definiuje na .bpc; tutaj dublujemy je na :root jako FALLBACK, żeby header/footer miały spójne kolory nawet gdyby CSS wtyczki się nie załadował. ========================================================================= */ :root { --bpc-ink:#0C1F1A; --bpc-ink-solid:#14231E; --bpc-gold:#C6973F; --bpc-gold-d:#8A6722; --bpc-gold-soft:#F0E6CE; --bpc-page:#F5F4EF; --bpc-card:#FFFFFF; --bpc-line:#E6E3D9; --bpc-line-d:#D6D2C4; --bpc-tx:#2B322E; --bpc-tx-2:#5C645E; --bpc-tx-3:#8A9089; --bpc-on-dark:#F3F1E9; --bpc-on-dark-2:#A6B0AA; --bpc-r:11px; --bpc-r-lg:18px; /* Stacki z fallbackiem na system-ui, gdy fonty jeszcze się ładują / plugin off. */ --bps-fd:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --bps-fm:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --bps-fb:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --bps-wrap:1140px; --bps-header-h:66px; } /* Nagłówek zmniejszony po przewinięciu (klasa na , więc zmienna trafia na :root i jest widoczna także dla sticky railu wtyczki, który liczy top z --bps-header-h). */ :root.bps-scrolled { --bps-header-h: 52px; } /* Sticky footer: body kolumnowo, main rośnie. */ html { min-height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bpc-page, #F5F4EF); color: var(--bpc-ink, #0C1F1A); font-family: var(--bps-fb); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { text-decoration: none; } /* Skip link */ .bps-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--bpc-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--bpc-r) 0; font-family: var(--bps-fd); font-weight: 600; } .bps-skip:focus { left: 0; } /* ========================================================================= HEADER ========================================================================= */ .bps-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--bpc-line); transition: box-shadow 0.2s ease, background 0.2s ease; } .bps-scrolled .bps-header { background: rgba(255, 255, 255, 0.97); box-shadow: 0 4px 16px rgba(12, 31, 26, 0.07); } .bps-header__in { max-width: var(--bps-wrap); margin: 0 auto; min-height: var(--bps-header-h); padding: 8px 22px; display: flex; align-items: center; gap: 18px; transition: min-height 0.18s ease, padding 0.18s ease; } .bps-scrolled .bps-header__in { padding-top: 4px; padding-bottom: 4px; } /* Brand */ .bps-brand { display: flex; align-items: center; flex: 0 0 auto; } .bps-brand img { max-height: 40px; width: auto; transition: max-height 0.18s ease; } .bps-scrolled .bps-brand img { max-height: 30px; } .bps-brand__text { display: inline-flex; align-items: center; gap: 9px; font-family: var(--bps-fd); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--bpc-ink-solid); transition: font-size 0.18s ease; } .bps-scrolled .bps-brand__text { font-size: 17px; } .bps-scrolled .bps-brand__dot { box-shadow: 0 0 0 3px var(--bpc-gold-soft); } .bps-brand__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bpc-gold); box-shadow: 0 0 0 4px var(--bpc-gold-soft); } /* Desktop nav */ .bps-nav--desktop { margin-left: auto; } .bps-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .bps-menu a { display: inline-block; padding: 8px 11px; border-radius: var(--bpc-r); font-size: 14.5px; font-weight: 500; color: var(--bpc-tx); position: relative; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, padding 0.18s ease; } .bps-scrolled .bps-menu a { padding-top: 6px; padding-bottom: 6px; } .bps-menu a:hover { color: var(--bpc-ink-solid); background: var(--bpc-gold-soft); } .bps-menu .current-menu-item > a, .bps-menu .current_page_item > a { color: var(--bpc-gold-d); } .bps-menu .current-menu-item > a::after, .bps-menu .current_page_item > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--bpc-gold); border-radius: 2px; } /* Actions */ .bps-header__actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; } /* Buttons (własne, w duchu .bpc-btn — nie kopiujemy klas wtyczki 1:1) */ .bps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--bps-fd); font-weight: 600; font-size: 15px; line-height: 1; padding: 12px 18px; border-radius: var(--bpc-r); border: 1.5px solid var(--bpc-ink); background: var(--bpc-ink); color: #fff; cursor: pointer; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .bps-btn:hover { transform: translateY(-1px); } .bps-btn--gold { background: var(--bpc-gold); border-color: var(--bpc-gold); color: #2A1E06; } .bps-btn--gold:hover { background: #d3a54c; box-shadow: 0 6px 18px rgba(198, 151, 63, 0.28); } .bps-btn--ghost { background: transparent; color: var(--bpc-ink-solid); border-color: var(--bpc-line-d); } .bps-btn--ghost:hover { border-color: var(--bpc-ink); } .bps-btn--block { width: 100%; } /* Burger (mobile) */ .bps-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: transparent; border: 1px solid var(--bpc-line-d); border-radius: var(--bpc-r); cursor: pointer; } .bps-burger__bar { display: block; height: 2px; width: 100%; background: var(--bpc-ink-solid); transition: transform 0.2s ease, opacity 0.2s ease; } .bps-burger[aria-expanded="true"] .bps-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bps-burger[aria-expanded="true"] .bps-burger__bar:nth-child(2) { opacity: 0; } .bps-burger[aria-expanded="true"] .bps-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile panel */ .bps-mobile { display: none; border-top: 1px solid var(--bpc-line); background: #fff; padding: 14px 22px 20px; } .bps-mobile__menu { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; } .bps-mobile__menu a { display: block; padding: 13px 6px; font-family: var(--bps-fd); font-weight: 600; font-size: 17px; color: var(--bpc-ink-solid); border-bottom: 1px solid var(--bpc-line); } .bps-mobile__menu a:hover { color: var(--bpc-gold-d); } .bps-mobile__menu .current-menu-item > a { color: var(--bpc-gold-d); } /* Offset sticky headera pod paskiem admina WP */ .admin-bar .bps-header { top: 32px; } @media (max-width: 782px) { .admin-bar .bps-header { top: 46px; } } /* ========================================================================= MAIN — pełna szerokość. Szerokość treści kontroluje .bpc-wrap wtyczki. ========================================================================= */ .bps-main { flex: 1 0 auto; width: 100%; padding: 0 0 56px; /* dół: oddech nad footerem dla shortcode'ów bez własnego paddingu */ } /* Podstrony (nie home): górny oddech, bo sekcje narzędzi nie mają top-paddingu. */ body:not(.home):not(.front-page) .bps-main { padding-top: 40px; } /* Treść nie-.bpc (zwykłe akapity edytora) dostaje czytelny kontener, a pełnobleedowe sekcje wtyczki (.bpc-hero itd.) zostają na całą szerokość. */ .bps-page > :not(.bpc) { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px; } .bps-page > :not(.bpc) + :not(.bpc) { margin-top: 1em; } /* Delikatny styl dla disclosure z pluginu (plugin nie stylizuje tej klasy). */ .bpc .bpc-affiliate-note { color: var(--bpc-tx-3); font-size: 13px; margin-top: 20px; } /* Listy/tytuły dla index.php / archiwów nie-promocyjnych */ .bps-title { max-width: var(--bps-wrap); margin: 8px auto 24px; padding: 0 22px; font-family: var(--bps-fd); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: var(--bpc-ink-solid); } .bps-list { max-width: var(--bps-wrap); margin: 0 auto; padding: 0 22px; display: grid; gap: 16px; } .bps-list__item { display: flex; gap: 18px; background: var(--bpc-card); border: 1px solid var(--bpc-line); border-radius: var(--bpc-r-lg); padding: 16px; overflow: hidden; } .bps-list__media { flex: 0 0 190px; border-radius: var(--bpc-r); overflow: hidden; align-self: stretch; } .bps-list__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bps-list__text { min-width: 0; } .bps-list__cats { font-family: var(--bps-fm); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bpc-gold-d); margin-bottom: 6px; } .bps-list__cats a { color: inherit; } .bps-list__title { font-family: var(--bps-fd); font-size: 21px; line-height: 1.25; margin: 0 0 8px; } .bps-list__title a { color: var(--bpc-ink-solid); } .bps-list__title a:hover { color: var(--bpc-gold-d); } .bps-list__excerpt { color: var(--bpc-tx-2); font-size: 15px; } .bps-list__meta { margin-top: 10px; font-family: var(--bps-fm); font-size: 12px; color: var(--bpc-tx-3); } @media (max-width: 620px) { .bps-list__item { flex-direction: column; gap: 12px; } .bps-list__media { flex-basis: auto; height: 180px; } } .bps-empty { max-width: 720px; margin: 0 auto; padding: 60px 22px; text-align: center; color: var(--bpc-tx-2); } .bps-empty h1 { font-family: var(--bps-fd); font-size: 30px; color: var(--bpc-ink-solid); margin-bottom: 10px; } /* 404 */ .bps-404 { max-width: 640px; margin: 0 auto; padding: 80px 22px; text-align: center; } .bps-404__code { font-family: var(--bps-fm); font-weight: 700; font-size: 72px; line-height: 1; color: var(--bpc-gold); letter-spacing: -0.02em; } .bps-404__title { font-family: var(--bps-fd); font-size: 30px; color: var(--bpc-ink-solid); margin: 12px 0 8px; } .bps-404__sub { color: var(--bpc-tx-2); font-size: 16px; margin-bottom: 24px; } .bps-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Paginacja (WP) — lekki styl w duchu .bpc-pager */ .bps-main .pagination, .bps-main .nav-links { max-width: var(--bps-wrap); margin: 28px auto 0; padding: 0 22px; display: flex; gap: 6px; flex-wrap: wrap; } .bps-main .page-numbers { padding: 8px 13px; border: 1px solid var(--bpc-line-d); border-radius: var(--bpc-r); font-family: var(--bps-fm); font-size: 13px; color: var(--bpc-tx-2); } .bps-main .page-numbers.current { background: var(--bpc-ink); color: #fff; border-color: var(--bpc-ink); } /* ========================================================================= FOOTER ========================================================================= */ .bps-footer { flex-shrink: 0; background: var(--bpc-ink); color: var(--bpc-on-dark); margin-top: auto; } .bps-footer__in { max-width: var(--bps-wrap); margin: 0 auto; padding: 52px 22px 36px; display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 620px) { .bps-footer__in { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .bps-footer__in { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } } .bps-footer__brand { font-family: var(--bps-fd); font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.02em; margin-bottom: 12px; } .bps-footer__desc { color: var(--bpc-on-dark-2); font-size: 14px; max-width: 42ch; margin-bottom: 14px; } .bps-footer__aff { color: var(--bpc-on-dark-2); font-size: 12px; max-width: 44ch; opacity: 0.85; } .bps-footer__h { font-family: var(--bps-fm); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bpc-gold); margin-bottom: 14px; font-weight: 700; } .bps-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .bps-footer__list a { color: var(--bpc-on-dark); font-size: 15px; transition: color 0.15s ease; } .bps-footer__list a:hover { color: var(--bpc-gold-soft); } .bps-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.1); } .bps-footer__barin { max-width: var(--bps-wrap); margin: 0 auto; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--bpc-on-dark-2); } .bps-footer__note { opacity: 0.85; } /* Strony wpisu (wp_link_pages) */ .bps-pagelinks { max-width: 760px; margin: 24px auto 0; padding: 0 22px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--bpc-tx-2); } .bps-pagelinks a { color: var(--bpc-gold-d); } /* ========================================================================= BLOG — pojedynczy wpis (single.php) ========================================================================= */ .bps-post { max-width: 760px; margin: 0 auto; padding: 0 22px; } .bps-post__head { margin-bottom: 20px; } .bps-post__cats { font-family: var(--bps-fm); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bpc-gold-d); margin-bottom: 12px; } .bps-post__cats a { color: inherit; } .bps-post__cats a:hover { text-decoration: underline; } .bps-post__title { font-family: var(--bps-fd); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; color: var(--bpc-ink-solid); margin: 0 0 14px; } @media (min-width: 760px) { .bps-post__title { font-size: 40px; } } .bps-post__meta { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--bps-fm); font-size: 13px; color: var(--bpc-tx-3); } .bps-post__media { margin: 4px 0 24px; border-radius: var(--bpc-r-lg); overflow: hidden; } .bps-post__media img { width: 100%; height: auto; display: block; } .bps-post__lead { font-size: 20px; line-height: 1.6; color: var(--bpc-tx); margin: 0 0 22px; font-weight: 500; } /* Treść wpisu */ .bps-post__body { font-size: 17px; line-height: 1.75; color: var(--bpc-tx); } .bps-post__body > *:first-child { margin-top: 0; } .bps-post__body h2, .bps-post__body h3, .bps-post__body h4 { font-family: var(--bps-fd); color: var(--bpc-ink-solid); line-height: 1.25; margin: 32px 0 12px; } .bps-post__body h2 { font-size: 26px; } .bps-post__body h3 { font-size: 20px; } .bps-post__body h4 { font-size: 17px; } .bps-post__body p { margin: 0 0 16px; } .bps-post__body ul, .bps-post__body ol { margin: 0 0 16px; padding-left: 24px; } .bps-post__body li { margin: 7px 0; } .bps-post__body a { color: var(--bpc-gold-d); text-decoration: underline; } .bps-post__body strong { color: var(--bpc-ink-solid); } .bps-post__body img { border-radius: var(--bpc-r); height: auto; } .bps-post__body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--bpc-gold); background: var(--bpc-card); color: var(--bpc-tx-2); border-radius: 0 var(--bpc-r) var(--bpc-r) 0; } .bps-post__body hr { border: 0; border-top: 1px solid var(--bpc-line); margin: 26px 0; } .bps-post__body code { font-family: var(--bps-fm); background: var(--bpc-card); border: 1px solid var(--bpc-line); border-radius: 5px; padding: 1px 6px; font-size: 0.9em; } .bps-post__tags { max-width: 760px; margin: 26px auto 0; display: flex; flex-wrap: wrap; gap: 8px; } .bps-post__tags a { font-family: var(--bps-fm); font-size: 12px; color: var(--bpc-tx-2); background: var(--bpc-card); border: 1px solid var(--bpc-line); border-radius: 20px; padding: 5px 12px; } .bps-post__tags a:hover { border-color: var(--bpc-gold); color: var(--bpc-gold-d); } /* Podobne wpisy */ .bps-related { max-width: var(--bps-wrap); margin: 44px auto 0; padding: 0 22px; } .bps-related__h { font-family: var(--bps-fd); font-size: 22px; color: var(--bpc-ink-solid); margin: 0 0 18px; } .bps-related__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 620px) { .bps-related__grid { grid-template-columns: repeat(3, 1fr); } } .bps-rcard { display: flex; flex-direction: column; background: var(--bpc-card); border: 1px solid var(--bpc-line); border-radius: var(--bpc-r-lg); overflow: hidden; transition: transform 0.16s ease, border-color 0.16s ease; } .bps-rcard:hover { transform: translateY(-2px); border-color: var(--bpc-line-d); } .bps-rcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bpc-page); } .bps-rcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bps-rcard__title { padding: 14px 16px; font-family: var(--bps-fd); font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--bpc-ink-solid); } /* ========================================================================= A11y & responsywność ========================================================================= */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--bpc-gold-d); outline-offset: 2px; border-radius: 4px; } @media (max-width: 899px) { .bps-nav--desktop { display: none; } .bps-header__actions .bps-btn--gold { display: none; } /* CTA jest w panelu mobilnym */ .bps-burger { display: flex; } .bps-mobile { display: block; } /* faktyczną widoczność steruje atrybut [hidden] */ .bps-mobile[hidden] { display: none; } } @media (min-width: 900px) { .bps-mobile, .bps-burger { display: none !important; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }