/* Theme Name: Harmoneaz Calendar Theme Theme URI: https://harmoneaz.app Author: Dyad Description: A lightweight WordPress theme inspired by the Harmoneaz app layout, with a fixed header, footer, dark/light theme support, and a calendar-focused page template. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 8.0 Text Domain: harmoneaz-calendar-theme */ :root { --hm-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --hm-font-brand: "Montserrat", var(--hm-font-body); --hm-primary: #8a6f91; --hm-primary-strong: #745a7b; --hm-secondary: #7c916f; --hm-accent: #efaf1a; --hm-bg: hsl(288 13% 96%); --hm-surface: rgba(255, 255, 255, 0.82); --hm-surface-solid: #ffffff; --hm-surface-soft: rgba(255, 255, 255, 0.62); --hm-text: #1e1720; --hm-text-soft: #6d6171; --hm-border: rgba(138, 111, 145, 0.22); --hm-shadow: 0 16px 40px rgba(92, 70, 100, 0.08); --hm-radius: 22px; --hm-radius-sm: 14px; --hm-header-height: 92px; --hm-container: 1180px; --hm-header-photo-height: clamp(172px, calc(24vw + 32px), 292px); --hm-header-bg-light: rgba(255, 255, 255, 0.7); --hm-header-bg-dark: rgba(2, 6, 23, 0.55); } html[data-theme="dark"] { --hm-bg: hsl(288 13% 10%); --hm-surface: rgba(25, 19, 29, 0.82); --hm-surface-solid: #1c1620; --hm-surface-soft: rgba(31, 24, 36, 0.65); --hm-text: #f5f0f7; --hm-text-soft: #b6aabd; --hm-border: rgba(196, 171, 203, 0.18); --hm-shadow: 0 18px 44px rgba(0, 0, 0, 0.34); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--hm-font-body); color: var(--hm-text); background: radial-gradient(circle at top left, rgba(138, 111, 145, 0.12), transparent 32%), radial-gradient(circle at top right, rgba(124, 145, 111, 0.09), transparent 28%), var(--hm-bg); transition: background-color 0.25s ease, color 0.25s ease; } a { color: inherit; text-decoration: none; } a:hover { color: var(--hm-primary-strong); } img { max-width: 100%; height: auto; } button { font: inherit; } .harmo-brand-title { font-family: var(--hm-font-brand); font-weight: 500; letter-spacing: -0.02em; } .harmo-site { min-height: 100vh; } .harmo-container { width: min(calc(100% - 2rem), var(--hm-container)); margin: 0 auto; } .harmo-fixed-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; border-bottom: 1px solid var(--hm-border); background: var(--hm-header-bg-light); backdrop-filter: blur(18px); } html[data-theme="dark"] .harmo-fixed-header { background: var(--hm-header-bg-dark); } /* WordPress admin bar offset. WP duwt het hele 32px (of 46px op smalle schermen) omlaag wanneer een ingelogde gebruiker met admin-bar de site bekijkt. Elementen in de normale flow (zoals de header-foto) schuiven automatisch mee, maar position:fixed elementen blijven aan de viewport-top plakken — wat een gat veroorzaakt onder de fixed header. Hier brengen we alle fixed panelen evenveel omlaag, zodat alles weer netjes aansluit. */ body.admin-bar .harmo-fixed-header { top: 32px; } body.admin-bar .harmo-menu-panel { top: calc(var(--hm-header-height) - 0.2rem + 32px); } body.admin-bar [data-page-sidebar-panel], body.admin-bar[data-page-sidebar-direction="left"] [data-page-sidebar-panel] { top: calc(var(--hm-header-height) + 32px); } @media screen and (max-width: 782px) { body.admin-bar .harmo-fixed-header { top: 46px; } body.admin-bar .harmo-menu-panel { top: calc(var(--hm-header-height) - 0.2rem + 46px); } body.admin-bar [data-page-sidebar-panel], body.admin-bar[data-page-sidebar-direction="left"] [data-page-sidebar-panel] { top: calc(var(--hm-header-height) + 46px); } } .harmo-header-inner { min-height: var(--hm-header-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .harmo-header-photo { position: relative; margin-top: calc(var(--hm-header-height) - 1px); height: var(--hm-header-photo-height); overflow: hidden; border-bottom: 1px solid var(--hm-border); background: rgba(138, 111, 145, 0.08); } .harmo-header-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.22) 100%); pointer-events: none; } html[data-theme="dark"] .harmo-header-photo::after { background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.35) 100%); } .harmo-header-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .harmo-brand-link { display: inline-flex; align-items: center; gap: 0.9rem; min-width: 0; } .harmo-brand-link img, .harmo-footer-brand img { width: 52px; height: 52px; object-fit: contain; } .harmo-brand-text { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--hm-primary); white-space: nowrap; } .harmo-header-actions { display: flex; align-items: flex-start; gap: 0.75rem; } .harmo-header-stack { display: grid; gap: 0.45rem; align-items: stretch; justify-items: end; } .harmo-icon-button, .harmo-theme-toggle, .harmo-sidebar-toggle, .harmo-calendar-nav a, .harmo-button, .harmo-day-link { border: 1px solid var(--hm-border); background: var(--hm-surface-soft); color: var(--hm-text); border-radius: 999px; transition: 0.2s ease; } .harmo-icon-button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .harmo-sidebar-toggle { width: auto; min-height: 40px; height: auto; padding: 0.55rem 0.85rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.88rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; } .harmo-sidebar-toggle-text { display: inline; } .harmo-theme-toggle { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .harmo-menu-submenu { margin-bottom: 1rem; } .harmo-menu-submenu-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 44px; padding: 0.8rem 1rem; border: 1px solid var(--hm-border); border-radius: 16px; background: var(--hm-surface-soft); color: var(--hm-text); font-weight: 600; cursor: pointer; } .harmo-menu-submenu-summary::-webkit-details-marker { display: none; } .harmo-menu-submenu-current { color: var(--hm-text-soft); font-weight: 500; font-size: 0.92rem; } .harmo-menu-submenu-panel { display: grid; gap: 0.5rem; margin-top: 0.6rem; padding-left: 0.25rem; } .harmo-menu-option, .harmo-menu-theme-option { width: 100%; min-height: 40px; padding: 0.72rem 0.9rem; border: 1px solid var(--hm-border); border-radius: 14px; background: rgba(138, 111, 145, 0.06); color: var(--hm-text); text-align: left; text-decoration: none; cursor: pointer; transition: 0.2s ease; } .harmo-menu-option:hover, .harmo-menu-theme-option:hover { background: rgba(138, 111, 145, 0.12); border-color: rgba(138, 111, 145, 0.32); } .harmo-menu-option.is-active, .harmo-menu-theme-option.is-active, .harmo-menu-option[aria-current="true"] { background: rgba(138, 111, 145, 0.16); border-color: rgba(138, 111, 145, 0.38); font-weight: 700; } .harmo-menu-theme-option { width: 100%; min-height: 40px; padding: 0.72rem 0.9rem; border: 1px solid var(--hm-border); border-radius: 14px; background: rgba(138, 111, 145, 0.06); color: var(--hm-text); text-align: left; cursor: pointer; transition: 0.2s ease; } .harmo-menu-theme-option:hover { background: rgba(138, 111, 145, 0.12); border-color: rgba(138, 111, 145, 0.32); } .harmo-menu-theme-option.is-active { background: rgba(138, 111, 145, 0.16); border-color: rgba(138, 111, 145, 0.38); font-weight: 700; } .harmo-menu-submenu[open] .harmo-menu-submenu-summary { border-color: rgba(138, 111, 145, 0.32); } .harmo-menu-theme-toggle { width: 100%; min-height: 44px; padding: 0.8rem 1rem; border-radius: 16px; justify-content: flex-start; font-weight: 600; font-size: 0.95rem; } .harmo-menu-theme-toggle-label { display: inline; } .harmo-icon-button:hover, .harmo-theme-toggle:hover, .harmo-sidebar-toggle:hover, .harmo-calendar-nav a:hover, .harmo-button:hover, .harmo-day-link:hover { background: rgba(138, 111, 145, 0.14); border-color: rgba(138, 111, 145, 0.38); transform: translateY(-1px); } .harmo-hamburger { padding: 0; } .harmo-hamburger-bars, .harmo-hamburger-bars::before, .harmo-hamburger-bars::after { width: 18px; height: 2px; border-radius: 999px; background: currentColor; display: block; content: ""; transition: transform 0.2s ease, opacity 0.2s ease; } .harmo-hamburger-bars::before { transform: translateY(-6px); } .harmo-hamburger-bars::after { transform: translateY(4px); } body.menu-open .harmo-hamburger-bars { background: transparent; } body.menu-open .harmo-hamburger-bars::before { transform: translateY(0) rotate(45deg); } body.menu-open .harmo-hamburger-bars::after { transform: translateY(-2px) rotate(-45deg); } .harmo-menu-panel { position: fixed; top: calc(var(--hm-header-height) - 0.2rem); right: 1rem; width: min(88vw, 320px); padding: 1rem; background: var(--hm-surface-solid); border: 1px solid var(--hm-border); border-radius: 24px; box-shadow: var(--hm-shadow); transform: translateY(-0.5rem) scale(0.96); transform-origin: top right; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease; z-index: 999; } .harmo-menu-panel.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; } .harmo-menu-backdrop { display: none; } .harmo-page-sidebar-backdrop { position: fixed; inset: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 28; } .harmo-page-sidebar-backdrop.is-open { opacity: 0; pointer-events: none; } .harmo-menu-nav ul, .harmo-legal-links { list-style: none; padding: 0; margin: 0; } .harmo-menu-nav li + li { margin-top: 0.5rem; } .harmo-menu-nav a { display: block; padding: 0.9rem 1rem; border-radius: 16px; background: rgba(138, 111, 145, 0.06); border: 1px solid transparent; } .harmo-menu-nav a:hover { border-color: var(--hm-border); background: rgba(138, 111, 145, 0.12); } .harmo-menu-meta { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hm-border); color: var(--hm-text-soft); font-size: 0.95rem; } .harmo-menu-meta .harmo-theme-toggle { margin-bottom: 1rem; } .harmo-main { padding-top: calc(var(--hm-header-height) + 1.5rem); padding-bottom: 4rem; transition: padding-left 0.25s ease, padding-right 0.25s ease; } .harmo-main--with-header-photo { padding-top: 1.5rem; } .harmo-stack { display: grid; gap: 1.25rem; } /* Ruimere verticale ademruimte tussen top-level Gutenberg blokken binnen de homepage en pagina's met de builder-template. Zorgt dat Hero, Feature grid, CTA, Testimonial niet op elkaar plakken. */ .harmo-builder-content > * + *, .harmo-content-card .entry-content > * + * { margin-top: 2.5rem; } @media (max-width: 720px) { .harmo-builder-content > * + *, .harmo-content-card .entry-content > * + * { margin-top: 1.75rem; } } /* Patterns die door .harmo-builder-content gebruikt worden krijgen een eigen ademruimte zodat ze los staan ook al worden ze direct geplakt. */ .harmo-pattern-hero, .harmo-pattern-app-cta, .harmo-pattern-feature-grid, .harmo-pattern-testimonial, .harmo-pattern-text-card, .harmo-pattern-text-media, .harmo-pattern-callout { margin-top: 2.5rem; margin-bottom: 2.5rem; } .harmo-builder-content > .harmo-pattern-hero:first-child, .harmo-content-card .entry-content > .harmo-pattern-hero:first-child { margin-top: 0; } .harmo-card { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); backdrop-filter: blur(18px); } .harmo-card-body { padding: 1.2rem; } .harmo-card-header { padding: 1.1rem 1.2rem 0; } .harmo-card-title { margin: 0; font-size: 1rem; font-weight: 700; } .harmo-muted { color: var(--hm-text-soft); } .harmo-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 1.25rem; } .harmo-hero-badge, .harmo-home-highlight { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(138, 111, 145, 0.12); color: var(--hm-primary-strong); font-size: 0.9rem; font-weight: 600; } .harmo-page-title { margin: 0.8rem 0 0.35rem; font-size: clamp(1.6rem, 3.5vw, 2.3rem); line-height: 1.05; letter-spacing: -0.03em; } .harmo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .harmo-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.78rem 1rem; font-weight: 600; } .harmo-button--primary { background: var(--hm-primary); color: #fff; border-color: transparent; } .harmo-button--primary:hover { color: #fff; background: var(--hm-primary-strong); } .wpforms-container, .wpforms-container-full, div.wpforms-container-full { color: var(--hm-text); } .wpforms-container .wpforms-form, div.wpforms-container-full .wpforms-form { display: grid; gap: 1rem; } .wpforms-container .wpforms-title, .wpforms-container .wpforms-description, .wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-label-inline, .wpforms-container .wpforms-field-sublabel, .wpforms-container .wpforms-field-description, .wpforms-container .wpforms-confirmation-container, div.wpforms-container-full .wpforms-title, div.wpforms-container-full .wpforms-description, div.wpforms-container-full .wpforms-field-label, div.wpforms-container-full .wpforms-field-label-inline, div.wpforms-container-full .wpforms-field-sublabel, div.wpforms-container-full .wpforms-field-description, div.wpforms-container-full .wpforms-confirmation-container { color: var(--hm-text) !important; } .wpforms-container .wpforms-title, div.wpforms-container-full .wpforms-title { margin-bottom: 0.35rem; font-family: var(--hm-font-brand); font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; } .wpforms-container .wpforms-description, div.wpforms-container-full .wpforms-description, .wpforms-container .wpforms-field-description, .wpforms-container .wpforms-field-sublabel, div.wpforms-container-full .wpforms-field-description, div.wpforms-container-full .wpforms-field-sublabel { color: var(--hm-text-soft) !important; } .wpforms-container .wpforms-field, div.wpforms-container-full .wpforms-field { padding-top: 0 !important; padding-bottom: 1.2rem !important; } .wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-label-inline, div.wpforms-container-full .wpforms-field-label, div.wpforms-container-full .wpforms-field-label-inline { margin-bottom: 0.45rem !important; font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.4 !important; } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="url"], .wpforms-container input[type="tel"], .wpforms-container input[type="number"], .wpforms-container input[type="password"], .wpforms-container textarea, .wpforms-container select, div.wpforms-container-full input[type="text"], div.wpforms-container-full input[type="email"], div.wpforms-container-full input[type="url"], div.wpforms-container-full input[type="tel"], div.wpforms-container-full input[type="number"], div.wpforms-container-full input[type="password"], div.wpforms-container-full textarea, div.wpforms-container-full select { color: var(--hm-text) !important; background: var(--hm-surface-soft) !important; border: 1px solid var(--hm-border) !important; border-radius: 16px !important; min-height: 52px !important; padding: 0.85rem 1rem !important; font-size: 1.05rem !important; line-height: 1.4 !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; } .wpforms-container textarea, div.wpforms-container-full textarea { min-height: 140px !important; resize: vertical; } .wpforms-container select, div.wpforms-container-full select { cursor: pointer; /* Reset native browser styling — anders negeren Safari/Firefox de min-height, padding en font-size en blijft de select klein. */ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* Alleen family/weight overerven; font-size laten we komen uit de gedeelde input/textarea/select-regel hierboven, zodat alle velden gegarandeerd dezelfde tekstgrootte hebben. */ font-family: inherit !important; font-weight: inherit !important; /* Eigen chevron als achtergrond, want appearance:none verwijdert ook de standaard dropdown-pijl. SVG met primaire kleur #8a6f91. */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a6f91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 14px 14px !important; padding-right: 2.75rem !important; } /* Dropdown-opties leesbaar houden in dark mode (de native popup wordt door de OS gerenderd, maar background-color/color worden door de meeste browsers wél gehonoreerd). */ .wpforms-container select option, div.wpforms-container-full select option { color: var(--hm-text); background-color: var(--hm-surface-solid); } .wpforms-container input::placeholder, .wpforms-container textarea::placeholder, div.wpforms-container-full input::placeholder, div.wpforms-container-full textarea::placeholder { color: var(--hm-text-soft) !important; opacity: 1; } .wpforms-container input:focus, .wpforms-container textarea:focus, .wpforms-container select:focus, div.wpforms-container-full input:focus, div.wpforms-container-full textarea:focus, div.wpforms-container-full select:focus { border-color: rgba(138, 111, 145, 0.62) !important; background: var(--hm-surface-solid) !important; box-shadow: 0 0 0 4px rgba(138, 111, 145, 0.16) !important; outline: none !important; } /* Op focus bewaart de gedeelde regel hierboven alleen background-color (via de shorthand). We re-injecten de chevron specifiek voor select, zodat het pijltje niet wegvalt zodra de gebruiker 'm opent. */ .wpforms-container select:focus, div.wpforms-container-full select:focus { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a6f91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 14px 14px !important; } .wpforms-container input[type="checkbox"], .wpforms-container input[type="radio"], div.wpforms-container-full input[type="checkbox"], div.wpforms-container-full input[type="radio"] { accent-color: var(--hm-primary); } .wpforms-container .wpforms-list-inline, div.wpforms-container-full .wpforms-list-inline { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; } .wpforms-container .wpforms-field-checkbox li, .wpforms-container .wpforms-field-radio li, div.wpforms-container-full .wpforms-field-checkbox li, div.wpforms-container-full .wpforms-field-radio li { margin-bottom: 0.45rem !important; } .wpforms-container .wpforms-confirmation-container, div.wpforms-container-full .wpforms-confirmation-container { padding: 1rem 1.1rem !important; border: 1px solid rgba(124, 145, 111, 0.28) !important; border-radius: 18px !important; background: rgba(124, 145, 111, 0.12) !important; } .wpforms-container .wpforms-error, .wpforms-container label.wpforms-error, div.wpforms-container-full .wpforms-error, div.wpforms-container-full label.wpforms-error { color: #c55b72 !important; } .wpforms-container .wpforms-field input.wpforms-error, .wpforms-container .wpforms-field textarea.wpforms-error, .wpforms-container .wpforms-field select.wpforms-error, div.wpforms-container-full .wpforms-field input.wpforms-error, div.wpforms-container-full .wpforms-field textarea.wpforms-error, div.wpforms-container-full .wpforms-field select.wpforms-error { border-color: rgba(197, 91, 114, 0.6) !important; box-shadow: 0 0 0 4px rgba(197, 91, 114, 0.12) !important; } .wpforms-container button[type="submit"], .wpforms-container input[type="submit"], div.wpforms-container-full button[type="submit"], div.wpforms-container-full input[type="submit"] { min-height: 48px !important; padding: 0.82rem 1.2rem !important; font-weight: 600 !important; color: #fff !important; background: var(--hm-primary) !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important; } .wpforms-container button[type="submit"]:hover, .wpforms-container input[type="submit"]:hover, div.wpforms-container-full button[type="submit"]:hover, div.wpforms-container-full input[type="submit"]:hover { background: var(--hm-primary-strong) !important; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(138, 111, 145, 0.22) !important; } .wpforms-container button[type="submit"]:focus, .wpforms-container input[type="submit"]:focus, div.wpforms-container-full button[type="submit"]:focus, div.wpforms-container-full input[type="submit"]:focus { outline: none !important; box-shadow: 0 0 0 4px rgba(138, 111, 145, 0.18) !important; } html[data-theme="dark"] .wpforms-container, html[data-theme="dark"] .wpforms-container .wpforms-form, html[data-theme="dark"] .wpforms-container-full, html[data-theme="dark"] div.wpforms-container-full { color: var(--hm-text); } html[data-theme="dark"] .wpforms-container input[type="text"], html[data-theme="dark"] .wpforms-container input[type="email"], html[data-theme="dark"] .wpforms-container input[type="url"], html[data-theme="dark"] .wpforms-container input[type="tel"], html[data-theme="dark"] .wpforms-container input[type="number"], html[data-theme="dark"] .wpforms-container input[type="password"], html[data-theme="dark"] .wpforms-container textarea, html[data-theme="dark"] .wpforms-container select, html[data-theme="dark"] div.wpforms-container-full input[type="text"], html[data-theme="dark"] div.wpforms-container-full input[type="email"], html[data-theme="dark"] div.wpforms-container-full input[type="url"], html[data-theme="dark"] div.wpforms-container-full input[type="tel"], html[data-theme="dark"] div.wpforms-container-full input[type="number"], html[data-theme="dark"] div.wpforms-container-full input[type="password"], html[data-theme="dark"] div.wpforms-container-full textarea, html[data-theme="dark"] div.wpforms-container-full select { background: rgba(255, 255, 255, 0.06) !important; } .harmo-inline-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; } .harmo-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.95rem; border-radius: 999px; border: 1px solid var(--hm-border); background: rgba(138, 111, 145, 0.08); color: var(--hm-text); font-size: 0.95rem; } .harmo-home-hero { align-items: stretch; } .harmo-home-intro { max-width: 58ch; } .harmo-home-stats { display: grid; gap: 0.8rem; } .harmo-home-stat { display: grid; gap: 0.4rem; padding: 1rem; border: 1px solid rgba(138, 111, 145, 0.32); border-radius: 18px; background: rgba(138, 111, 145, 0.08); } .harmo-home-stat-value { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--hm-primary); color: #fff; font-weight: 700; } .harmo-home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .harmo-home-feature { min-width: 0; } .harmo-faq-section { overflow: hidden; } .harmo-faq-preview .harmo-card-body { display: grid; gap: 1rem; } .harmo-faq-preview--sidebar .harmo-card-header { padding-bottom: 0; } .harmo-faq-preview-title { margin: 0; } .harmo-faq-title { font-size: clamp(1.45rem, 2.8vw, 2.1rem); } .harmo-faq-intro { max-width: 62ch; } .harmo-faq-search-row { margin-top: 1rem; } .harmo-faq-search-input { width: 100%; min-height: 52px; padding: 0.85rem 1rem; border: 1px solid var(--hm-border); border-radius: 16px; background: var(--hm-surface-soft); color: var(--hm-text); font: inherit; } .harmo-faq-search-input::placeholder { color: var(--hm-text-soft); opacity: 1; } .harmo-faq-search-input:focus { outline: none; border-color: rgba(138, 111, 145, 0.62); background: var(--hm-surface-solid); box-shadow: 0 0 0 4px rgba(138, 111, 145, 0.16); } .harmo-faq-no-results { margin: 1rem 0 0; } .harmo-faq-list { display: grid; gap: 0.9rem; } .harmo-faq-item { border: 1px solid var(--hm-border); border-radius: 18px; background: rgba(255, 255, 255, 0.35); overflow: hidden; scroll-margin-top: calc(var(--hm-header-height) + 1.5rem); } html[data-theme="dark"] .harmo-faq-item { background: rgba(255, 255, 255, 0.03); } .harmo-faq-item.is-targeted { box-shadow: 0 0 0 3px rgba(138, 111, 145, 0.18); border-color: rgba(138, 111, 145, 0.45); } .harmo-faq-question { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1rem 1.1rem; font-weight: 700; } .harmo-faq-question::-webkit-details-marker { display: none; } .harmo-faq-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--hm-border); font-size: 1.1rem; line-height: 1; flex-shrink: 0; transition: transform 0.2s ease; } .harmo-faq-item[open] .harmo-faq-icon { transform: rotate(45deg); } .harmo-faq-answer { padding: 0 1.1rem 1.1rem; color: var(--hm-text-soft); } .harmo-faq-answer-content { display: flow-root; } .harmo-faq-answer-content > :first-child { margin-top: 0; } .harmo-faq-answer-content > :last-child { margin-bottom: 0; } .harmo-faq-answer-content p, .harmo-faq-answer-content ul, .harmo-faq-answer-content ol, .harmo-faq-answer-content blockquote, .harmo-faq-answer-content figure { line-height: 1.7; } .harmo-faq-answer-content img { display: block; max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--hm-border); } .harmo-faq-answer-content .alignleft { float: left; width: min(42%, 260px); margin: 0.25rem 1rem 0.85rem 0; } .harmo-faq-answer-content .alignright { float: right; width: min(42%, 260px); margin: 0.25rem 0 0.85rem 1rem; } .harmo-faq-answer-content .aligncenter { margin: 0.4rem auto 1rem; } .harmo-faq-answer-content .wp-caption, .harmo-faq-answer-content figure { max-width: 100%; } .harmo-faq-answer-image { margin-top: 0.9rem; } .harmo-faq-answer-image img { display: block; width: min(100%, 420px); border-radius: 16px; border: 1px solid var(--hm-border); } @media (max-width: 680px) { .harmo-faq-answer-content .alignleft, .harmo-faq-answer-content .alignright, .harmo-faq-answer-content .aligncenter { float: none; width: 100%; margin: 0.4rem 0 1rem; } } .harmo-faq-modal-open { overflow: hidden; } .harmo-faq-modal-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1rem; background: rgba(17, 24, 39, 0.55); backdrop-filter: blur(6px); } .harmo-faq-modal { position: relative; width: min(760px, 100%); max-height: min(85vh, 860px); overflow: auto; padding: 1.4rem; border: 1px solid var(--hm-border); border-radius: 24px; background: var(--hm-surface-solid); color: var(--hm-text); box-shadow: var(--hm-shadow); } .harmo-faq-modal-title { margin: 0 2.5rem 1rem 0; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.25; } .harmo-faq-modal-close { position: absolute; top: 0.85rem; right: 0.85rem; width: 2.25rem; height: 2.25rem; border: 1px solid var(--hm-border); border-radius: 999px; background: var(--hm-surface-soft); color: var(--hm-text); font-size: 1.4rem; line-height: 1; cursor: pointer; } .harmo-faq-modal-content { color: var(--hm-text-soft); } .harmo-faq-modal-content > :first-child { margin-top: 0; } .harmo-faq-modal-content > :last-child { margin-bottom: 0; } .harmo-faq-modal-content img { max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--hm-border); } .harmo-faq-modal-content .alignleft { float: left; width: min(42%, 260px); margin: 0.25rem 1rem 0.85rem 0; } .harmo-faq-modal-content .alignright { float: right; width: min(42%, 260px); margin: 0.25rem 0 0.85rem 1rem; } .harmo-faq-modal-content .aligncenter { display: block; margin: 0.4rem auto 1rem; } @media (max-width: 680px) { .harmo-faq-modal { padding: 1rem; border-radius: 18px; } .harmo-faq-modal-content .alignleft, .harmo-faq-modal-content .alignright, .harmo-faq-modal-content .aligncenter { float: none; width: 100%; margin: 0.4rem 0 1rem; } } .harmo-faq-preview-actions { display: flex; justify-content: flex-start; } .harmo-page-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .harmo-page-layout.has-sidebar, .harmo-page-layout:has(.harmo-page-sidebar) { grid-template-columns: minmax(0, 1fr); } .harmo-page-main, .harmo-page-sidebar, .harmo-builder-shell { min-width: 0; } .harmo-page-layout .harmo-page-main, .harmo-page-layout .harmo-builder-shell { width: 100%; } /* Ensure standalone content cards (like the 'Jouw content' block) match the container inner width by using full width inside the surrounding .harmo-container. Avoid re-applying the container max width to prevent double-padding that made these blocks appear narrower. */ .harmo-content-card { width: 100%; } [data-page-sidebar-panel] { position: fixed; top: var(--hm-header-height); right: 0; bottom: 0; left: auto; width: min(92vw, 380px); padding: 1rem; overflow: auto; background: var(--hm-surface-solid); border-left: 1px solid var(--hm-border); box-shadow: var(--hm-shadow); display: grid; gap: 1rem; align-content: start; transform: translateX(100%); pointer-events: none; transition: transform 0.25s ease; z-index: 997; } [data-page-sidebar-panel] .entry-content, [data-page-sidebar-panel] .harmo-muted, [data-page-sidebar-panel] .widget, [data-page-sidebar-panel] .wp-block-group, [data-page-sidebar-panel] .wp-block-paragraph { font-size: 0.94rem; } [data-page-sidebar-panel] .harmo-card { border-radius: 18px; } [data-page-sidebar-panel] .harmo-card-header { padding: 0.95rem 1rem 0; } [data-page-sidebar-panel] .harmo-card-body { padding: 1rem; } [data-page-sidebar-panel] .harmo-card-title, [data-page-sidebar-panel] .harmo-faq-preview-title { font-size: 0.96rem; } [data-page-sidebar-panel] .harmo-hero-badge, [data-page-sidebar-panel] .harmo-home-highlight, [data-page-sidebar-panel] .harmo-pill, [data-page-sidebar-panel] .harmo-tag { font-size: 0.76rem; padding: 0.32rem 0.68rem; } [data-page-sidebar-panel] .harmo-button, [data-page-sidebar-panel] .wp-block-button__link, [data-page-sidebar-panel] button, [data-page-sidebar-panel] input[type="submit"], [data-page-sidebar-panel] input[type="button"] { min-height: 40px; padding: 0.62rem 0.85rem; font-size: 0.86rem; } [data-page-sidebar-panel] .harmo-list { gap: 0.6rem; } [data-page-sidebar-panel] .harmo-list-item { padding: 0.72rem 0.8rem; border-radius: 14px; } [data-page-sidebar-panel] .harmo-faq-list { gap: 0.72rem; } [data-page-sidebar-panel] .harmo-faq-item { border-radius: 14px; } [data-page-sidebar-panel] .harmo-faq-question { padding: 0.82rem 0.92rem; font-size: 0.92rem; } [data-page-sidebar-panel] .harmo-faq-answer { padding: 0 0.92rem 0.92rem; } [data-page-sidebar-panel] .harmo-faq-answer-content .alignleft, [data-page-sidebar-panel] .harmo-faq-answer-content .alignright, [data-page-sidebar-panel] .harmo-faq-answer-content .aligncenter, [data-page-sidebar-panel] .harmo-faq-answer-image img { float: none; width: 100%; margin: 0.5rem 0 0; border-radius: 14px; } [data-page-sidebar-panel] .harmo-faq-icon { width: 1.8rem; height: 1.8rem; font-size: 1rem; } [data-page-sidebar-panel] input[type="text"], [data-page-sidebar-panel] input[type="email"], [data-page-sidebar-panel] input[type="url"], [data-page-sidebar-panel] input[type="tel"], [data-page-sidebar-panel] input[type="number"], [data-page-sidebar-panel] input[type="password"], [data-page-sidebar-panel] textarea, [data-page-sidebar-panel] select { min-height: 44px; padding: 0.72rem 0.88rem; font-size: 0.92rem; border-radius: 14px; } [data-page-sidebar-panel] textarea { min-height: 110px; } body[data-page-sidebar-direction="left"] [data-page-sidebar-panel] { top: var(--hm-header-height); right: auto; bottom: 0; left: 0; border-left: 0; border-right: 1px solid var(--hm-border); transform: translateX(-100%); } body.page-sidebar-open [data-page-sidebar-panel] { transform: translateX(0); pointer-events: auto; } body.page-sidebar-closed [data-page-sidebar-panel] { pointer-events: none; } @media (min-width: 961px) { body.page-sidebar-open:not([data-page-sidebar-direction="left"]) .harmo-main { padding-right: min(92vw, 380px); } body.page-sidebar-open[data-page-sidebar-direction="left"] .harmo-main { padding-left: min(92vw, 380px); } } @media (max-width: 1100px) { .harmo-home-grid { grid-template-columns: 1fr; } } @media (max-width: 960px) { .harmo-header-photo { --hm-header-photo-height: clamp(152px, calc(34vw + 32px), 222px); } .harmo-main--with-header-photo { padding-top: 1rem; } .harmo-hero, .harmo-calendar-layout, .harmo-page-layout.has-sidebar, .harmo-page-layout:has(.harmo-page-sidebar) { grid-template-columns: 1fr; } .harmo-sidebar-toggle { padding-inline: 0.7rem; font-size: 0.82rem; } .harmo-menu-panel { right: 0.85rem; width: min(90vw, 300px); } [data-page-sidebar-panel] { top: var(--hm-header-height); right: 0; bottom: 0; left: auto; width: min(90vw, 360px); padding: 0.85rem; } body[data-page-sidebar-direction="left"] [data-page-sidebar-panel] { left: 0; right: auto; } body.page-sidebar-open .harmo-main { padding-left: 0; padding-right: 0; } } @media (max-width: 782px) { .harmo-calendar-grid { gap: 0.45rem; } .harmo-day-link { min-height: 88px; padding: 0.6rem; border-radius: 16px; } .harmo-weekday { font-size: 0.76rem; } .harmo-day-number { font-size: 0.95rem; } .harmo-day-tags { gap: 0.25rem; } .harmo-tag { font-size: 0.68rem; padding: 0.26rem 0.45rem; } .harmo-builder-content > .alignwide, .entry-content > .alignwide { width: 100%; } } @media (max-width: 640px) { .harmo-container { width: min(calc(100% - 1rem), var(--hm-container)); } .harmo-header-inner { min-height: 82px; } .harmo-brand-link img, .harmo-footer-brand img { width: 46px; height: 46px; } .harmo-header-actions { gap: 0.5rem; } .harmo-icon-button, .harmo-theme-toggle { width: 40px; height: 40px; } .harmo-calendar-toolbar { flex-direction: column; align-items: flex-start; } .harmo-calendar-grid { gap: 0.35rem; } .harmo-day-link { min-height: 72px; padding: 0.5rem; } .harmo-day-tags { display: none; } .harmo-faq-question { padding: 0.9rem 1rem; } } .harmo-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .harmo-calendar-layout--single { grid-template-columns: minmax(0, 1fr); } body.page-sidebar-closed .harmo-calendar-layout:not(.harmo-calendar-layout--single) { grid-template-columns: minmax(0, 1fr); } .harmo-calendar-layout--sidebar-left > :first-child { order: 2; } .harmo-calendar-layout--sidebar-left > aside { order: 1; } .harmo-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; } .harmo-calendar-nav { display: flex; align-items: center; gap: 0.5rem; } .harmo-calendar-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.9rem; } .harmo-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.65rem; } .harmo-weekday { text-align: center; padding: 0.55rem 0; color: var(--hm-text-soft); font-size: 0.88rem; font-weight: 600; } .harmo-day-link { min-height: 118px; border-radius: 18px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.7rem; background: rgba(255, 255, 255, 0.42); } html[data-theme="dark"] .harmo-day-link { background: rgba(255, 255, 255, 0.03); } .harmo-day-link.is-today { border-color: rgba(124, 145, 111, 0.5); box-shadow: inset 0 0 0 1px rgba(124, 145, 111, 0.26); } .harmo-day-link.is-selected { background: rgba(138, 111, 145, 0.16); border-color: rgba(138, 111, 145, 0.5); } .harmo-day-link.is-outside { opacity: 0.52; } .harmo-day-number { font-size: 1rem; font-weight: 700; } .harmo-day-tags { display: grid; gap: 0.35rem; } .harmo-tag { display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; width: fit-content; max-width: 100%; border-radius: 999px; font-size: 0.74rem; line-height: 1.15; border: 1px solid var(--hm-border); background: rgba(138, 111, 145, 0.08); } .harmo-tag--secondary { background: rgba(124, 145, 111, 0.12); } .harmo-sidebar-stack { display: grid; gap: 1rem; } .harmo-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .harmo-list-item { padding: 0.85rem 0.95rem; border: 1px solid var(--hm-border); border-radius: 18px; background: rgba(138, 111, 145, 0.05); } .harmo-list-item strong { display: block; margin-bottom: 0.2rem; } .harmo-content-card .entry-content > *:first-child { margin-top: 0; } .harmo-content-card .entry-content > *:last-child { margin-bottom: 0; } .harmo-footer { padding: 1rem 0 2.5rem; } .harmo-footer-card { padding: 1.75rem 1.25rem; text-align: center; } .harmo-footer-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; } .harmo-footer-title { color: var(--hm-primary); font-size: 1rem; } .harmo-legal-links { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; font-size: 0.95rem; color: var(--hm-text-soft); } .harmo-legal-links .sep { opacity: 0.6; } .harmo-footer--minimal .harmo-footer-card { background: transparent; box-shadow: none; backdrop-filter: none; } .harmo-footer--minimal .harmo-footer-card { border-style: dashed; } /* Over-tekst onder het logo */ .harmo-footer-about { max-width: 56ch; margin: 0.75rem auto 0; color: var(--hm-text-soft); font-size: 0.95rem; line-height: 1.55; } /* Footer widget areas (drag & drop content via Weergave → Widgets) */ .harmo-footer-widgets { padding: 1.5rem 0 0; } .harmo-footer-widget-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; } @media (min-width: 720px) { .harmo-footer-widget-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .harmo-footer-widget-col { padding: 1.4rem 1.5rem; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius-sm); box-shadow: var(--hm-shadow); } .harmo-footer-widget + .harmo-footer-widget { margin-top: 1.2rem; } .harmo-footer-widget-title { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 700; color: var(--hm-primary); letter-spacing: 0.02em; } .harmo-footer-widget ul { list-style: none; margin: 0; padding: 0; } .harmo-footer-widget ul li + li { margin-top: 0.4rem; } .harmo-footer-widget a { color: var(--hm-text); text-decoration: none; transition: color 0.15s ease; } .harmo-footer-widget a:hover { color: var(--hm-primary); } /* Bottom bar onder de footer-card (social + copyright) */ .harmo-footer-bottom { padding: 1rem 0 0; } .harmo-footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hm-border); } .harmo-footer-copyright { font-size: 0.85rem; color: var(--hm-text-soft); } .harmo-footer-social { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .harmo-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(138, 111, 145, 0.10); color: var(--hm-primary-strong); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .harmo-footer-social-link:hover, .harmo-footer-social-link:focus-visible { background: var(--hm-primary); color: #fff; transform: translateY(-1px); } .harmo-footer-social-link:focus-visible { outline: 2px solid var(--hm-primary); outline-offset: 3px; } .harmo-footer-social-link svg { width: 18px; height: 18px; } @media (max-width: 540px) { .harmo-footer-bottom-inner { justify-content: center; text-align: center; } } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .harmo-content-card, .harmo-faq-section, .harmo-faq-preview:not(.harmo-faq-preview--sidebar) { width: 100%; max-width: none; margin-inline: 0; } .harmo-faq-section, .harmo-faq-preview:not(.harmo-faq-preview--sidebar) { box-sizing: border-box; } /* ===================== Chat Widget ===================== */ #harmo-chat-widget { position: fixed; bottom: 28px; right: 28px; z-index: 9999; font-family: var(--hm-font-body); } /* Zweefknop */ #harmo-chat-toggle { width: 56px; height: 56px; border-radius: 50%; background: var(--hm-primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(138, 111, 145, 0.45); transition: background 0.2s ease, transform 0.2s ease; margin-left: auto; } #harmo-chat-toggle:hover { background: var(--hm-primary-strong); transform: scale(1.07); } #harmo-chat-toggle svg { width: 22px; height: 22px; } /* Chatvenster */ #harmo-chat-box { display: none; flex-direction: column; position: absolute; bottom: 68px; right: 0; width: 340px; max-height: 480px; background: var(--hm-surface-solid); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow), 0 0 0 1px var(--hm-border); overflow: hidden; } #harmo-chat-box.harmo-chat-box--open { display: flex; } /* Header */ #harmo-chat-header { background: var(--hm-primary); color: #fff; padding: 14px 16px; } #harmo-chat-header-info { display: flex; align-items: center; gap: 10px; } #harmo-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } #harmo-chat-title { font-weight: 600; font-size: 14px; } #harmo-chat-subtitle { font-size: 12px; opacity: 0.85; margin-top: 1px; } /* Berichten */ #harmo-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--hm-bg); } .harmo-msg { display: flex; } .harmo-msg--user { justify-content: flex-end; } .harmo-msg--bot { justify-content: flex-start; } .harmo-msg-bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; } .harmo-msg--user .harmo-msg-bubble { background: var(--hm-primary); color: #fff; border-bottom-right-radius: 4px; } .harmo-msg--bot .harmo-msg-bubble { background: var(--hm-surface); color: var(--hm-text); border: 1px solid var(--hm-border); border-bottom-left-radius: 4px; } /* Typing animatie */ .harmo-typing { display: flex; align-items: center; gap: 5px; padding: 12px 14px; } .harmo-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-primary); opacity: 0.5; animation: harmo-bounce 1.2s infinite ease-in-out; } .harmo-typing span:nth-child(2) { animation-delay: 0.2s; } .harmo-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes harmo-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-6px); opacity: 1; } } /* Invoerveld */ #harmo-chat-input-area { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hm-border); background: var(--hm-surface-solid); } #harmo-chat-input { flex: 1; border: 1px solid var(--hm-border); border-radius: 20px; padding: 9px 14px; font-size: 13.5px; font-family: var(--hm-font-body); background: var(--hm-bg); color: var(--hm-text); outline: none; transition: border-color 0.2s; } #harmo-chat-input:focus { border-color: var(--hm-primary); } #harmo-chat-send { width: 36px; height: 36px; border-radius: 50%; background: var(--hm-primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } #harmo-chat-send:hover { background: var(--hm-primary-strong); } #harmo-chat-send:disabled { opacity: 0.5; cursor: not-allowed; } #harmo-chat-send svg { width: 15px; height: 15px; } /* Escalatieformulier */ .harmo-escalation-form { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: 12px; padding: 14px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; } .harmo-escalation-intro { font-size: 13px; color: var(--hm-text); margin: 0 0 4px; line-height: 1.4; } .harmo-escalation-name, .harmo-escalation-email { width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px; border: 1px solid var(--hm-border); border-radius: 8px; background: #fff; color: var(--hm-text); outline: none; transition: border-color 0.15s; } .harmo-escalation-name:focus, .harmo-escalation-email:focus { border-color: var(--hm-primary); } .harmo-escalation-submit { padding: 9px 14px; background: var(--hm-primary); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .harmo-escalation-submit:hover { background: var(--hm-primary-strong); } .harmo-escalation-submit:disabled { opacity: 0.6; cursor: not-allowed; } .harmo-escalation-success { font-size: 13px; color: #2d7a46; font-weight: 600; padding: 4px 0; } /* Responsive */ @media (max-width: 400px) { #harmo-chat-box { width: calc(100vw - 32px); right: -14px; } } /* ============================================================================= Harmoneaz Chat – Inline widget (shortcode / Gutenberg block) ============================================================================= */ .harmo-chat-inline-widget { display: flex; flex-direction: column; width: 100%; max-width: 560px; height: 520px; border: 1px solid var(--hm-border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.08); background: var(--hm-bg); margin: 0 auto 2rem; } /* Header */ .harmo-chat-inline-header { background: var(--hm-primary); color: #fff; padding: 14px 16px; flex-shrink: 0; } .harmo-chat-inline-header-info { display: flex; align-items: center; gap: 10px; } .harmo-chat-inline-avatar { width: 36px; height: 36px; background: rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .harmo-chat-inline-title { font-weight: 600; font-size: 14px; } .harmo-chat-inline-subtitle { font-size: 12px; opacity: .85; } /* Messages area */ .harmo-chat-inline-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; } /* Input area */ .harmo-chat-inline-input-area { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--hm-border); background: var(--hm-bg); flex-shrink: 0; } .harmo-chat-inline-input-area input[data-harmo="input"] { flex: 1; border: 1px solid var(--hm-border); border-radius: 20px; padding: 9px 14px; font-size: 14px; background: var(--hm-surface); color: var(--hm-text); outline: none; transition: border-color .15s; } .harmo-chat-inline-input-area input[data-harmo="input"]:focus { border-color: var(--hm-primary); } .harmo-chat-inline-input-area button[data-harmo="send"] { width: 36px; height: 36px; flex-shrink: 0; background: var(--hm-primary); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .harmo-chat-inline-input-area button[data-harmo="send"]:hover { background: var(--hm-primary-strong); } .harmo-chat-inline-input-area button[data-harmo="send"]:disabled { opacity: .5; cursor: not-allowed; } .harmo-chat-inline-input-area button[data-harmo="send"] svg { width: 15px; height: 15px; } /* Responsive */ @media (max-width: 600px) { .harmo-chat-inline-widget { height: 420px; border-radius: 12px; } } /* ========================================================================= Blog / nieuws – cards, single post, archive header, paginatie ========================================================================= */ .harmo-archive-header .harmo-card-header { padding-bottom: 1.2rem; } .harmo-archive-description { margin-top: 0.5rem; } .harmo-search-term { color: var(--hm-primary); font-weight: 600; } /* Grid van blog cards */ .harmo-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; } @media (min-width: 720px) { .harmo-post-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } /* Individuele blog card */ .harmo-post-card { overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .harmo-post-card:hover, .harmo-post-card:focus-within { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(92, 70, 100, 0.14); border-color: rgba(138, 111, 145, 0.34); } .harmo-post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .harmo-post-card-link:focus-visible { outline: 2px solid var(--hm-primary); outline-offset: 2px; } .harmo-post-card-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(138, 111, 145, 0.08); } .harmo-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .harmo-post-card:hover .harmo-post-card-thumb img, .harmo-post-card:focus-within .harmo-post-card-thumb img { transform: scale(1.04); } .harmo-post-card-thumb--placeholder { background: radial-gradient(circle at 30% 30%, rgba(138, 111, 145, 0.18), transparent 60%), radial-gradient(circle at 70% 70%, rgba(124, 145, 111, 0.18), transparent 55%), rgba(138, 111, 145, 0.08); } .harmo-post-card-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; } .harmo-post-card-category { display: inline-flex; align-self: flex-start; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(124, 145, 111, 0.16); color: #4f6047; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } html[data-theme="dark"] .harmo-post-card-category { background: rgba(124, 145, 111, 0.22); color: #cbd9bf; } .harmo-post-card-title { margin: 0; font-size: 1.15rem; line-height: 1.25; font-weight: 700; color: var(--hm-text); } .harmo-post-card-excerpt { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--hm-text-soft); } .harmo-post-card-meta { margin-top: auto; padding-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--hm-text-soft); } .harmo-post-card-sep { opacity: 0.5; } /* Single post */ .harmo-post-single-categories { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-size: 0.85rem; color: var(--hm-primary-strong); margin-bottom: 0.4rem; } .harmo-post-single-categories a { color: var(--hm-primary-strong); text-decoration: none; } .harmo-post-single-categories a:hover { text-decoration: underline; } .harmo-post-single-meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; font-size: 0.95rem; color: var(--hm-text-soft); } .harmo-post-single-meta-sep { opacity: 0.5; } .harmo-post-single-featured { margin: 0; border-bottom: 1px solid var(--hm-border); } .harmo-post-single-featured img { width: 100%; height: auto; display: block; } .harmo-post-single-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--hm-border); } .harmo-post-single-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; } .harmo-post-single-tags li { display: inline-flex; } .harmo-post-single-tags a { padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(138, 111, 145, 0.1); color: var(--hm-primary-strong); font-size: 0.82rem; text-decoration: none; } .harmo-post-single-tags a:hover { background: rgba(138, 111, 145, 0.18); } .harmo-post-single-share { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--hm-text-soft); } .harmo-post-single-share-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(138, 111, 145, 0.1); color: var(--hm-primary-strong); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .harmo-post-single-share-link:hover { background: var(--hm-primary); color: #fff; transform: translateY(-1px); } /* Vorige / volgende artikel */ .harmo-post-nav { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1rem; } @media (min-width: 720px) { .harmo-post-nav { grid-template-columns: 1fr 1fr; } } .harmo-post-nav-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.2rem; border-radius: var(--hm-radius-sm); background: var(--hm-surface); border: 1px solid var(--hm-border); text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } .harmo-post-nav-item:hover { border-color: rgba(138, 111, 145, 0.4); transform: translateY(-1px); } .harmo-post-nav-direction { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hm-primary-strong); } .harmo-post-nav-title { font-weight: 600; font-size: 0.98rem; } .harmo-post-nav-next { text-align: right; } .harmo-post-nav-spacer { background: none; border: none; } /* Paginatie */ .harmo-pagination { margin-top: 1.5rem; display: flex; justify-content: center; } .harmo-pagination-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; } .harmo-pagination-list .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 0.65rem; border-radius: 999px; background: var(--hm-surface); border: 1px solid var(--hm-border); color: var(--hm-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .harmo-pagination-list .page-numbers:hover { border-color: rgba(138, 111, 145, 0.4); color: var(--hm-primary-strong); } .harmo-pagination-list .page-numbers.current { background: var(--hm-primary); color: #fff; border-color: var(--hm-primary); } .harmo-pagination-list .page-numbers.dots { background: transparent; border-color: transparent; } /* ========================================================================= Skip-to-content link (toegankelijkheid) ========================================================================= */ .harmo-skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10000; padding: 0.6rem 1rem; background: var(--hm-primary); color: #fff; border-radius: 999px; font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .harmo-skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; } #harmo-main-content:focus { outline: none; } /* ========================================================================= Search form (huisstijl) ========================================================================= */ .harmo-search-form-inner { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem 0.4rem 0.9rem; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: 999px; box-shadow: var(--hm-shadow); } .harmo-search-form-inner:focus-within { border-color: var(--hm-primary); box-shadow: 0 0 0 3px rgba(138, 111, 145, 0.18); } .harmo-search-form-icon { display: inline-flex; align-items: center; color: var(--hm-text-soft); flex-shrink: 0; } .harmo-search-form-input { flex: 1; border: none; background: transparent; padding: 0.5rem 0; font: inherit; color: var(--hm-text); min-width: 0; } .harmo-search-form-input:focus { outline: none; } .harmo-search-form-submit { flex-shrink: 0; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--hm-primary); color: #fff; border: 1px solid var(--hm-primary); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .harmo-search-form-submit:hover { background: var(--hm-primary-strong); transform: translateY(-1px); } /* ========================================================================= 404 pagina ========================================================================= */ .harmo-404-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.4rem; } .harmo-404-search { padding-top: 1.2rem; border-top: 1px solid var(--hm-border); } .harmo-404-search p { margin: 0 0 0.6rem; color: var(--hm-text-soft); } /* Ghost button (gebruikt in 404 en andere CTAs) */ .harmo-button--ghost { background: transparent; color: var(--hm-primary-strong); border: 1px solid var(--hm-border); } .harmo-button--ghost:hover { border-color: var(--hm-primary); color: var(--hm-primary); } /* ========================================================================= Block patterns – herbruikbare componenten ========================================================================= */ /* App download CTA — Gutenberg pattern wrapper. .wp-block-group prefix verhoogt specificiteit naar (0,2,0) zodat onze display:grid wint van WordPress's .wp-block-group.is-layout-flow regel. Layout: één gecentreerde kolom op alle schermen, zodat de heading, paragraaf én badges altijd netjes op de pagina-as uitlijnen. */ .wp-block-group.harmo-pattern-app-cta, .harmo-pattern-app-cta { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; padding: 2rem; text-align: center; background: radial-gradient(circle at 20% 0%, rgba(138, 111, 145, 0.18), transparent 55%), radial-gradient(circle at 80% 100%, rgba(124, 145, 111, 0.18), transparent 55%), var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); } /* De inner group met heading + paragraaf — vol breedte binnen de kolom, maar inhoud blijft via text-align gecentreerd. Max-width voorkomt te lange regels op brede schermen. */ .harmo-pattern-app-cta > .wp-block-group { width: 100%; max-width: 640px; text-align: center; } /* Zorg dat de heading en paragraaf ook werkelijk gecentreerd staan binnen de pattern-card, ongeacht globale block-stijlen. */ .harmo-pattern-app-cta > .wp-block-group > .wp-block-heading, .harmo-pattern-app-cta > .wp-block-group > p { text-align: center; margin-left: auto; margin-right: auto; } /* Centreer het badges grid-item én de badges erin op alle schermen */ .harmo-pattern-app-cta .harmo-app-badges { justify-self: center; justify-content: center; width: 100%; } .harmo-pattern-app-cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .harmo-pattern-app-cta-buttons .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none; } /* App store badge knoppen — donkere "Download in de App Store" stijl. Gebruikt in de App Download CTA pattern. */ .harmo-app-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; } .harmo-app-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1.1rem 0.55rem 0.85rem; background: #000; color: #fff; border-radius: 12px; text-decoration: none; min-height: 56px; border: 1px solid #000; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .harmo-app-badge:hover, .harmo-app-badge:focus-visible { background: #1a1a1a; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); } .harmo-app-badge:focus-visible { outline: 2px solid var(--hm-primary); outline-offset: 3px; } .harmo-app-badge svg { width: 28px; height: 28px; flex-shrink: 0; } .harmo-app-badge-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-align: left; } .harmo-app-badge-text small { font-size: 0.72rem; opacity: 0.85; margin-bottom: 3px; font-weight: 400; letter-spacing: 0.01em; } .harmo-app-badge-text strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } /* Light variant voor gebruik op een donkere achtergrond (optioneel) */ .harmo-app-badge--light { background: #fff; color: #1e1720; border-color: rgba(0, 0, 0, 0.12); } .harmo-app-badge--light:hover, .harmo-app-badge--light:focus-visible { background: #f7f7f8; color: #1e1720; } /* Officiële Apple/Google badges (image-versie) — wordt gebruikt zodra /assets/badges/app-store-*.svg en google-play-*.png bestaan. */ .harmo-app-badge-link { display: inline-flex; align-items: center; justify-content: center; line-height: 0; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease; border-radius: 10px; } .harmo-app-badge-link:hover, .harmo-app-badge-link:focus-visible { transform: translateY(-1px); filter: brightness(1.05); } .harmo-app-badge-link:focus-visible { outline: 2px solid var(--hm-primary); outline-offset: 4px; } .harmo-app-badge-link img { display: block; height: 56px; width: auto; max-width: 100%; } /* Iets ruimere klikgebied + gelijke hoogte ongeacht of badges image of SVG fallback zijn. */ .harmo-app-badges > a { min-height: 56px; } /* Uitlijning helpers — gebruikt via shortcode [harmoneaz_app_badges align="center"] */ .harmo-app-badges--center { justify-content: center; } .harmo-app-badges--right { justify-content: flex-end; } /* Feature grid — Gutenberg columns */ .harmo-pattern-feature-grid { margin: 0 auto; } .harmo-pattern-feature-card { padding: 1.4rem 1.4rem 1.6rem; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius-sm); box-shadow: var(--hm-shadow); height: 100%; } .harmo-pattern-feature-card .harmo-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(138, 111, 145, 0.14); color: var(--hm-primary); font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; } .harmo-pattern-feature-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; } .harmo-pattern-feature-card p { margin: 0; color: var(--hm-text-soft); line-height: 1.55; } /* Hero pattern */ .harmo-pattern-hero { display: grid; gap: 1rem; padding: 2.4rem 2rem; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(138, 111, 145, 0.18), transparent 60%), var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); } .harmo-pattern-hero .wp-block-buttons { justify-content: center; } /* Tekstblok (1 kolom card) pattern. Dubbele class selector verhoogt specificity zodat hij wint van WordPress' eigen layout-CSS rules op de Group. */ .harmo-pattern-text-card.harmo-pattern-text-card { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); } .harmo-pattern-text-card .harmo-text-label { align-self: flex-start; } /* Reset alle margins op direct children — gap geeft de spacing. Dubbele class verhoogt specificity zodat WordPress' is-layout-flow margin-block-start rules niets toevoegen. */ .harmo-pattern-text-card.harmo-pattern-text-card > * { margin-block-start: 0; margin-block-end: 0; } .harmo-pattern-text-card h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.2; letter-spacing: -0.01em; } .harmo-pattern-text-card p { line-height: 1.65; color: var(--hm-text); } /* Klein gekleurd label boven een tekstblok of feature uitleg. Gebruikt in Tekstblok (1 kolom) en Tekst + afbeelding patterns. */ .harmo-text-label { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(138, 111, 145, 0.12); color: var(--hm-primary-strong); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } html[data-theme="dark"] .harmo-text-label { background: rgba(196, 171, 203, 0.18); color: #d4bdda; } /* Tekst + afbeelding (2 kolommen) pattern */ .harmo-pattern-text-media { gap: 2rem; align-items: center; } .harmo-pattern-text-media .wp-block-column.wp-block-column { display: flex; flex-direction: column; gap: 1.25rem; } .harmo-pattern-text-media .wp-block-column .harmo-text-label { align-self: flex-start; } /* Margin-reset op kolom-children zodat alleen gap de spacing bepaalt. */ .harmo-pattern-text-media .wp-block-column.wp-block-column > * { margin-block-start: 0; margin-block-end: 0; } .harmo-pattern-text-media h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; } .harmo-pattern-text-media p { margin: 0; line-height: 1.65; color: var(--hm-text); } .harmo-pattern-text-media-image img { border-radius: var(--hm-radius); display: block; width: 100%; height: auto; box-shadow: var(--hm-shadow); } @media (max-width: 720px) { .harmo-pattern-text-media { gap: 1.5rem; } } /* Highlight callout pattern */ .harmo-pattern-callout.harmo-pattern-callout { display: flex; flex-direction: column; gap: 0.6rem; position: relative; padding: 1.4rem 1.6rem 1.4rem 1.8rem; background: rgba(138, 111, 145, 0.08); border-radius: var(--hm-radius-sm); border-left: 4px solid var(--hm-primary); } .harmo-pattern-callout.harmo-pattern-callout > * { margin-block-start: 0; margin-block-end: 0; } .harmo-pattern-callout .harmo-callout-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--hm-primary-strong); display: flex; align-items: center; gap: 0.5rem; } .harmo-pattern-callout p { margin: 0; line-height: 1.6; color: var(--hm-text); } html[data-theme="dark"] .harmo-pattern-callout { background: rgba(196, 171, 203, 0.10); border-left-color: #c4abcb; } html[data-theme="dark"] .harmo-pattern-callout .harmo-callout-title { color: #d4bdda; } /* Variant-kleuren voor de callout — pas in de editor de class harmo-pattern-callout--success / --warning / --danger / --info toe op de Group, of wijzig achtergrond via de color picker. */ .harmo-pattern-callout--success { background: rgba(34, 197, 94, 0.10); border-left-color: #22C55E; } .harmo-pattern-callout--success .harmo-callout-title { color: #1a8344; } .harmo-pattern-callout--warning { background: rgba(239, 175, 26, 0.12); border-left-color: #EFAF1A; } .harmo-pattern-callout--warning .harmo-callout-title { color: #8a6112; } .harmo-pattern-callout--danger { background: rgba(239, 68, 68, 0.10); border-left-color: #EF4444; } .harmo-pattern-callout--danger .harmo-callout-title { color: #b32a2a; } .harmo-pattern-callout--info { background: rgba(14, 165, 233, 0.10); border-left-color: #0EA5E9; } .harmo-pattern-callout--info .harmo-callout-title { color: #0B6E9C; } html[data-theme="dark"] .harmo-pattern-callout--success .harmo-callout-title { color: #7adf99; } html[data-theme="dark"] .harmo-pattern-callout--warning .harmo-callout-title { color: #f4c863; } html[data-theme="dark"] .harmo-pattern-callout--danger .harmo-callout-title { color: #f5908b; } html[data-theme="dark"] .harmo-pattern-callout--info .harmo-callout-title { color: #6dc7f0; } /* Testimonial pattern */ .harmo-pattern-testimonial { padding: 2rem; background: var(--hm-surface); border-left: 4px solid var(--hm-primary); border-radius: var(--hm-radius-sm); box-shadow: var(--hm-shadow); position: relative; } .harmo-pattern-testimonial::before { content: "\201C"; position: absolute; top: -0.5rem; left: 1rem; font-size: 4rem; font-family: Georgia, serif; color: rgba(138, 111, 145, 0.32); line-height: 1; pointer-events: none; } .harmo-pattern-testimonial blockquote, .harmo-pattern-testimonial .wp-block-quote { margin: 0; padding: 0; border: none; background: transparent; } /* Forceer transparante achtergrond op alle tekst-elementen binnen de testimonial, ook als de editor of plak-actie uit Word/Google Docs een lichte highlight heeft achtergelaten. Gebruikt !important om ook inline styles en has-X-background-color classes te overrulen. */ .harmo-pattern-testimonial blockquote p, .harmo-pattern-testimonial .wp-block-quote p, .harmo-pattern-testimonial blockquote span, .harmo-pattern-testimonial .wp-block-quote span, .harmo-pattern-testimonial blockquote mark, .harmo-pattern-testimonial .wp-block-quote mark { background: transparent !important; background-color: transparent !important; color: var(--hm-text); } .harmo-pattern-testimonial cite { display: block; margin-top: 0.8rem; font-style: normal; font-weight: 600; color: var(--hm-primary-strong); background: transparent !important; } /* Donker thema: zachtere accentkleur voor het quote-symbool, en zorg dat de tekst goed leesbaar blijft. */ html[data-theme="dark"] .harmo-pattern-testimonial::before { color: rgba(196, 171, 203, 0.32); } html[data-theme="dark"] .harmo-pattern-testimonial blockquote p, html[data-theme="dark"] .harmo-pattern-testimonial .wp-block-quote p { color: var(--hm-text); }