/* ============================================================================= THUISENZORG — sf-* library block reskin ----------------------------------------------------------------------------- Site-scoped overrides that recolour the generic sf-* library blocks into the Thuisenzorg "light, soft, caring" house style. EVERY rule is scoped under the page wrapper .sf-thuisenzorg (emitted by includes/block-renderer.php for any page that contains a "*-thuisenzorg" block, or any sf-* block once the bundle is detected) so other sites' shared sf-* blocks are untouched. Loaded AFTER the thuisenzorg bundle (sf-bundle-thuisenzorg) so it wins on the shared design tokens. Tokens reused here come from thuisenzorg.css :root — --green-dark #1a3c34 / --green #2e7d6b / --teal #468f8e / --mint #f0faf6 / --mint-2 #e8f4f0 / --mint-3 #d6efe2 / --offwhite #f5f6f1 / --white #fff / --text #3b5450 / --muted #5a6e6a / --muted-light #7a9490 / --border #e4ede9 / --border-2 #d8ede8 / --gold #f4b740 / --grad linear-gradient(135deg,#1a3c34,#2e7d6b) / --radius 16px / --radius-lg 20px / --radius-sm 8px / --shadow-sm / --shadow / --shadow-lg / --container 1180px / fonts --font-head (Andika) / --font-body (Inter) / --font-serif (Baskervville). Reveal handling: Thuisenzorg uses `.fade-up` -> `.visible` (thuisenzorg.js) plus a separate observer (thuisenzorgtest-reveal.js). The sf-* blocks shipped here do NOT set `opacity:0` on `.fade-up`/`.reveal` in their own style.css, so we deliberately LEAVE reveal opacity alone — no `opacity:0` rule appears anywhere in this file. Content is therefore never stuck invisible (the stuck-content bug seen on sister sites), at the cost of no entrance animation on these particular blocks. ============================================================================= */ /* ----------------------------------------------------------------------------- SHARED PRIMITIVES — re-skin the generic eyebrow pill + buttons + headings + accent spans the library emits, so every block inherits the soft care look. ----------------------------------------------------------------------------- */ /* Headings -> Andika, bold, deep green (matches .section-title / h1-h5 bespoke). */ .sf-thuisenzorg [data-sf-block^="sf-"] h1, .sf-thuisenzorg [data-sf-block^="sf-"] h2, .sf-thuisenzorg [data-sf-block^="sf-"] h3, .sf-thuisenzorg [data-sf-block^="sf-"] h4, .sf-thuisenzorg [data-sf-block^="sf-"] h5 { font-family: var(--font-head); font-weight: 700; color: var(--green-dark); line-height: 1.22; letter-spacing: 0; } .sf-thuisenzorg [data-sf-block^="sf-"] p { font-family: var(--font-body); color: var(--muted); } /* Eyebrow pill .section-badge -> thuisenzorg .section-tag (mint pill, green text). The library often sets inline style="background:var(--sf-*-accent)" — beat it. */ .sf-thuisenzorg [data-sf-block^="sf-"] .section-badge { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui, 'Open Sans', sans-serif) !important; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green) !important; background: var(--mint-2) !important; border: none !important; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; } /* Outline-variant pill keeps the same look; helper dot turns gold. */ .sf-thuisenzorg [data-sf-block^="sf-"] .section-badge--outline .section-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(244,183,64,.6); } /* Accent / highlight spans — every block names its highlight fragment differently, so cover them all. Soft green-to-teal text gradient. background-clip:text + transparent fill (gold-clip pattern) so we never get a coloured rectangle behind the word. */ .sf-thuisenzorg [data-sf-block^="sf-"] .sf-heading-accent, .sf-thuisenzorg [data-sf-block^="sf-"] .hero-heading-accent, .sf-thuisenzorg [data-sf-block^="sf-"] .heading-accent, .sf-thuisenzorg [data-sf-block^="sf-"] .sf-fg-highlight, .sf-thuisenzorg [data-sf-block^="sf-"] .sf-faq-accent, .sf-thuisenzorg [data-sf-block^="sf-"] .cta-accent, .sf-thuisenzorg [data-sf-block^="sf-"] .hero-accent { background: linear-gradient(120deg, var(--green) 0%, var(--teal) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: var(--green) !important; } /* white-suffix span in sf-cta keeps reading as white (it sits on the gradient band) */ .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-h-white { color: #fff; -webkit-text-fill-color: #fff; } /* serif accent (.alt-font in sf-hero video layout) -> Baskervville */ .sf-thuisenzorg [data-sf-block^="sf-"] .alt-font { font-family: var(--font-serif); font-weight: 400; } /* Generic buttons the library reuses across blocks -> thuisenzorg .btn family. */ .sf-thuisenzorg [data-sf-block^="sf-"] .btn, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-primary, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-hero, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-hero-secondary, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-outline, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-white, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-outline-white, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-ghost, .sf-thuisenzorg [data-sf-block^="sf-"] .hero-cta, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-plan, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1; padding: 14px 30px; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; white-space: nowrap; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; } /* solid / primary -> green fill, deep-green on hover */ .sf-thuisenzorg [data-sf-block^="sf-"] .btn-primary, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-hero, .sf-thuisenzorg [data-sf-block^="sf-"] .hero-cta, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-plan, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-submit { background: var(--green) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 18px rgba(46,125,107,.28); } .sf-thuisenzorg [data-sf-block^="sf-"] .btn-primary:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-hero:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .hero-cta:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-plan:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-submit:hover { background: var(--green-dark) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,60,52,.30); } /* white button -> on green/gradient bands */ .sf-thuisenzorg [data-sf-block^="sf-"] .btn-white { background: #fff !important; color: var(--green-dark) !important; border-color: transparent !important; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .sf-thuisenzorg [data-sf-block^="sf-"] .btn-white:hover { background: var(--mint) !important; color: var(--green-dark) !important; transform: translateY(-2px); } /* ghost / outline -> transparent, green border on hover-fill */ .sf-thuisenzorg [data-sf-block^="sf-"] .btn, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-ghost, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-outline { background: transparent !important; color: var(--green-dark) !important; border: 2px solid var(--border-2) !important; } .sf-thuisenzorg [data-sf-block^="sf-"] .btn:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-ghost:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-outline:hover { background: var(--green-dark) !important; color: #fff !important; border-color: var(--green-dark) !important; transform: translateY(-2px); } /* outline-white -> sits on gradient/photo bands */ .sf-thuisenzorg [data-sf-block^="sf-"] .btn-outline-white, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-hero-secondary { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.7) !important; } .sf-thuisenzorg [data-sf-block^="sf-"] .btn-outline-white:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-hero-secondary:hover { background: rgba(255,255,255,.14) !important; border-color: #fff !important; color: #fff !important; transform: translateY(-2px); } /* trailing arrow icon nudges on hover */ .sf-thuisenzorg [data-sf-block^="sf-"] .btn-icon, .sf-thuisenzorg [data-sf-block^="sf-"] .hero-cta-icon { transition: transform .25s ease; } .sf-thuisenzorg [data-sf-block^="sf-"] .btn-primary:hover .btn-icon, .sf-thuisenzorg [data-sf-block^="sf-"] .btn-ghost:hover .btn-icon, .sf-thuisenzorg [data-sf-block^="sf-"] .btn:hover .btn-icon { transform: translateX(4px); } /* generic inline arrow-link (sf-service-overview .sf-link-arrow, sf-process-steps .process-cta-link) -> green underline-style link */ .sf-thuisenzorg [data-sf-block^="sf-"] .sf-link-arrow, .sf-thuisenzorg [data-sf-block^="sf-"] .process-cta-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--green); text-decoration: none; transition: gap .25s ease, color .25s ease; } .sf-thuisenzorg [data-sf-block^="sf-"] .sf-link-arrow:hover, .sf-thuisenzorg [data-sf-block^="sf-"] .process-cta-link:hover { gap: .85rem; color: var(--green-dark); } /* Media frame look — soft green-tinted shadow, rounded. sf-service-overview = .sf-media-frame--tembe on the media wrapper. */ .sf-thuisenzorg [data-sf-block^="sf-"] .sf-media-frame--tembe { position: relative; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; overflow: hidden; background: var(--mint); box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block^="sf-"] .sf-media-frame--tembe > img, .sf-thuisenzorg [data-sf-block^="sf-"] .sf-media-frame--tembe > video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ----------------------------------------------------------------------------- sf-hero (layouts: badge / service / video-fullscreen / pillars) ----------------------------------------------------------------------------- */ /* --- badge layout -> thuisenzorg .page-hero (gradient band, white text) --- */ .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero { color: #fff; padding: 92px var(--gutter, 24px) 84px; position: relative; overflow: hidden; text-align: center; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero > * { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero .section-badge { background: rgba(255,255,255,.15) !important; color: #fff !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin: 0 0 14px; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero p { color: rgba(255,255,255,.85); line-height: 1.7; font-size: 1.08rem; max-width: 640px; margin: 0 auto; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero .hero-heading-accent { background: none !important; -webkit-text-fill-color: #fff; color: #fff !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero__actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; } /* breadcrumb */ .sf-thuisenzorg [data-sf-block="sf-hero"] .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 16px; position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; } .sf-thuisenzorg [data-sf-block="sf-hero"] .breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; } .sf-thuisenzorg [data-sf-block="sf-hero"] .breadcrumb a:hover { color: #fff; } /* --- video-fullscreen layout -> light photo/video hero w/ soft white wash --- */ .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero { position: relative; min-height: 86svh; display: grid; align-items: center; overflow: hidden; padding: 120px var(--gutter, 24px) 90px; background: var(--mint); } .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero video, .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero .vk-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 28%, rgba(255,255,255,0) 62%); } .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero .hero-grid, .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero .hero-content { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-eyebrow .eb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(244,183,64,.6); } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-content h1, .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-left h1 { font-family: var(--font-head); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; line-height: 1.1; color: var(--green-dark); } .sf-thuisenzorg [data-sf-block="sf-hero"] .sf-hero .sub { color: var(--text); font-size: 1.15rem; margin-top: 1.2rem; max-width: 46ch; line-height: 1.7; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-stats { display: flex; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-stats .stat-num { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--green); } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-stats .stat-label { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } /* side image -> soft framed photo */ .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-side-image { display: grid; place-items: center; padding: 1rem; position: relative; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-side-img { position: relative; max-height: 540px; width: auto; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* --- service layout -> photo hero w/ white fade + green badge --- */ .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero { position: relative; min-height: 58vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 130px var(--gutter, 24px) 110px; background-color: #e9efec !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-video-bg, .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.5) 32%, rgba(255,255,255,.06) 78%, rgba(255,255,255,0) 100%); } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero > *:not(.hero-video-bg):not(img):not(.hero-overlay) { position: relative; z-index: 2; max-width: 840px; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .service-hero-badge { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green) !important; background: var(--mint-2) !important; border: none !important; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero h1 { font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; color: var(--green-dark); text-shadow: 0 2px 18px rgba(255,255,255,.6); } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero p { color: var(--text); max-width: 56ch; margin: 1.2rem auto 1.6rem; line-height: 1.7; font-size: 1.08rem; } /* --- pillars layout -> gradient platform hero (white text) --- */ .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero { background: linear-gradient(135deg, #1a3c34 0%, #2e7d6b 60%, #3d9b85 100%) !important; color: #fff; padding: 108px 0 116px; position: relative; overflow: hidden; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero::after { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: rgba(255,255,255,.05); top: -170px; right: -120px; pointer-events: none; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter, 24px); position: relative; z-index: 2; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: center; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero .section-badge { background: rgba(255,255,255,.15) !important; color: #fff !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-text h1 { font-family: var(--font-head); font-size: clamp(2.4rem,5vw,3.4rem); font-weight: 700; color: #fff; line-height: 1.08; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-text .hero-heading-accent { background: none !important; -webkit-text-fill-color: var(--gold); color: var(--gold) !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-sub { color: rgba(255,255,255,.85); font-size: 1.1rem; margin-top: 1.1rem; line-height: 1.7; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.8rem; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-pillars { display: flex; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-pillars .num { display: block; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--gold); } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-pillars .lbl { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.75); } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-proof { color: rgba(255,255,255,.7); font-size: .95rem; margin-top: 1.4rem; } /* pillars layout buttons inline-forced -> make sure white/outline-white read right */ .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero .btn-primary { background: #fff !important; color: var(--green-dark) !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero .btn-primary:hover { background: var(--mint) !important; color: var(--green-dark) !important; } @media (max-width: 960px) { .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-grid, .sf-thuisenzorg [data-sf-block="sf-hero"] .platform-hero-grid { grid-template-columns: 1fr; } .sf-thuisenzorg [data-sf-block="sf-hero"] .hero-side-image { order: -1; } } /* ----------------------------------------------------------------------------- sf-feature-grid (layouts: cards / services / legacy-svg) ----------------------------------------------------------------------------- */ /* --- cards layout -> white info-cards on mint/white --- */ .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-section { background: var(--white) !important; padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-title { text-align: center; max-width: 720px; margin: 0 auto 54px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-title h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-title p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-top: 12px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card { display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card--inline { flex-direction: row; gap: 1rem; align-items: flex-start; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card--inline .feature-card__body { flex: 1; } /* icon -> mint-2 rounded square w/ green FontAwesome icon (matches .info-icon). Thuisenzorg feature cards DO carry FA icons, so the box is shown. The render only emits .f-icon when an icon is set, so an empty gold square cannot occur. */ .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon { width: 56px; height: 56px; border-radius: 15px; background: var(--mint-2); color: var(--green); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 18px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card--inline .f-icon { margin-bottom: 0; margin-top: .15rem; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon i { color: var(--green); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon svg { width: 26px; height: 26px; } /* Image-style cards drop their own illustration into .f-icon; the mint chip then showed as a stray box behind the image. Only image-cards get the plain treatment; FA/emoji cards keep the chip. Empty icon slots must not render a box at all. */ .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon:has(img) { width: auto; height: auto; background: none; border-radius: 0; display: block; place-items: initial; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon:has(img) img { display: block; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon:not(:has(*)) { display: none; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card p { font-size: .96rem; color: var(--muted); line-height: 1.7; margin: 0; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card__badge { display: inline-block; align-self: flex-start; font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); background: var(--mint-2); border: none; padding: 5px 12px; border-radius: 20px; margin-bottom: 14px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-list li { position: relative; padding-left: 26px; font-size: .94rem; color: var(--muted); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--teal); position: absolute; left: 0; top: 1px; font-size: .8rem; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--green); transition: gap .25s ease; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:hover .feature-card__link { gap: .85rem; } /* --- services layout -> white photo-top cards --- */ .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .services-section-bg { background: var(--mint) !important; padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .services-section-bg .section-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .services-section-bg .section-title { text-align: center; max-width: 720px; margin: 0 auto 54px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .svc-card { display: block; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .svc-card .svc-icon img { width: 100%; height: 220px; object-fit: cover; display: block; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .svc-card h3 { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--green-dark); padding: 20px 24px; margin: 0; } /* --- legacy-svg layout (Tailwind utilities) --- */ .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .text-primary { color: var(--green) !important; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .text-gray-900 { color: var(--green-dark) !important; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .text-gray-600 { color: var(--muted) !important; } @media (max-width: 1024px) { .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid, .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .services-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid, .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .services-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- sf-service-overview -> thuisenzorg two-column .feature-row / .waarden-row ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-service-overview"] .service-overview { padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,3.5rem); align-items: center; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-text h2 { font-size: clamp(1.6rem,3.4vw,2.5rem); font-weight: 700; margin-bottom: 16px; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--teal); margin-bottom: 14px; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-text > p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; margin-bottom: 1rem; } /* benefits -> mint check rows / soft tiles */ .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 1.6rem; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefit-item { background: var(--mint); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; align-items: flex-start; gap: 14px; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefit-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; background: var(--mint-2); display: grid; place-items: center; color: var(--green); } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefit-icon i { color: var(--green); } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefit-text h4 { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--green-dark); margin-bottom: .25rem; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefit-text p { font-size: .94rem; color: var(--muted); line-height: 1.6; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.8rem; } /* media column (default border, non-tembe) -> soft framed photo */ .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-img, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-img > img, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-media > img, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-media > video { width: 100%; object-fit: cover; height: clamp(320px,38vw,460px); display: block; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-overlay-badge { position: absolute; z-index: 2; max-width: 160px; border-radius: var(--radius-sm); box-shadow: var(--shadow); } @media (max-width: 960px) { .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { grid-template-columns: 1fr; } .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefits-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- sf-values -> thuisenzorg value list (gold icon + green title) ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-values"] .values-section { background: var(--mint) !important; padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-values"] .values-section .section-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-values"] .values-section .section-title { text-align: center; max-width: 720px; margin: 0 auto 40px; } .sf-thuisenzorg [data-sf-block="sf-values"] .values-section .section-title h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-values"] .values-section .section-title p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-top: 12px; } .sf-thuisenzorg [data-sf-block="sf-values"] .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; max-width: var(--container); } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card { display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card .val-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--mint-2); display: grid; place-items: center; color: var(--gold); font-size: 1.5rem; } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card .val-icon i { color: var(--gold); } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card .val-icon svg { width: 26px; height: 26px; } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--green-dark); margin: 0; } .sf-thuisenzorg [data-sf-block="sf-values"] .value-card p { font-size: .96rem; color: var(--muted); line-height: 1.7; margin: 0; } /* ----------------------------------------------------------------------------- sf-vision -> thuisenzorg two-card vision panel (mint cards) ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-section { background: var(--white) !important; padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-section .section-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-section .section-title { text-align: center; max-width: 720px; margin: 0 auto 40px; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-section .section-title h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card { background: var(--mint-3); border-radius: var(--radius-lg); padding: 40px; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card .vision-chapter, .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card h3 { font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: .78rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card h2 { font-family: var(--font-head); font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 700; color: var(--green-dark); margin: 0 0 14px; line-height: 1.18; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card p { color: var(--muted); font-size: 1rem; line-height: 1.8; margin: 0 0 1.05em; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card p:last-child { margin-bottom: 0; } .sf-thuisenzorg [data-sf-block="sf-vision"] .tech-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .sf-thuisenzorg [data-sf-block="sf-vision"] .tech-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border-2); border-radius: 50px; padding: 7px 14px; font-size: .86rem; font-weight: 600; color: var(--green-dark); } @media (max-width: 860px) { .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-grid { grid-template-columns: 1fr; } .sf-thuisenzorg [data-sf-block="sf-vision"] .vision-card { padding: 28px; } } /* ----------------------------------------------------------------------------- sf-process-steps -> thuisenzorg timeline / numbered step cards ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-section { padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-title { max-width: 720px; margin: 0 auto 40px; text-align: center; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-title h2 { font-size: clamp(1.8rem,3.4vw,2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-top: 12px; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step { padding: 32px 24px; text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; transition: transform .2s ease, box-shadow .2s ease; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step.featured { border-color: var(--green); background: var(--mint); } /* number disc -> deep-green circle w/ white numeral (matches .timeline-num). The render sets inline style="background:{accent}" on .step-num — beat it. */ .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: #fff !important; background: var(--green-dark) !important; border: none; margin: 0 auto 1rem; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step.featured .step-num { background: var(--green) !important; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step .fas { color: var(--teal); font-size: 1.3rem; margin-bottom: .7rem; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--green-dark); margin-bottom: .5rem; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step p { font-size: .96rem; color: var(--muted); line-height: 1.7; } /* steps-image layout */ .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-image { width: 100%; height: clamp(120px,12vw,160px); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 1rem; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-image img { width: 100%; height: 100%; object-fit: cover; } /* vertical layout -> timeline rows */ .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps--vertical { display: block; max-width: 840px; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps--vertical .process-step { flex-direction: row; gap: 24px; text-align: left; align-items: flex-start; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps--vertical .step-num { margin: 0; flex-shrink: 0; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps--vertical .process-step + .process-step { margin-top: 18px; } /* trailing CTA + embedded results bar */ .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-cta { text-align: center; margin-top: 2.4rem; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .results-section { background: var(--grad) !important; border-radius: var(--radius-lg); padding: 40px; margin-top: 3rem; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .results-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter, 24px); text-align: center; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .result-stat h3 { font-family: var(--font-head); font-size: clamp(2.2rem,5vw,3rem); font-weight: 700; color: var(--gold) !important; line-height: 1; } .sf-thuisenzorg [data-sf-block="sf-process-steps"] .result-stat p { font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: .5rem; } @media (max-width: 960px) { .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- sf-results-stats -> thuisenzorg stats band (gradient, gold numbers) ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-results-stats"] .results-section { background: var(--grad) !important; padding-block: clamp(3rem,7vw,4.5rem); } .sf-thuisenzorg [data-sf-block="sf-results-stats"] .results-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter, 24px); text-align: center; } .sf-thuisenzorg [data-sf-block="sf-results-stats"] .result-stat { flex: 1; min-width: 200px; padding: 1.4rem 1rem; } .sf-thuisenzorg [data-sf-block="sf-results-stats"] .result-stat h3 { font-family: var(--font-head); font-size: clamp(2.2rem,5vw,3.2rem); font-weight: 700; color: var(--gold) !important; line-height: 1; } .sf-thuisenzorg [data-sf-block="sf-results-stats"] .result-stat p { font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: .5rem; } /* ----------------------------------------------------------------------------- sf-testimonials (grid / carousel / marquee / query) -> thuisenzorg .reviews ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-section { background: var(--offwhite) !important; padding-block: clamp(3.5rem,8vw,5.75rem); position: relative; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .section-title, .sf-thuisenzorg [data-sf-block="sf-testimonials"] .st-head { max-width: 720px; margin: 0 auto; text-align: center; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .section-title h2 { font-size: clamp(1.8rem,3.4vw,2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .section-title > p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-top: 12px; } /* rating badge -> white score-bar pill */ .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rating-badge { display: inline-flex; align-items: center; gap: 14px; margin: 24px auto 0; background: var(--white); border: 1px solid var(--border-2); border-radius: 50px; padding: 12px 28px; box-shadow: 0 2px 12px rgba(46,125,107,.08); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-score, .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-count { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--green-dark); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-stars { color: var(--gold); letter-spacing: 2px; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-caption, .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-count-caption { font-size: .82rem; color: var(--muted); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-divider { width: 1px; align-self: stretch; background: var(--border-2); } /* card grid / track */ .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; max-width: 1050px; margin: 36px auto 0; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-carousel, .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-marquee { max-width: var(--container); margin: 36px auto 0; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-track::-webkit-scrollbar { display: none; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .t-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--white); color: var(--green); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .25s ease; box-shadow: var(--shadow-sm); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .t-nav:hover { background: var(--green); color: #fff; border-color: var(--green); } /* card -> white review card */ .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-card { width: 340px; flex: 0 0 340px; max-width: 100%; scroll-snap-align: start; padding: 28px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; text-align: left; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-grid .testimonial-card { width: auto; flex: initial; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(26,60,52,.11); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-card .stars { display: block; color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-card > p { font-size: .98rem; font-style: italic; line-height: 1.75; color: var(--text); margin-bottom: 18px; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-author { display: flex; align-items: center; gap: 12px; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-author .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--mint-3); display: grid; place-items: center; color: var(--green); font-family: var(--font-head); font-weight: 700; font-size: 1rem; object-fit: cover; flex-shrink: 0; } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-author .name { font-family: var(--font-head); font-size: .92rem; font-weight: 700; color: var(--green-dark); } .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonial-author .role, .sf-thuisenzorg [data-sf-block="sf-testimonials"] .author-company { font-size: .84rem; color: var(--muted-light); } @media (max-width: 700px) { .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- sf-faq (details / button-circle / tailwind) -> thuisenzorg .faq accordion ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-section { background: var(--mint) !important; padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-section .section-inner { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-section .section-title { text-align: center; margin-bottom: 40px; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-section .section-title h2 { font-size: clamp(1.8rem,3.4vw,2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-list { display: flex; flex-direction: column; gap: 14px; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); padding: 0 22px; transition: box-shadow .25s ease; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item.open, .sf-thuisenzorg [data-sf-block="sf-faq"] details.faq-item[open] { box-shadow: var(--shadow); } /* button-circle */ .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--green-dark); text-align: left; cursor: pointer; background: none; border: none; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-icon { color: var(--teal); font-size: 1.3rem; line-height: 1; transition: transform .25s ease; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item.open .faq-icon { transform: rotate(45deg); } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item.open .faq-answer { max-height: 360px; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-answer-inner, .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-body { padding: 0 0 20px; color: var(--muted); font-size: .98rem; line-height: 1.7; } /* details */ .sf-thuisenzorg [data-sf-block="sf-faq"] details.faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--green-dark); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .sf-thuisenzorg [data-sf-block="sf-faq"] details.faq-item summary::-webkit-details-marker { display: none; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-chev { color: var(--teal); font-size: 1.3rem; line-height: 1; transition: transform .25s ease; } .sf-thuisenzorg [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev { transform: rotate(45deg); } /* tailwind layout */ .sf-thuisenzorg [data-sf-block="sf-faq"] .border-gray-200 { border-color: var(--border) !important; } .sf-thuisenzorg [data-sf-block="sf-faq"] .text-gray-900, .sf-thuisenzorg [data-sf-block="sf-faq"] .text-gray-700 { color: var(--green-dark) !important; } .sf-thuisenzorg [data-sf-block="sf-faq"] .text-gray-600 { color: var(--muted) !important; } .sf-thuisenzorg [data-sf-block="sf-faq"] .text-gray-500 { color: var(--teal) !important; } /* ----------------------------------------------------------------------------- sf-cta -> thuisenzorg gradient CTA band (white text) ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section { background: var(--white) !important; padding-block: clamp(3rem,7vw,4.5rem); position: relative; overflow: hidden; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding: 48px 44px; text-align: center; border: none; border-radius: var(--radius-lg); background: var(--grad); box-shadow: 0 14px 40px rgba(26,60,52,.18); } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card .section-badge { background: rgba(255,255,255,.15) !important; color: #fff !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-eyebrow { font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: .78rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 12px; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section h2 { font-family: var(--font-head); font-size: clamp(1.6rem,4vw,2.5rem); font-weight: 700; color: #fff; margin: 0 0 12px; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-accent { background: none !important; -webkit-text-fill-color: var(--gold); color: var(--gold) !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section p { color: rgba(255,255,255,.9); font-size: 1.05rem; margin: 0 auto 30px; max-width: 640px; line-height: 1.7; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub { font-size: .92rem; color: rgba(255,255,255,.7); margin-top: 14px; } /* primary button on the green band reads as white pill */ .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary { background: #fff !important; color: var(--green-dark) !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary:hover { background: var(--mint) !important; color: var(--green-dark) !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline { border-color: rgba(255,255,255,.7) !important; color: #fff !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline:hover { background: rgba(255,255,255,.14) !important; border-color: #fff !important; color: #fff !important; } /* two-column variant */ .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card:has(.cta-card-text) { display: flex; align-items: center; justify-content: space-between; gap: 32px; text-align: left; flex-wrap: wrap; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card-text { text-align: left; flex: 1; min-width: 260px; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card-action { display: flex; align-items: center; flex-shrink: 0; } @media (max-width: 700px) { .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-actions { flex-direction: column; align-items: center; } } /* ----------------------------------------------------------------------------- sf-contact-details -> thuisenzorg contact grid (info left, white form right) ----------------------------------------------------------------------------- */ .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-section { background: var(--mint) !important; padding-block: clamp(3.5rem,8vw,5.75rem); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter, 24px); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-info { display: flex; flex-direction: column; gap: 1.2rem; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-info > h2 { font-size: clamp(1.8rem,3.4vw,2.5rem); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-info > p { color: var(--muted); line-height: 1.75; } /* detail rows */ .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; background: var(--mint-2); display: grid; place-items: center; color: var(--green); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail-icon svg { width: 20px; height: 20px; fill: var(--green); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail-body h4 { font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail-body a, .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail-body p { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--green-dark); text-decoration: none; line-height: 1.4; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-detail-body a:hover { color: var(--green); } /* form -> white card */ .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-form { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.6rem,4vw,2.6rem); background: var(--white); box-shadow: var(--shadow); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-form h3 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--green-dark); margin-bottom: 1.2rem; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group label { font-family: var(--font-head); font-size: .82rem; letter-spacing: .5px; color: var(--green-dark); font-weight: 700; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group input, .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group textarea, .sf-thuisenzorg [data-sf-block="sf-contact-details"] .captcha-input { padding: 12px 14px; background: var(--mint); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); width: 100%; transition: border-color .25s, background .25s; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group input:focus, .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group textarea:focus, .sf-thuisenzorg [data-sf-block="sf-contact-details"] .captcha-input:focus { outline: none; border-color: var(--green); background: var(--white); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-group textarea { resize: vertical; min-height: 130px; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .captcha-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .captcha-question { font-size: .96rem; color: var(--muted); } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .btn-submit { width: 100%; justify-content: center; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-success { text-align: center; padding: 2rem 0; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .success-check { width: 64px; height: 64px; margin: 0 auto 1rem; color: var(--green); } @media (max-width: 900px) { .sf-thuisenzorg [data-sf-block="sf-contact-details"] .contact-inner { grid-template-columns: 1fr; } .sf-thuisenzorg [data-sf-block="sf-contact-details"] .form-row { grid-template-columns: 1fr; } } /* ── Merk-accent: overschrijf blueprint-block-defaults (salesfision-rood #e63946) → ThuisenZorg-teal, site-breed ── */ .sf-thuisenzorg [data-sf-block="sf-cta"]{--sf-cta-accent:#2e7d6b;--sf-cta-glow:rgba(46,125,107,.12);--sf-cta-glow-soft:rgba(46,125,107,.06);--sf-cta-glow-hover:rgba(46,125,107,.22);--sf-cta-glow-hover-soft:rgba(46,125,107,.1);--sf-cta-border:rgba(46,125,107,.35);--sf-cta-border-hover:rgba(46,125,107,.65);} .sf-thuisenzorg [data-sf-block="sf-blog-posts"]{--sf-blog-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-cases-grid"]{--sf-cases-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-contact-details"]{--sf-contact-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-faq"]{--sf-faq-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-feature-grid"]{--sf-highlight:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-hero"]{--sf-hero-red:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-pricing"]{--sf-pricing-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-service-teaser"]{--sf-st-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-stats"]{--sf-stats-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-team"]{--sf-team-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-testimonials"]{--sf-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-timeline"]{--sf-timeline-accent:#2e7d6b;} .sf-thuisenzorg [data-sf-block="sf-values"]{--sf-values-accent:#2e7d6b;--sf-values-glow:rgba(46,125,107,.12);} .sf-thuisenzorg [data-sf-block="sf-vision"]{--sf-vision-accent:#2e7d6b;} /* ============================================================================= 1:1 DESIGN PASS (juli 2026) — afwijkingen t.o.v. de design-screenshots. Alles hieronder wint op de regels erboven (zelfde specificiteit, later in het bestand) of is bewust scherper gescoped via de slug-body-class page- (zie includes/site-assets.php — page-id's verschillen per omgeving). ============================================================================= */ /* --- HERO: laat de foto uit de seed staan ---------------------------------- */ /* De badge-layout schildert zelf al een donker verloop over de foto (inline style). Alleen als er geen foto is, valt hij terug op de merk-gradient. */ .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero:not([style*="url("]) { background: var(--grad) !important; } .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero h1 { text-align: center; } /* --- SERVICE-HERO: donkere scrim + witte titel + golvende onderrand -------- */ .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-overlay { background: linear-gradient(180deg, rgba(15,45,38,.55) 0%, rgba(15,45,38,.38) 45%, rgba(15,45,38,.55) 100%); } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero h1 { color: #fff; text-shadow: none; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero p { color: rgba(255,255,255,.92); } /* Alleen de achtergrond- mag de hero vullen — niet het kroontje. */ .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-icon { position: relative; z-index: 2; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-icon img { position: static; width: 62px; height: auto; object-fit: contain; margin: 0 auto 14px; } .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 72px; z-index: 3; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,34 C240,74 480,4 720,26 C960,48 1200,76 1440,30 L1440,72 L0,72 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } /* --- EYEBROW: platte letterspaced caps i.p.v. mint pill -------------------- */ .sf-thuisenzorg [data-sf-block^="sf-"] .section-badge, .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .service-hero-badge { background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; color: var(--teal) !important; letter-spacing: 2.2px; } /* Op een donkere hero blijft de eyebrow wit leesbaar. */ .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero .section-badge, .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .service-hero-badge { color: #fff !important; } /* --- CTA: mint kaart met donkergroene tekst (design-default) --------------- */ .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card { background: var(--mint-2) !important; box-shadow: none; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section h2, .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card h2 { color: var(--green-dark) !important; -webkit-text-fill-color: var(--green-dark); } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub, .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card p { color: var(--text) !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary { background: var(--green) !important; color: #fff !important; } .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline { border-color: var(--green) !important; color: var(--green) !important; } /* Dienstpagina's: full-bleed donkergroene band, geen radius, geen marges. */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card { background: var(--grad) !important; border-radius: 0; max-width: none; margin-inline: calc(50% - 50vw); padding-inline: max(var(--gutter, 24px), calc(50vw - var(--container) / 2)); } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] h2, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] h2, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] h2, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] h2 { color: #fff !important; -webkit-text-fill-color: #fff; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-sub { color: rgba(255,255,255,.88) !important; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .btn-primary { background: #fff !important; color: var(--green-dark) !important; } /* --- PROCES: timeline met connector-lijn (dienstpagina's) ------------------ */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin-inline: auto; padding-left: 74px; } /* De verticale lijn loopt door het midden van de nummercirkels. */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps::before, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps::before, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: var(--border-2); } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step { position: relative; background: var(--mint); border: none; border-radius: var(--radius); padding: 22px 26px; box-shadow: none; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num { position: absolute; left: -74px; top: 18px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--green-dark); color: #fff; font-family: var(--font-head); font-size: 1rem; font-weight: 700; z-index: 1; } /* --- DIENSTEN: dienstblokken als kaart-panel, beeld om en om --------------- */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { background: var(--offwhite); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); align-items: center; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"] .service-overview { padding-block: clamp(1.5rem, 3vw, 2.25rem); } /* Design: beeld links bij Logeerhuis (3) en Ambulante begeleiding (5). */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="3"] .overview-grid, body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="5"] .overview-grid { direction: rtl; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="3"] .overview-grid > *, body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="5"] .overview-grid > * { direction: ltr; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary { display: block; width: 100%; text-align: center; background: var(--teal) !important; color: #fff !important; border: none; } /* "Hoe het werkt": iconen i.p.v. nummercirkels, links uitgelijnd. */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num { display: none; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step { text-align: left; } /* FAQ: geen rode +-badge (kleur-leak), alleen de chevron. */ .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-icon { display: none; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-chev { color: var(--green); } /* --- KOM BIJ ONS WERKEN: mint banden + beeld links ------------------------- */ body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .service-overview { background: var(--mint) !important; } body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { direction: rtl; } body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid > * { direction: ltr; } body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary { background: var(--green) !important; color: #fff !important; border: none; } /* --- HOME: reviews-intro kleiner, ratingbadge als smalle pil --------------- */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .section-sub, body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .process-sub { font-size: 1rem; color: var(--muted); } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rating-badge { display: inline-flex; align-items: center; gap: .6rem; padding: 8px 18px; border-radius: 999px; background: var(--mint-2); box-shadow: none; } /* --- MOBIEL (klasse H) ----------------------------------------------------- */ @media (max-width: 640px) { /* Vaste-breedte media is de bron van horizontale overflow, niet de header. GEEN height:auto hier: dat overrulet .nav-logo img{height:40px} (gelijke specificiteit, later geladen) waardoor het logo op zijn natuurlijke 2560px uitklapt en de hele pagina horizontaal laat scrollen. */ .sf-thuisenzorg img, .sf-thuisenzorg video { max-width: 100%; } .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .benefits-grid { grid-template-columns: 1fr; } /* Timeline: cirkels binnen de viewport houden. */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps { padding-left: 56px; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .step-num { left: -56px; width: 42px; height: 42px; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps::before, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps::before, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-steps::before { left: 20px; } } /* --- Bespoke blokken uit de 1:1-pas ---------------------------------------- */ /* service-intro-thuisenzorg: tekst links, kaarten rechts (dienstpagina's). */ .svc-intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .svc-intro-text .eyebrow { display: inline-block; font-family: var(--font-ui, 'Open Sans', sans-serif); font-size: 13px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .svc-intro-text .section-title { text-align: left; margin: 0 0 18px; } .svc-intro-body p { color: var(--muted); line-height: 1.75; margin: 0 0 14px; } .svc-intro-quote { margin: 22px 0 0; padding: 16px 20px; border-left: 4px solid var(--green); background: var(--mint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--green-dark); line-height: 1.7; } .svc-intro-cards { display: flex; flex-direction: column; gap: 16px; } .svc-intro-card { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; } .svc-intro-card i { color: var(--green); font-size: 1.15rem; margin-top: .2rem; } .svc-intro-card h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--green-dark); margin: 0 0 6px; } .svc-intro-card p { font-size: .95rem; color: var(--muted); line-height: 1.7; margin: 0; } /* check-list met foto (home): beeld links, checks rechts, gouden vinkjes. */ .check-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } .check-split .check-media img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; } .check-split .check-cards { display: flex; flex-direction: column; gap: 14px; } body.page-home .check-card i { color: var(--gold); } /* HKZ-keurmerk (sf-logo-row): witte, gecentreerde band i.p.v. donkere strip. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .trusted-section { background: var(--white) !important; padding-block: clamp(2rem, 4vw, 3rem); } body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] img { max-height: 96px; width: auto; margin-inline: auto; } /* Over ons: missie-sectie op mint. */ body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="3"] .service-overview { background: var(--mint) !important; } @media (max-width: 860px) { .svc-intro-grid, .check-split { grid-template-columns: 1fr; } } /* HKZ-band: één logo, leesbaar formaat, geen lege kop-ruimte. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .section-inner { display: none; } body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logos-track { display: flex; justify-content: center; animation: none; } body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logo-item img { filter: none; opacity: 1; } /* --- HOME "Wat doen wij?": 2-koloms mozaïek met illustraties ---------------- */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card { background: var(--offwhite); border: none; border-radius: var(--radius-lg); padding: 32px 34px; } /* Kaart 2 (Ambulante begeleiding) is de mint-gevulde kaart uit het design. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(2) { background: var(--mint-3); } /* Kaart 4 is beeld-only (schild). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(4) { display: grid; place-items: center; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon img, body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card img { max-width: 220px; height: auto; margin: 8px auto 0; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:first-child img { max-width: 74px; margin: 0 0 14px; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card h3 { font-size: 1.5rem; } /* Marquee dupliceert de logo-track; met één keurmerk tonen we alleen het origineel. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logo-item:nth-child(n+2) { display: none; } /* --- HOME "Werken bij": full-bleed split (grijs paneel links, foto tot de rand) */ body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .service-overview { padding: 0; background: var(--offwhite) !important; } body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { max-width: none; margin: 0; padding: 0; gap: 0; align-items: stretch; } body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-text { padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); align-self: center; max-width: 620px; margin-left: auto; } body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; max-height: none; } /* HOME reviews: intro op bodytekst-formaat (was kop-formaat). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .st-head p { font-size: 1.02rem; line-height: 1.75; color: var(--muted); max-width: 620px; margin-inline: auto; } /* --- HOME: correcties op het mozaïek + keurmerk + full-bleed band ----------- */ /* Lege icoon-container (kaart zonder illustratie) mag geen vakje tonen. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon:empty { display: none; } /* In de mint-kaart staat de illustratie ONDER de tekst (design). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(2) { display: flex; flex-direction: column; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(2) .f-icon { order: 3; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(2) h3 { order: 1; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(2) p { order: 2; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(2) .f-icon img { max-width: 300px; } /* Beeld-only kaart: schild groot in het midden. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card:nth-child(4) .f-icon img { max-width: 240px; } /* Keurmerk groot genoeg om te lezen. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logo-item img { /* Expliciete BREEDTE en hoogte: het blok zet loading="lazy"; zonder layout-box blijft de img 0x0 en vuurt de lazy-load nooit af (keurmerk bleef leeg). */ width: 132px !important; height: auto !important; max-width: none !important; max-height: none !important; filter: none !important; opacity: 1 !important; } /* "Werken bij" loopt van rand tot rand. */ /* ============================================================================= 1:1 DESIGN PASS — ronde 2 (correcties na visuele verificatie) ============================================================================= */ /* --- Donkere CTA-band: ALLE tekst en de ghost-knop moeten wit zijn ---------- */ /* Zonder dit erven de losse

en .btn-outline de donkergroene bodykleur en verdwijnen ze in de band (donker-op-donker). */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card p, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card p, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-card p, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card p { color: rgba(255,255,255,.92) !important; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .btn-outline { border-color: #fff !important; color: #fff !important; background: transparent !important; } /* Home-zelftestbanner is in het design een INGESLOTEN donkere kaart, geen band. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card { border-radius: var(--radius-lg); max-width: var(--container); margin-inline: auto; padding-inline: clamp(2rem, 4vw, 3.5rem); width: auto; } /* --- Slot-notitie onder het proces: mint band, donkere tekst, geen icoon ---- */ /* ALLEEN de losse notitie-blokken (.note-only): de donkere lightbulb-callout van de "Voor wie"-checklist moet juist donkergroen blijven — die stond eerst mee te liften op een te brede .note-band-selector. */ body.page-ambulante-begeleiding .note-only .note-band, body.page-wandelgesprek .note-only .note-band, body.page-duurzame-samenwerking .note-only .note-band { background: var(--mint) !important; border: none; color: var(--green-dark); margin-top: 10px !important; text-align: center; justify-content: center; } body.page-ambulante-begeleiding .note-only .note-band p, body.page-wandelgesprek .note-only .note-band p, body.page-duurzame-samenwerking .note-only .note-band p, body.page-ambulante-begeleiding .note-only .note-band strong, body.page-wandelgesprek .note-only .note-band strong, body.page-duurzame-samenwerking .note-only .note-band strong { color: var(--green-dark) !important; } body.page-ambulante-begeleiding .note-only .note-band i, body.page-wandelgesprek .note-only .note-band i, body.page-duurzame-samenwerking .note-only .note-band i { display: none; } /* De notitie sluit in het design direct aan op de laatste stap. */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-section, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-section, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-section { padding-bottom: 1.5rem; } /* --- KOM BIJ ONS WERKEN: mint band + gecentreerde tekst -------------------- */ body.page-kom-bij-ons-werken .rt-section, body.page-kom-bij-ons-werken .section-head { text-align: center; } /* --- FAQ: chevron in merkkleur + genummerde vragen ------------------------- */ .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-chev { color: var(--green) !important; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-list { counter-reset: faq; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item { counter-increment: faq; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item > summary > span:first-child::before { content: counter(faq) ". "; color: var(--green); font-weight: 700; } @media (max-width: 640px) { /* Het home-mozaïek is 2-koloms met vaste beeldbreedtes (300/240px) — beide moeten op mobiel meeschalen, anders scrollt de pagina horizontaal. */ /* !important: de kolomtelling staat als INLINE style op de grid (seed-veld columns=2) en de beeldbreedtes komen uit nth-child-regels hierboven. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid { grid-template-columns: 1fr !important; } body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card img, body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card .f-icon img { max-width: 100% !important; } } /* --- FAQ: het "+" hoort rechts in de rij, in merkkleur (was midden, rozerood) */ .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-chev { margin-left: auto; color: var(--green) !important; background: none !important; font-size: 1.4rem; line-height: 1; } /* --- DIENSTEN: hero-scrim lichter (design = warme zonsondergang, niet olijf) */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-overlay { /* Design toont de warme zonsondergang vrijwel onbedekt; alleen bovenaan iets donkering zodat de nav leesbaar blijft. */ background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.05) 35%, rgba(0,0,0,0) 70%); } /* --- KOM BIJ ONS WERKEN: de drie tekstsecties zijn gecentreerd in het design */ body.page-kom-bij-ons-werken .rt-article .prose, body.page-kom-bij-ons-werken .rt-article .section-title { text-align: center; } body.page-kom-bij-ons-werken .rt-article .prose { margin-inline: auto; } /* "En verder" staat in de contact-grid en blijft links uitgelijnd (design). */ body.page-kom-bij-ons-werken .contact-grid .prose, body.page-kom-bij-ons-werken .contact-grid .section-title { text-align: left; } /* --- HOME check-list: platte lijst met gouden vinkjes, geen kaartjes -------- */ body.page-home .check-split .check-card { background: transparent; border: none; box-shadow: none; padding: 6px 0; } /* Het blok rendert een "+" EN een chevron; het design toont alleen de chevron. */ .sf-thuisenzorg [data-sf-block="sf-faq"] .faq-chev { display: none !important; } /* DIENSTEN: intro gecentreerd (design), knop komt uit de seed-body. */ body.page-diensten .rt-body, body.page-diensten .prose { text-align: center; } body.page-diensten .prose .btn-primary, body.page-diensten .rt-body .btn-primary { display: inline-block; margin-top: 18px; background: var(--teal); color: #fff; padding: 12px 26px; border-radius: 999px; text-decoration: none; } /* --- NAV: leesbaar menu bij scrollen --------------------------------------- */ /* salesfision.css (bundle van een ander merk dat hier meelaadt) forceert `body.sf-hide-chrome nav { background: transparent !important }`, waardoor de menu-items over lichte secties onleesbaar werden. Alleen !important wint daarvan. */ body.sf-hide-chrome .nav { background: rgba(255,255,255,.92) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.sf-hide-chrome .nav.scrolled { background: #fff !important; border-bottom-color: var(--border); box-shadow: 0 6px 24px rgba(26,60,52,.07); } /* ============================================================================= 1:1 DESIGN PASS — ronde 3 (laatste restpunten) ============================================================================= */ /* --- HOME reviews: smalle witte pil op één regel ---------------------------- */ /* Design: "★★★★☆ 4 van 5 gebaseerd op 50 beoordelingen" — de captions komen uit de seed (rating_value_caption / rating_count_caption), de volgorde uit CSS. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rating-badge { display: inline-flex; flex-direction: row; align-items: center; gap: .5rem; padding: 10px 22px; border: 1px solid var(--border); border-radius: 999px; background: #fff; box-shadow: none; } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rating-badge .rb-col { display: contents !important; } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rating-badge .rb-divider { display: none; } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-stars { order: 1; color: var(--gold); font-size: 1.05rem; letter-spacing: 1px; } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-score { order: 2; font-size: .98rem; font-weight: 700; color: var(--green-dark); } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-caption { order: 3; font-size: .98rem; color: var(--muted); } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-count { order: 4; font-size: .98rem; color: var(--muted); } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-count-caption { order: 5; font-size: .98rem; color: var(--muted); } /* --- HOME: "Onze diensten" als losse gecentreerde knop onder het mozaïek ---- */ body.page-home .rt-cta .btn-primary { display: inline-block; background: var(--teal); color: #fff; padding: 12px 30px; border-radius: 999px; text-decoration: none; } body.page-home .rt-cta { text-align: center; padding-block: 0 clamp(2rem, 4vw, 3rem); } /* --- Pijl vóór het label op de service-overview-knoppen (design) ------------ */ body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary::before, body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary::before { content: "\2192 "; margin-right: .5rem; } /* sf-cta rendert het icoon achter het label; het design zet het ervoor. */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary { flex-direction: row-reverse; gap: .5rem; } /* --- Trust-regel onder de CTA: iconen mee laten kleuren --------------------- */ .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub i { margin-right: .35rem; margin-left: .9rem; opacity: .9; } .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-sub i:first-child { margin-left: 0; } /* Trust-regel plakte tegen de knoppen (marge naar 0 overschreven) — lucht geven. */ .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-actions + .cta-sub { margin-top: 22px; } /* --- HOME: zelftest-CTA = tekst links, knoppen rechts (design) -------------- */ body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card { display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); text-align: left; } body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-actions { flex-direction: column; align-items: stretch; gap: 12px; margin: 0; } body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] h2, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] p { text-align: left; } /* --- HOME: reviews-sectie op wit (design), niet op de beige band ------------ */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .testimonials-section { background: #fff !important; } /* --- HOME "Werken bij": foto loopt door tot de rechter viewportrand --------- */ body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid > *:last-child { height: 100%; } body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid img { border: none; min-height: 420px; } /* --- OVER ONS: lichtere hero-scrim + full-bleed mint missie-sectie ---------- */ body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-overlay { background: linear-gradient(180deg, rgba(15,45,38,.34) 0%, rgba(15,45,38,.22) 45%, rgba(15,45,38,.42) 100%); } /* Gevulde groene knop in de visie/missie-secties (design), niet outline. */ body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary { background: var(--green) !important; color: #fff !important; border: none; } /* --- DIENSTEN "Hoe het werkt": icoon in mint badge, links uitgelijnd -------- */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step { text-align: left; align-items: flex-start; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step i, body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-step .step-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--mint-2); color: var(--green); margin-bottom: 14px; } /* "Meer info"-knoppen krijgen de pijl uit het design. */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary::before { content: "\2192 "; margin-right: .5rem; } /* --- AMBULANTE: "Vergoeding & aanmelding" is 1-koloms in het design --------- */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid { grid-template-columns: 1fr !important; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .feature-card { text-align: left; } /* --- CTA-knop met envelop-icoon (design) op de dienstpagina's --------------- */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary::before, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary::before { content: "\f0e0 "; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .5rem; } /* --- Mint-banden: expliciet via het bg-veld, full-bleed --------------------- */ .sf-thuisenzorg .rt-article.bg-mint, .sf-thuisenzorg .section.bg-mint { background: var(--mint); } body.page-kom-bij-ons-werken .rt-article.bg-mint { margin-inline: calc(50% - 50vw); width: 100vw; padding-inline: max(var(--gutter, 24px), calc(50vw - var(--container) / 2)); } /* Staand portret zoals in het design. */ body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; } /* --- CONTACT: hero-container centreren (stond links tegen de gutter) -------- */ body.page-contact .sf-thuisenzorg [data-sf-block="sf-hero"] .page-hero > * { margin-inline: auto !important; text-align: center; } /* --- BLOGS: hero-scrim lichter (design toont het beeld helder) -------------- */ body.page-blogs .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero .hero-overlay { background: linear-gradient(180deg, rgba(15,45,38,.34) 0%, rgba(15,45,38,.20) 45%, rgba(15,45,38,.40) 100%); } @media (max-width: 640px) { /* De rating-pil is één regel op desktop; op mobiel mag hij wrappen. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rating-badge { flex-wrap: wrap; justify-content: center; max-width: 100%; } /* Zelftest-CTA: knoppen onder de tekst i.p.v. in een rechterkolom. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card { grid-template-columns: 1fr; } } /* --- Full-bleed split-secties (service-overview) ---------------------------- */ /* margin-inline: calc(50% - 50vw) faalt hier: de ouder is 1200px breed, niet de viewport, waardoor de sectie 1200px bleef en de padding de kolommen naar 178px platdrukte. left/transform is onafhankelijk van de ouderbreedte. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .service-overview, body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="3"] .service-overview, body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .service-overview { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; padding-inline: 0; } /* De inhoud blijft netjes op containerbreedte, 2-koloms. */ body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-service-overview"][data-sf-index="3"] .overview-grid, body.page-kom-bij-ons-werken .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { grid-template-columns: 1fr 1fr; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter, 24px); padding-block: clamp(2.5rem, 5vw, 4rem); gap: clamp(2rem, 5vw, 4rem); align-items: center; } /* Home: grijs paneel links, foto rechts tot de rand (geen container-padding). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid { grid-template-columns: 1fr 1fr; max-width: none; padding: 0; gap: 0; align-items: stretch; } /* --- REGRESSIE-FIX: vette tekst/links in de DONKERE callout moeten wit zijn --- */ /* De seed had hier inline color:#fff (verwijderd omdat de mint-notitie die erfde). De donkere callout heeft de witte kleur wél nodig; de mint .note-only-variant overschrijft dit hieronder met een hogere specificiteit. */ .sf-thuisenzorg .note-band strong, .sf-thuisenzorg .note-band a { color: #fff; } .sf-thuisenzorg .note-band a { text-decoration: underline; } /* --- HOME zelftest-CTA: tekst links, knoppen rechts op dezelfde hoogte ------ */ body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card > h2, body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card > p { grid-column: 1; } body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; } /* --- DIENSTEN: hand-emblemen naast "Hoe het werkt" (design) ----------------- */ body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-title h2 { display: inline-flex; align-items: center; gap: 18px; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-title h2::before, body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-title h2::after { content: ""; width: 46px; height: 46px; background: url("/wp-content/themes/salesfision/assets/img/Open-handen-Zorg-Thuis1-01.png") no-repeat center / contain; } body.page-diensten .sf-thuisenzorg [data-sf-block="sf-process-steps"] .process-title h2::after { background-image: url("/wp-content/themes/salesfision/assets/img/Open-handen-Zorg-Thuis1-02.png"); } /* --- CTA-knoppen: envelop links, geen pijl (design) ------------------------- */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary { flex-direction: row; } body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary .btn-icon, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary .btn-icon, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary .btn-icon, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-outline .btn-icon { display: none; } body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary::before { content: none; } /* --- HOME check-list: kop naast het beeld (rechterkolom), links uitgelijnd -- */ .check-split .check-body { display: flex; flex-direction: column; gap: 16px; } .check-split .check-body .section-head { text-align: left; margin: 0; } .check-split .check-body .section-sub { margin: 0; color: var(--muted); } /* Keurmerk op design-formaat. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logo-item img { width: 180px !important; } /* De marquee-wrapper is 80px hoog met overflow:hidden — dat sneed het keurmerk af. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logos-marquee-wrapper, body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logos-track { height: auto !important; overflow: visible !important; } body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logo-item { height: auto !important; max-height: none !important; display: flex; align-items: center; justify-content: center; } body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .trusted-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); } /* --- Laatste designdetails -------------------------------------------------- */ /* Keurmerk op designformaat (~225px). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-logo-row"] .logo-item img { width: 225px !important; } /* Over ons: staande beelden (2:3) zoals in het design. */ body.page-over-ons .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; height: auto; } /* Kaart-iconen staan in het design BOVEN de titel, niet ernaast. */ .svc-intro-card { flex-direction: column; gap: 10px; } .svc-intro-card i { margin-top: 0; } /* Envelop-icoon op de resterende contact-knoppen (design). */ body.page-diensten .prose .btn-primary::before, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary::before { content: "\f0e0 "; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .5rem; } /* Rating: 4 gevulde + 1 grijze ster (het blok rendert er altijd 5 gevulde). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-stars { font-size: 0; } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-stars::before { content: "\2605\2605\2605\2605"; font-size: 1.05rem; color: var(--gold); letter-spacing: 1px; } body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .rb-stars::after { content: "\2605"; font-size: 1.05rem; color: #d8ded9; letter-spacing: 1px; } /* ============================================================================= 1:1 DESIGN PASS — ronde 4 (nacontrole op dev) ============================================================================= */ /* --- Dienstpagina's: CTA-band sluit aan op de footer (was witte strook) ----- */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section, body.page-wandelgesprek .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section, body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .cta-section { /* Wrapper-padding weg zodat de groene band strak aansluit op de sectie erboven EN op de footer (design toont geen witte stroken rond de band). */ padding-block: 0; margin-block: 0; } /* Duurzame: pijl i.p.v. envelop (design). */ body.page-duurzame-samenwerking .sf-thuisenzorg [data-sf-block="sf-cta"] .btn-primary::before { content: "\2192 "; font-family: inherit; font-weight: 700; } /* Ambulante: "Vergoeding & aanmelding" staat in het design op mint. */ body.page-ambulante-begeleiding .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-section { background: var(--mint) !important; } /* --- HOME -------------------------------------------------------------------- */ /* De checklist-foto vult haar container niet -> zwarte wig. Vaste ratio + cover. */ .check-split .check-media { background: transparent; } .check-split .check-media img { aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* Groene organische stat-blob over de foto (Onze waarden — design). */ .check-split .check-media { position: relative; } .check-split .check-media .check-stat-blob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(56%, 236px); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; padding: 1.25rem; background: #c2e3cc; border-radius: 62% 38% 58% 42% / 55% 50% 50% 45%; } .check-split .check-media .check-stat-blob .stat-number { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.9rem); line-height: 1; color: var(--green-dark); } .check-split .check-media .check-stat-blob .stat-label { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.25; color: var(--green-dark); } /* Onze waarden stond links-zwaar (brede lege rechterkolom). Het foto+tekst-paar als geheel centreren + kolommen balanceren (Davidè 20-7). */ body.page-home .check-split { max-width: 1000px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Kale vinkjes i.p.v. gevulde cirkels (design). */ body.page-home .check-card i::before { content: "\f00c"; } body.page-home .check-card i { color: var(--gold); } /* Koppen in "Wat doen wij?" en "Werken bij" zijn donkergrijs in het design. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] h2, body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] h3, body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] h2 { color: #333; } /* Hero hoger, zoals het design. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-hero"] .service-page-hero { min-height: 78vh; } /* "Meer info" is een gevulde teal knop (was outline). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-primary, body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-buttons .btn-outline { background: var(--teal) !important; color: #fff !important; border: none !important; } /* Foto tot de rand, rechte hoeken. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-grid img { border-radius: 0 !important; box-shadow: none !important; } /* Zelftest-banner: compacter, kop en tekst links uitgelijnd op dezelfde marge. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .cta-card { padding-block: clamp(1.75rem, 3vw, 2.5rem); } body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: 0 0 10px; } body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] p { margin: 0; max-width: 640px; } /* Klembord-icoon op de zelftest-knop (design). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-cta"][data-sf-index="5"] .btn-primary::before { content: "\f0ae "; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: .5rem; } /* Reviews-eyebrow heeft in het design wél een mint pil. */ body.page-home .sf-thuisenzorg [data-sf-block="sf-testimonials"] .section-badge { background: var(--mint-2) !important; color: var(--green) !important; padding: 6px 14px !important; border-radius: 20px !important; } /* Kolomverhouding "Wat doen wij?" (design ~40/60). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid { grid-template-columns: .85fr 1.15fr !important; } /* De regel onder de reviewkaarten (los richtext-blok) sluit strak aan. */ body.page-home .rt-cta { padding-block: 0 clamp(1.5rem, 3vw, 2.5rem); } body.page-home .rt-cta a { color: var(--green); } @media (max-width: 640px) { /* Moet ná de 40/60-regel staan: die is !important en zou anders ook op mobiel twee kolommen forceren (home scrollde daardoor horizontaal). */ body.page-home .sf-thuisenzorg [data-sf-block="sf-feature-grid"] .features-grid { grid-template-columns: 1fr !important; } } /* ============================================================================= Davidè 20-7-2026 — geen outlines/kaders rond foto's, site-breed. Alleen de foto-FRAMES worden kaal (border + box-shadow weg); afgeronde hoeken blijven. Kaarten, knoppen en formulieren houden hun schaduw ongemoeid. ============================================================================= */ .sf-thuisenzorg [data-sf-block^="sf-"] .sf-media-frame--tembe, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-img, .sf-thuisenzorg [data-sf-block="sf-service-overview"] .overview-media, .feature-media img, .waarden-photo img { border: none !important; box-shadow: none !important; }