.pro-doc{--doc-glass:rgba(255,255,255,.72);--doc-glass-strong:rgba(255,255,255,.86);--doc-border:rgba(255,255,255,.9);--doc-shadow:0 18px 44px rgba(8,53,107,.09),inset 0 1px 0 rgba(255,255,255,.95);--doc-radius:24px;--doc-sticky:232px;position:relative;isolation:isolate;padding:28px 0 64px;overflow:clip}
.pro-doc__backdrop{position:absolute;z-index:-1;inset:0;pointer-events:none;background:
radial-gradient(1100px 520px at 12% -6%,rgba(0,113,223,.16),transparent 62%),
radial-gradient(900px 600px at 96% 8%,rgba(122,201,98,.16),transparent 60%),
radial-gradient(800px 700px at 50% 70%,rgba(0,113,223,.07),transparent 70%),
linear-gradient(180deg,#eef7ff 0%,#f6fbff 38%,#fbfdff 100%)}
.pro-doc__backdrop::before{content:"";position:absolute;inset:0 0 auto;height:520px;background:url(//www.progenion.nl/wp-content/themes/progenion-nieuw/assets/hero-spring.webp) center 30%/cover no-repeat;opacity:.22;filter:blur(18px) saturate(.9);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)} .pro-doc-hero{position:relative;padding:22px 0 26px}
.pro-doc-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin:0 0 14px;font-size:.84rem;color:var(--muted)}
.pro-doc-breadcrumb a{color:var(--blue);text-decoration:none;font-weight:650}
.pro-doc-breadcrumb a:hover{text-decoration:underline}
.pro-doc-breadcrumb [aria-current]{color:var(--ink);font-weight:650}
.pro-doc-hero h1{max-width:20ch;margin:0 0 12px;font-family:"Nunito Sans","Segoe UI Variable Text","Segoe UI",sans-serif;font-weight:900;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.03em;color:var(--navy);overflow-wrap:break-word;hyphens:auto}
.pro-doc-hero__lead{max-width:62ch;margin:0 0 14px;font-size:1.12rem;line-height:1.6;color:var(--ink)}
.pro-doc-hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pro-doc-hero__meta span{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--doc-border);border-radius:999px;background:var(--doc-glass);box-shadow:0 6px 16px rgba(8,53,107,.06);font-size:.8rem;font-weight:700;color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .pro-doc-layout{display:block}
.pro-doc-layout.has-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.pro-doc-content{display:grid;gap:18px;min-width:0} .pro-doc-card,.pro-doc-toc__box,.pro-doc-help{position:relative;border:1px solid var(--doc-border);border-radius:var(--doc-radius);background:var(--doc-glass);box-shadow:var(--doc-shadow);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.pro-doc-card{padding:34px clamp(22px,4vw,48px) 30px;scroll-margin-top:var(--doc-sticky)}
.pro-doc-card--intro{background:var(--doc-glass-strong)}
.pro-doc-card__number{position:absolute;top:22px;right:24px;font:800 .78rem/1 "Nunito Sans","Segoe UI",sans-serif;letter-spacing:.08em;color:rgba(0,113,223,.55)}
.pro-doc-card h2{max-width:34ch;margin:0 0 16px;padding-right:36px;font-family:"Nunito Sans","Segoe UI Variable Text","Segoe UI",sans-serif;font-weight:850;font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.2;letter-spacing:-.02em;color:var(--navy)}
.pro-doc-card__top{display:inline-flex;gap:6px;margin-top:18px;font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none}
.pro-doc-card__top:hover{color:var(--blue)} .pro-doc-prose{max-width:72ch;font-size:1.0625rem;line-height:1.75;color:#1d3b5f;overflow-wrap:break-word}
.pro-doc-prose>*:first-child{margin-top:0}.pro-doc-prose>*:last-child{margin-bottom:0}
.pro-doc-prose p{margin:0 0 1.05em;text-align:left}
.pro-doc-prose h3,.pro-doc-prose h4{margin:1.6em 0 .5em;font-family:"Nunito Sans","Segoe UI",sans-serif;font-weight:800;font-size:1.12rem;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.pro-doc-prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.pro-doc-prose strong,.pro-doc-prose b{color:var(--navy);font-weight:750}
.pro-doc-prose ul,.pro-doc-prose ol{margin:0 0 1.1em;padding-left:1.3em}
.pro-doc-prose li{margin:.35em 0;padding-left:.2em}
.pro-doc-prose ul li::marker{color:var(--blue)}
.pro-doc-prose ol li::marker{color:var(--blue);font-weight:800}
.pro-doc-prose img,.pro-doc-prose video,.pro-doc-prose iframe{max-width:100%;height:auto;border-radius:16px}
.pro-doc-prose figure{margin:1.2em 0}
.pro-doc-prose blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid var(--blue);border-radius:0 14px 14px 0;background:rgba(234,246,255,.7)}
.pro-doc-prose hr{border:0;border-top:1px solid rgba(8,53,107,.12);margin:1.6em 0}
.pro-doc-table{overflow-x:auto;margin:1.2em 0;border-radius:14px;border:1px solid var(--line);-webkit-overflow-scrolling:touch}
.pro-doc-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem}
.pro-doc-table th,.pro-doc-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pro-doc-table th{background:rgba(234,246,255,.8);color:var(--navy)}
.pro-doc-prose .pro-fx-toggle{background:rgba(255,255,255,.75)}
.pro-doc-prose ul.products{padding:0} .pro-doc-toc__box{padding:0;overflow:hidden}
.pro-doc-toc__box summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;cursor:pointer;list-style:none;font:800 .95rem/1.2 "Nunito Sans","Segoe UI",sans-serif;color:var(--navy)}
.pro-doc-toc__box summary::-webkit-details-marker{display:none}
.pro-doc-toc__chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.pro-doc-toc__box[open] .pro-doc-toc__chevron{transform:rotate(-135deg)}
.pro-doc-toc ol{margin:0;padding:0 10px 14px;list-style:none;counter-reset:toc;max-height:min(62vh,640px);overflow:auto}
.pro-doc-toc li{counter-increment:toc}
.pro-doc-toc a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:8px 10px;border-radius:12px;font-size:.88rem;line-height:1.35;color:var(--ink);text-decoration:none}
.pro-doc-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:800;font-size:.74rem;line-height:1.6;color:rgba(0,113,223,.6)}
.pro-doc-toc a:hover{background:rgba(234,246,255,.9);color:var(--blue)}
.pro-doc-toc a.is-current{background:rgba(0,113,223,.1);color:var(--blue);font-weight:750} .pro-doc-help{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;padding:24px clamp(22px,4vw,40px);background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(232,245,255,.78))}
.pro-doc-help strong{display:block;margin-bottom:4px;font:850 1.15rem/1.25 "Nunito Sans","Segoe UI",sans-serif;color:var(--navy)}
.pro-doc-help p{margin:0;color:var(--ink);line-height:1.55}
.pro-doc-help p a{color:var(--blue);font-weight:700;white-space:nowrap}
.pro-doc-help .button{flex:0 0 auto} .pro-doc--shop .pro-doc-card--intro{padding:28px clamp(16px,3vw,36px)}
.pro-doc--shop .pro-doc-prose{max-width:none;font-size:1rem} @media (min-width:901px){.pro-doc{padding-top:84px}}
@media (min-width:1100px){
.pro-doc-layout.has-toc{grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:start}
.pro-doc-toc{position:sticky;top:var(--doc-sticky)}
} @media (max-width:1099px){
.pro-doc{--doc-sticky:150px}
.pro-doc-toc ol{max-height:none}
} @media (max-width:700px){
.pro-doc{--doc-radius:20px;--doc-sticky:120px;padding:14px 0 44px}
.pro-doc-hero{padding:14px 0 18px}
.pro-doc-breadcrumb{font-size:.78rem}
.pro-doc-hero h1{font-size:clamp(1.85rem,8.2vw,2.4rem)}
.pro-doc-content,.pro-doc-layout.has-toc{gap:12px}
.pro-doc-card{padding:26px 18px 22px}
.pro-doc-card__number{top:16px;right:16px}
.pro-doc-card h2{padding-right:28px}
.pro-doc-prose{font-size:1rem;line-height:1.7}
.pro-doc-help{flex-direction:column;align-items:stretch;text-align:left}
.pro-doc-help .button{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.pro-doc-toc__chevron{transition:none}html:focus-within{scroll-behavior:auto}}
@media (prefers-reduced-motion:no-preference){html:has(.pro-doc){scroll-behavior:smooth}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.pro-doc{--doc-glass:rgba(255,255,255,.94);--doc-glass-strong:#fff}} .pro-doc-prose .pro-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:1.2em 0 0}
.pro-doc .pro-doc-card:has(.pro-news-grid) .pro-doc-prose{max-width:none}
.pro-news-card a{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--doc-border);border-radius:18px;background:rgba(255,255,255,.8);box-shadow:0 10px 26px rgba(8,53,107,.08);color:inherit;text-decoration:none;font-weight:400;transition:transform .18s ease,box-shadow .18s ease}
.pro-news-card a:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(8,53,107,.12)}
.pro-news-card__image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.pro-news-card__body{display:grid;gap:6px;padding:14px 16px 18px}
.pro-news-card time{font-size:.76rem;font-weight:700;color:var(--muted)}
.pro-news-card strong{font:800 1.02rem/1.3 "Nunito Sans","Segoe UI",sans-serif;color:var(--navy)}
.pro-news-card__body>span{font-size:.9rem;line-height:1.55;color:#36506f}
@media (prefers-reduced-motion:reduce){.pro-news-card a{transition:none}}:root {
--topic-navy: #082f55;
--topic-blue: #0879cf;
--topic-blue-dark: #005ca8;
--topic-orange: #f47721;
--topic-ink: #153f60;
--topic-muted: #5b7489;
--topic-line: rgba(174, 211, 232, .72);
--topic-page: #f4fbfe;
--topic-glass: rgba(255, 255, 255, .73);
--topic-shadow: 0 24px 60px rgba(7, 57, 96, .13);
}
.pro-topic--smoke {
--topic-blue: #dd671a;
--topic-blue-dark: #b94a0d;
--topic-navy: #173b55;
--topic-page: #f8fbfc;
}
.pro-topic--pets {
--topic-blue: #0a88a2;
--topic-blue-dark: #057087;
--topic-page: #f5fcfb;
}
.pro-topic {
position: relative;
overflow: clip;
background:
radial-gradient(circle at 7% 30%, rgba(67, 180, 229, .14), transparent 28rem),
radial-gradient(circle at 93% 63%, rgba(91, 190, 151, .11), transparent 30rem),
linear-gradient(180deg, #eef9fd 0, var(--topic-page) 38rem, #fff 100%);
color: var(--topic-ink);
padding-bottom: 80px;
}
.pro-topic *,
.pro-topic *::before,
.pro-topic *::after {
box-sizing: border-box;
}
.pro-topic-wide {
width: 100vw;
max-width: none;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
.pro-topic .wrap {
width: min(calc(100% - 48px), 1320px);
max-width: none;
margin-right: auto;
margin-left: auto;
}
.pro-topic h1,
.pro-topic h2,
.pro-topic h3,
.pro-topic p {
overflow-wrap: anywhere;
}
.pro-topic h1,
.pro-topic h2,
.pro-topic h3 {
font-family: inherit;
text-wrap: balance;
}
.pro-topic h2 {
margin: 6px 0 0;
color: var(--topic-navy);
font-size: clamp(30px, 3.2vw, 47px);
font-weight: 900;
letter-spacing: -.045em;
line-height: 1.04;
}
.pro-topic h3 {
color: var(--topic-navy);
}
.pro-topic a {
color: inherit;
}
.pro-topic-glass,
.pro-topic-products,
.pro-topic-product,
.pro-topic-facts article,
.pro-topic-source,
.pro-topic-faq__item {
border: 1px solid rgba(255, 255, 255, .86);
background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(238, 248, 252, .61));
box-shadow: var(--topic-shadow), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.pro-topic-kicker {
display: block;
color: var(--topic-blue-dark);
font-size: 10px;
font-weight: 900;
letter-spacing: .13em;
line-height: 1.35;
text-transform: uppercase;
}
.pro-topic-hero {
position: relative;
display: flex;
min-height: 675px;
align-items: center;
padding: 44px max(24px, calc((100vw - 1320px) / 2)) 108px;
isolation: isolate;
}
.pro-topic-hero::after {
position: absolute;
z-index: 2;
right: 0;
bottom: -1px;
left: 0;
height: 105px;
background: linear-gradient(180deg, transparent, rgba(238, 249, 253, .72) 55%, #eef9fd 100%);
content: "";
pointer-events: none;
}
.pro-topic-hero__background,
.pro-topic-hero__shade {
position: absolute;
z-index: -2;
inset: 0;
}
.pro-topic-hero__background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 58% center;
}
.pro-topic--fine-dust .pro-topic-hero__background img {
object-position: 61% center;
}
.pro-topic--pets .pro-topic-hero__background img {
object-position: 58% center;
}
.pro-topic--smoke .pro-topic-hero__background img {
object-position: 42% center;
}
.pro-topic-hero__shade {
z-index: -1;
background:
linear-gradient(90deg, rgba(239, 250, 253, .56) 0, rgba(241, 250, 253, .19) 49%, rgba(3, 45, 68, .08) 100%),
linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(10, 62, 83, .11));
}
.pro-topic--reverse .pro-topic-hero__shade {
background:
linear-gradient(270deg, rgba(247, 251, 251, .58) 0, rgba(245, 250, 250, .2) 49%, rgba(7, 37, 52, .12) 100%),
linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(10, 49, 67, .14));
}
.pro-topic-hero__copy {
position: relative;
z-index: 3;
width: min(47vw, 620px);
margin-right: auto;
border-radius: 28px;
padding: clamp(28px, 3.4vw, 46px);
}
.pro-topic--reverse .pro-topic-hero__copy {
margin-right: 0;
margin-left: auto;
}
.pro-topic-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: rgba(16, 68, 103, .72);
font-size: 11px;
font-weight: 750;
}
.pro-topic-breadcrumb a {
text-decoration: none;
}
.pro-topic-hero h1 {
max-width: 13ch;
margin: 9px 0 17px;
color: var(--topic-navy);
font-size: clamp(40px, 4vw, 59px);
font-weight: 950;
letter-spacing: -.055em;
line-height: .98;
}
.pro-topic-hero__lead {
max-width: 58ch;
margin: 0;
color: #2e5874;
font-size: clamp(14px, 1.22vw, 16.5px);
line-height: 1.62;
}
.pro-topic-hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 25px;
}
.pro-topic-button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 13px;
background: linear-gradient(180deg, #ff8c1c, #f0640e);
box-shadow: 0 12px 24px rgba(224, 91, 13, .26), inset 0 1px 0 rgba(255, 255, 255, .42);
color: #fff !important;
font-size: 12.5px;
font-weight: 900;
padding: 0 20px;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease;
}
.pro-topic-button:hover {
box-shadow: 0 16px 30px rgba(224, 91, 13, .32);
transform: translateY(-2px);
}
.pro-topic-textlink {
color: var(--topic-blue-dark) !important;
font-size: 12.5px;
font-weight: 900;
text-decoration: none;
}
.pro-topic-hero__checks {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.pro-topic-hero__checks li {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(13, 59, 91, .78);
font-size: 11px;
font-weight: 850;
}
.pro-topic-hero__checks li::before {
display: grid;
width: 17px;
height: 17px;
place-content: center;
border-radius: 50%;
background: #20a85d;
color: #fff;
content: "✓";
font-size: 10px;
font-weight: 900;
}
.pro-topic-hero__panel {
position: absolute;
z-index: 3;
top: 54px;
right: max(24px, calc((100vw - 1320px) / 2));
display: grid;
width: min(292px, 22vw);
gap: 8px;
border-radius: 24px;
padding: 10px;
}
.pro-topic--reverse .pro-topic-hero__panel {
right: auto;
left: max(24px, calc((100vw - 1320px) / 2));
}
.pro-topic-hero__panel-head {
padding: 10px 9px 5px;
}
.pro-topic-hero__panel-head strong {
display: block;
margin-top: 4px;
color: var(--topic-navy);
font-size: 13px;
}
.pro-topic-hero__panel > a {
display: grid;
min-width: 0;
min-height: 66px;
grid-template-columns: 42px minmax(0, 1fr) 16px;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, .76);
border-radius: 15px;
background: rgba(255, 255, 255, .6);
padding: 9px 10px;
text-decoration: none;
transition: background-color .18s ease, transform .18s ease;
}
.pro-topic-hero__panel > a:hover {
background: rgba(255, 255, 255, .9);
transform: translateX(-2px);
}
.pro-topic-icon,
.pro-topic-facts__icon,
.pro-topic-depth__icon,
.pro-topic-tips__icon,
.pro-topic-source__icon {
display: grid;
place-items: center;
border: 1px solid rgba(91, 174, 219, .23);
background: linear-gradient(145deg, #fafdff, #def2fb);
box-shadow: 0 8px 18px rgba(15, 105, 158, .09), inset 0 1px 0 #fff;
color: var(--topic-blue);
}
.pro-topic-icon {
width: 42px;
height: 42px;
border-radius: 13px;
}
.pro-topic-icon svg,
.pro-topic-facts__icon svg,
.pro-topic-depth__icon svg,
.pro-topic-tips__icon svg,
.pro-topic-source__icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.pro-topic-hero__panel strong,
.pro-topic-hero__panel small {
display: block;
}
.pro-topic-hero__panel strong {
color: var(--topic-navy);
font-size: 12px;
line-height: 1.25;
}
.pro-topic-hero__panel small {
margin-top: 3px;
color: var(--topic-muted);
font-size: 10px;
line-height: 1.3;
}
.pro-topic-arrow {
width: 16px;
height: 16px;
fill: none;
stroke: var(--topic-blue);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.pro-topic-products {
position: relative;
z-index: 5;
margin-top: -69px;
margin-bottom: 48px;
border-radius: 28px;
padding: clamp(22px, 3vw, 34px);
}
.pro-topic-sectionhead {
max-width: 780px;
margin-bottom: 28px;
}
.pro-topic-sectionhead--row {
display: flex;
max-width: none;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.pro-topic-sectionhead > p {
max-width: 68ch;
margin: 13px 0 0;
color: var(--topic-muted);
font-size: 15px;
line-height: 1.68;
}
.pro-topic-products__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.pro-topic-product {
display: flex;
min-width: 0;
overflow: hidden;
flex-direction: column;
border-color: rgba(184, 217, 235, .72);
border-radius: 20px;
transition: transform .2s ease, box-shadow .2s ease;
}
.pro-topic-product:hover {
box-shadow: 0 22px 45px rgba(7, 57, 96, .16);
transform: translateY(-3px);
}
.pro-topic-product__image {
display: grid;
min-height: 220px;
place-items: center;
background: radial-gradient(circle at 50% 55%, #fff 0, #f2f9fc 69%);
padding: 16px;
}
.pro-topic-product__image img {
width: 100%;
height: 190px;
object-fit: contain;
transition: transform .2s ease;
}
.pro-topic-product:hover .pro-topic-product__image img {
transform: translateY(-3px) scale(1.02);
}
.pro-topic-product__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 18px;
}
.pro-topic-product__eyebrow {
margin-bottom: 7px;
color: var(--topic-blue);
font-size: 9px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.pro-topic-product h3 {
margin: 0 0 10px;
font-size: clamp(15px, 1.15vw, 18px);
font-weight: 900;
letter-spacing: -.02em;
line-height: 1.28;
}
.pro-topic-product h3 a {
text-decoration: none;
}
.pro-topic-product__rating {
min-height: 18px;
margin-top: auto;
margin-bottom: 10px;
}
.pro-topic-product__rating .star-rating {
float: none;
color: #f39a16;
font-size: 12px;
}
.pro-topic-product__footer {
display: grid;
gap: 10px;
margin-top: auto;
border-top: 1px solid var(--topic-line);
padding-top: 13px;
}
.pro-topic-product .price {
color: var(--topic-navy);
font-size: 17px;
font-weight: 900;
}
.pro-topic-product .price del {
color: #7e94a5;
font-size: 11px;
font-weight: 650;
}
.pro-topic-product .price ins {
text-decoration: none;
}
.pro-topic-product__link {
display: flex;
min-height: 42px;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
background: linear-gradient(180deg, #ff8a1b, #f0640e);
box-shadow: 0 9px 20px rgba(224, 91, 13, .2);
color: #fff !important;
font-size: 12px;
font-weight: 900;
text-decoration: none;
}
.pro-topic-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 70px;
}
.pro-topic-facts article {
display: flex;
align-items: flex-start;
gap: 13px;
border-color: rgba(192, 221, 237, .78);
border-radius: 18px;
padding: 17px;
}
.pro-topic-facts__icon {
flex: 0 0 43px;
width: 43px;
height: 43px;
border-radius: 13px;
}
.pro-topic-facts strong {
display: block;
margin: 1px 0 4px;
color: var(--topic-navy);
font-size: 14px;
}
.pro-topic-facts p {
margin: 0;
color: var(--topic-muted);
font-size: 12px;
line-height: 1.5;
}
.pro-topic-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 24px;
margin-bottom: 76px;
}
.pro-topic-split__media {
position: relative;
min-height: 560px;
margin: 0;
overflow: hidden;
border-radius: 28px;
box-shadow: 0 24px 54px rgba(7, 59, 104, .13);
}
.pro-topic-split__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pro-topic-split__label {
position: absolute;
right: 20px;
bottom: 20px;
left: 20px;
border: 1px solid rgba(255, 255, 255, .36);
border-radius: 15px;
background: rgba(7, 48, 77, .65);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1.45;
padding: 13px 15px;
}
.pro-topic-split__copy {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: center;
border-radius: 28px;
padding: clamp(27px, 4vw, 52px);
}
.pro-topic-steps {
display: grid;
gap: 20px;
margin-top: 30px;
}
.pro-topic-steps article {
display: grid;
grid-template-columns: 47px 1fr;
align-items: start;
gap: 15px;
}
.pro-topic-steps article > span {
display: grid;
width: 47px;
height: 47px;
place-items: center;
border-radius: 14px;
background: linear-gradient(145deg, var(--topic-blue), #43b9e8);
box-shadow: 0 9px 22px rgba(8, 120, 207, .2);
color: #fff;
font-size: 12px;
font-weight: 900;
}
.pro-topic-steps h3 {
margin: 2px 0 4px;
font-size: 16px;
}
.pro-topic-steps p,
.pro-topic-choice__grid p,
.pro-topic-depth__grid p,
.pro-topic-tips__grid p,
.pro-topic-faq__item p {
margin: 0;
color: var(--topic-muted);
font-size: 14px;
line-height: 1.64;
}
.pro-topic-note {
margin: 26px 0 0;
border-left: 3px solid var(--topic-orange);
border-radius: 0 12px 12px 0;
background: rgba(255, 245, 236, .82);
color: #634733;
font-size: 13px;
line-height: 1.58;
padding: 13px 15px;
}
.pro-topic-choice,
.pro-topic-depth,
.pro-topic-tips,
.pro-topic-faq {
margin-bottom: 76px;
}
.pro-topic-choice__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.pro-topic-choice__grid article {
min-height: 220px;
border-radius: 22px;
padding: 24px;
}
.pro-topic-choice__grid article > span {
display: inline-grid;
min-width: 54px;
height: 34px;
margin-bottom: 25px;
place-items: center;
border-radius: 999px;
background: #e2f4fc;
color: var(--topic-blue-dark);
font-size: 11px;
font-weight: 900;
padding: 0 10px;
}
.pro-topic-choice__grid h3,
.pro-topic-depth__grid h3,
.pro-topic-tips__grid h3 {
margin: 0 0 9px;
font-size: 17px;
}
.pro-topic-depth__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.pro-topic-depth__grid article {
position: relative;
min-height: 270px;
border-radius: 24px;
padding: 28px 30px;
}
.pro-topic-depth__icon,
.pro-topic-tips__icon {
width: 48px;
height: 48px;
margin-bottom: 21px;
border-radius: 15px;
}
.pro-topic-depth__grid h3 {
font-size: 20px;
}
.pro-topic-depth__grid p + p {
margin-top: 12px;
}
.pro-topic-tips__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px;
}
.pro-topic-tips__grid article {
display: flex;
min-height: 275px;
align-items: flex-start;
flex-direction: column;
border-radius: 22px;
padding: 26px;
}
.pro-topic-tips__grid p {
flex: 1;
}
.pro-topic-tips__grid a {
display: inline-flex;
min-height: 42px;
align-items: center;
margin-top: 16px;
color: var(--topic-blue-dark);
font-size: 12px;
font-weight: 900;
text-decoration: none;
}
.pro-topic-source {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 76px;
border-color: rgba(180, 215, 233, .76);
border-radius: 20px;
padding: 21px 24px;
}
.pro-topic-source__icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 14px;
}
.pro-topic-source strong {
display: block;
margin-bottom: 4px;
color: var(--topic-navy);
font-size: 14px;
}
.pro-topic-source p {
margin: 0;
color: var(--topic-muted);
font-size: 12.5px;
line-height: 1.6;
}
.pro-topic-source a {
color: var(--topic-blue-dark);
font-weight: 800;
}
.pro-topic-faq {
display: grid;
grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
align-items: start;
gap: 46px;
}
.pro-topic-faq .pro-topic-sectionhead {
position: sticky;
top: 28px;
margin: 0;
}
.pro-topic-faq__list {
display: grid;
gap: 10px;
}
.pro-topic-faq__item {
overflow: hidden;
border-color: rgba(191, 220, 236, .86);
border-radius: 17px;
}
.pro-topic-faq__item summary {
display: flex;
min-height: 66px;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--topic-navy);
font-size: 14px;
font-weight: 900;
list-style: none;
padding: 17px 20px;
cursor: pointer;
}
.pro-topic-faq__item summary::-webkit-details-marker {
display: none;
}
.pro-topic-faq__item summary span {
position: relative;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #e3f4fb;
}
.pro-topic-faq__item summary span::before,
.pro-topic-faq__item summary span::after {
position: absolute;
top: 14px;
left: 9px;
width: 12px;
height: 2px;
background: var(--topic-blue);
content: "";
}
.pro-topic-faq__item summary span::after {
transform: rotate(90deg);
transition: transform .2s ease;
}
.pro-topic-faq__item[open] summary span::after {
transform: rotate(0);
}
.pro-topic-faq__item > div {
padding: 0 20px 19px;
}
.pro-topic-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
border: 1px solid rgba(255, 255, 255, .94);
border-radius: 28px;
background: linear-gradient(120deg, rgba(220, 244, 254, .92), rgba(255, 255, 255, .92) 66%, rgba(255, 238, 224, .84));
box-shadow: 0 24px 58px rgba(7, 59, 104, .11);
padding: clamp(27px, 4vw, 46px);
}
.pro-topic-cta h2 {
max-width: 18ch;
}
.pro-topic-cta p {
margin: 10px 0 0;
color: var(--topic-muted);
}
.pro-topic-cta__actions {
display: flex;
flex: 0 0 auto;
align-items: center;
flex-direction: column;
gap: 12px;
}
.pro-topic-cta__actions > a:last-child {
color: var(--topic-blue-dark);
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.pro-topic [id] {
scroll-margin-top: 110px;
}
.pro-topic a:focus-visible,
.pro-topic summary:focus-visible {
outline: 3px solid rgba(244, 119, 33, .48);
outline-offset: 3px;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.pro-topic-glass,
.pro-topic-products,
.pro-topic-product,
.pro-topic-facts article,
.pro-topic-source,
.pro-topic-faq__item,
.pro-topic-split__label {
-webkit-backdrop-filter: blur(15px) saturate(116%);
backdrop-filter: blur(15px) saturate(116%);
}
}
@media (max-width: 1180px) {
.pro-topic-hero__copy {
width: calc(100% - 340px);
max-width: 630px;
}
.pro-topic-hero__panel {
width: 270px;
}
.pro-topic-products__grid,
.pro-topic-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pro-topic-choice__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.pro-topic-hero {
min-height: 820px;
align-items: flex-start;
padding-top: 34px;
}
.pro-topic-hero__copy,
.pro-topic--reverse .pro-topic-hero__copy {
width: min(calc(100% - 44px), 620px);
max-width: none;
margin-right: auto;
margin-left: 0;
}
.pro-topic-hero__panel,
.pro-topic--reverse .pro-topic-hero__panel {
top: auto;
right: 22px;
bottom: 73px;
left: 22px;
width: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pro-topic-hero__panel-head {
grid-column: 1 / -1;
}
.pro-topic-split,
.pro-topic-faq {
grid-template-columns: 1fr;
}
.pro-topic-split__media {
min-height: 430px;
}
.pro-topic-faq .pro-topic-sectionhead {
position: static;
}
}
@media (max-width: 820px) {
.pro-topic h2 {
font-size: clamp(28px, 5.4vw, 39px);
}
.pro-topic-depth__grid,
.pro-topic-tips__grid {
grid-template-columns: 1fr;
}
.pro-topic-depth__grid article,
.pro-topic-tips__grid article {
min-height: 0;
}
.pro-topic-cta {
align-items: flex-start;
flex-direction: column;
}
.pro-topic-cta__actions {
width: 100%;
align-items: stretch;
}
} @media (max-width: 680px) {
.pro-topic {
padding-bottom: 58px;
}
.pro-topic .wrap {
width: calc(100% - 24px);
}
.pro-topic-hero {
display: flex;
min-height: 0;
align-items: stretch;
flex-direction: column;
padding: 174px 8px 66px;
}
.pro-topic-hero::after {
height: 85px;
}
.pro-topic-hero__background img,
.pro-topic--fine-dust .pro-topic-hero__background img,
.pro-topic--pets .pro-topic-hero__background img {
object-position: 62% center;
}
.pro-topic--smoke .pro-topic-hero__background img {
object-position: 34% center;
}
.pro-topic-hero__shade,
.pro-topic--reverse .pro-topic-hero__shade {
background: linear-gradient(180deg, rgba(246, 252, 253, .03), rgba(246, 252, 253, .12) 28%, rgba(233, 247, 251, .45) 100%);
}
.pro-topic-hero__copy,
.pro-topic--reverse .pro-topic-hero__copy {
flex: 0 0 auto;
width: auto;
max-width: none;
margin: 0 0 12px;
border-radius: 21px;
background: linear-gradient(145deg, rgba(255, 255, 255, .83), rgba(235, 247, 251, .7));
padding: 21px 18px;
}
.pro-topic-breadcrumb {
max-width: 100%;
overflow: hidden;
margin-bottom: 14px;
flex-wrap: nowrap;
font-size: 10px;
white-space: nowrap;
}
.pro-topic-breadcrumb span {
overflow: hidden;
text-overflow: ellipsis;
}
.pro-topic-kicker {
font-size: 9px;
letter-spacing: .11em;
}
.pro-topic-hero h1 {
max-width: 14ch;
margin: 8px 0 14px;
font-size: clamp(31px, 9.7vw, 40px);
line-height: 1;
}
.pro-topic-hero__lead {
font-size: 13px;
line-height: 1.52;
}
.pro-topic-hero__actions {
align-items: stretch;
flex-direction: column;
gap: 9px;
margin-top: 19px;
}
.pro-topic-hero__actions .pro-topic-button,
.pro-topic-hero__actions .pro-topic-textlink {
width: 100%;
justify-content: center;
text-align: center;
}
.pro-topic-hero__actions .pro-topic-textlink {
min-height: 38px;
line-height: 38px;
}
.pro-topic-hero__checks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 10px;
margin-top: 18px;
}
.pro-topic-hero__checks li {
min-width: 0;
font-size: 10px;
}
.pro-topic-hero__checks li:last-child {
grid-column: 1 / -1;
}
.pro-topic-hero__panel,
.pro-topic--reverse .pro-topic-hero__panel {
position: relative;
inset: auto;
z-index: 3;
width: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
margin: 0;
border-radius: 20px;
padding: 8px;
}
.pro-topic-hero__panel-head {
padding: 7px 7px 3px;
}
.pro-topic-hero__panel > a {
min-height: 59px;
grid-template-columns: 36px minmax(0, 1fr);
gap: 8px;
border-radius: 13px;
padding: 8px;
}
.pro-topic-icon {
width: 36px;
height: 36px;
border-radius: 11px;
}
.pro-topic-icon svg {
width: 18px;
height: 18px;
}
.pro-topic-hero__panel strong {
font-size: 10.5px;
}
.pro-topic-hero__panel small,
.pro-topic-arrow {
display: none;
}
.pro-topic-products {
width: calc(100% - 16px);
margin-top: -43px;
padding: 21px 12px 16px;
border-radius: 23px;
}
.pro-topic-sectionhead {
margin-bottom: 21px;
}
.pro-topic-sectionhead--row {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.pro-topic h2 {
font-size: clamp(27px, 8vw, 35px);
}
.pro-topic-sectionhead > p,
.pro-topic-cta p {
font-size: 14px;
line-height: 1.58;
}
.pro-topic-products__grid {
overflow-x: auto;
grid-auto-columns: min(84vw, 320px);
grid-auto-flow: column;
grid-template-columns: none;
margin-inline: -12px;
padding: 2px 12px 13px;
overscroll-behavior-x: contain;
scroll-padding-left: 12px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.pro-topic-products__grid::-webkit-scrollbar {
display: none;
}
.pro-topic-product {
scroll-snap-align: start;
scroll-snap-stop: always;
}
.pro-topic-product__image {
min-height: 202px;
padding: 14px;
}
.pro-topic-product__image img {
height: 178px;
}
.pro-topic-product__body {
padding: 16px;
}
.pro-topic-facts {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 54px;
}
.pro-topic-split,
.pro-topic-choice,
.pro-topic-depth,
.pro-topic-tips,
.pro-topic-source,
.pro-topic-faq {
margin-bottom: 54px;
}
.pro-topic-split {
gap: 12px;
}
.pro-topic-split__media {
min-height: 255px;
border-radius: 22px;
}
.pro-topic-split__label {
right: 14px;
bottom: 14px;
left: 14px;
padding: 12px 13px;
}
.pro-topic-split__copy {
border-radius: 22px;
padding: 25px 18px;
}
.pro-topic-steps {
gap: 15px;
margin-top: 22px;
}
.pro-topic-steps article {
grid-template-columns: 40px 1fr;
gap: 11px;
}
.pro-topic-steps article > span {
width: 40px;
height: 40px;
border-radius: 12px;
}
.pro-topic-steps p,
.pro-topic-choice__grid p,
.pro-topic-depth__grid p,
.pro-topic-tips__grid p,
.pro-topic-faq__item p {
font-size: 13px;
}
.pro-topic-choice__grid,
.pro-topic-depth__grid,
.pro-topic-tips__grid {
grid-template-columns: 1fr;
gap: 12px;
}
.pro-topic-choice__grid article,
.pro-topic-depth__grid article,
.pro-topic-tips__grid article {
min-height: 0;
border-radius: 20px;
padding: 22px 19px;
}
.pro-topic-choice__grid article > span {
margin-bottom: 17px;
}
.pro-topic-depth__icon,
.pro-topic-tips__icon {
margin-bottom: 17px;
}
.pro-topic-source {
padding: 18px;
}
.pro-topic-faq {
gap: 22px;
}
.pro-topic-faq__list {
gap: 8px;
}
.pro-topic-faq__item summary {
min-height: 58px;
padding: 15px 16px;
font-size: 13px;
line-height: 1.35;
}
.pro-topic-faq__item > div {
padding: 0 16px 16px;
}
.pro-topic-cta {
gap: 22px;
border-radius: 22px;
padding: 25px 18px;
}
.pro-topic-cta__actions > a:last-child {
min-height: 44px;
align-self: center;
line-height: 44px;
}
.pro-topic [id] {
scroll-margin-top: 90px;
}
.pro-topic-glass,
.pro-topic-products,
.pro-topic-product,
.pro-topic-facts article,
.pro-topic-source,
.pro-topic-faq__item {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (max-width: 430px) {
.pro-topic .wrap {
width: calc(100% - 18px);
}
.pro-topic-hero {
padding-right: 6px;
padding-left: 6px;
}
.pro-topic-hero h1 {
font-size: clamp(30px, 9.9vw, 38px);
}
.pro-topic-products {
width: calc(100% - 12px);
padding-right: 10px;
padding-left: 10px;
}
.pro-topic-products__grid {
margin-inline: -10px;
padding-inline: 10px;
scroll-padding-left: 10px;
}
}
@media (max-width: 374px) {
.pro-topic-hero__checks,
.pro-topic-hero__panel {
grid-template-columns: 1fr;
}
.pro-topic-hero__checks li:last-child,
.pro-topic-hero__panel-head {
grid-column: auto;
}
.pro-topic-products__grid {
grid-auto-columns: calc(100vw - 42px);
}
}
@media (hover: none) {
.pro-topic-button:hover,
.pro-topic-product:hover,
.pro-topic-product:hover .pro-topic-product__image img,
.pro-topic-hero__panel > a:hover {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.pro-topic a,
.pro-topic-product,
.pro-topic-product__image img,
.pro-topic-faq__item summary span::after {
scroll-behavior: auto;
transition: none;
}
} .pro-topic--smoke {
--topic-blue: #087fbd;
--topic-blue-dark: #056798;
--topic-navy: #0a466b;
--topic-ink: #244f69;
--topic-muted: #5a788b;
--topic-page: #f6fcff;
--topic-line: rgba(140, 202, 228, .56);
background:
radial-gradient(circle at 8% 34%, rgba(86, 197, 222, .17), transparent 27rem),
radial-gradient(circle at 92% 57%, rgba(111, 204, 152, .14), transparent 31rem),
radial-gradient(circle at 55% 88%, rgba(255, 190, 118, .11), transparent 27rem),
linear-gradient(180deg, #eefaff 0, #f7fcff 38rem, #f4fcf8 68%, #fffaf4 100%);
}
.pro-topic--smoke .pro-topic-icon,
.pro-topic--smoke .pro-topic-facts__icon,
.pro-topic--smoke .pro-topic-depth__icon,
.pro-topic--smoke .pro-topic-tips__icon,
.pro-topic--smoke .pro-topic-source__icon {
position: relative;
isolation: isolate;
overflow: hidden;
border-color: rgba(80, 174, 214, .28);
background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(216, 244, 252, .88));
box-shadow: 0 10px 24px rgba(8, 104, 151, .12), inset 0 1px 0 #fff;
color: #087fbd;
}
.pro-topic--smoke .pro-topic-icon::after,
.pro-topic--smoke .pro-topic-facts__icon::after,
.pro-topic--smoke .pro-topic-depth__icon::after,
.pro-topic--smoke .pro-topic-tips__icon::after,
.pro-topic--smoke .pro-topic-source__icon::after {
position: absolute;
z-index: -1;
right: -9px;
bottom: -11px;
width: 27px;
height: 27px;
border-radius: 50%;
background: rgba(254, 109, 27, .15);
content: "";
}
.pro-topic--smoke .pro-topic-icon__svg--premium {
width: 23px;
height: 23px;
stroke-width: 1.65;
}
.pro-topic--smoke .pro-topic-facts article,
.pro-topic--smoke .pro-topic-choice__grid article,
.pro-topic--smoke .pro-topic-depth__grid article,
.pro-topic--smoke .pro-topic-tips__grid article,
.pro-topic--smoke .pro-topic-source,
.pro-topic--smoke .pro-topic-faq__item {
border-color: rgba(255, 255, 255, .92);
background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(229, 248, 253, .72));
box-shadow: 0 18px 44px rgba(7, 87, 126, .09), inset 0 1px 0 rgba(255, 255, 255, .98);
}
.pro-topic--smoke .pro-topic-depth__grid article:nth-child(2n),
.pro-topic--smoke .pro-topic-tips__grid article:nth-child(2n) {
background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(232, 249, 239, .78));
}
.pro-topic--smoke .pro-topic-source {
border-color: rgba(136, 205, 225, .48);
background: linear-gradient(112deg, rgba(237, 250, 255, .96), rgba(246, 253, 249, .95));
}
.pro-topic--smoke .pro-topic-faq__item[open] {
border-color: rgba(89, 180, 215, .42);
background: rgba(255, 255, 255, .94);
}
.pro-topic--smoke .pro-topic-cta {
border-color: rgba(255, 255, 255, .98);
background: linear-gradient(118deg, rgba(218, 246, 255, .96), rgba(248, 255, 252, .96) 60%, rgba(255, 239, 222, .92));
box-shadow: 0 24px 58px rgba(7, 93, 132, .11);
}
.pro-topic-article__media {
position: relative;
}
.pro-topic-article__icon {
position: absolute;
right: 13px;
bottom: 13px;
display: grid;
width: 48px;
height: 48px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .88);
border-radius: 15px;
background: rgba(250, 254, 255, .86);
box-shadow: 0 12px 28px rgba(5, 58, 88, .2), inset 0 1px 0 #fff;
color: #087fbd;
-webkit-backdrop-filter: blur(11px) saturate(125%);
backdrop-filter: blur(11px) saturate(125%);
}
.pro-topic-article__icon svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.65;
}
.pro-topic-article:nth-child(1) .pro-topic-article__icon,
.pro-topic-article:nth-child(2) .pro-topic-article__icon {
color: #df681c;
}
.pro-topic-article:nth-child(3) .pro-topic-article__media img {
object-position: center;
}
@media (max-width: 980px) {
.pro-topic--smoke .pro-topic-facts article,
.pro-topic--smoke .pro-topic-choice__grid article,
.pro-topic--smoke .pro-topic-depth__grid article,
.pro-topic--smoke .pro-topic-tips__grid article {
box-shadow: 0 14px 32px rgba(7, 87, 126, .08), inset 0 1px 0 #fff;
}
}
@media (max-width: 680px) {
.pro-topic--smoke {
background:
radial-gradient(circle at 0 42%, rgba(86, 197, 222, .14), transparent 18rem),
radial-gradient(circle at 100% 72%, rgba(111, 204, 152, .12), transparent 20rem),
linear-gradient(180deg, #effaff 0, #f8fdff 45%, #f6fdf9 78%, #fffaf5 100%);
}
.pro-topic-article__icon {
right: 11px;
bottom: 11px;
width: 43px;
height: 43px;
border-radius: 13px;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.pro-topic-article__icon svg {
width: 23px;
height: 23px;
}
} .pro-topic--smoke .pro-topic-products {
position: relative;
isolation: isolate;
overflow: hidden;
border-color: rgba(255,255,255,.82);
background:
linear-gradient(106deg, rgba(247,252,254,.89) 0%, rgba(237,248,252,.76) 48%, rgba(246,252,248,.72) 100%),
url(//www.progenion.nl/wp-content/themes/progenion-nieuw/assets/images/progenion-rooklucht-schone-lucht-woonkamer.webp) center / cover no-repeat;
box-shadow: 0 28px 72px rgba(8,57,93,.17), inset 0 1px 0 rgba(255,255,255,.94);
}
.pro-topic--smoke .pro-topic-products::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(230,246,250,.08));
}
.pro-topic--smoke .pro-topic-products__intro,
.pro-topic--smoke .pro-topic-products__trust {
position: relative;
z-index: 1;
}
.pro-topic--smoke .pro-topic-product {
border-color: rgba(255,255,255,.82);
background: linear-gradient(150deg, rgba(255,255,255,.84), rgba(236,248,252,.68));
-webkit-backdrop-filter: blur(18px) saturate(128%);
backdrop-filter: blur(18px) saturate(128%);
box-shadow: 0 16px 38px rgba(8,53,85,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
.pro-topic--smoke .pro-topic-product:hover {
border-color: rgba(245,126,37,.38);
box-shadow: 0 22px 46px rgba(8,53,85,.18), inset 0 1px 0 rgba(255,255,255,.95);
}
.pro-topic--smoke .pro-topic-product__image {
background: radial-gradient(circle at 50% 54%, rgba(255,255,255,.94), rgba(235,248,251,.48) 72%);
}
.pro-topic-articles {
margin: 0 auto 72px;
}
.pro-topic-articles__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 24px;
}
.pro-topic-articles__header h2 {
margin: 5px 0 8px;
color: var(--topic-navy);
font-size: clamp(27px, 3vw, 42px);
line-height: 1.08;
letter-spacing: -.035em;
}
.pro-topic-articles__header p {
max-width: 710px;
margin: 0;
color: var(--topic-text);
font-size: 14px;
line-height: 1.65;
}
.pro-topic-articles__all {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 0 18px;
border: 1px solid rgba(11,82,125,.14);
border-radius: 999px;
background: rgba(255,255,255,.64);
color: var(--topic-blue);
font-size: 13px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 10px 25px rgba(9,60,92,.08);
}
.pro-topic-articles__all:hover {
border-color: rgba(245,126,37,.38);
color: #d96516;
}
.pro-topic-articles__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 18px;
}
.pro-topic-article {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255,255,255,.88);
border-radius: 22px;
background: linear-gradient(152deg, rgba(255,255,255,.82), rgba(237,248,252,.64));
-webkit-backdrop-filter: blur(17px) saturate(126%);
backdrop-filter: blur(17px) saturate(126%);
box-shadow: 0 16px 40px rgba(8,53,85,.12), inset 0 1px 0 rgba(255,255,255,.94);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pro-topic-article:hover {
transform: translateY(-4px);
border-color: rgba(245,126,37,.35);
box-shadow: 0 22px 48px rgba(8,53,85,.17), inset 0 1px 0 rgba(255,255,255,.98);
}
.pro-topic-article__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #dcebf1;
}
.pro-topic-article__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.pro-topic-article:nth-child(3) .pro-topic-article__media img {
object-position: center;
}
.pro-topic-article:hover .pro-topic-article__media img {
transform: scale(1.035);
}
.pro-topic-article__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 17px 17px 18px;
}
.pro-topic-article__badge {
align-self: flex-start;
margin-bottom: 10px;
padding: 5px 9px;
border: 1px solid rgba(11,91,139,.16);
border-radius: 999px;
background: rgba(226,243,250,.84);
color: #0a699a;
font-size: 10px;
font-weight: 850;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
}
.pro-topic-article h3 {
margin: 0 0 9px;
color: var(--topic-navy);
font-size: 17px;
line-height: 1.28;
letter-spacing: -.018em;
}
.pro-topic-article h3 a {
color: inherit;
text-decoration: none;
}
.pro-topic-article__body > p {
margin: 0 0 12px;
color: var(--topic-text);
font-size: 12.5px;
line-height: 1.55;
}
.pro-topic-article ul {
display: grid;
gap: 7px;
margin: 0 0 17px;
padding: 0;
list-style: none;
}
.pro-topic-article li {
position: relative;
padding-left: 22px;
color: #24485d;
font-size: 11.5px;
line-height: 1.4;
}
.pro-topic-article li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
display: grid;
width: 16px;
height: 16px;
place-items: center;
border-radius: 50%;
background: #21a56b;
color: #fff;
font-size: 9px;
font-weight: 900;
}
.pro-topic-article__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 42px;
margin-top: auto;
padding: 0 16px;
border-radius: 10px;
background: linear-gradient(135deg, #ff8a30, #f16f19);
color: #fff;
font-size: 12px;
font-weight: 850;
text-decoration: none;
box-shadow: 0 10px 23px rgba(237,105,24,.2);
}
.pro-topic-article__cta:hover {
color: #fff;
background: linear-gradient(135deg, #f47b22, #de5c0d);
transform: translateY(-1px);
}
@media (max-width: 1180px) {
.pro-topic-articles__grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 680px) {
.pro-topic-articles {
margin-bottom: 52px;
}
.pro-topic-articles__header {
align-items: flex-start;
flex-direction: column;
gap: 15px;
margin-bottom: 18px;
}
.pro-topic-articles__header h2 {
font-size: clamp(26px, 8.5vw, 34px);
}
.pro-topic-articles__all {
min-height: 40px;
}
.pro-topic-articles__grid {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: min(84vw, 322px);
gap: 14px;
margin-inline: calc(50% - 50vw);
padding: 2px 22px 18px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-padding-inline: 22px;
scroll-snap-type: inline mandatory;
scrollbar-width: thin;
}
.pro-topic-article {
scroll-snap-align: start;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(248,252,254,.96);
}
.pro-topic--smoke .pro-topic-product {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(248,252,254,.93);
}
} @media (min-width: 981px) {
.pro-topic--smoke .pro-topic-hero {
display: grid;
min-height: 620px;
grid-template-columns: minmax(280px, 330px) minmax(470px, 620px);
align-items: center;
justify-content: space-between;
gap: clamp(30px, 5vw, 72px);
padding-top: 34px;
padding-bottom: 96px;
}
.pro-topic--smoke .pro-topic-hero__copy,
.pro-topic--smoke.pro-topic--reverse .pro-topic-hero__copy {
width: 100%;
max-width: 620px;
margin: 0;
justify-self: end;
padding: clamp(27px, 3vw, 40px);
}
.pro-topic--smoke .pro-topic-hero__panel,
.pro-topic--smoke.pro-topic--reverse .pro-topic-hero__panel {
position: static;
inset: auto;
width: 100%;
max-width: 330px;
margin: 0;
justify-self: start;
}
.pro-topic--smoke .pro-topic-hero h1 {
max-width: 15ch;
font-size: clamp(36px, 3.45vw, 52px);
line-height: 1;
}
}
@media (min-width: 681px) and (max-width: 980px) {
.pro-topic--smoke .pro-topic-hero {
display: flex;
min-height: 0;
align-items: stretch;
flex-direction: column;
gap: 14px;
padding: 38px 22px 96px;
}
.pro-topic--smoke .pro-topic-hero__copy,
.pro-topic--smoke.pro-topic--reverse .pro-topic-hero__copy,
.pro-topic--smoke .pro-topic-hero__panel,
.pro-topic--smoke.pro-topic--reverse .pro-topic-hero__panel {
position: relative;
inset: auto;
width: min(100%, 690px);
max-width: none;
margin: 0 auto;
}
.pro-topic--smoke .pro-topic-hero__panel,
.pro-topic--smoke.pro-topic--reverse .pro-topic-hero__panel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pro-topic--smoke .pro-topic-hero h1 {
font-size: clamp(36px, 6vw, 48px);
}
}
@media (max-width: 680px) {
.pro-topic--smoke .pro-topic-hero {
gap: 0;
padding: 164px 7px 66px;
}
.pro-topic--smoke .pro-topic-hero__copy,
.pro-topic--smoke.pro-topic--reverse .pro-topic-hero__copy {
padding: 20px 17px;
}
.pro-topic--smoke .pro-topic-hero h1 {
max-width: 15ch;
font-size: clamp(30px, 9.2vw, 38px);
}
} .pro-topic--smoke h2 {
font-size: clamp(26px, 2.65vw, 39px);
line-height: 1.08;
letter-spacing: -.038em;
}
.pro-topic--smoke .pro-topic-articles__header h2 {
font-size: clamp(25px, 2.45vw, 36px);
}
.pro-topic--smoke .pro-topic-hero h1 {
font-size: clamp(34px, 3.15vw, 47px);
letter-spacing: -.045em;
line-height: 1.02;
}
.pro-topic-author {
display: flex;
width: min(calc(100% - 48px), 1320px);
max-width: none;
align-items: center;
gap: 15px;
margin: -52px auto 64px;
border: 1px solid rgba(255, 255, 255, .94);
border-radius: 18px;
background: linear-gradient(112deg, rgba(244, 252, 255, .95), rgba(246, 253, 249, .94));
box-shadow: 0 15px 38px rgba(7, 74, 110, .08), inset 0 1px 0 #fff;
color: var(--topic-ink);
padding: 16px 20px;
}
.pro-topic-author__icon {
display: grid;
flex: 0 0 42px;
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
overflow: hidden;
place-items: center;
border: 1px solid rgba(80, 174, 214, .28);
border-radius: 13px;
background: linear-gradient(145deg, #fff, #dff4fb);
box-shadow: 0 8px 19px rgba(8, 104, 151, .1), inset 0 1px 0 #fff;
color: var(--topic-blue);
}
.pro-topic-author__icon > svg {
display: block;
width: 21px !important;
height: 21px !important;
min-width: 0 !important;
max-width: 21px !important;
max-height: 21px !important;
fill: none !important;
stroke: currentColor !important;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.pro-topic-author strong,
.pro-topic-author span {
display: block;
}
.pro-topic-author strong {
margin-bottom: 3px;
color: var(--topic-navy);
font-size: 13.5px;
line-height: 1.3;
}
.pro-topic-author span {
color: var(--topic-muted);
font-size: 12px;
line-height: 1.55;
}
.pro-topic-author time {
color: var(--topic-navy);
font-weight: 800;
}
@media (max-width: 820px) {
.pro-topic--smoke h2,
.pro-topic--smoke .pro-topic-articles__header h2 {
font-size: clamp(24px, 4.6vw, 33px);
}
.pro-topic--smoke .pro-topic-hero h1 {
font-size: clamp(32px, 5.8vw, 43px);
}
}
@media (max-width: 680px) {
.pro-topic--smoke h2,
.pro-topic--smoke .pro-topic-articles__header h2 {
font-size: clamp(23px, 6.7vw, 30px);
line-height: 1.1;
}
.pro-topic--smoke .pro-topic-hero h1 {
font-size: clamp(29px, 8.7vw, 35px);
line-height: 1.03;
}
.pro-topic-author {
width: calc(100% - 24px);
align-items: flex-start;
gap: 11px;
margin: -36px auto 48px;
border-radius: 16px;
padding: 14px;
}
.pro-topic-author__icon {
flex-basis: 38px;
width: 38px;
height: 38px;
max-width: 38px;
max-height: 38px;
border-radius: 11px;
}
.pro-topic-author__icon > svg {
width: 19px !important;
height: 19px !important;
max-width: 19px !important;
max-height: 19px !important;
}
.pro-topic-author strong {
font-size: 12.5px;
}
.pro-topic-author span {
font-size: 11px;
line-height: 1.5;
}
} .pro-topic .star-rating {
position: relative;
display: block;
flex: 0 0 auto;
float: none;
width: 5.4em;
height: 1em;
margin: 0;
overflow: hidden;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath fill='%23d6e0e8' d='M12 1.6l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.4l-6.2 3.3L7 13.8 2 8.9l6.9-1z'/%3E%3C/svg%3E") left top / 1.08em 1em repeat-x;
font-family: inherit;
line-height: 1;
}
.pro-topic .star-rating::before {
content: none;
}
.pro-topic .star-rating span {
position: absolute;
top: 0;
left: 0;
height: 1em;
overflow: hidden;
padding: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath fill='%23ff9a16' d='M12 1.6l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.4l-6.2 3.3L7 13.8 2 8.9l6.9-1z'/%3E%3C/svg%3E") left top / 1.08em 1em repeat-x;
color: transparent;
text-indent: 200%;
white-space: nowrap;
}
.pro-topic .star-rating span::before {
content: none;
} .pro-topic--sleep .pro-topic-hero__background img {
object-position: 62% center;
}
@media (max-width: 680px) {
.pro-topic--sleep .pro-topic-hero__background img {
object-position: 70% center;
}
}