.kd-feedback {
--kdf-navy: #082b4c;
--kdf-teal: #00767d;
--kdf-accent: #25b9b5;
--kdf-body: #35536e;
--kdf-line: #cbdde9;
box-sizing: border-box;
padding: clamp(36px, 5vw, 64px) 0;
background: linear-gradient(135deg, #f4f8fc, #edf7f8);
color: var(--kdf-body);
}
.kd-feedback *, .kd-feedback *::before, .kd-feedback *::after { box-sizing: border-box; }
.kd-feedback .kd-feedback-container {
width: min(1200px, calc(100% - 64px));
max-width: 1200px;
margin-inline: auto;
}
.kd-feedback .kd-feedback-container > h2 {
max-width: 920px;
margin: 0 0 12px;
color: var(--kdf-navy);
font-size: clamp(27px, 2.6vw, 38px);
line-height: 1.3;
letter-spacing: -.025em;
text-wrap: balance;
}
.kd-feedback .kd-feedback-container > p {
max-width: 860px;
margin: 0 0 28px;
color: var(--kdf-body);
font-size: 15px;
line-height: 1.85;
}
.kd-feedback .kd-feedback-container > p.kd-feedback-eyebrow {
margin: 0 0 10px;
color: var(--kdf-teal);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
}
.kd-feedback :is(h2, h3, p, a, figcaption) { overflow-wrap: anywhere; }
.kd-feedback .kd-feedback-items { display: grid; gap: 16px; margin: 0; }
.kd-feedback .kd-feedback-item {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: 24px;
align-items: start;
min-width: 0;
margin: 0;
}
.kd-feedback .kd-feedback-summary {
min-width: 0;
margin: 0;
padding: 24px;
border: 1px solid var(--kdf-line);
border-radius: 16px;
background: #fff;
box-shadow: 0 5px 18px #082b4c05;
}
.kd-feedback .kd-feedback-summary > h3 {
margin: 0;
color: var(--kdf-navy);
font-size: 19px;
line-height: 1.5;
font-weight: 750;
letter-spacing: -.018em;
}
.kd-feedback .kd-feedback-detail { margin: 15px 0 0; }
.kd-feedback .kd-feedback-detail > :first-child { margin-top: 0; }
.kd-feedback .kd-feedback-detail > :last-child { margin-bottom: 0; }
.kd-feedback .kd-feedback-detail p {
margin: 0 0 11px;
color: var(--kdf-body);
font-size: 14px;
line-height: 1.85;
}
.kd-feedback .kd-feedback-detail .kd-feedback-type {
display: inline-block;
margin-bottom: 13px;
padding: 4px 9px;
border: 1px solid #c3e4e6;
border-radius: 6px;
background: #f2fbfb;
color: #076773;
font-size: 12px;
font-weight: 650;
line-height: 1.6;
}
.kd-feedback .kd-feedback-detail .kd-feedback-result {
padding: 13px 15px;
border-left: 3px solid var(--kdf-accent);
border-radius: 0 8px 8px 0;
background: #fff;
color: var(--kdf-navy);
font-size: 15px;
font-weight: 650;
line-height: 1.75;
}
.kd-feedback .kd-feedback-detail .kd-feedback-date,
.kd-feedback .kd-feedback-detail .kd-feedback-note {
color: #4c667c;
font-size: 12px;
line-height: 1.8;
}
.kd-feedback .kd-feedback-detail .kd-feedback-period { color: #365b71; font-size: 13px; }
.kd-feedback .kd-feedback-detail :is(blockquote, .kd-feedback-quote) {
margin: 15px 0;
padding: 15px 16px;
border: 0;
border-left: 3px solid var(--kdf-accent);
border-radius: 0 9px 9px 0;
background: #fff;
color: #193e5b;
font-size: 15px;
font-style: normal;
line-height: 1.85;
}
.kd-feedback .kd-feedback-detail blockquote > :first-child { margin-top: 0; }
.kd-feedback .kd-feedback-detail blockquote > :last-child { margin-bottom: 0; }
.kd-feedback .kd-feedback-detail blockquote p { color: #193e5b; }
.kd-feedback .kd-feedback-copy {
margin: 15px 0 0;
padding: 14px 16px;
border-left: 3px solid var(--kdf-accent);
border-radius: 0 9px 9px 0;
background: #fff;
}
.kd-feedback .kd-feedback-copy p { color: #193e5b; }
.kd-feedback .kd-feedback-copy p:last-child { margin-bottom: 0; }
.kd-feedback .kd-feedback-detail :is(cite, .kd-feedback-role) { color: #3d6179; font-size: 12px; font-style: normal; line-height: 1.7; }
.kd-feedback .kd-feedback-person { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0; }
.kd-feedback .kd-feedback-person > p { margin: 0; }
.kd-feedback .kd-feedback-linkedin:empty { display: none; }
.editor-styles-wrapper .kd-feedback .kd-feedback-linkedin:empty { display: block; }
.kd-feedback a.kd-feedback-linkedin[href]:not([href=""]):not([href="#"]),
.kd-feedback .kd-feedback-linkedin a[href]:not([href=""]):not([href="#"]) {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 3px 5px;
border-radius: 5px;
color: #075d91;
font-size: 12px;
font-weight: 650;
line-height: 1.5;
text-decoration: none;
}
.kd-feedback a.kd-feedback-linkedin[href]:not([href=""]):not([href="#"])::before,
.kd-feedback .kd-feedback-linkedin a[href]:not([href=""]):not([href="#"])::before {
content: "in";
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 3px;
background: #0a66c2;
color: #fff;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: -.6px;
}
.kd-feedback a.kd-feedback-linkedin:hover,
.kd-feedback .kd-feedback-linkedin a:hover { background: #e8f2fb; }
.kd-feedback .kd-feedback-website a {
color: #006f82;
text-decoration: underline;
text-underline-offset: 3px;
}
.kd-feedback .kd-feedback-detail .wp-block-buttons { margin: 17px 0 0; gap: 10px; }
.kd-feedback .kd-feedback-detail .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
gap: 10px;
padding: 10px 16px;
border: 1px solid var(--kdf-navy);
border-radius: 8px;
background: var(--kdf-navy);
color: #fff;
font-size: 13px;
font-weight: 650;
line-height: 1.5;
text-decoration: none;
box-shadow: 0 4px 12px #082b4c0d;
}
.kd-feedback .kd-feedback-detail .wp-block-button__link:hover { background: #0d466f; border-color: #0d466f; color: #fff; }
.kd-feedback .kd-feedback-evidence {
min-width: 0;
margin: 0;
padding: clamp(15px, 2vw, 25px);
border: 1px solid #c4d9e7;
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 38px #082b4c08;
}
.kd-feedback .kd-feedback-evidence > :first-child { margin-top: 0; }
.kd-feedback .kd-feedback-evidence > :last-child { margin-bottom: 0; }
.kd-feedback .kd-feedback-evidence .wp-block-image { margin: 0; width: 100%; }
.kd-feedback .kd-feedback-evidence .wp-block-image > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 240px;
padding: 10px;
overflow: hidden;
border: 1px solid #e1eaf1;
border-radius: 10px;
background: #f6f9fc;
cursor: zoom-in;
}
.kd-feedback .kd-feedback-evidence .wp-block-image img {
display: block;
width: 100%;
max-width: 100%;
height: auto !important;
max-height: 390px;
margin: 0;
object-fit: contain !important;
border-radius: 5px;
}
.kd-feedback .kd-feedback-evidence figcaption,
.kd-feedback .kd-feedback-evidence .kd-feedback-note {
margin: 13px 0 0;
color: #4c667c;
font-size: 12px;
line-height: 1.85;
text-align: left;
}
.kd-feedback .kd-feedback-evidence > p:not(.kd-feedback-note) { margin: 13px 0 0; font-size: 13px; line-height: 1.85; }
.kd-feedback .kd-feedback-evidence figcaption a { color: #006f82; text-underline-offset: 3px; } .kd-feedback.is-enhanced .kd-feedback-items {
grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
column-gap: 26px;
row-gap: 13px;
align-items: start;
align-content: start;
}
.kd-feedback.is-enhanced .kd-feedback-item { display: contents; }
.kd-feedback.is-enhanced .kd-feedback-summary {
grid-column: 1;
grid-row: var(--kdf-item-row);
padding: 0;
overflow: hidden;
transition: border-color .18s ease, background-color .18s ease;
}
.kd-feedback.is-enhanced .kd-feedback-item.is-active .kd-feedback-summary {
border-color: #88c7cd;
background: linear-gradient(135deg, #eaf7f8, #f3f8fc);
box-shadow: inset 3px 0 0 var(--kdf-accent), 0 7px 20px #082b4c05;
}
.kd-feedback.is-enhanced .kd-feedback-summary:hover { border-color: #89b6c9; }
.kd-feedback.is-enhanced .kd-feedback-summary > h3 { margin: 0; }
.kd-feedback .kd-feedback-trigger {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 13px;
width: 100%;
min-height: 74px;
margin: 0;
padding: 21px 22px;
border: 0;
border-radius: 15px;
background: transparent;
color: var(--kdf-navy);
font: inherit;
line-height: inherit;
text-align: left;
box-shadow: none;
cursor: pointer;
}
.kd-feedback .kd-feedback-trigger:hover { background: #e8f3f84d; color: var(--kdf-navy); transform: none; }
.kd-feedback .kd-feedback-trigger-number {
flex: 0 0 auto;
color: #42748a;
font-size: 11px;
font-weight: 650;
letter-spacing: .07em;
}
.kd-feedback .kd-feedback-trigger-label { flex: 1; min-width: 0; }
.kd-feedback .kd-feedback-trigger-icon {
position: relative;
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
margin-left: auto;
border: 1px solid #accbd8;
border-radius: 50%;
background: #fff;
color: #1b5f77;
}
.kd-feedback .kd-feedback-trigger-icon::before,
.kd-feedback .kd-feedback-trigger-icon::after {
content: "";
position: absolute;
top: 11px;
left: 7px;
width: 9px;
height: 1.5px;
border-radius: 1px;
background: currentColor;
}
.kd-feedback .kd-feedback-trigger-icon::after { transform: rotate(90deg); transition: transform .18s ease; }
.kd-feedback .kd-feedback-trigger[aria-expanded="true"] .kd-feedback-trigger-icon { background: var(--kdf-navy); border-color: var(--kdf-navy); color: #fff; }
.kd-feedback .kd-feedback-trigger[aria-expanded="true"] .kd-feedback-trigger-icon::after { transform: rotate(0); }
.kd-feedback.is-enhanced .kd-feedback-detail { margin: 0; padding: 0 22px 23px; }
.kd-feedback.is-enhanced .kd-feedback-evidence {
grid-column: 2;
grid-row: 1 / span var(--kdf-item-count, 1);
align-self: start;
}
.kd-feedback.is-enhanced [hidden] { display: none !important; }
.kd-feedback :is(a, button):focus-visible { outline: 3px solid #007f8b; outline-offset: 4px; }
.kd-feedback .kd-feedback-trigger:focus-visible { outline-offset: -5px; } .kd-feedback-lightbox {
box-sizing: border-box;
width: min(1100px, calc(100vw - 36px));
max-width: none;
max-height: calc(100vh - 36px);
max-height: calc(100dvh - 36px);
margin: auto;
padding: 16px;
border: 1px solid #a8c7d8;
border-radius: 16px;
background: #fff;
color: #082b4c;
box-shadow: 0 24px 100px #02172850;
}
.kd-feedback-lightbox::backdrop { background: #041a30cc; }
.kd-feedback-lightbox .kd-feedback-lightbox-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 12px; }
.kd-feedback-lightbox .kd-feedback-lightbox-original { color: #006b81; font-size: 13px; line-height: 1.6; text-underline-offset: 3px; }
.kd-feedback-lightbox .kd-feedback-lightbox-close {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
min-height: 44px;
padding: 8px 13px;
border: 1px solid #aac7d8;
border-radius: 8px;
background: #edf5fa;
color: #082b4c;
font: inherit;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
}
.kd-feedback-lightbox .kd-feedback-lightbox-close:hover { background: #deedf6; }
.kd-feedback-lightbox figure { margin: 0; }
.kd-feedback-lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); margin: auto; object-fit: contain; }
.kd-feedback-lightbox figcaption { margin: 12px 0 0; color: #4c667c; font-size: 12px; line-height: 1.75; }
.kd-feedback-lightbox :is(button, a):focus-visible { outline: 3px solid #007f8b; outline-offset: 3px; } .editor-styles-wrapper .kd-feedback .kd-feedback-item { display: block; margin-bottom: 24px; }
.editor-styles-wrapper .kd-feedback .kd-feedback-summary { margin-bottom: 14px; }
.editor-styles-wrapper .kd-feedback .kd-feedback-items { display: block; }
@media (max-width: 1000px) {
.kd-feedback.is-enhanced .kd-feedback-items { column-gap: 18px; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.kd-feedback .kd-feedback-summary > h3 { font-size: 17px; }
.kd-feedback .kd-feedback-trigger { padding: 19px 17px; gap: 10px; }
.kd-feedback.is-enhanced .kd-feedback-detail { padding: 0 17px 19px; }
}
@media (max-width: 780px) {
.kd-feedback .kd-feedback-container { width: calc(100% - 36px); }
.kd-feedback .kd-feedback-container > p { font-size: 14px; margin-bottom: 23px; }
.kd-feedback .kd-feedback-item,
.kd-feedback.is-enhanced .kd-feedback-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
.kd-feedback.is-enhanced .kd-feedback-item { display: block; }
.kd-feedback.is-enhanced .kd-feedback-summary { grid-row: auto; }
.kd-feedback .kd-feedback-summary { padding: 20px; }
.kd-feedback.is-enhanced .kd-feedback-summary { padding: 0; }
.kd-feedback .kd-feedback-trigger { min-height: 68px; padding: 19px 18px; }
.kd-feedback.is-enhanced .kd-feedback-detail { padding: 0 18px 21px; }
.kd-feedback.is-enhanced .kd-feedback-evidence { margin-top: 11px; grid-row: auto; grid-column: auto; }
.kd-feedback .kd-feedback-evidence { padding: 13px; border-radius: 14px; }
.kd-feedback .kd-feedback-evidence .wp-block-image > a { min-height: 0; padding: 5px; }
.kd-feedback .kd-feedback-evidence .wp-block-image img { max-height: 400px; }
.kd-feedback .kd-feedback-evidence figcaption { margin-top: 10px; }
.kd-feedback-lightbox { width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); padding: 11px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.kd-feedback .kd-feedback-summary,
.kd-feedback .kd-feedback-trigger-icon::after { transition: none; }
}