/* ============================================================ PolyBright Labs — theme stylesheet Tokens → base → layout → components → page sections → Woo → utilities Colours are overridable from Appearance → PolyBright (CSS vars in ). ============================================================ */ :root { --pb-primary: #1B6FB5; --pb-navy: #1F3F7A; --pb-accent: #0EA5E9; --pb-signal: #F59E0B; --pb-ink: #1B2433; --pb-ink-2: #4B5566; --pb-muted: #7A8494; --pb-line: #E3EAF3; --pb-mist: #F2F6FB; --pb-white: #FFFFFF; --pb-logo-w: 170px; --pb-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pb-max: 1160px; --pb-r-sm: 6px; --pb-r: 10px; --pb-r-lg: 16px; --pb-shadow: 0 12px 40px -18px rgba(31, 63, 122, .35); --pb-ease: 180ms ease; --fs-0: .8125rem; --fs-1: .9375rem; --fs-2: 1.0625rem; --fs-3: 1.25rem; --fs-4: 1.5625rem; --fs-5: 1.9531rem; --fs-6: 2.4414rem; --fs-7: 3.0518rem; --fs-8: 3.8147rem; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } body { margin: 0; font-family: var(--pb-font); font-size: var(--fs-2); line-height: 1.6; color: var(--pb-ink); background: var(--pb-white); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--pb-primary); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } :focus-visible { outline: 3px solid var(--pb-accent); outline-offset: 2px; border-radius: 3px; } h1, h2, h3, h4 { color: var(--pb-navy); line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.015em; } h1 { font-size: clamp(var(--fs-6), 4.5vw, var(--fs-8)); } h2 { font-size: clamp(var(--fs-5), 3.2vw, var(--fs-6)); } h3 { font-size: var(--fs-3); letter-spacing: -.005em; } h4 { font-size: var(--fs-2); } p { margin: 0 0 1em; } p, li { max-width: 68ch; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--pb-mist); padding: .1em .35em; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--pb-line); margin: 3rem 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } /* ---------- layout ---------- */ .pb-container { max-width: var(--pb-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); } .pb-section { padding: clamp(56px, 8vw, 104px) 0; } .pb-section--mist { background: var(--pb-mist); } .pb-section--navy { background: var(--pb-navy); color: #DCE6F5; } .pb-section--navy h2, .pb-section--navy h3 { color: #fff; } .pb-section--tight { padding: clamp(36px, 5vw, 64px) 0; } .pb-lede { font-size: var(--fs-3); color: var(--pb-ink-2); max-width: 60ch; line-height: 1.5; } .pb-section__head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); } .pb-section__head p { color: var(--pb-ink-2); font-size: var(--fs-2); } .pb-tiles { position: relative; isolation: isolate; } .pb-tiles::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M18 4h18l10 10v18L36 42H18L8 32V14z' fill='none' stroke='%231B6FB5' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 72px 72px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); } .pb-grid { display: grid; gap: clamp(20px, 3vw, 32px); } .pb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 960px) { .pb-grid--4, .pb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pb-grid--4, .pb-grid--3, .pb-grid--2 { grid-template-columns: 1fr; } } /* ---------- buttons ---------- */ .pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px; border-radius: var(--pb-r); background: var(--pb-primary); color: #fff; font-weight: 700; font-size: var(--fs-1); border: 2px solid var(--pb-primary); cursor: pointer; text-decoration: none; transition: background var(--pb-ease), border-color var(--pb-ease), transform var(--pb-ease); white-space: nowrap; } .pb-btn:hover { background: var(--pb-navy); border-color: var(--pb-navy); color: #fff; text-decoration: none; } .pb-btn:active { transform: translateY(1px); } .pb-btn--secondary { background: transparent; color: var(--pb-primary); } .pb-btn--secondary:hover { background: var(--pb-primary); color: #fff; } .pb-btn--ghost { background: transparent; color: var(--pb-navy); border-color: var(--pb-line); } .pb-btn--ghost:hover { border-color: var(--pb-navy); background: #fff; color: var(--pb-navy); } .pb-btn--light { background: #fff; color: var(--pb-navy); border-color: #fff; } .pb-btn--light:hover { background: var(--pb-mist); border-color: var(--pb-mist); color: var(--pb-navy); } .pb-btn--lg { min-height: 54px; padding: 0 28px; font-size: var(--fs-2); } .pb-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .pb-btn-row .pb-hint { font-size: var(--fs-0); color: var(--pb-muted); } /* ---------- price tag (the one bold element) ---------- */ .pb-price { font-size: var(--fs-6); font-weight: 800; color: var(--pb-navy); letter-spacing: -.03em; line-height: 1; } .pb-price .woocommerce-Price-currencySymbol { font-size: .55em; vertical-align: top; margin-right: .05em; position: relative; top: .25em; } .pb-price del { color: var(--pb-muted); font-weight: 600; font-size: .5em; margin-right: .3em; } .pb-price ins { text-decoration: none; } .pb-once { display: inline-block; margin-left: .5em; padding: .28em .6em; border-radius: 999px; background: var(--pb-signal); color: #3A2400; font-size: var(--fs-0); font-weight: 800; letter-spacing: 0; vertical-align: middle; } .pb-from { display: inline-flex; align-items: baseline; gap: .35em; color: var(--pb-ink-2); font-weight: 600; } .pb-from strong { color: var(--pb-navy); font-size: var(--fs-4); font-weight: 800; letter-spacing: -.02em; } /* ---------- announcement bar + header ---------- */ .pb-bar { background: var(--pb-navy); color: #DCE6F5; font-size: var(--fs-0); text-align: center; padding: 8px 12px; } .pb-bar a { color: #fff; font-weight: 700; } .pb-header { background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--pb-line); z-index: 50; } .pb-header--sticky { position: sticky; top: 0; } .pb-header__inner { display: flex; align-items: center; gap: 24px; min-height: 72px; } .pb-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .pb-logo img { width: var(--pb-logo-w); height: auto; } .pb-logo__text { font-weight: 800; font-size: var(--fs-3); color: var(--pb-navy); letter-spacing: -.02em; } .pb-nav { margin-left: auto; } .pb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .pb-nav a { display: block; padding: 10px 14px; color: var(--pb-ink); font-weight: 600; font-size: var(--fs-1); border-radius: var(--pb-r-sm); } .pb-nav a:hover, .pb-nav .current-menu-item > a, .pb-nav .current-menu-ancestor > a { background: var(--pb-mist); color: var(--pb-navy); text-decoration: none; } .pb-header__cta { display: flex; align-items: center; gap: 8px; } .pb-iconlink { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--pb-ink); font-weight: 600; font-size: var(--fs-1); border-radius: var(--pb-r-sm); } .pb-iconlink:hover { background: var(--pb-mist); text-decoration: none; } .pb-iconlink svg { width: 20px; height: 20px; } .pb-cart-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--pb-primary); color: #fff; font-size: 12px; font-weight: 800; } .pb-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--pb-line); border-radius: var(--pb-r-sm); background: #fff; cursor: pointer; align-items: center; justify-content: center; } .pb-burger span, .pb-burger span::before, .pb-burger span::after { display: block; width: 20px; height: 2px; background: var(--pb-navy); position: relative; transition: transform var(--pb-ease), opacity var(--pb-ease); } .pb-burger span::before, .pb-burger span::after { content: ""; position: absolute; left: 0; } .pb-burger span::before { top: -6px; } .pb-burger span::after { top: 6px; } .pb-burger[aria-expanded="true"] span { background: transparent; } .pb-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .pb-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 900px) { .pb-burger { display: inline-flex; margin-left: auto; } .pb-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--pb-line); padding: 12px clamp(16px,4vw,28px) 20px; box-shadow: var(--pb-shadow); } .pb-nav.is-open { display: block; } .pb-nav ul { flex-direction: column; gap: 2px; } .pb-nav a { padding: 12px 10px; font-size: var(--fs-2); } .pb-header__cta .pb-btn { display: none; } .pb-header { position: relative; } .pb-header--sticky { position: sticky; } .pb-logo img { width: calc(var(--pb-logo-w) * .75); } } /* ---------- hero ---------- */ .pb-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); } .pb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .pb-hero__grid { grid-template-columns: 1fr; } } .pb-hero h1 { margin-bottom: 18px; } .pb-hero .pb-lede { margin-bottom: 28px; } .pb-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--pb-ink-2); font-size: var(--fs-1); font-weight: 600; } .pb-hero__facts li::before { content: "✓"; color: var(--pb-primary); font-weight: 800; margin-right: .45em; } .pb-shot { border-radius: var(--pb-r-lg); background: #fff; border: 1px solid var(--pb-line); box-shadow: var(--pb-shadow); overflow: hidden; } .pb-shot__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--pb-mist); border-bottom: 1px solid var(--pb-line); } .pb-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9D5E6; } .pb-shot img { width: 100%; } /* ---------- product cards (home) ---------- */ .pb-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); } @media (max-width: 760px) { .pb-products { grid-template-columns: 1fr; } } .pb-product { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); background: #fff; overflow: hidden; } /* Hero product card — same card shape as the others, just spanning the full row width, with a proportionally larger banner image on top */ .pb-product--hero { grid-column: 1 / -1; border-color: var(--pb-primary); border-width: 2px; box-shadow: 0 12px 32px -16px rgba(31, 63, 122, 0.25); } .pb-product--hero .pb-product__media img { aspect-ratio: 21 / 9; width: 100%; object-fit: cover; } .pb-product--hero .pb-product__body { padding: clamp(20px, 3vw, 36px); max-width: 900px; } .pb-product--hero h2 { font-size: var(--fs-5); } .pb-product--hero .pb-product__tag { font-size: var(--fs-2); } .pb-product__flag { display: inline-block; background: var(--pb-signal); color: #fff; font-weight: 800; font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; width: fit-content; } .pb-product__media { background: var(--pb-mist); aspect-ratio: 16 / 9; overflow: hidden; } .pb-product__media img { width: 100%; height: 100%; object-fit: cover; } .pb-product__body { padding: clamp(20px, 3vw, 28px); } .pb-product__body h2 { font-size: var(--fs-4); margin-bottom: 6px; } .pb-product__body h2 a { color: inherit; } .pb-product__tag { color: var(--pb-ink-2); margin-bottom: 14px; } .pb-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(20px, 3vw, 28px); border-top: 1px solid var(--pb-line); background: #fff; flex-wrap: wrap; } /* ---------- steps ---------- */ .pb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); overflow: hidden; background: #fff; } @media (max-width: 760px) { .pb-steps { grid-template-columns: 1fr; } } .pb-step { padding: 26px 26px 26px 72px; position: relative; counter-increment: step; border-left: 1px solid var(--pb-line); } .pb-step:first-child { border-left: 0; } @media (max-width: 760px) { .pb-step { border-left: 0; border-top: 1px solid var(--pb-line); } .pb-step:first-child { border-top: 0; } } .pb-step::before { content: counter(step); position: absolute; left: 24px; top: 24px; width: 34px; height: 34px; border-radius: 50%; background: var(--pb-navy); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: var(--fs-1); } .pb-step h3 { margin-bottom: 4px; } .pb-step p { margin: 0; color: var(--pb-ink-2); font-size: var(--fs-1); } /* ---------- feature blocks ---------- */ .pb-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; } .pb-feature:nth-child(even) .pb-feature__copy { order: 2; } @media (max-width: 860px) { .pb-feature { grid-template-columns: 1fr; } .pb-feature:nth-child(even) .pb-feature__copy { order: 0; } } .pb-feature h3 { font-size: var(--fs-4); } .pb-feature p { color: var(--pb-ink-2); } .pb-feature__bullets { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; } .pb-feature__bullets li { padding-left: 26px; position: relative; font-weight: 600; } .pb-feature__bullets li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 4px; background: var(--pb-accent); transform: rotate(45deg) scale(.8); } .pb-tierbadge { display: inline-block; padding: .2em .6em; border-radius: 999px; background: var(--pb-mist); color: var(--pb-navy); font-weight: 700; font-size: var(--fs-0); margin-bottom: 10px; border: 1px solid var(--pb-line); } /* ---------- feature grid ---------- */ .pb-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--pb-line); border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); overflow: hidden; } @media (max-width: 960px) { .pb-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .pb-fgrid { grid-template-columns: 1fr; } } .pb-fgrid__item { background: #fff; padding: 22px; } .pb-fgrid__item h4 { margin-bottom: 4px; color: var(--pb-navy); } .pb-fgrid__item p { margin: 0; color: var(--pb-ink-2); font-size: var(--fs-1); } /* ---------- pricing tiers ---------- */ .pb-tiers { display: grid; gap: 18px; align-items: stretch; } .pb-tiers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pb-tiers--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pb-tiers--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin: 0 auto; } @media (max-width: 1000px) { .pb-tiers--4, .pb-tiers--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pb-tiers--4, .pb-tiers--3, .pb-tiers--2 { grid-template-columns: 1fr; } } .pb-tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); padding: 26px 24px 24px; } .pb-tier--featured { border-color: var(--pb-primary); box-shadow: var(--pb-shadow); } .pb-tier--free { background: var(--pb-mist); } .pb-tier__flag { position: absolute; top: -13px; left: 24px; background: var(--pb-primary); color: #fff; font-size: var(--fs-0); font-weight: 800; padding: 4px 10px; border-radius: 999px; } .pb-tier__name { margin: 0 0 2px; font-size: var(--fs-3); } .pb-tier__tagline { color: var(--pb-ink-2); font-size: var(--fs-1); min-height: 2.6em; margin-bottom: 14px; } .pb-tier__price { margin: 0 0 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .pb-tier__price .pb-price { font-size: var(--fs-5); } .pb-tier__meta { color: var(--pb-muted); font-size: var(--fs-0); margin-bottom: 16px; } .pb-tier__list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; flex: 1; } .pb-tier__list li { padding-left: 24px; position: relative; font-size: var(--fs-1); } .pb-tier__list li::before { content: "✓"; position: absolute; left: 0; color: var(--pb-primary); font-weight: 800; } .pb-tier .pb-btn { width: 100%; } .pb-tier__best { margin: 14px 0 0; color: var(--pb-muted); font-size: var(--fs-0); line-height: 1.45; } .pb-tax-line { color: var(--pb-muted); font-size: var(--fs-0); margin-top: 14px; } /* ---------- comparison matrix ---------- */ .pb-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); background: #fff; } .pb-matrix { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-1); } .pb-matrix th, .pb-matrix td { padding: 12px 14px; border-bottom: 1px solid var(--pb-line); text-align: center; vertical-align: middle; } .pb-matrix th:first-child, .pb-matrix td:first-child { text-align: left; width: 38%; } .pb-matrix thead th { position: sticky; top: 0; background: #fff; z-index: 2; font-weight: 800; color: var(--pb-navy); border-bottom: 2px solid var(--pb-line); } .pb-matrix thead th small { display: block; font-weight: 600; color: var(--pb-muted); font-size: var(--fs-0); } .pb-matrix thead th.is-featured { color: var(--pb-primary); } .pb-matrix tbody tr:nth-child(even) td { background: #FAFCFE; } .pb-matrix .pb-matrix__section td { background: var(--pb-mist) !important; font-weight: 800; color: var(--pb-navy); text-align: left; padding-top: 14px; padding-bottom: 10px; } .pb-yes { color: var(--pb-primary); font-weight: 800; font-size: 1.1em; } .pb-no { color: #B6C0CF; } .pb-matrix tfoot td { padding-top: 18px; border-bottom: 0; } .pb-matrix tfoot .pb-btn { min-height: 40px; padding: 0 14px; font-size: var(--fs-0); } .pb-scroll-hint { display: none; color: var(--pb-muted); font-size: var(--fs-0); margin: 8px 0 0; } @media (max-width: 760px) { .pb-scroll-hint { display: block; } } /* ---------- compare (vs competitor) ---------- */ .pb-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 28px 0 8px; } .pb-vs__side { text-align: center; padding: 22px; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); background: #fff; } .pb-vs__side--ours { border-color: var(--pb-primary); } .pb-vs__side h2 { font-size: var(--fs-3); margin-bottom: 4px; } .pb-vs__side p { margin: 0; color: var(--pb-ink-2); font-size: var(--fs-1); } .pb-vs__mark { font-weight: 800; color: var(--pb-muted); } @media (max-width: 640px) { .pb-vs { grid-template-columns: 1fr; } .pb-vs__mark { text-align: center; } } .pb-verified { color: var(--pb-muted); font-size: var(--fs-0); } /* ---------- FAQ ---------- */ .pb-faq { border-top: 1px solid var(--pb-line); } .pb-faq details { border-bottom: 1px solid var(--pb-line); } .pb-faq summary { cursor: pointer; list-style: none; padding: 18px 44px 18px 0; font-weight: 700; color: var(--pb-navy); position: relative; font-size: var(--fs-2); } .pb-faq summary::-webkit-details-marker { display: none; } .pb-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--pb-line); display: grid; place-items: center; color: var(--pb-primary); font-weight: 800; } .pb-faq details[open] summary::after { content: "–"; } .pb-faq__section { margin: 32px 0 4px; color: var(--pb-navy); font-size: var(--fs-3); } .pb-faq__section:first-child { margin-top: 0; } /* ---------- section-level collapse (full matrix, long-form content) ---------- */ .pb-section-toggle { border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); background: #fff; } .pb-section-toggle > summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 800; color: var(--pb-navy); font-size: var(--fs-4); display: flex; align-items: center; justify-content: space-between; } .pb-section-toggle > summary::-webkit-details-marker { display: none; } .pb-section-toggle > summary::after { content: "Show \2193"; font-size: var(--fs-0); font-weight: 700; color: var(--pb-primary); white-space: nowrap; margin-left: 16px; } .pb-section-toggle[open] > summary::after { content: "Hide \2191"; } .pb-section-toggle[open] > summary { border-bottom: 1px solid var(--pb-line); } .pb-section-toggle .pb-matrix-wrap { border: 0; border-radius: 0; } .pb-readmore { margin-top: 8px; } .pb-readmore > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--pb-primary); font-weight: 700; font-size: var(--fs-1); padding: 4px 0; } .pb-readmore > summary::-webkit-details-marker { display: none; } .pb-readmore > summary::after { content: "\2193"; font-size: .85em; } .pb-readmore[open] > summary::after { content: "\2191"; } .pb-readmore > .pb-page-content { margin-top: 18px; } .pb-faq details p { color: var(--pb-ink-2); padding: 0 0 18px; margin: 0; max-width: 70ch; } /* ---------- testimonials ---------- */ .pb-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 900px) { .pb-quotes { grid-template-columns: 1fr; } } .pb-quote { background: #fff; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); padding: 22px; } .pb-quote p { margin: 0 0 12px; } .pb-quote cite { font-style: normal; font-weight: 700; color: var(--pb-navy); font-size: var(--fs-1); } .pb-quote cite span { color: var(--pb-muted); font-weight: 500; } /* ---------- CTA band ---------- */ .pb-cta { border-radius: var(--pb-r-lg); background: var(--pb-navy); color: #DCE6F5; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px; align-items: center; } @media (max-width: 760px) { .pb-cta { grid-template-columns: 1fr; } } .pb-cta h2 { color: #fff; margin-bottom: 8px; } .pb-cta p { margin: 0; color: #C5D4EA; } /* ---------- breadcrumbs ---------- */ .pb-crumbs { font-size: var(--fs-0); color: var(--pb-muted); margin: 18px 0 0; } .pb-crumbs a { color: var(--pb-ink-2); } .pb-crumbs span { margin: 0 .5em; } /* ---------- badges / footer ---------- */ .pb-badges { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 0; list-style: none; font-size: var(--fs-0); color: var(--pb-ink-2); font-weight: 600; } .pb-badges li { display: inline-flex; align-items: center; gap: 8px; } .pb-badges svg { width: 18px; height: 18px; color: var(--pb-primary); flex: 0 0 auto; } .pb-footer { background: var(--pb-navy); color: #C5D4EA; margin-top: clamp(56px, 8vw, 104px); } .pb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: clamp(40px, 6vw, 64px) 0 32px; } @media (max-width: 900px) { .pb-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pb-footer__grid { grid-template-columns: 1fr; } } .pb-footer h4 { color: #fff; font-size: var(--fs-1); margin-bottom: 12px; } .pb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pb-footer a { color: #C5D4EA; font-size: var(--fs-1); } .pb-footer a:hover { color: #fff; } .pb-footer__about p { font-size: var(--fs-1); color: #C5D4EA; } .pb-footer__logo img { width: var(--pb-logo-w); margin-bottom: 14px; } .pb-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 26px; font-size: var(--fs-0); color: #9FB3D1; display: grid; gap: 8px; } .pb-footer .pb-badges { color: #C5D4EA; } .pb-footer .pb-badges svg { color: var(--pb-accent); } /* ---------- blog ---------- */ .pb-blog, .pb-archive, .pb-single, .pb-page { padding: clamp(36px, 5vw, 64px) 0; } .pb-archive-title { font-size: var(--fs-6); margin-bottom: 24px; } .pb-post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 900px) { .pb-post-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .pb-post-list { grid-template-columns: 1fr; } } .pb-post-card { border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); overflow: hidden; background: #fff; } .pb-post-card-body { padding: 20px; } .pb-post-card-title { font-size: var(--fs-3); margin: 0 0 6px; } .pb-post-card-title a { color: var(--pb-navy); } .pb-post-meta { color: var(--pb-muted); font-size: var(--fs-0); margin: 0 0 12px; } .pb-read-more { font-weight: 700; } .pb-single-inner, .pb-page-content { max-width: 760px; } .pb-post-header h1 { margin-bottom: 8px; } .pb-post-thumb { border-radius: var(--pb-r-lg); margin: 24px 0; } .pb-post-content, .pb-page-content { font-size: var(--fs-2); } .pb-post-content h2, .pb-page-content h2 { margin-top: 2em; } .pb-post-content h3, .pb-page-content h3 { margin-top: 1.6em; font-size: var(--fs-3); color: var(--pb-navy); } .pb-post-content a, .pb-page-content a { color: var(--pb-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .pb-post-content a:hover, .pb-page-content a:hover { color: var(--pb-navy); } .pb-post-content strong, .pb-page-content strong { color: var(--pb-navy); font-weight: 800; } .pb-post-cta { margin-top: 40px; } .navigation.pagination { margin-top: 32px; text-align: center; } /* ---------- WooCommerce ---------- */ .pb-woocommerce-inner { padding: clamp(36px, 5vw, 64px) 0; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce button.button.alt, .woocommerce a.button.alt, .wc-block-components-button { background: var(--pb-primary) !important; color: #fff !important; border-radius: var(--pb-r) !important; font-weight: 700 !important; font-family: var(--pb-font) !important; padding: .8em 1.4em !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover { background: var(--pb-navy) !important; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container--default .select2-selection--single { border: 1px solid #C9D5E6 !important; border-radius: var(--pb-r-sm) !important; padding: .7em .8em !important; min-height: 44px; font-family: var(--pb-font); } .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 12px; border-radius: var(--pb-r-sm); color: var(--pb-ink); font-weight: 600; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--pb-mist); color: var(--pb-navy); text-decoration: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--pb-primary) !important; border-radius: var(--pb-r-sm); font-family: var(--pb-font); } .woocommerce table.shop_table { border: 1px solid var(--pb-line); border-radius: var(--pb-r); border-collapse: separate; } .woocommerce table.shop_table th { color: var(--pb-navy); } .pb-license-card { border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); padding: 20px; margin-bottom: 20px; background: #fff; } .pb-updates-label { color: var(--pb-ink-2); font-size: var(--fs-1); margin: -6px 0 12px; } .pb-tax-note, .pb-invoice-no { color: var(--pb-muted); font-size: var(--fs-0); } .single-product .product { max-width: 760px; } /* ---------- utilities ---------- */ .pb-muted { color: var(--pb-muted); } .pb-center { text-align: center; } .pb-mb-lg { margin-bottom: clamp(28px, 4vw, 48px); }