/* ===== AQUA THEME — Woda, nowoczesność, zaokrąglone kształty ===== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap'); /* ---- CSS Variables (overridden per domain via inline style on ) ---- */ :root { --c-primary: #0099D6; --c-primary-d: #006FA3; --c-accent: #00C2E0; --c-bg: #F0F8FD; --c-bg-card: #FFFFFF; --c-text: #1A2B3C; --c-text-muted:#5A6A7A; --c-border: #D0E8F5; --c-success: #10B981; --c-danger: #EF4444; --radius-card: 16px; --radius-btn: 50px; --shadow-card: 0 4px 24px rgba(0,153,214,.12); --shadow-hover:0 8px 32px rgba(0,153,214,.22); --font-h: 'Poppins', sans-serif; --font-b: 'Open Sans', sans-serif; --transition: .2s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-b); color: var(--c-text); background: var(--c-bg); line-height: 1.7; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-primary); text-decoration: none; } a:hover { color: var(--c-primary-d); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ---- TYPOGRAPHY ---- */ h1,h2,h3,h4,h5 { font-family: var(--font-h); font-weight: 700; line-height: 1.25; } h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); } h2 { font-size: clamp(1.4rem, 3vw, 2rem); } h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); } p { margin-bottom: 1rem; } /* ---- BUTTONS ---- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.75rem; min-height: 44px; border-radius: var(--radius-btn); font-family: var(--font-h); font-weight: 600; font-size: 1rem; border: 2px solid transparent; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn--primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .btn--primary:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); } .btn--outline:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); } .btn--lg { padding: 1rem 2.5rem; font-size: 1.1rem; } /* ---- NAV ---- */ .site-nav { background: #fff; border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,153,214,.08); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: flex; align-items: center; gap: .5rem; font-family: var(--font-h); font-weight: 800; font-size: 1.3rem; color: var(--c-primary); text-decoration: none; } .logo svg { width: 32px; height: 32px; } .nav-links { display: flex; list-style: none; gap: 2rem; align-items: center; } .nav-links a { font-family: var(--font-h); font-weight: 500; font-size: .95rem; color: var(--c-text); padding: .75rem .5rem; border-bottom: 2px solid transparent; transition: var(--transition); } .nav-links a:hover { color: var(--c-primary); border-bottom-color: var(--c-primary); } .nav-cta { background: var(--c-primary); color: #fff !important; padding: .5rem 1.25rem !important; border-radius: var(--radius-btn) !important; border-bottom: none !important; align-self: center;} .nav-cta:hover { background: var(--c-primary-d) !important; color: #fff !important; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; } .nav-toggle svg { width: 24px; height: 24px; } /* ---- HERO ---- */ .hero { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%); color: #fff; padding: 80px 0 0; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: url('/themes/aqua/hero-pattern.svg') repeat; opacity: .06; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding-bottom: 60px; position: relative; } .hero__text h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1rem; } .hero__text p { color: rgba(255,255,255,.88); font-size: 1.15rem; margin-bottom: 1.75rem; max-width: 480px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; } .hero__trust span { background: rgba(255,255,255,.18); padding: .35rem .9rem; border-radius: 50px; font-size: .85rem; font-weight: 600; backdrop-filter: blur(4px); } .hero__img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 6px rgba(255,255,255,.15); aspect-ratio: 4/3; background: rgba(255,255,255,.1); transition: transform .3s ease, box-shadow .3s ease; } .hero__img:hover { transform: scale(1.02); box-shadow: 0 28px 72px rgba(0,0,0,.32), 0 0 0 6px rgba(255,255,255,.22); } .hero__img img { width: 100%; height: 100%; object-fit: cover; } .hero__wave { display: block; width: 100%; margin-top: -1px; line-height: 0; } .hero__wave svg { width: 100%; display: block; } /* ---- SERVICES SECTION ---- */ .section { padding: 80px 0; background: var(--c-bg); } .section--alt { background: #fff; } .section:nth-of-type(even):not(.section--alt) { background: #F0F8FD; } .section__header { text-align: center; margin-bottom: 3rem; } .section__header h2 { color: var(--c-text); margin-bottom: .75rem; } .section__header p { color: var(--c-text-muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto; } .section__subtitle { display: block; font-family: var(--font-h); font-weight: 600; font-size: .85rem; color: var(--c-primary); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .card { background: var(--c-bg-card); border-radius: var(--radius-card); padding: 1.75rem; box-shadow: var(--shadow-card); border: 1px solid var(--c-border); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px) scale(1.02); } .card__icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .card__icon svg { width: 26px; height: 26px; color: #fff; fill: #fff; } .card h3 { font-size: 1.1rem; margin-bottom: .5rem; } .card p { font-size: .9rem; color: var(--c-text-muted); margin: 0; } /* ---- TRUST STRIP ---- */ .trust-strip { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.25rem; } .trust-strip__item { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 500; color: var(--c-text-muted); } .trust-strip__icon { font-size: 1.1rem; } /* ---- STATS BAR ---- */ .stats-bar { background: var(--c-primary); color: #fff; padding: 2.5rem 0; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; text-align: center; } .stat__num { font-family: var(--font-h); font-weight: 800; font-size: 2.2rem; display: block; } .stat__label { font-size: .85rem; opacity: .85; } /* ---- HOW IT WORKS ---- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; counter-reset: step; } .step { text-align: center; position: relative; } .step::before { counter-increment: step; content: counter(step); display: block; width: 48px; height: 48px; background: var(--c-primary); color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 1.2rem; border-radius: 50%; margin: 0 auto 1rem; line-height: 48px; } .step h3 { margin-bottom: .5rem; } .step p { color: var(--c-text-muted); font-size: .9rem; } /* ---- CTA BANNER ---- */ .cta-banner { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-d) 100%); color: #fff; padding: 4rem 0; text-align: center; border-radius: var(--radius-card); margin: 0 20px; } .cta-banner h2 { color: #fff; margin-bottom: 1rem; } .cta-banner p { color: rgba(255,255,255,.85); font-size: 1.05rem; margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-banner .btn--primary { background: #fff; color: var(--c-primary); border-color: #fff; } .cta-banner .btn--primary:hover { background: rgba(255,255,255,.9); } /* ---- BLOG LISTING ---- */ .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; } .post-card { background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--c-border); transition: var(--transition); display: flex; flex-direction: column; } .post-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); } .post-card__img { aspect-ratio: 16/9; overflow: hidden; background: var(--c-bg); } .post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .post-card:hover .post-card__img img { transform: scale(1.05); } .post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .post-card__meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--c-text-muted); margin-bottom: .75rem; } .post-card__cat { color: var(--c-primary); font-weight: 600; } .post-card h3 { font-size: 1.1rem; margin-bottom: .5rem; line-height: 1.4; } .post-card h3 a { color: var(--c-text); } .post-card h3 a:hover { color: var(--c-primary); } .post-card p { font-size: .88rem; color: var(--c-text-muted); flex: 1; } .post-card__link { margin-top: 1rem; font-family: var(--font-h); font-weight: 600; font-size: .88rem; color: var(--c-primary); } .post-card__link:hover { color: var(--c-primary-d); } .reading-time { font-size: .78rem; color: var(--c-text-muted); } .related-posts { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--c-border); } .related-posts__title { font-size: 1rem; margin-bottom: 1rem; color: var(--c-primary); } .related-posts__list { list-style: none; padding: 0; } .related-posts__list li { padding: .5rem 0; border-bottom: 1px solid var(--c-border); } .related-posts__list li:last-child { border-bottom: none; } .related-posts__list a { color: var(--c-text); font-size: .92rem; } .related-posts__list a:hover { color: var(--c-primary); } /* ---- SINGLE POST / RANKING ---- */ .article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; } .article-body { background: #fff; border-radius: var(--radius-card); padding: 2.5rem; box-shadow: var(--shadow-card); border: 1px solid var(--c-border); } .article-body h2 { margin: 2rem 0 1rem; color: var(--c-primary); padding-bottom: .5rem; border-bottom: 2px solid var(--c-border); } .article-body h3 { margin: 1.5rem 0 .75rem; } .article-body p { color: var(--c-text); margin-bottom: 1.1rem; } .article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1rem; } .article-body li { margin-bottom: .5rem; color: var(--c-text); } .article-body strong { color: var(--c-primary-d); } .article-body a { color: var(--c-primary); text-decoration: underline; } .article-body blockquote { border-left: 4px solid var(--c-primary); padding: 1rem 1.5rem; background: var(--c-bg); border-radius: 0 var(--radius-card) var(--radius-card) 0; margin: 1.5rem 0; color: var(--c-text-muted); font-style: italic; } .article-header { margin-bottom: 2rem; } .article-header h1 { margin-bottom: .75rem; } .article-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--c-text-muted); } .article-meta .tag { background: var(--c-bg); color: var(--c-primary); padding: .2rem .75rem; border-radius: 50px; font-weight: 600; } /* FAQ block */ .faq { margin: 2rem 0; } .faq__item { border: 1px solid var(--c-border); border-radius: var(--radius-card); margin-bottom: .75rem; overflow: hidden; } .faq__q { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; cursor: pointer; font-family: var(--font-h); font-weight: 600; background: var(--c-bg); gap: 1rem; } .faq__q:hover { background: var(--c-border); } .faq__q::after { content: '+'; font-size: 1.4rem; color: var(--c-primary); flex-shrink: 0; } .faq__item.open .faq__q::after { content: '−'; } .faq__a { display: none; padding: 1rem 1.25rem; color: var(--c-text-muted); border-top: 1px solid var(--c-border); } .faq__item.open .faq__a { display: block; } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .sidebar-widget { background: #fff; border-radius: var(--radius-card); padding: 1.5rem; box-shadow: var(--shadow-card); border: 1px solid var(--c-border); } .sidebar-widget h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--c-text); border-bottom: 2px solid var(--c-primary); padding-bottom: .5rem; } .sidebar-widget ul { list-style: none; } .sidebar-widget ul li { padding: .4rem 0; border-bottom: 1px solid var(--c-border); font-size: .9rem; } .sidebar-widget ul li:last-child { border: none; } .sidebar-cta { background: linear-gradient(135deg, var(--c-primary), var(--c-accent)) !important; color: #fff !important; text-align: center; border: none !important; } .sidebar-cta h3 { color: #fff !important; border-color: rgba(255,255,255,.3) !important; } .sidebar-cta p { color: rgba(255,255,255,.88); font-size: .9rem; margin-bottom: 1rem; } .sidebar-cta .btn { width: 100%; justify-content: center; background: #fff; color: var(--c-primary); } /* ---- RANKING TABLE ---- */ .ranking-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;font-size:.82rem} .ranking-methodology summary{cursor:pointer;color:var(--c-primary,#0077cc);font-weight:600;list-style:none} .ranking-methodology summary::marker,.ranking-methodology summary::-webkit-details-marker{display:none} .ranking-methodology p{margin-top:.5rem;color:var(--c-text-muted,#666);font-size:.8rem;max-width:600px} .ranking-updated{color:var(--c-text-muted,#888);font-size:.75rem;white-space:nowrap} .ranking-table-note { font-size: .78rem; color: var(--c-text-muted, #888); padding: .5rem 1rem .75rem; margin: 0; text-align: right; font-style: italic; } .ranking-table-wrap { overflow-x: auto; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); margin: 2rem 0; } .ranking-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .ranking-table th { background: var(--c-primary); color: #fff; padding: .75rem 1rem; text-align: center; font-family: var(--font-h); font-size: .8rem; font-weight: 600; white-space: nowrap; } .ranking-table th:first-child { border-radius: var(--radius-card) 0 0 0; } .ranking-table th:last-child { border-radius: 0 var(--radius-card) 0 0; } .ranking-table td { padding: .75rem 1rem; text-align: center; border-bottom: 1px solid var(--c-border); vertical-align: middle; } .ranking-table .col-platform { text-align: left; } .row--winner td { background: linear-gradient(90deg, rgba(0,153,214,.06), transparent); } .feat--yes { color: var(--c-success); font-size: 1.1rem; font-weight: 700; } .feat--no { color: var(--c-danger); font-size: 1.1rem; } .badge { display: inline-block; padding: .15rem .6rem; border-radius: 50px; font-size: .72rem; font-weight: 700; margin-left: .4rem; vertical-align: middle; } .badge--gold { background: #FFF7E0; color: #B45309; border: 1px solid #F59E0B; } .platform-link { color: var(--c-primary); font-weight: 700; text-decoration: underline; } .rating-block { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; text-align: left; } .rating-item { display: flex; align-items: center; gap: .3rem; white-space: nowrap; } .rating-logo { height: 14px; width: auto; } .stars { display: inline-flex; gap: 1px; } .star { font-size: .85rem; } .star--full, .star--half { color: #F59E0B; } .star--empty { color: #D1D5DB; } .no-data { font-style: italic; color: var(--c-text-muted); font-size: .78rem; } .btn-ranking { display: inline-block; padding: .5rem 1.25rem; background: var(--c-primary); color: #fff; border-radius: var(--radius-btn); font-size: .85rem; font-weight: 700; white-space: nowrap; } .btn-ranking:hover { background: var(--c-primary-d); color: #fff; } .no-link { color: var(--c-text-muted); font-size: .85rem; } .platform-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .platform-card { background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius-card); padding: 1.5rem; } .platform-card--winner { border-color: var(--c-primary); box-shadow: var(--shadow-hover); } .platform-card__header { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; } .platform-card__rank { font-size: 1.5rem; } .platform-card__name { font-size: 1.1rem; } .platform-card__ratings { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; margin-bottom: .75rem; } .platform-card__desc { font-size: .88rem; color: var(--c-text-muted); margin-bottom: 1rem; } /* ---- BREADCRUMBS ---- */ .breadcrumbs { padding: .75rem 0; font-size: .85rem; } .breadcrumbs__list { display: flex; flex-wrap: wrap; list-style: none; align-items: center; gap: .25rem; } .breadcrumbs__item { display: flex; align-items: center; gap: .25rem; } .breadcrumbs__item a { color: var(--c-primary); } .breadcrumbs__item a:hover { text-decoration: underline; } .breadcrumbs__sep { color: var(--c-text-muted); } /* ---- FOOTER ---- */ .site-footer { background: var(--c-text); color: rgba(255,255,255,.7); padding: 3rem 0 1.5rem; margin-top: 4rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-brand p { font-size: .88rem; margin-top: .75rem; max-width: 260px; } .footer-brand .logo { color: #fff; filter: brightness(0) invert(1); } .footer-col h4 { color: #fff; font-family: var(--font-h); font-size: .95rem; margin-bottom: 1rem; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: .5rem; } .footer-col ul li a { color: rgba(255,255,255,.65); font-size: .88rem; } .footer-col ul li a:hover { color: var(--c-accent); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: .8rem; flex-wrap: wrap; gap: 1rem; } /* ---- RESPONSIVE ---- */ @media (max-width: 1024px) { .article-layout { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__img { display: none; } .hero__trust { justify-content: center; } .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; padding: 1rem; border-bottom: 1px solid var(--c-border); gap: .5rem; align-items: center; } .nav-links.open { display: flex; } .nav-toggle { display: block; } .footer-grid { grid-template-columns: 1fr; } .cta-banner { margin: 0; border-radius: 0; } .ranking-table { font-size: .78rem; } .ranking-table td, .ranking-table th { padding: .5rem .6rem; } .ranking-table-wrap { -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .section { padding: 50px 0; } .stats-grid { grid-template-columns: 1fr 1fr; } .cards-grid { grid-template-columns: 1fr; } } /* ---- PAGE HEADER (for blog/ranking pages) ---- */ .page-header { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-d) 100%); color: #fff; padding: 3.5rem 0 2.5rem; } .page-header h1 { color: #fff; margin-bottom: .5rem; } .page-header p { color: rgba(255,255,255,.82); font-size: 1.05rem; } /* ---- TABLE & CARD HOVER ---- */ .ranking-table tbody tr { transition: background .15s ease; } .ranking-table tbody tr:hover td { background: rgba(0,0,0,.04) !important; } .platform-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .platform-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.14); border-color: var(--c-primary) !important; } /* ---- STAT TILES (category blocks) ---- */ .stats-bar { padding: 2rem 0; } .stats-grid { gap: 1.25rem; } .stat { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 14px; padding: 1.4rem 1rem; transition: background .18s; } .stat:hover { background: rgba(255,255,255,.22); } .stat__num { font-size: 1.7rem; line-height: 1.1; } .stat__label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; margin-top: .3rem; } /* ---- PLATFORM CARD SCORE BAND ---- */ .platform-card { overflow: hidden; display: flex; flex-direction: column; } .platform-card__score-band { display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; color: #fff; } .platform-card__score-num { font-size: 1.5rem; font-weight: 800; line-height: 1; } .platform-card__score-lbl { font-size: .72rem; opacity: .85; flex: 1; } .platform-card__score-band .stars { font-size: .85rem; } .platform-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .platform-card__google { font-size: .82rem; margin-bottom: .6rem; } .platform-card__note { font-size: .78rem; color: var(--c-text-muted, #888); margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--c-border, #e5e7eb); } .platform-card__desc { flex: 1; } .platform-card { padding: 0; } /* ---- PLATFORM CARD BUTTON FIX ---- */ .platform-card__body .btn { display: flex; width: 100%; justify-content: center; box-sizing: border-box; margin-top: auto; } .platform-card__body .btn--primary { color: var(--btn-text, #fff); } .platform-card__note { text-align: center; } /* ---- TABLE FIXES ---- */ .badge { white-space: nowrap; } .col-platform { white-space: nowrap; } .col-action { width: 1%; white-space: nowrap; text-align: center; } .btn-ranking { white-space: nowrap; display: inline-block; min-width: 0; } /* ---- PAGE HEADER CONTRAST FIX ---- */ .page-header .article-meta, .page-header .article-meta time, .page-header .reading-time{color:rgba(255,255,255,.82)} .page-header .article-meta .tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25)} .page-header .breadcrumbs__item a{color:rgba(255,255,255,.9)} .page-header .breadcrumbs__sep{color:rgba(255,255,255,.45)} .page-header .breadcrumbs__item span[aria-current]{color:#fff;font-weight:600} /* ---- TYPOGRAPHY REFINEMENT ---- */ h1{letter-spacing:-.02em} h2{letter-spacing:-.01em;font-weight:700} h3{font-weight:600} /* ---- PAGE HEADER CONTRAST FIX ---- */ .page-header .article-meta, .page-header .article-meta time, .page-header .reading-time{color:rgba(255,255,255,.82)} .page-header .article-meta .tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25)} .page-header .breadcrumbs__item a{color:rgba(255,255,255,.9)} .page-header .breadcrumbs__sep{color:rgba(255,255,255,.45)} .page-header .breadcrumbs__item span[aria-current]{color:#fff;font-weight:600} /* ---- TYPOGRAPHY REFINEMENT ---- */ h1{letter-spacing:-.02em} h2{letter-spacing:-.01em;font-weight:700} h3{font-weight:600}