.feedback-modern {
--feedback-blue: #104c9a;
--feedback-text: #1f2937;
--feedback-muted: #6b7280;
--feedback-border: rgba(16, 76, 154, 0.18);
--feedback-surface: #ffffff;
--feedback-soft: rgba(16, 76, 154, 0.06);
--feedback-soft-2: rgba(16, 76, 154, 0.11);
--mood-angry: red;
--mood-sad: orange;
--mood-neutral: yellow;
--mood-happy: lightgreen;
--mood-very-happy: green;
padding: 70px 20px 90px;
color: var(--feedback-text);
}
.feedback-shell {
width: min(1180px, 100%);
margin: 0 auto;
}
.feedback-hero-card,
.feedback-form,
.feedback-alert {
background: var(--feedback-surface);
border: 1px solid var(--feedback-border);
border-radius: 28px;
box-shadow: 0 22px 70px rgba(16, 76, 154, 0.12);
}
.feedback-hero-card {
position: relative;
overflow: hidden;
padding: 42px;
text-align: center;
isolation: isolate;
}
.feedback-hero-card::before,
.feedback-hero-card::after {
content: "";
position: absolute;
border-radius: 999px;
background: var(--feedback-soft);
pointer-events: none;
animation: feedbackFloat 8s ease-in-out infinite;
}
.feedback-hero-card::before {
width: 220px;
height: 220px;
top: -90px;
left: -70px;
}
.feedback-hero-card::after {
width: 260px;
height: 260px;
right: -110px;
bottom: -130px;
animation-delay: -2s;
}
.feedback-eyebrow {
position: relative;
z-index: 1;
margin: 0 0 12px;
color: var(--feedback-blue);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.feedback-hero-card h1 {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto 14px;
color: var(--feedback-blue) !important;
font-size: clamp(30px, 4vw, 52px);
line-height: 1.08;
font-weight: 800;
}
.feedback-lead {
position: relative;
z-index: 1;
margin: 0 auto;
color: var(--feedback-blue) !important;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 700;
}
.feedback-progress {
position: relative;
z-index: 1;
width: min(520px, 100%);
margin: 34px auto 0;
text-align: left;
}
.feedback-progress__top {
display: flex;
justify-content: space-between;
gap: 20px;
margin-bottom: 10px;
color: var(--feedback-blue);
font-size: 14px;
font-weight: 800;
}
.feedback-progress__track {
height: 11px;
overflow: hidden;
border-radius: 999px;
background: rgba(16, 76, 154, 0.12);
}
.feedback-progress__bar {
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(16, 76, 154, 0.7), rgba(16, 76, 154, 1));
transition: width 0.28s ease;
}
.feedback-alert {
margin: 24px 0;
padding: 18px 22px;
color: var(--feedback-blue);
font-size: 17px;
font-weight: 700;
text-align: center;
}
.feedback-alert--error {
color: red;
}
.feedback-form {
margin-top: 28px;
padding: 38px;
}
.feedback-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.feedback-card {
position: relative;
margin: 0;
padding: 26px 20px 22px;
border: 1px solid var(--feedback-border);
border-radius: 24px;
background: linear-gradient(180deg, rgba(16, 76, 154, 0.045), rgba(255, 255, 255, 0));
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.feedback-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at top center, rgba(16, 76, 154, 0.08), transparent 60%);
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.feedback-card:hover,
.feedback-card.is-selected {
transform: translateY(-4px);
border-color: rgba(16, 76, 154, 0.42);
box-shadow: 0 16px 42px rgba(16, 76, 154, 0.13);
}
.feedback-card:hover::after,
.feedback-card.is-selected::after {
opacity: 1;
}
.feedback-card.has-error {
border-color: red;
}
.feedback-card.is-mobile-current {
border-color: rgba(16, 76, 154, 0.44);
box-shadow: 0 16px 42px rgba(16, 76, 154, 0.15);
}
.feedback-card.is-answered::before {
content: "✓";
position: absolute;
top: 16px;
right: 16px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(16, 76, 154, 0.08);
color: var(--feedback-blue);
font-size: 14px;
font-weight: 800;
z-index: 1;
}
.feedback-card legend {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin: 0 0 22px;
padding: 0;
color: var(--feedback-blue) !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.25;
text-align: center;
}
.feedback-card__number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
border: 1px solid var(--feedback-border);
border-radius: 999px;
background: var(--feedback-surface);
color: var(--feedback-blue);
font-size: 13px;
font-weight: 800;
}
.emoji-container {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.emoji {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: black;
font-size: 38px;
line-height: 1;
cursor: pointer;
box-shadow: none;
transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}
.emoji:hover,
.emoji:focus-visible {
transform: translateY(-4px) scale(1.16);
filter: drop-shadow(0 10px 12px rgba(16, 76, 154, 0.18));
outline: none;
}
.emoji.is-active {
transform: translateY(-4px) scale(1.18);
filter: drop-shadow(0 12px 14px rgba(16, 76, 154, 0.2));
animation: feedbackBounce 0.34s ease;
}
.emoji.is-angry { color: var(--mood-angry); }
.emoji.is-sad { color: var(--mood-sad); }
.emoji.is-neutral { color: var(--mood-neutral); }
.emoji.is-happy { color: var(--mood-happy); }
.emoji.is-very-happy { color: var(--mood-very-happy); }
.selected-text {
min-height: 24px;
margin: 18px 0 0;
color: var(--feedback-muted);
font-size: 15px;
text-align: center;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.selected-text.is-visible {
opacity: 1;
transform: translateY(0);
}
.selected-text strong {
color: var(--feedback-blue);
}
.feedback-extra-grid {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 24px;
margin-top: 28px;
}
.feedback-field-card {
padding: 24px;
border: 1px solid var(--feedback-border);
border-radius: 24px;
background: #ffffff;
}
.feedback-field-card label {
display: block;
margin-bottom: 12px;
color: var(--feedback-blue) !important;
font-size: 20px !important;
font-weight: 800 !important;
}
.feedback-field-card label span {
color: var(--feedback-muted);
font-size: 14px;
font-weight: 700;
}
#feedback_email,
#feedback_note {
width: 100% !important;
max-width: 100%;
border: 1px solid var(--feedback-border);
border-radius: 18px;
background: #ffffff;
color: var(--feedback-text);
font-size: 16px;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#feedback_email { min-height: 54px; padding: 0 16px; }
#feedback_note { min-height: 140px; padding: 16px; resize: vertical; }
#feedback_email:focus,
#feedback_note:focus {
border-color: var(--feedback-blue);
box-shadow: 0 0 0 4px rgba(16, 76, 154, 0.1);
transform: translateY(-1px);
}
.feedback-help {
margin: 10px 0 0;
color: var(--feedback-muted);
font-size: 14px;
}
.feedback-error {
margin-top: 24px;
padding: 15px 18px;
border: 1px solid rgba(255, 0, 0, 0.35);
border-radius: 18px;
color: red;
font-weight: 800;
text-align: center;
}
.feedback-actions {
display: flex;
justify-content: center;
margin-top: 30px;
}
.feedback-submit {
position: relative;
float: none !important;
min-width: 190px;
min-height: 54px;
border-radius: 999px !important;
overflow: hidden;
}
.feedback-submit.is-loading {
pointer-events: none;
opacity: 0.85;
}
.feedback-submit__loader {
display: none;
width: 18px;
height: 18px;
margin-left: 10px;
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: #ffffff;
border-radius: 999px;
animation: feedbackSpin 0.8s linear infinite;
vertical-align: middle;
}
.feedback-submit.is-loading .feedback-submit__loader {
display: inline-block;
}
.feedback-hp {
position: absolute !important;
left: -99999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.separator-question,
.separator-feedback {
display: none;
}
@keyframes feedbackSpin { to { transform: rotate(360deg); } }
@keyframes feedbackFloat {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(0, 14px, 0) scale(1.04); }
}
@keyframes feedbackBounce {
0% { transform: translateY(0) scale(0.92); }
55% { transform: translateY(-8px) scale(1.23); }
100% { transform: translateY(-4px) scale(1.18); }
}
@media screen and (max-width: 1024px) {
.feedback-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 760px) {
.feedback-modern {
padding: 26px 12px 62px;
}
.feedback-hero-card,
.feedback-form,
.feedback-alert {
border-radius: 22px;
}
.feedback-hero-card {
padding: 26px 18px 22px;
}
.feedback-progress {
position: sticky;
top: 10px;
margin-top: 24px;
padding: 12px 14px;
border: 1px solid var(--feedback-border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 14px 28px rgba(16, 76, 154, 0.12);
backdrop-filter: blur(10px);
}
.feedback-form {
padding: 16px;
}
.feedback-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(100% - 8px);
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
margin: 0 -2px;
scrollbar-width: none;
}
.feedback-grid::-webkit-scrollbar {
display: none;
}
.feedback-card {
min-height: 250px;
padding: 24px 14px 20px;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.feedback-card legend {
min-height: 62px;
margin-bottom: 18px;
}
.feedback-card__number {
min-width: 32px;
height: 32px;
}
.emoji-container {
gap: 7px;
}
.emoji {
width: 46px;
height: 46px;
font-size: 33px;
}
.feedback-extra-grid {
grid-template-columns: 1fr;
gap: 14px;
margin-top: 20px;
}
.feedback-field-card {
padding: 18px;
border-radius: 20px;
}
.feedback-help {
font-size: 13px;
}
.feedback-actions {
position: sticky;
bottom: 10px;
z-index: 4;
padding-top: 8px;
}
.feedback-submit {
width: 100%;
max-width: none;
min-height: 58px;
box-shadow: 0 16px 32px rgba(16, 76, 154, 0.2);
}
}
@media screen and (max-width: 420px) {
.feedback-hero-card h1 {
font-size: 30px;
}
.feedback-lead {
font-size: 19px;
}
.feedback-card legend,
.feedback-field-card label {
font-size: 18px !important;
}
.emoji {
width: 42px;
height: 42px;
font-size: 30px;
}
}