.hk-reviews {
background: #eef5f2;
padding: 50px 24px 42px;
box-sizing: border-box;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.hk-reviews__header {
text-align: center;
margin-bottom: 52px;
}
.hk-reviews__eyebrow {
display: block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #567d71;
margin-bottom: 14px;
}
.hk-reviews__title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: 400;
color: #2f5e4e;
letter-spacing: 0.02em;
margin: 0 0 14px;
line-height: 1.25;
}
.hk-reviews__subtitle {
font-size: 13.5px;
color: #567d71;
letter-spacing: 0.02em;
line-height: 1.6;
margin: 0 0 24px;
}
.hk-reviews__rating-row {
display: flex;
justify-content: center;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.hk-reviews__rating-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hk-reviews__rating-stars {
color: #c9a84c;
font-size: 15px;
letter-spacing: 2px;
}
.hk-reviews__rating-meta {
font-size: 11.5px;
color: #6f978a;
letter-spacing: 0.03em;
}
.hk-reviews__rating-divider {
width: 1px;
height: 12px;
background: #b8d0c8;
margin: 0 10px;
}
.hk-reviews__flag {
width: 21px;
height: 14px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(47, 94, 78, 0.14);
vertical-align: -1px;
margin-right: 5px;
}
.hk-reviews__google-icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.hk-reviews__slider-outer {
overflow: hidden;
margin: 0 -6px;
padding: 8px 0 12px;
}
.hk-reviews__slider-track {
display: flex;
align-items: stretch;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.hk-reviews__card {
flex: 0 0 calc(33.333% - 12px);
margin: 0 6px;
background: #ffffff;
border-radius: 14px;
padding: 28px 24px 22px;
box-sizing: border-box;
display: flex;
flex-direction: column;
border: 1px solid rgba(47, 94, 78, 0.09);
box-shadow: 0 2px 16px rgba(47, 94, 78, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hk-reviews__tag {
display: inline-block;
background: #eef5f2;
color: #2f5e4e;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 14px;
border: 1px solid rgba(47, 94, 78, 0.18);
align-self: flex-start;
}
.hk-reviews__card-stars {
color: #c9a84c;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 14px;
}
.hk-reviews__text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 15px;
line-height: 1.78;
color: #2a3a35;
font-style: italic;
flex: 1;
margin: 0 0 22px;
}
.hk-reviews__guest {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.hk-reviews__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #d4e8e1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12.5px;
font-weight: 600;
color: #2f5e4e;
flex-shrink: 0;
user-select: none;
}
.hk-reviews__guest-name {
font-size: 13px;
font-weight: 600;
color: #2f5e4e;
display: block;
line-height: 1.3;
}
.hk-reviews__guest-country {
font-size: 11.5px;
color: #7aaa99;
display: flex;
align-items: center;
margin-top: 3px;
}
.hk-reviews__source {
border-top: 1px solid rgba(47, 94, 78, 0.09);
padding-top: 12px;
font-size: 11px;
color: #9ab8b0;
display: flex;
align-items: center;
gap: 5px;
}
.hk-reviews__source--google { color: #7aaa99; }
.hk-reviews__source--tidycal { color: #2f5e4e; font-weight: 600; }
.hk-reviews__nav {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 24px;
}
.hk-reviews__nav-btn {
width: 46px;
height: 46px;
border-radius: 50%;
border: 1.5px solid #2f5e4e;
background: transparent;
color: #2f5e4e;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: background 0.2s ease, color 0.2s ease;
line-height: 1;
padding: 0;
}
.hk-reviews__nav-btn:hover:not(:disabled) {
background: #2f5e4e;
color: #ffffff;
}
.hk-reviews__nav-btn:disabled {
border-color: #c0d4cc;
color: #c0d4cc;
cursor: not-allowed;
}
.hk-reviews__dots {
display: flex;
gap: 8px;
align-items: center;
}
.hk-reviews__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c0d0cb;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
border: none;
padding: 0;
}
.hk-reviews__dot--active {
background: #2f5e4e;
transform: scale(1.3);
}
.hk-reviews__cta {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 48px;
flex-wrap: wrap;
}
.hk-reviews__btn {
padding: 13px 30px;
border-radius: 8px;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
cursor: pointer;
border: 1.5px solid #2f5e4e;
box-sizing: border-box;
}
.hk-reviews__btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: #2f5e4e;
color: #ffffff;
}
.hk-reviews__btn--primary:hover {
background: #1e4a3a;
border-color: #1e4a3a;
color: #ffffff;
}
.hk-reviews__btn--google {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
background: #ffffff;
color: #2f5e4e;
}
.hk-reviews__btn--google:hover {
background: #f8fbfa;
border-color: #1e4a3a;
color: #1e4a3a;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
.hk-reviews__card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(47, 94, 78, 0.13);
}
.hk-reviews__btn:hover {
transform: translateY(-2px);
}
} @media (max-width: 1023px) {
.hk-reviews__card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 639px) {
.hk-reviews { padding: 34px 16px 30px; }
.hk-reviews__title { font-size: 24px; }
.hk-reviews__card { flex: 0 0 calc(100% - 12px); }
.hk-reviews__cta { flex-direction: column; align-items: center; }
.hk-reviews__btn { width: 100%; max-width: 280px; text-align: center; }
.hk-reviews__rating-divider { display: none; }
.hk-reviews__rating-row { gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
.hk-reviews__slider-track,
.hk-reviews__card,
.hk-reviews__nav-btn,
.hk-reviews__btn { transition: none; }
}