/* ========================================================= AU REVIEWS SECTION ========================================================= */ .au-reviews-section { width: 100%; box-sizing: border-box; padding: 65px 30px; background: #F8F8F5; } .au-reviews-section *, .au-reviews-section *::before, .au-reviews-section *::after { box-sizing: border-box; } /* ========================================================= MIDDLE GREY FRAME ========================================================= */ .au-reviews-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 48px 45px 42px; background: #E9E9E6; border-radius: 20px; } /* ========================================================= HEADER ========================================================= */ .au-reviews-header { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 30px; } .au-reviews-heading { flex: 1; min-width: 0; } .au-reviews-eyebrow { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #F4A261; } .au-reviews-heading h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 700; color: #363636; } .au-reviews-heading p { margin: 0; max-width: 650px; font-size: 14px; line-height: 1.7; color: #555555; } /* ========================================================= RATING SUMMARY ========================================================= */ .au-reviews-summary { flex: 0 0 auto; min-width: 205px; padding: 18px 22px; background: #FFFFFF; border: 1px solid #F4A261; border-radius: 14px; text-align: center; } .au-reviews-score { margin-bottom: 2px; font-size: 34px; line-height: 1; font-weight: 700; color: #363636; } .au-reviews-summary .au-reviews-stars { margin-bottom: 5px; font-size: 17px; letter-spacing: 2px; color: #F4A261; } .au-reviews-count { font-size: 11px; color: #777777; } /* ========================================================= SWIPE HINT ========================================================= */ .au-reviews-swipe-hint { display: none; } /* ========================================================= REVIEW GRID ========================================================= */ .au-reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; } /* ========================================================= REVIEW CARD ========================================================= */ .au-review-card { min-width: 0; display: flex; flex-direction: column; padding: 23px 22px 19px; background: #FFFFFF; border-radius: 14px; border: 1px solid #E2E2DF; transition: transform 0.25s ease, box-shadow 0.25s ease; } .au-review-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(54, 54, 54, 0.08); } /* ========================================================= USER ========================================================= */ .au-review-top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; } .au-review-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #363636; color: #FFFFFF; font-size: 15px; font-weight: 700; } .au-review-user { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .au-review-user strong { font-size: 13px; font-weight: 700; color: #363636; } .au-review-user span { font-size: 10px; color: #999999; } /* ========================================================= STARS ========================================================= */ .au-review-card > .au-review-stars { margin-bottom: 10px; font-size: 14px; letter-spacing: 1.5px; color: #F4A261; } /* ========================================================= REVIEW TEXT ========================================================= */ .au-review-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; font-weight: 700; color: #363636; } .au-review-card p { margin: 0; font-size: 13px; line-height: 1.7; color: #5F5F5F; } /* ========================================================= FOOTER ========================================================= */ .au-review-footer { margin-top: auto; padding-top: 16px; } .au-review-footer span { display: inline-block; font-size: 10px; font-weight: 600; color: #999999; } /* ========================================================= BOTTOM ========================================================= */ .au-reviews-bottom { margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(54, 54, 54, 0.10); text-align: center; } .au-reviews-bottom-stars { margin-bottom: 5px; font-size: 15px; letter-spacing: 2px; color: #F4A261; } .au-reviews-bottom p { margin: 0; font-size: 12px; color: #777777; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .au-reviews-section { padding: 45px 20px; } .au-reviews-container { padding: 35px 25px; } .au-reviews-header { gap: 25px; } .au-reviews-heading h2 { font-size: 28px; } .au-reviews-summary { min-width: 180px; } .au-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { /* Outer background */ .au-reviews-section { padding: 18px 12px 22px; background: #F8F8F5; } /* ------------------------------------------------------- Grey middle frame ------------------------------------------------------- */ .au-reviews-container { width: 100%; margin: 0; padding: 25px 16px 24px; background: #E9E9E6; border-radius: 16px; } /* ------------------------------------------------------- Header ------------------------------------------------------- */ .au-reviews-header { display: block; margin: 0 0 18px; } .au-reviews-heading { width: 100%; padding: 0; } .au-reviews-eyebrow { margin-bottom: 7px; font-size: 10px; letter-spacing: 1.8px; } .au-reviews-heading h2 { margin-bottom: 8px; font-size: 25px; line-height: 1.25; } .au-reviews-heading p { font-size: 12px; line-height: 1.65; } /* ------------------------------------------------------- White rating box Extra space from grey frame ------------------------------------------------------- */ .au-reviews-summary { width: 100%; margin-top: 17px; padding: 15px 18px; background: #FFFFFF; border-radius: 12px; } .au-reviews-score { font-size: 30px; } .au-reviews-summary .au-reviews-stars { font-size: 15px; } .au-reviews-count { font-size: 10px; } /* ------------------------------------------------------- Swipe hint ------------------------------------------------------- */ .au-reviews-swipe-hint { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 9px; padding: 0; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #777777; } .au-reviews-swipe-arrow { font-size: 15px; color: #F4A261; } /* ------------------------------------------------------- Mobile horizontal review slider ------------------------------------------------------- */ .au-reviews-grid { display: flex; flex-wrap: nowrap; width: 100%; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 0 0 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .au-reviews-grid::-webkit-scrollbar { display: none; } /* ------------------------------------------------------- White review cards Cards stay away from grey frame ------------------------------------------------------- */ .au-review-card { flex: 0 0 88%; width: 88%; min-width: 88%; padding: 20px 18px 18px; background: #FFFFFF; border-radius: 13px; border: 1px solid #E2E2DF; scroll-snap-align: start; } .au-review-card:hover { transform: none; box-shadow: none; } /* ------------------------------------------------------- User area ------------------------------------------------------- */ .au-review-top { gap: 10px; margin-bottom: 12px; } .au-review-avatar { flex-basis: 38px; width: 38px; height: 38px; font-size: 14px; } .au-review-user strong { font-size: 13px; } .au-review-user span { font-size: 9px; } /* ------------------------------------------------------- Review content ------------------------------------------------------- */ .au-review-card > .au-review-stars { margin-bottom: 9px; font-size: 13px; letter-spacing: 1.4px; } .au-review-card h3 { margin-bottom: 7px; font-size: 15px; line-height: 1.4; } .au-review-card p { font-size: 12px; line-height: 1.75; } /* ------------------------------------------------------- Footer ------------------------------------------------------- */ .au-review-footer { padding-top: 15px; } .au-review-footer span { font-size: 9px; } /* ------------------------------------------------------- Bottom ------------------------------------------------------- */ .au-reviews-bottom { margin: 18px 0 0; padding-top: 17px; } .au-reviews-bottom-stars { font-size: 13px; } .au-reviews-bottom p { font-size: 10px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .au-reviews-section { padding-left: 9px; padding-right: 9px; } .au-reviews-container { padding-left: 13px; padding-right: 13px; } .au-review-card { flex-basis: 91%; width: 91%; min-width: 91%; padding-left: 16px; padding-right: 16px; } .au-reviews-heading h2 { font-size: 23px; } }