/* ========================================================================= ESS — Clinical Excellence theme (Product family pages) Scoped to . Loaded ON TOP of styles.css (shared header, footer, reset, container, wa-float, reveal). Headlines: Newsreader serif. ========================================================================= */ body.pp { /* Clinical Excellence tokens */ --c-navy: #001B3D; --c-surgical: #0056D2; --c-glacier: #F8FAFC; --c-slate: #475569; --c-sterile: #FFFFFF; --c-surface: #FAF9FC; --c-line: #E2E6EC; --c-line-2: #D4D8E0; /* Titles standardised to sans-serif (Hanken Grotesk) to match the homepage. --font-display kept as a separate token in case a display face is reintroduced later. */ --font-display: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; --font-serif: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; font-family: var(--font-sans); color: var(--c-navy); background: var(--c-sterile); } /* Serif headlines only inside the page body (keeps shared header/footer intact) */ body.pp main h1, body.pp main h2, body.pp main h3, body.pp main .serif { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; } /* headings inherit navy from body by default; white-on-dark contexts set their own colour below */ /* ---------- Shared building blocks ---------- */ .pp-section { padding-block: 96px; } .pp-section--sm { padding-block: 64px; } .pp-section--glacier { background: var(--c-glacier); } .pp-section--surface { background: var(--c-surface); } .pp-narrow { max-width: 820px; margin-inline: auto; } .pp-overline { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-surgical); display: inline-block; } .pp-head { max-width: 760px; } .pp-head.center { margin-inline: auto; text-align: center; } .pp-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-top: 16px; } .pp-head .pp-lead { margin-top: 18px; } .pp-lead { font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.65; color: var(--c-slate); font-family: var(--font-sans); } .pp-muted { color: var(--c-slate); font-family: var(--font-sans); } /* ---------- Buttons (clinical) ---------- */ .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 15px 28px; border-radius: 6px; transition: all .22s ease; white-space: nowrap; } .pp-btn .ic { width: 16px; height: 16px; } .pp-btn--primary { background: var(--c-navy); color: #fff; } .pp-btn--primary:hover { background: var(--c-surgical); transform: translateY(-2px); } .pp-btn--surgical { background: var(--c-surgical); color: #fff; } .pp-btn--surgical:hover { background: #0048b3; transform: translateY(-2px); } .pp-btn--ghost { background: transparent; color: var(--c-navy); border: 1.5px solid var(--c-line-2); } .pp-btn--ghost:hover { border-color: var(--c-surgical); color: var(--c-surgical); } .pp-btn--light { background: #fff; color: var(--c-navy); } .pp-btn--light:hover { background: #e9eef6; transform: translateY(-2px); } .pp-btn--block { width: 100%; } .pp-link { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-surgical); display: inline-flex; align-items: center; gap: 8px; } .pp-link .ic { width: 16px; height: 16px; transition: transform .22s ease; } .pp-link:hover .ic { transform: translateX(4px); } /* ---------- Hero (image) ---------- */ .pp-hero { position: relative; min-height: 78vh; display: flex; align-items: center; overflow: hidden; } .pp-hero__bg { position: absolute; inset: 0; z-index: 0; } .pp-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .pp-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(0,15,34,.86) 0%, rgba(0,27,61,.6) 45%, rgba(0,27,61,.12) 78%, transparent 100%); } .pp-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 120px; } .pp-hero__copy { max-width: 620px; color: #fff; } .pp-hero__copy .pp-overline { color: #7FB2FF; } .pp-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4rem); margin-top: 18px; line-height: 1.08; } .pp-hero__copy p { color: rgba(255,255,255,.85); font-size: clamp(1.05rem,1.4vw,1.2rem); margin-top: 20px; max-width: 540px; font-family: var(--font-sans); } .pp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .pp-hero__stats { display: flex; gap: 40px; margin-top: 34px; flex-wrap: wrap; } .pp-hero__stat .n { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; } .pp-hero__stat .l { font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 7px; } /* Centered hero (gateway) */ .pp-hero--center { min-height: auto; padding-block: 56px 8px; text-align: center; } .pp-hero--center h1 { color: var(--c-navy); font-size: clamp(2.6rem, 5vw, 4rem); } .pp-hero--center p { color: var(--c-slate); margin-inline: auto; } /* ---------- Category cards (gateway routing) ---------- */ .pp-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .pp-cat-card { position: relative; aspect-ratio: 5/4; border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); display: block; } .pp-cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .pp-cat-card:hover img { transform: scale(1.05); } .pp-cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,27,61,.92), rgba(0,27,61,.35) 55%, transparent); } .pp-cat-card__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; } .pp-cat-card__body .pp-overline { color: #7FB2FF; } .pp-cat-card__body h2 { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 10px 0 12px; } .pp-cat-card__body p { color: rgba(255,255,255,.82); font-family: var(--font-sans); font-size: 15px; max-width: 420px; } .pp-cat-card__cta { margin-top: 20px; color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease; } .pp-cat-card:hover .pp-cat-card__cta { color: #7FB2FF; } .pp-cat-card__cta .ic { width: 16px; height: 16px; } /* ---------- Series header row ---------- */ .pp-series-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; border-bottom: 1px solid var(--c-line-2); padding-bottom: 20px; margin-bottom: 40px; flex-wrap: wrap; } .pp-series-head h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); } .pp-series-head p { color: var(--c-slate); font-family: var(--font-sans); margin-top: 4px; font-size: 15px; } /* ---------- Product cards (clinical, 4-up) ---------- */ .pp-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .pp-prod-card { background: var(--c-sterile); border: 1px solid var(--c-line); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .pp-prod-card:hover { border-color: var(--c-surgical); box-shadow: 0 14px 34px rgba(0,27,61,.08); transform: translateY(-4px); } .pp-prod-card__media { aspect-ratio: 1/1; background: var(--c-glacier); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 18px; margin-bottom: 22px; } .pp-prod-card__media img { width: 100%; height: 100%; object-fit: contain; } .pp-prod-card__ribbon { position: absolute; top: 0; right: 0; background: var(--c-surgical); color: #fff; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-bottom-left-radius: 8px; } .pp-prod-card h3 { font-size: 1.35rem; margin-bottom: 14px; } .pp-prod-card .pp-price { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--c-navy); margin-bottom: 16px; } .pp-prod-card .pp-price small { display: block; font-family: var(--font-sans); font-size: 11px; letter-spacing: .04em; color: var(--c-slate); text-transform: uppercase; } .pp-prod-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; flex: 1; } .pp-check { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-sans); font-size: 14px; color: var(--c-slate); } .pp-check .ic { flex: none; width: 17px; height: 17px; color: var(--c-surgical); margin-top: 1px; stroke-width: 2.2; } .pp-prod-card .pp-btn { margin-top: auto; } /* ---------- Model highlight rows (N-Series) ---------- */ .pp-model { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .pp-model + .pp-model { margin-top: 80px; } .pp-model--rev .pp-model__media { order: 2; } .pp-model__media { background: linear-gradient(170deg, #ffffff, var(--c-glacier)); border: 1px solid var(--c-line); border-radius: 14px; aspect-ratio: 5/4; display: flex; align-items: center; justify-content: center; padding: 36px; position: relative; box-shadow: 0 18px 40px rgba(0, 27, 61, .09), inset 0 1px 0 rgba(255, 255, 255, .7);} .pp-model__media img { max-width: 100%; max-height: 100%; object-fit: contain; } .pp-model__tag { position: absolute; top: 22px; left: 22px; background: var(--c-navy); color: #fff; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; } .pp-model__price { position: absolute; right: 22px; bottom: 22px; background: #fff; border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 16px; font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: var(--c-navy);} .pp-model__price small { display: block; font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-slate); } .pp-model__body h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); } .pp-model__body .pp-lead { margin-top: 14px; } .pp-model__body ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 22px; } .pp-model__body .pp-btn { margin-top: 28px; } /* ---------- Comparison table ---------- */ .pp-table-wrap { border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; background: #fff; } .pp-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); } .pp-table th, .pp-table td { padding: 18px 20px; text-align: left; font-size: 14.5px; } .pp-table thead th { background: var(--c-navy); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 16px; } .pp-table thead th:not(:first-child) { text-align: center; } .pp-table tbody td { color: var(--c-slate); border-bottom: 1px solid var(--c-line); } .pp-table tbody td:first-child { font-weight: 600; color: var(--c-navy); } .pp-table tbody td:not(:first-child) { text-align: center; } .pp-table tbody tr:last-child td { border-bottom: none; } .pp-table tbody tr:nth-child(even) td { background: var(--c-glacier); } .pp-table .pp-row-price td:not(:first-child) { font-family: var(--font-serif); font-weight: 700; color: var(--c-navy); font-size: 16px; } .pp-table-scroll { overflow-x: auto; } /* ---------- Technology / stage cards ---------- */ .pp-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .pp-tech-card { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 30px; transition: border-color .25s ease, transform .25s ease; } .pp-tech-card:hover { border-color: var(--c-surgical); transform: translateY(-4px); } .pp-tech-card .pp-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,86,210,.08); color: var(--c-surgical); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .pp-tech-card .pp-ic .ic { width: 26px; height: 26px; } .pp-tech-card h3 { font-size: 1.2rem; margin-bottom: 10px; } .pp-tech-card p { font-family: var(--font-sans); color: var(--c-slate); font-size: 14.5px; } /* Stage list (RO 5-stage) */ .pp-stage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: stage; } .pp-stage { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 26px 20px; text-align: center; position: relative; } .pp-stage__n { width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 50%; background: var(--c-navy); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } .pp-stage h4 { font-family: var(--font-sans); font-weight: 700; color: var(--c-navy); font-size: 14.5px; margin-bottom: 8px; } .pp-stage p { font-family: var(--font-sans); color: var(--c-slate); font-size: 13px; } /* 5-Stage RO feature: exploded filter image (left) + numbered timeline (right) */ .ro-split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 64px; align-items: center; } .ro-figure { position: relative; padding-left: 26px; } .ro-figure img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 44px rgba(0,27,61,.16)); } .ro-num { position: absolute; left: 26px; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--c-navy); color: #fff; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,27,61,.30); border: 2px solid #fff; z-index: 2; } .ro-steps { display: flex; flex-direction: column; } .ro-step { display: flex; gap: 20px; padding-bottom: 28px; position: relative; } .ro-step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: -4px; width: 2px; background: linear-gradient(var(--c-surgical), rgba(0,86,210,.12)); } .ro-step:last-child { padding-bottom: 0; } .ro-step__n { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-navy); color: #fff; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: 0 6px 16px rgba(0,27,61,.18); } .ro-step__body { padding-top: 3px; } .ro-step__body h4 { font-family: var(--font-sans); font-weight: 700; color: var(--c-navy); font-size: 1.12rem; margin-bottom: 6px; } .ro-step__body p { font-family: var(--font-sans); color: var(--c-slate); font-size: 14.5px; line-height: 1.6; } .ro-step__body .ro-spec { color: var(--c-surgical); font-weight: 700; } @media (max-width: 900px) { .ro-split { grid-template-columns: 1fr; gap: 44px; } .ro-figure { max-width: 440px; margin-inline: auto; } } /* ---------- Why / split feature ---------- */ .pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .pp-split--rev .pp-split__media { order: 2; } .pp-split__media { border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); aspect-ratio: 4/3; } .pp-split__media img { width: 100%; height: 100%; object-fit: cover; } .pp-feature-list { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; } .pp-feature-list li { display: flex; gap: 14px; align-items: flex-start; } .pp-feature-list .pp-fic { flex: none; width: 42px; height: 42px; border-radius: 10px; background: rgba(0,86,210,.08); color: var(--c-surgical); display: flex; align-items: center; justify-content: center; } .pp-feature-list .pp-fic .ic { width: 21px; height: 21px; } .pp-feature-list b { font-family: var(--font-sans); color: var(--c-navy); display: block; font-size: 15.5px; } .pp-feature-list span.d { font-family: var(--font-sans); color: var(--c-slate); font-size: 14px; } /* problem chips */ .pp-prob-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .pp-prob { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 26px 20px; text-align: center; transition: border-color .25s ease, transform .25s ease; } .pp-prob:hover { border-color: var(--c-surgical); transform: translateY(-4px); } .pp-prob .pp-ic { width: 50px; height: 50px; border-radius: 12px; background: var(--c-glacier); color: var(--c-surgical); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .pp-prob .pp-ic .ic { width: 26px; height: 26px; } .pp-prob h4 { font-family: var(--font-sans); font-weight: 700; color: var(--c-navy); font-size: 15px; margin-bottom: 6px; } .pp-prob p { font-family: var(--font-sans); color: var(--c-slate); font-size: 13px; } /* ---------- FAQ accordion ---------- */ .pp-faq { display: flex; flex-direction: column; gap: 14px; } .pp-faq__item { border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #fff; transition: border-color .2s ease; } .pp-faq__item.is-open { border-color: var(--c-surgical); } /* ---- Premium glass cards ---- */ .pp-tech-card, .pp-stage, .pp-prob, .pp-faq__item { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(245,249,255,.7); box-shadow: 0 18px 40px rgba(0,27,61,.09), inset 0 1px 0 rgba(255,255,255,.7); } /* Card carries the blue-grey shading; remove the redundant inner icon box */ .pp-tech-card, .pp-prob { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(206,215,229,.6) 100%); } .pp-tech-card .pp-ic, .pp-prob .pp-ic { background: none; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; height: auto; border-radius: 0; } .pp-tech-card .pp-ic { width: 100%; justify-content: flex-start; margin-bottom: 14px; } .pp-prob .pp-ic { width: 100%; margin: 0 auto 20px; } .pp-tech-card .pp-ic .ic, .pp-prob .pp-ic .ic { width: 35px; height: 35px; } /* ---------- FAQ accordion mechanics ---------- */ .pp-faq__q { width: 100%; background: none; border: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; color: var(--c-navy); } .pp-faq__q .ic { flex: none; width: 22px; height: 22px; color: var(--c-surgical); transition: transform .3s ease; } .pp-faq__item.is-open .pp-faq__q .ic { transform: rotate(180deg); } .pp-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .pp-faq__a-inner { padding: 0 26px 24px; color: var(--c-slate); font-family: var(--font-sans); font-size: 15px; line-height: 1.7; } /* ---------- CTA panel ---------- */ .pp-cta { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(125deg, var(--c-navy) 0%, #00346b 55%, var(--c-surgical) 135%); padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px); text-align: center; } .pp-cta__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; } .pp-cta .pp-overline { color: #7FB2FF; } .pp-cta h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-top: 14px; line-height: 1.12; } .pp-cta p { color: rgba(255,255,255,.85); font-family: var(--font-sans); margin: 16px auto 0; max-width: 560px; } .pp-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .pp-prod-grid { grid-template-columns: repeat(2, 1fr); } .pp-tech-grid { grid-template-columns: 1fr; gap: 20px; } .pp-stage-grid { grid-template-columns: repeat(2, 1fr); } .pp-prob-grid { grid-template-columns: repeat(2, 1fr); } .pp-cat-grid { grid-template-columns: 1fr; } .pp-split { grid-template-columns: 1fr; gap: 40px; } .pp-split--rev .pp-split__media { order: 0; } } @media (max-width: 640px) { .pp-prod-grid, .pp-stage-grid, .pp-prob-grid { grid-template-columns: 1fr; } .pp-hero__stats { gap: 26px; } .pp-hero__actions .pp-btn, .pp-cta__actions .pp-btn { width: 100%; } } /* ---------- Inline product spec table (model card) ---------- */ .pp-model__specs { margin: 20px 0 24px; border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; font-family: var(--font-sans); } .pp-model__specs .pp-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--c-line); align-items: center; } .pp-model__specs .pp-spec-row:first-child { border-top: none; } .pp-model__specs .pp-spec-head { background: var(--c-navy); } .pp-model__specs .pp-spec-head .k, .pp-model__specs .pp-spec-head .v { font-family: var(--font-serif); font-weight: 700; font-size: 14px; color: #fff; } .pp-model__specs .pp-spec-row:not(.pp-spec-head) .k { font-weight: 600; color: var(--c-navy); font-size: 14px; } .pp-model__specs .pp-spec-row:not(.pp-spec-head) .v { color: var(--c-slate); font-size: 14px; } .pp-model__specs .pp-spec-row:not(.pp-spec-head):nth-child(even) { background: var(--c-glacier); } @media (max-width: 520px) { .pp-model__specs .pp-spec-row { grid-template-columns: 1fr; gap: 3px; padding: 11px 16px; } }