/* ═══════════════════════════════════════════════════════════════════════════════
GLOBAL CSS — HOT TUB BUYER
Add in :
═══════════════════════════════════════════════════════════════════════════════ */
/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────────── */
:root {
--teal: #00a896;
--teal-dk: #007f73;
--teal-lt: #00c4b0;
--teal-xlt: #e6f7f5;
--teal-xxlt: #f0faf9;
--white: #ffffff;
--gray-50: #f8fafb;
--gray-100: #f1f5f4;
--gray-200: #e4eceb;
--gray-300: #c8d8d6;
--gray-400: #96b0ae;
--gray-500: #628280;
--gray-700: #2d4443;
--gray-900: #0f2423;
--dark-1: #0c1f1e;
--dark-2: #0a1918;
--font: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
--shadow-xs: 0 1px 3px rgba(0, 0, 0, .06);
--shadow-sm: 0 2px 10px rgba(0, 0, 0, .08);
--shadow-md: 0 4px 22px rgba(0, 0, 0, .11);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, .14);
--shadow-teal: 0 4px 20px rgba(0, 168, 150, .28);
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 24px;
--r-pill: 9999px;
--navbar-h: 70px;
--transition: all 0.25s ease;
}
/* ─── RESET ──────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
font-size: 16px;
color: var(--gray-700);
background: var(--white);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
margin: 0;
padding-top:68px; /* ← YEH ADD KARO */
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul,
ol {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: var(--font);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--gray-900);
font-weight: 700;
line-height: 1.2;
}
/* ═══════════════════════════════════════════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════════════════════════════════════════ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.container--wide {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.section {
padding: 5rem 2rem;
}
.section--sm {
padding: 3rem 2rem;
}
.section--lg {
padding: 6rem 2rem;
}
.section--white {
background: var(--white);
}
.section--gray {
background: var(--gray-50);
}
.section--teal {
background: var(--teal-xxlt);
}
.section--dark {
background: var(--dark-1);
}
.grid {
display: grid;
gap: 1.5rem;
}
.grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
grid-template-columns: repeat(4, 1fr);
}
/* ═══════════════════════════════════════════════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════════════════════════════════════════════ */
.section-label {
display: inline-block;
font-size: .74rem;
font-weight: 700;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: .6rem;
}
.section-title {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 800;
color: var(--gray-900);
margin-bottom: .4rem;
}
.section-subtitle {
font-size: .96rem;
color: var(--gray-500);
line-height: 1.65;
max-width: 560px;
margin: 0 auto 3rem;
}
.text-sm {
font-size: .875rem;
}
.text-xs {
font-size: .78rem;
}
.text-muted {
color: var(--gray-500);
}
.text-white {
color: var(--white) !important;
}
.text-teal {
color: var(--teal) !important;
}
.text-dark {
color: var(--gray-900) !important;
}
.text-center {
text-align: center;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
.fw-800 {
font-weight: 800;
}
/* Spacing */
.mt-1 {
margin-top: .25rem;
}
.mt-2 {
margin-top: .5rem;
}
.mt-3 {
margin-top: .75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mb-1 {
margin-bottom: .25rem;
}
.mb-2 {
margin-bottom: .5rem;
}
.mb-3 {
margin-bottom: .75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: .6rem 1.5rem;
font-family: var(--font);
font-size: .9rem;
font-weight: 700;
border: 2px solid transparent;
border-radius: var(--r-sm);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.btn--primary {
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-lt) 100%);
color: var(--white);
box-shadow: 0 3px 12px rgba(0, 168, 150, .30);
}
.btn--primary:hover {
background: linear-gradient(135deg, var(--teal-dk) 0%, var(--teal) 100%);
box-shadow: var(--shadow-teal);
transform: translateY(-2px);
color: var(--white);
}
.btn--ghost {
background: rgba(255, 255, 255, .15);
color: var(--white);
border-color: rgba(255, 255, 255, .50);
backdrop-filter: blur(6px);
}
.btn--ghost:hover {
background: rgba(255, 255, 255, .26);
color: var(--white);
transform: translateY(-2px);
}
.btn--outline {
background: transparent;
color: var(--teal);
border-color: var(--teal);
}
.btn--outline:hover {
background: var(--teal);
color: var(--white);
transform: translateY(-1px);
}
.btn--outline-white {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, .5);
}
.btn--outline-white:hover {
background: rgba(255, 255, 255, .15);
color: var(--white);
}
.btn--sm {
padding: .42rem 1rem;
font-size: .82rem;
}
.btn--lg {
padding: .8rem 2rem;
font-size: 1rem;
}
.btn--pill {
border-radius: var(--r-pill);
}
.btn--full {
width: 100%;
}
.btn--danger {
background: #ef4444;
color: #fff;
border-color: #ef4444;
}
.btn--danger:hover {
background: #dc2626;
border-color: #dc2626;
color: #fff;
transform: translateY(-1px);
}
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 36, 35, .45);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
}
.modal-backdrop.active {
display: flex;
}
.modal {
width: min(720px, 92vw);
background: var(--white);
border-radius: 18px;
box-shadow: var(--shadow-lg);
padding: 1.25rem 1.25rem 1rem;
border: 1px solid var(--gray-200);
}
.modal--sm {
width: min(420px, 92vw);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.modal-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--gray-900);
}
.modal-close {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gray-500);
}
.modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5rem;
margin-top: 1rem;
}
.icon-btn {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
background: transparent;
border: 1px solid var(--gray-200);
color: var(--gray-500);
transition: var(--transition);
text-decoration: none;
}
.icon-btn:hover {
background: var(--teal-xlt);
color: var(--teal);
border-color: var(--teal);
}
.icon-btn svg {
width: 14px;
height: 14px;
}
.btn-icon {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--gray-300);
background: var(--white);
color: var(--gray-500);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .95rem;
line-height: 1;
transition: border-color .2s, color .2s;
text-decoration: none;
}
.btn-icon:hover {
border-color: var(--teal);
color: var(--teal);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: .8125rem;
}
.table thead tr {
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
}
.table thead th {
padding: 11px 16px;
text-align: left;
font-size: .7rem;
font-weight: 700;
letter-spacing: .07em;
color: var(--gray-400);
text-transform: uppercase;
white-space: nowrap;
}
.table tbody tr {
border-bottom: 1px solid var(--gray-100);
transition: background .15s;
}
.table tbody tr:last-child {
border-bottom: none;
}
.table tbody tr:hover {
background: var(--gray-50);
}
.table tbody td {
padding: 14px 16px;
vertical-align: middle;
}
/* ═══════════════════════════════════════════════════════════════════════════════
BADGE
═══════════════════════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: .28rem .75rem;
border-radius: var(--r-pill);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
}
.badge--teal {
background: var(--teal-xlt);
color: var(--teal-dk);
}
.badge--dark {
background: var(--gray-900);
color: var(--white);
}
.badge--white {
background: rgba(255, 255, 255, .18);
color: var(--white);
border: 1px solid rgba(255, 255, 255, .3);
}
.badge--success {
background: #e6f9f1;
color: #157a50;
}
.badge--pending {
background: #fef3c7;
color: #92400e;
}
.icon-row {
display: flex;
align-items: center;
gap: 5px;
}
.icon-row--sm svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.icon-row--md svg {
width: 13px;
height: 13px;
color: var(--gray-400);
flex-shrink: 0;
}
.credits {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--gray-900);
}
.actions-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.actions-row {
display: flex;
align-items: center;
gap: 6px;
}
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
}
.pagination__controls {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
}
.pagination__link {
display: inline-flex;
align-items: center;
padding: .45rem .8rem;
border: 1px solid var(--gray-200);
border-radius: var(--r-pill);
background: var(--white);
color: var(--gray-700);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.pagination__link:hover {
border-color: var(--teal);
color: var(--teal);
background: var(--teal-xlt);
}
.pagination__link--active {
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-lt) 100%);
border-color: transparent;
color: var(--white);
}
.pagination__link.disabled {
color: var(--gray-400);
background: #f9fafb;
cursor: not-allowed;
}
.pagination__info {
color: var(--gray-500);
font-size: .85rem;
}
.badge--dot::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
0%,
100% {
opacity: 1
}
50% {
opacity: .35
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
CARD
═══════════════════════════════════════════════════════════════════════════════ */
.card {
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-lg);
padding: 1.75rem;
box-shadow: var(--shadow-xs);
transition: var(--transition);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
border-color: rgba(0, 168, 150, .25);
}
/* ═══════════════════════════════════════════════════════════════════════════════
FORMS
═══════════════════════════════════════════════════════════════════════════════ */
.form-group {
margin-bottom: 1.25rem;
}
.form-label {
display: block;
font-size: .875rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: .4rem;
}
.form-input {
width: 100%;
padding: .65rem 1rem;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-sm);
font-family: var(--font);
font-size: .95rem;
color: var(--gray-700);
background: var(--white);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(0, 168, 150, .15);
}
.form-input::placeholder {
color: var(--gray-400);
}
/* ═══════════════════════════════════════════════════════════════════════════════
ALERTS
═══════════════════════════════════════════════════════════════════════════════ */
.alert {
padding: 1rem 1.2rem;
border-radius: var(--r-md);
border-left: 4px solid transparent;
font-size: .9rem;
margin-bottom: 1rem;
}
.alert--info {
background: var(--teal-xlt);
border-color: var(--teal);
color: var(--teal-dk);
}
.alert--success {
background: #e8f9f0;
border-color: #22c55e;
color: #166534;
}
.alert--warning {
background: #fff7ed;
border-color: #f59e0b;
color: #92400e;
}
.alert--danger {
background: #fef2f2;
border-color: #ef4444;
color: #991b1b;
}
/* ═══════════════════════════════════════════════════════════════════════════════
PAGE HEADER (inner pages)
═══════════════════════════════════════════════════════════════════════════════ */
.page-header {
background: linear-gradient(140deg, var(--teal-dk) 0%, var(--teal-lt) 100%);
padding: 4rem 2rem;
text-align: center;
}
.page-header h1 {
color: var(--white);
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 800;
}
.page-header p {
color: rgba(255, 255, 255, .85);
font-size: 1.05rem;
margin-top: .75rem;
}
/* Coming Soon */
.coming-soon-box {
text-align: center;
padding: 5rem 2rem;
max-width: 520px;
margin: 0 auto;
}
.coming-soon-box .icon {
font-size: 4rem;
margin-bottom: 1.5rem;
}
.coming-soon-box h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.coming-soon-box p {
color: var(--gray-500);
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.7;
}
/* ═══════════════════════════════════════════════════════════════════════════════
NAVBAR
═══════════════════════════════════════════════════════════════════════════════ */
.navbar {
position: fixed; /* sticky tha, fixed karo */
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}
.navbar-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
height: var(--navbar-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.navbar-left {
flex-shrink: 0;
}
.logo {
display: flex;
align-items: center;
padding: .3rem .5rem;
border-radius: var(--r-md);
transition: var(--transition);
}
.logo:hover {
background: var(--teal-xlt);
}
.logo-img {
height: 42px;
width: auto;
object-fit: contain;
}
.navbar-center {
flex: 1;
display: flex;
justify-content: center;
}
.menu-list {
display: flex;
align-items: center;
}
.menu-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: .5rem .8rem;
font-size: .875rem;
font-weight: 500;
color: var(--gray-700);
border-radius: var(--r-sm);
position: relative;
transition: var(--transition);
white-space: nowrap;
}
.menu-link:hover {
color: var(--teal);
background: var(--teal-xlt);
}
.menu-link.active {
color: var(--teal);
font-weight: 600;
}
.menu-link.active::after {
content: '';
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 2.5px;
border-radius: var(--r-pill);
background: var(--teal);
}
.nav-pin-icon {
width: 13px;
height: 13px;
color: var(--teal);
}
.navbar-right {
display: flex;
align-items: center;
gap: .5rem;
flex-shrink: 0;
}
.btn-login {
padding: .48rem .9rem;
font-size: .875rem;
font-weight: 600;
color: var(--gray-700);
border-radius: var(--r-sm);
transition: var(--transition);
}
.btn-login:hover {
color: var(--teal);
background: var(--teal-xlt);
}
.btn-register {
display: inline-block;
padding: .48rem 1.25rem;
font-size: .875rem;
font-weight: 700;
color: var(--white);
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-lt) 100%);
border-radius: var(--r-pill);
transition: var(--transition);
box-shadow: 0 2px 10px rgba(0, 168, 150, .28);
}
.btn-register:hover {
background: linear-gradient(135deg, var(--teal-dk) 0%, var(--teal) 100%);
transform: translateY(-1px);
color: var(--white);
}
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
padding: 8px;
border-radius: var(--r-sm);
}
.hamburger:hover {
background: var(--teal-xlt);
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--gray-900);
border-radius: var(--r-pill);
transition: var(--transition);
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.mobile-menu {
position: fixed;
display: none;
position: absolute;
top: var(--navbar-h);
left: 0;
right: 0;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
box-shadow: var(--shadow-md);
z-index: 999;
}
.mobile-menu.active {
display: block;
animation: slideDown .2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.mobile-menu-list {
max-width: 1400px;
margin: 0 auto;
padding: .75rem 2rem 1.5rem;
}
.mobile-menu-link {
display: block;
padding: .8rem .4rem;
font-size: .95rem;
font-weight: 500;
color: var(--gray-700);
border-bottom: 1px solid var(--gray-100);
transition: var(--transition);
}
.mobile-menu-link:hover {
color: var(--teal);
padding-left: .75rem;
}
.mobile-divider {
height: 1px;
background: var(--gray-200);
margin: .5rem 0;
}
.mobile-cta {
color: var(--teal) !important;
font-weight: 700 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
LANDING PAGE — HERO
═══════════════════════════════════════════════════════════════════════════════ */
.hero {
position: relative;
min-height: 540px;
display: flex;
align-items: center;
background: var(--dark-1);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('/public/images/b53ee7ab6a794bc6b63ec6bb0f63451355a9e37a.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: 75% 30%;
transform: scaleX(-1);
-webkit-transform: scaleX(-1);
opacity: .65;
}
.hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
/* left dark, right clear */
background: linear-gradient(
100deg,
rgba(8, 30, 28, .88) 0%,
rgba(8, 30, 28, .78) 28%,
rgba(8, 30, 28, .55) 45%,
rgba(8, 30, 28, .25) 60%,
rgba(8, 30, 28, .08) 75%,
rgba(8, 30, 28, 0) 90%
);
}
.hero__inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 5rem 2rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
}
.hero__body {
max-width: 580px;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, .12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .22);
color: var(--white);
font-size: .8rem;
font-weight: 600;
padding: .4rem 1rem;
border-radius: var(--r-pill);
margin-bottom: 1.25rem;
letter-spacing: .2px;
}
.hero__badge-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal-lt);
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(0, 196, 176, .3);
animation: pulseGlow 2.5s ease infinite;
}
@keyframes pulseGlow {
0%,
100% {
box-shadow: 0 0 0 3px rgba(0, 196, 176, .3)
}
50% {
box-shadow: 0 0 0 7px rgba(0, 196, 176, .1)
}
}
.hero__title {
font-size: clamp(2rem, 4.5vw, 3.1rem);
font-weight: 800;
color: var(--white);
line-height: 1.15;
margin-bottom: 2rem;
}
.hero__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero__scroll-btn {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
border: 1.5px solid rgba(255, 255, 255, .35);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
align-self: center;
flex-shrink: 0;
cursor: pointer;
}
.hero__scroll-btn:hover {
background: rgba(255, 255, 255, .26);
transform: scale(1.1);
}
/* ── TRUST BAR ────────────────────────────────────────────────────────────── */
.trust-bar {
background: linear-gradient(135deg, var(--teal-dk) 0%, var(--teal) 100%);
padding: 1rem 2rem;
}
.trust-bar__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.trust-bar__text {
color: rgba(255, 255, 255, .82);
font-size: .82rem;
max-width: 420px;
line-height: 1.55;
}
.trust-bar__pills {
display: flex;
gap: .75rem;
flex-wrap: wrap;
}
.trust-pill {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, .15);
border: 1px solid rgba(255, 255, 255, .25);
color: var(--white);
font-size: .78rem;
font-weight: 600;
padding: .35rem .9rem;
border-radius: var(--r-pill);
}
/* ── PRODUCT OF THE MONTH ────────────────────────────────────────────────── */
.potm {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 3.5rem 2rem;
}
.potm__grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.potm__label {
font-size: .74rem;
font-weight: 700;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: .6rem;
}
.potm__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 800;
margin-bottom: 1rem;
line-height: 1.2;
}
.potm__desc {
color: var(--gray-500);
font-size: .95rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.potm__img {
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 4/3;
background: var(--gray-100);
box-shadow: var(--shadow-md);
}
.potm__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.potm__img:hover img {
transform: scale(1.03);
}
/* ── WHY CHOOSE US ───────────────────────────────────────────────────────── */
.why {
background: var(--gray-50);
padding: 5rem 2rem;
}
.why .container {
text-align: center;
}
.why__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
margin-top: 1rem;
}
.why-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-lg);
padding: 2rem 1.5rem;
text-align: center;
transition: var(--transition);
}
.why-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
border-color: rgba(0, 168, 150, .3);
}
.why-card__icon {
width: 56px;
height: 56px;
border-radius: var(--r-md);
margin: 0 auto 1rem;
background: var(--teal-xlt);
color: var(--teal);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.why-card:hover .why-card__icon {
background: var(--teal);
color: var(--white);
}
.why-card h4 {
font-size: .97rem;
font-weight: 700;
margin-bottom: .5rem;
}
.why-card p {
font-size: .85rem;
color: var(--gray-500);
line-height: 1.65;
}
/* ── FEATURED HOT TUBS ───────────────────────────────────────────────────── */
.featured {
background: var(--teal-xxlt);
padding: 5rem 2rem;
}
.featured__layout {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 200px 1fr;
gap: 3rem;
align-items: start;
}
.featured__title {
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 800;
line-height: 1.15;
}
.featured__sub {
font-size: .88rem;
color: var(--gray-500);
line-height: 1.5;
margin-top: .75rem;
}
.featured__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
/* Tub product card */
.tub-card {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-xs);
transition: var(--transition);
}
.tub-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
.tub-card__img {
position: relative;
height: 165px;
overflow: hidden;
background: var(--gray-100);
}
.tub-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.tub-card:hover .tub-card__img img {
transform: scale(1.06);
}
.tub-card__img--placeholder {
background: linear-gradient(145deg, #daf0ee 0%, #b4e0da 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
opacity: .6;
}
.tub-card__badge {
position: absolute;
top: 10px;
left: 10px;
font-size: .7rem;
font-weight: 700;
padding: .25rem .65rem;
border-radius: var(--r-pill);
text-transform: uppercase;
letter-spacing: .5px;
}
.tub-card__badge--dark {
background: var(--gray-900);
color: var(--white);
}
.tub-card__badge--teal {
background: var(--teal);
color: var(--white);
}
.tub-card__body {
padding: 1rem 1rem 1.25rem;
}
.tub-card__name {
font-size: 1rem;
font-weight: 800;
margin-bottom: .2rem;
}
.tub-card__brand {
font-size: .78rem;
color: var(--gray-500);
margin-bottom: .75rem;
}
.tub-card__tags {
display: flex;
gap: .35rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.tub-card__tag {
background: var(--teal-xlt);
color: var(--teal-dk);
font-size: .72rem;
font-weight: 600;
padding: .2rem .6rem;
border-radius: var(--r-pill);
}
.tub-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.tub-card__rating {
font-size: .82rem;
font-weight: 600;
color: var(--gray-500);
}
/* ── BRANDS ──────────────────────────────────────────────────────────────── */
.brands {
background: var(--white);
padding: 5rem 2rem;
}
.brands .container {
text-align: center;
}
.brands__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}
.brand-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.4rem 1rem;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-lg);
text-align: center;
gap: .35rem;
transition: var(--transition);
}
.brand-tile:hover {
border-color: var(--teal);
background: var(--teal-xlt);
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.brand-tile__name {
font-size: .97rem;
font-weight: 800;
color: var(--gray-900);
}
.brand-tile__tag {
font-size: .72rem;
color: var(--gray-500);
font-weight: 500;
}
/* ── EXPERT GUIDES ───────────────────────────────────────────────────────── */
.guides {
position: relative;
padding: 5rem 2rem;
overflow: hidden;
}
.guides__bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=1600&q=80&auto=format&fit=crop');
background-size: cover;
background-position: center;
opacity: .5;
}
.guides__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(110deg, rgba(8, 30, 28, .84) 45%, rgba(8, 30, 28, .48) 100%);
}
.guides__inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 3.5rem;
align-items: center;
}
.guides__heading h2 {
font-size: clamp(1.7rem, 3vw, 2.3rem);
font-weight: 800;
color: var(--white);
margin-bottom: .75rem;
}
.guides__heading p {
color: rgba(255, 255, 255, .7);
font-size: .97rem;
line-height: 1.65;
}
.guides__cards {
display: flex;
flex-direction: column;
gap: .85rem;
}
.guide-card {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, .11);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--r-lg);
padding: 1rem 1.25rem;
transition: var(--transition);
color: var(--white);
}
.guide-card:hover {
background: rgba(255, 255, 255, .20);
transform: translateX(5px);
color: var(--white);
}
.guide-card__icon {
width: 44px;
height: 44px;
border-radius: var(--r-md);
flex-shrink: 0;
background: var(--teal);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
}
.guide-card__text {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.guide-card__text strong {
font-size: .9rem;
font-weight: 700;
}
.guide-card__text span {
font-size: .78rem;
color: rgba(255, 255, 255, .65);
line-height: 1.45;
}
.guide-card__arrow {
color: var(--teal-lt);
font-size: 1.1rem;
flex-shrink: 0;
transition: transform .2s;
}
.guide-card:hover .guide-card__arrow {
transform: translateX(5px);
}
/* ── STATS ───────────────────────────────────────────────────────────────── */
.stats {
background: linear-gradient(140deg, var(--teal-dk) 0%, var(--teal) 100%);
padding: 4.5rem 2rem;
text-align: center;
}
.stats__title {
color: var(--white);
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 800;
margin-bottom: 2.5rem;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 680px;
margin: 0 auto;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
}
.stat-item__number {
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 800;
color: var(--white);
line-height: 1;
}
.stat-item__icon {
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: rgba(0, 0, 0, .2);
display: flex;
align-items: center;
justify-content: center;
}
.stat-item__label {
font-size: .88rem;
color: rgba(255, 255, 255, .78);
font-weight: 500;
}
/* ── HOME CTA ─────────────────────────────────────────────────────────────── */
.cta-home {
background: var(--white);
border-top: 1px solid var(--gray-200);
padding: 5rem 2rem;
}
.cta-home__layout {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
}
.cta-home__text h2 {
font-size: clamp(1.6rem, 2.5vw, 2rem);
font-weight: 800;
margin-bottom: .75rem;
}
.cta-home__text p {
color: var(--gray-500);
font-size: .97rem;
line-height: 1.65;
max-width: 480px;
margin-bottom: 1.5rem;
}
.cta-home__img {
width: 260px;
flex-shrink: 0;
}
.cta-home__img img {
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════════════════════ */
.footer {
background: var(--dark-1);
color: var(--white);
}
.footer__body {
max-width: 1400px;
margin: 0 auto;
padding: 4rem 2rem 2rem;
}
.footer__grid {
display: grid;
grid-template-columns: 2.2fr 1fr 1fr 1.2fr 1.2fr;
gap: 2.5rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.footer__col h5 {
font-size: .74rem;
font-weight: 700;
color: var(--teal-lt);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 1.25rem;
}
.footer__logo-row {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1rem;
}
.footer__logo-box {
width: 40px;
height: 40px;
border-radius: var(--r-md);
background: linear-gradient(145deg, var(--teal) 0%, var(--teal-lt) 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.footer__brand-name {
font-size: 1.1rem;
font-weight: 800;
color: var(--teal-lt);
}
.footer__brand-sub {
font-size: .68rem;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 1px;
}
.footer__desc {
font-size: .87rem;
color: #6a9896;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.footer__links li {
margin-bottom: .5rem;
}
.footer__links a {
color: #6a9896;
font-size: .87rem;
transition: var(--transition);
display: inline-block;
}
.footer__links a:hover {
color: var(--teal-lt);
padding-left: 4px;
}
.footer__social-label {
font-size: .8rem;
color: #6a9896;
margin-bottom: .75rem;
}
.footer__socials {
display: flex;
gap: .6rem;
flex-wrap: wrap;
}
.social-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0, 168, 150, .12);
border: 1px solid rgba(0, 168, 150, .22);
color: var(--teal-lt);
display: flex;
align-items: center;
justify-content: center;
font-size: .8rem;
font-weight: 700;
transition: var(--transition);
}
.social-btn:hover {
background: var(--teal);
border-color: var(--teal);
color: var(--white);
transform: translateY(-2px);
}
.footer__bottom {
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer__copy,
.footer__credit {
font-size: .8rem;
color: #446260;
}
.footer__credit a {
color: var(--teal);
}
.footer__credit a:hover {
color: var(--teal-lt);
}
/* ═══════════════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1101px) {
.hamburger {
display: none !important;
}
.mobile-menu {
display: none !important;
}
.navbar-center {
display: flex !important;
}
}
@media (max-width:1100px) {
.navbar-center {
display: none;
}
.hamburger {
display: flex;
}
.why__grid {
grid-template-columns: repeat(2, 1fr);
}
.brands__grid {
grid-template-columns: repeat(3, 1fr);
}
.featured__layout {
grid-template-columns: 1fr;
}
.featured__cards {
grid-template-columns: repeat(3, 1fr);
}
.footer__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width:900px) {
.potm__grid {
grid-template-columns: 1fr;
}
.guides__inner {
grid-template-columns: 1fr;
}
.guides__heading {
text-align: center;
}
.cta-home__layout {
grid-template-columns: 1fr;
text-align: center;
}
.cta-home__img {
display: none;
}
.footer__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:768px) {
:root {
--navbar-h: 62px;
}
.navbar-wrapper {
padding: 0 1rem;
}
.logo-tagline {
display: none;
}
.btn-login,
.btn-register {
display: none;
}
.hero__inner {
padding: 3.5rem 1rem;
}
.hero__title {
font-size: 2rem;
}
.hero__actions {
flex-direction: column;
align-items: flex-start;
}
.trust-bar {
padding: .75rem 1rem;
}
.trust-bar__inner {
flex-direction: column;
text-align: center;
}
.trust-bar__pills {
justify-content: center;
}
.why__grid {
grid-template-columns: 1fr;
}
.featured__cards {
grid-template-columns: 1fr;
}
.brands__grid {
grid-template-columns: repeat(2, 1fr);
}
.stats__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer__grid {
grid-template-columns: 1fr;
}
.footer__bottom {
flex-direction: column;
text-align: center;
}
.section,
.section--sm,
.section--lg {
padding: 3rem 1rem;
}
.section-title {
font-size: 1.6rem;
}
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
HOT TUBS LISTING PAGE
═══════════════════════════════════════════════════════════════════════════════ */
/* Page header */
.ht-page-header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 1.5rem 0;
}
.ht-page-title {
font-size: 1.6rem;
font-weight: 800;
color: var(--gray-900);
}
/* Filters bar */
.ht-filters-bar {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: .85rem 0;
position: sticky;
top: var(--navbar-h);
z-index: 99;
box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
.ht-filters {
display: flex;
align-items: flex-end;
gap: 1.25rem;
flex-wrap: wrap;
}
.ht-filter-group {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 160px;
}
.ht-filter-label {
font-size: .75rem;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: .5px;
}
.ht-filter-select {
padding: .5rem .9rem;
border: 1.5px solid var(--gray-200);
border-radius: var(--r-sm);
font-family: var(--font);
font-size: .88rem;
color: var(--gray-700);
background: var(--white);
cursor: pointer;
outline: none;
transition: border-color .2s;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23628280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px;
padding-right: 2.5rem;
appearance: none;
}
.ht-filter-select:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(0, 144, 152, .12);
}
.ht-filter-results {
margin-left: auto;
font-size: .85rem;
font-weight: 600;
color: var(--gray-500);
align-self: flex-end;
padding-bottom: .3rem;
}
/* Products section */
.ht-products-section {
background: var(--gray-50);
padding: 2rem 0 4rem;
}
.ht-products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
/* Product card */
.ht-card {
background: var(--white);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-xs);
transition: var(--transition);
}
.ht-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.ht-card__img {
height: 180px;
overflow: hidden;
background: var(--gray-100);
cursor: pointer;
}
.ht-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.ht-card:hover .ht-card__img img {
transform: scale(1.05);
}
.ht-card__body {
padding: .9rem 1rem 1rem;
}
.ht-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .4rem;
}
.ht-card__brand {
font-size: .75rem;
font-weight: 600;
color: var(--gray-500);
}
.ht-card__name {
font-size: 1rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .5rem;
}
.ht-card__specs {
display: flex;
gap: 1rem;
margin-bottom: .6rem;
}
.ht-card__spec {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .8rem;
color: var(--gray-500);
}
.ht-card__rating {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .85rem;
}
.ht-stars {
color: #f59e0b;
font-size: .9rem;
letter-spacing: 1px;
}
.ht-stars--lg {
font-size: 1.1rem;
}
.ht-rating-num {
font-size: .85rem;
font-weight: 700;
color: var(--gray-700);
}
.ht-rating-count {
font-size: .78rem;
color: var(--gray-400);
}
/* Tier badges */
.ht-card__tier {
font-size: .65rem;
font-weight: 800;
padding: .2rem .6rem;
border-radius: var(--r-pill);
text-transform: uppercase;
letter-spacing: .5px;
}
.ht-card__tier--luxury {
background: #fff8e6;
color: #a06200;
}
.ht-card__tier--premium {
background: #e8f0fe;
color: #2d62d3;
}
.ht-card__tier--mid {
background: #e8f5e9;
color: #2e7d32;
}
.ht-card__tier--budget {
background: #f3e5f5;
color: #7b1fa2;
}
/* Quote button on card */
.ht-quote-btn {
width: 100%;
padding: .6rem;
background: var(--teal);
color: var(--white);
font-family: var(--font);
font-size: .88rem;
font-weight: 700;
border: none;
border-radius: var(--r-sm);
cursor: pointer;
transition: var(--transition);
}
.ht-quote-btn:hover {
background: var(--teal-dk);
transform: translateY(-1px);
}
/* No results */
.ht-no-results {
text-align: center;
padding: 4rem 2rem;
}
.ht-no-results__icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.ht-no-results h3 {
font-size: 1.3rem;
margin-bottom: .5rem;
}
.ht-no-results p {
color: var(--gray-500);
margin-bottom: 1.5rem;
}
/* ── MODALS ────────────────────────────────────────────────────────────────── */
.ht-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
backdrop-filter: blur(4px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
/* Detail modal */
.ht-detail-modal {
background: var(--white);
border-radius: var(--r-xl);
width: 100%;
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
padding: 2rem;
box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
}
.ht-detail__back {
font-size: .88rem;
font-weight: 600;
color: var(--teal);
display: inline-block;
margin-bottom: 1.5rem;
transition: var(--transition);
}
.ht-detail__back:hover {
color: var(--teal-dk);
}
.ht-detail__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
}
.ht-detail__img-wrap {
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4/3;
}
.ht-detail__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ht-detail__brand {
font-size: .85rem;
font-weight: 700;
color: var(--teal);
margin-bottom: .3rem;
}
.ht-detail__name {
font-size: 2rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .75rem;
}
.ht-detail__rating {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.ht-detail__score {
font-size: .9rem;
font-weight: 700;
color: var(--gray-700);
}
.ht-detail__reviews {
font-size: .85rem;
color: var(--gray-400);
}
.ht-detail__badges {
display: flex;
gap: .6rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.ht-detail__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: .35rem .9rem;
border-radius: var(--r-pill);
font-size: .78rem;
font-weight: 700;
}
.ht-detail__badge--gold {
background: #fff8e6;
color: #a06200;
}
.ht-detail__badge--teal {
background: var(--teal-xlt);
color: var(--teal-dk);
}
.ht-detail__specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--gray-200);
border: 1px solid var(--gray-200);
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: 1.5rem;
}
.ht-detail__spec-item {
background: var(--white);
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
gap: .75rem;
color: var(--gray-500);
}
.ht-detail__spec-item svg {
flex-shrink: 0;
color: var(--gray-400);
}
.ht-detail__spec-label {
display: block;
font-size: .75rem;
color: var(--gray-400);
margin-bottom: .2rem;
}
.ht-detail__spec-val {
display: block;
font-size: 1.1rem;
font-weight: 800;
color: var(--gray-900);
}
/* Get quote big button */
.ht-get-quote-btn {
width: 100%;
padding: 1rem;
background: var(--teal);
color: var(--white);
font-family: var(--font);
font-size: 1rem;
font-weight: 700;
border: none;
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--transition);
}
.ht-get-quote-btn:hover {
background: var(--teal-dk);
box-shadow: var(--shadow-teal);
transform: translateY(-2px);
}
/* Quote modal */
.ht-quote-modal {
background: var(--white);
border-radius: var(--r-xl);
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
padding: 2rem 2rem 1.75rem;
box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
position: relative;
}
.ht-modal__close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gray-100);
color: var(--gray-500);
font-size: .9rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
transition: var(--transition);
}
.ht-modal__close:hover {
background: var(--gray-200);
color: var(--gray-900);
}
.ht-quote-modal__title {
font-size: 1.4rem;
font-weight: 800;
margin-bottom: .25rem;
}
.ht-quote-modal__sub {
font-size: .88rem;
color: var(--gray-500);
margin-bottom: 1.5rem;
}
.ht-quote__email-notice {
display: flex;
gap: .75rem;
align-items: flex-start;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: var(--r-md);
padding: 1rem;
margin-bottom: 1rem;
}
.ht-quote__email-icon {
font-size: 1.2rem;
flex-shrink: 0;
margin-top: .1rem;
}
.ht-quote__email-title {
font-size: .88rem;
font-weight: 700;
color: #1d4ed8;
margin-bottom: .25rem;
display: flex;
align-items: center;
gap: 6px;
}
.ht-quote__email-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #3b82f6;
display: inline-block;
animation: pulseDot 2s infinite;
}
.ht-quote__email-text {
font-size: .8rem;
color: #3b82f6;
line-height: 1.5;
}
.ht-quote__terms {
display: flex;
gap: .75rem;
align-items: flex-start;
border: 1px solid var(--gray-200);
border-radius: var(--r-md);
padding: 1rem;
margin-bottom: 1.25rem;
font-size: .85rem;
color: var(--gray-600);
background: var(--gray-50);
}
.ht-quote__terms input {
margin-top: 2px;
accent-color: var(--teal);
flex-shrink: 0;
width: 16px;
height: 16px;
cursor: pointer;
}
/* Success modal */
.ht-success-modal {
background: var(--white);
border-radius: var(--r-xl);
width: 100%;
max-width: 440px;
padding: 3rem 2rem;
text-align: center;
position: relative;
box-shadow: 0 24px 64px rgba(0, 0, 0, .2);
}
.ht-success__icon {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.ht-success-modal h2 {
font-size: 1.6rem;
font-weight: 800;
margin-bottom: .75rem;
}
.ht-success-modal p {
color: var(--gray-500);
margin-bottom: 2rem;
line-height: 1.65;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.ht-products-grid {
grid-template-columns: repeat(2, 1fr);
}
.ht-detail__layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.ht-products-grid {
grid-template-columns: 1fr;
}
.ht-filters {
flex-direction: column;
gap: .75rem;
}
.ht-filter-group {
min-width: 100%;
}
.ht-filter-results {
margin-left: 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
SWIM SPAS PAGE — Additional styles (append to global.css)
Note: Most styles already exist in global.css. These are page-specific additions.
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Override: page header for listing pages ─────────────────────────────── */
.ht-page-header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 1.5rem 0;
}
.ht-page-title {
font-size: 1.6rem;
font-weight: 800;
color: var(--gray-900);
}
/* ── Swim spa card price row ──────────────────────────────────────────────── */
.ht-card__price {
font-size: 1.15rem;
font-weight: 800;
color: var(--gray-900);
}
.ht-card__price-note {
font-size: .78rem;
color: var(--gray-400);
}
/* ── Detail modal feature list responsive ────────────────────────────────── */
@media (max-width: 600px) {
.ht-detail__specs-grid {
grid-template-columns: 1fr;
}
}
/* ── Quote modal 2-col fields responsive ─────────────────────────────────── */
@media (max-width: 480px) {
.ht-quote-modal {
padding: 1.5rem 1.25rem;
}
.ht-quote-fields-2col {
grid-template-columns: 1fr !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
SERVICES PAGE — Append these styles to global.css
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Hero Header ─────────────────────────────────────────────────────────── */
.svc-hero {
padding: 3.5rem 2rem 2.5rem;
background: var(--white);
text-align: center;
border-bottom: 1px solid var(--gray-200);
}
.svc-hero__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--teal-xlt);
color: var(--teal-dk);
font-size: .8rem;
font-weight: 700;
padding: .4rem 1.1rem;
border-radius: var(--r-pill);
margin-bottom: 1.25rem;
border: 1px solid rgba(0, 168, 150, .2);
}
.svc-hero__title {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800;
color: var(--gray-900);
margin-bottom: 1rem;
}
.svc-hero__desc {
font-size: 1rem;
color: var(--gray-500);
max-width: 600px;
margin: 0 auto;
line-height: 1.75;
}
/* ── Trust Bar ───────────────────────────────────────────────────────────── */
.svc-trust-bar {
background: var(--teal-xxlt);
padding: 1.75rem 2rem;
border-bottom: 1px solid var(--gray-200);
}
.svc-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.svc-trust-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.svc-trust-icon {
width: 44px;
height: 44px;
border-radius: var(--r-md);
flex-shrink: 0;
background: var(--white);
border: 1px solid var(--gray-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
box-shadow: var(--shadow-xs);
}
.svc-trust-item strong {
display: block;
font-size: .93rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: .3rem;
}
.svc-trust-item p {
font-size: .83rem;
color: var(--gray-500);
line-height: 1.6;
margin: 0;
}
/* ── Service Cards Grid ──────────────────────────────────────────────────── */
.svc-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.svc-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.svc-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.svc-card__img {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
.svc-card__img--blue {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.svc-card__img--red {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.svc-card__img--green {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.svc-card__body {
padding: 1.5rem;
}
.svc-card__title {
font-size: 1.2rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .6rem;
}
.svc-card__desc {
font-size: .88rem;
color: var(--gray-500);
line-height: 1.65;
margin-bottom: 1.25rem;
}
.svc-card__price-row {
margin-bottom: 1.5rem;
}
.svc-card__from {
display: block;
font-size: .78rem;
color: var(--gray-400);
margin-bottom: .25rem;
}
.svc-card__price {
display: block;
font-size: 2rem;
font-weight: 800;
color: var(--gray-900);
line-height: 1.1;
margin-bottom: .25rem;
}
.svc-card__price-note {
font-size: .74rem;
color: var(--gray-400);
}
.svc-card__included {
margin-bottom: 1.5rem;
}
.svc-card__included-title {
display: flex;
align-items: center;
gap: .5rem;
font-size: .85rem;
font-weight: 700;
color: var(--gray-700);
margin-bottom: .85rem;
}
.svc-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: .55rem;
}
.svc-card__list li {
display: flex;
align-items: center;
gap: .5rem;
font-size: .86rem;
color: var(--gray-600);
}
.svc-request-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .75rem;
background: var(--teal);
color: var(--white);
font-family: var(--font);
font-size: .95rem;
font-weight: 700;
border: none;
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--transition);
}
.svc-request-btn:hover {
background: var(--teal-dk);
box-shadow: var(--shadow-teal);
transform: translateY(-2px);
}
/* ── Bottom 2-col (Plans + Emergency) ───────────────────────────────────── */
.svc-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
align-items: start;
}
/* Maintenance Plans */
.svc-plans-box {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
padding: 2rem;
box-shadow: var(--shadow-xs);
}
.svc-plans__title {
font-size: 1.45rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .6rem;
}
.svc-plans__desc {
font-size: .88rem;
color: var(--gray-500);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.svc-plan-list {
display: flex;
flex-direction: column;
gap: .75rem;
}
.svc-plan-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border: 1px solid var(--gray-200);
border-radius: var(--r-md);
background: var(--gray-50);
gap: 1rem;
}
.svc-plan-row--best {
background: #fffbeb;
border-color: #fcd34d;
}
.svc-plan-name {
font-size: .97rem;
font-weight: 700;
color: var(--gray-900);
}
.svc-plan-sub {
font-size: .8rem;
color: var(--gray-500);
margin-top: .15rem;
}
.svc-plan-price {
font-size: 1.15rem;
font-weight: 800;
color: var(--teal);
white-space: nowrap;
flex-shrink: 0;
}
.svc-best-badge {
background: #f59e0b;
color: var(--white);
font-size: .65rem;
font-weight: 800;
letter-spacing: .5px;
padding: .2rem .6rem;
border-radius: var(--r-pill);
text-transform: uppercase;
white-space: nowrap;
}
/* Emergency Repairs */
.svc-emergency-box {
background: var(--teal-dk);
border-radius: var(--r-xl);
padding: 2rem;
color: var(--white);
}
.svc-emergency__title {
font-size: 1.45rem;
font-weight: 800;
color: var(--white);
margin-bottom: .6rem;
}
.svc-emergency__desc {
font-size: .88rem;
color: rgba(255, 255, 255, .8);
line-height: 1.7;
margin-bottom: 1.75rem;
}
.svc-emergency__features {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-bottom: 2rem;
}
.svc-emergency__feat {
display: flex;
align-items: flex-start;
gap: .85rem;
}
.svc-emergency__feat-icon {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .2);
display: flex;
align-items: center;
justify-content: center;
}
.svc-emergency__feat strong {
display: block;
font-size: .93rem;
font-weight: 700;
color: var(--white);
margin-bottom: .2rem;
}
.svc-emergency__feat span {
font-size: .82rem;
color: rgba(255, 255, 255, .7);
}
.svc-call-btn {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
width: 100%;
padding: 1rem;
background: var(--white);
color: var(--teal-dk);
font-family: var(--font);
font-size: 1rem;
font-weight: 800;
border: none;
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.svc-call-btn:hover {
background: var(--teal-xlt);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.svc-cards-grid {
grid-template-columns: 1fr;
}
.svc-bottom-grid {
grid-template-columns: 1fr;
}
.svc-trust-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 600px) {
.svc-cards-grid {
grid-template-columns: 1fr;
}
.svc-hero {
padding: 2.5rem 1rem 2rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
PARTS PAGE — Append these styles to global.css
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Category Tabs ───────────────────────────────────────────────────────── */
.parts-cats-section {
padding: 2.5rem 2rem 1.5rem;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
}
.parts-cats__heading {
font-size: 1.4rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 1.25rem;
}
.parts-cats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .6rem;
}
.parts-cat-btn {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem 1.2rem;
font-family: var(--font);
font-size: .88rem;
font-weight: 600;
color: var(--gray-700);
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--transition);
}
.parts-cat-btn:hover {
border-color: var(--teal);
color: var(--teal);
background: var(--teal-xlt);
}
.parts-cat-btn--active {
background: var(--teal-dk);
color: var(--white) !important;
border-color: var(--teal-dk);
box-shadow: 0 2px 10px rgba(0, 127, 115, .28);
}
.parts-cat-btn--active:hover {
background: var(--teal-dk);
color: var(--white);
}
/* ── Parts Grid ──────────────────────────────────────────────────────────── */
.parts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
/* ── Part Card ───────────────────────────────────────────────────────────── */
.parts-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-xs);
transition: var(--transition);
}
.parts-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.parts-card__img {
height: 170px;
display: flex;
align-items: center;
justify-content: center;
}
.parts-card__body {
padding: 1.1rem 1.1rem 1.25rem;
}
.parts-cat-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .72rem;
font-weight: 700;
padding: .22rem .65rem;
border-radius: var(--r-pill);
text-transform: capitalize;
margin-bottom: .6rem;
letter-spacing: .2px;
}
.parts-card__name {
font-size: 1rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .3rem;
line-height: 1.25;
}
.parts-card__partno {
font-size: .78rem;
color: var(--gray-400);
margin-bottom: .75rem;
}
.parts-card__price {
font-size: 1.5rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 1rem;
}
.parts-enquire-btn {
width: 100%;
padding: .65rem;
background: var(--teal);
color: var(--white);
font-family: var(--font);
font-size: .9rem;
font-weight: 700;
border: none;
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--transition);
}
.parts-enquire-btn:hover {
background: var(--teal-dk);
box-shadow: var(--shadow-teal);
transform: translateY(-1px);
}
/* ── Bottom 2-col ────────────────────────────────────────────────────────── */
.parts-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
align-items: start;
}
/* OEM Box */
.parts-oem-box {
background: var(--teal-dk);
border-radius: var(--r-xl);
padding: 2.25rem 2rem;
color: var(--white);
min-height: 360px;
}
.parts-oem__icon {
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: rgba(255, 255, 255, .15);
border: 1px solid rgba(255, 255, 255, .2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}
.parts-oem__title {
font-size: 1.4rem;
font-weight: 800;
color: var(--white);
margin-bottom: .75rem;
}
.parts-oem__desc {
font-size: .9rem;
color: rgba(255, 255, 255, .78);
line-height: 1.72;
margin-bottom: 1.75rem;
}
.parts-oem__list {
list-style: none;
display: flex;
flex-direction: column;
gap: .85rem;
}
.parts-oem__list li {
display: flex;
align-items: center;
gap: .75rem;
font-size: .9rem;
color: rgba(255, 255, 255, .88);
font-weight: 500;
}
/* Finder Box */
.parts-finder-box {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
padding: 2.25rem 2rem;
box-shadow: var(--shadow-xs);
}
.parts-finder__icon {
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: var(--teal-xlt);
border: 1px solid rgba(0, 168, 150, .2);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
}
.parts-finder__title {
font-size: 1.4rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .75rem;
}
.parts-finder__desc {
font-size: .9rem;
color: var(--gray-500);
line-height: 1.72;
margin-bottom: 1.5rem;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.parts-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.parts-grid {
grid-template-columns: repeat(2, 1fr);
}
.parts-bottom-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.parts-grid {
grid-template-columns: 1fr;
}
.parts-cats {
justify-content: flex-start;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
CARE GUIDE PAGE — Append to global.css (minimal additions only)
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Care Block (each maintenance period card) ───────────────────────────── */
.care-block {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
padding: 2rem;
margin-bottom: 1.75rem;
box-shadow: var(--shadow-xs);
}
.care-block__header {
display: flex;
align-items: center;
gap: .85rem;
margin-bottom: 1.5rem;
}
.care-block__icon {
width: 44px;
height: 44px;
border-radius: var(--r-md);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.care-block__title {
font-size: 1.25rem;
font-weight: 800;
color: var(--gray-900);
margin: 0;
}
/* ── Care Items ──────────────────────────────────────────────────────────── */
.care-items {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.care-item {
display: flex;
align-items: flex-start;
gap: .75rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--gray-100);
}
.care-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.care-item__check {
width: 24px;
height: 24px;
border-radius: 50%;
flex-shrink: 0;
background: var(--teal-xlt);
display: flex;
align-items: center;
justify-content: center;
margin-top: .1rem;
}
.care-item strong {
display: block;
font-size: .95rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: .25rem;
}
.care-item p {
font-size: .875rem;
color: var(--gray-500);
line-height: 1.65;
margin: 0 0 .4rem;
}
/* Sub-lists inside care items */
.care-sublist {
margin: .5rem 0 0 1rem;
padding: 0;
font-size: .85rem;
color: var(--gray-500);
line-height: 1.8;
}
.care-sublist li {
list-style: disc;
}
.care-sublist--ordered li {
list-style: decimal;
}
/* ── Important Tips Box ──────────────────────────────────────────────────── */
.care-tips-box {
background: var(--teal-dk);
border-radius: var(--r-xl);
padding: 1.75rem 2rem;
margin-bottom: 2.5rem;
}
.care-tips__header {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1.25rem;
}
.care-tips__header h3 {
font-size: 1.15rem;
font-weight: 800;
color: var(--white);
margin: 0;
}
.care-tips__list {
list-style: none;
display: flex;
flex-direction: column;
gap: .65rem;
}
.care-tips__list li {
font-size: .9rem;
color: rgba(255, 255, 255, .85);
line-height: 1.6;
padding-left: 1.1rem;
position: relative;
}
.care-tips__list li::before {
content: '•';
position: absolute;
left: 0;
color: var(--teal-lt);
font-size: 1rem;
}
/* ── Common Issues ───────────────────────────────────────────────────────── */
.care-issues {
margin-bottom: 3rem;
}
.care-issues__title {
font-size: 1.35rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 1.25rem;
}
.care-issue-list {
display: flex;
flex-direction: column;
gap: .85rem;
}
.care-issue {
padding: 1.1rem 1.25rem;
border-radius: var(--r-md);
border-left: 4px solid transparent;
background: var(--white);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-xs);
}
.care-issue strong {
display: block;
font-size: .97rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: .5rem;
}
.care-issue p {
font-size: .86rem;
color: var(--gray-500);
line-height: 1.6;
margin: 0 0 .25rem;
}
.care-issue p:last-child {
margin: 0;
}
.care-issue__label {
font-weight: 700;
color: var(--gray-700);
}
.care-issue--teal {
border-left: 4px solid var(--teal);
}
.care-issue--green {
border-left: 4px solid #22c55e;
}
.care-issue--purple {
border-left: 4px solid #a855f7;
}
.care-issue--orange {
border-left: 4px solid #f97316;
}
@media (max-width: 600px) {
.care-block {
padding: 1.25rem;
}
.care-tips-box {
padding: 1.25rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
FAQ PAGE — Append to global.css (minimal additions)
═══════════════════════════════════════════════════════════════════════════════ */
/* ── FAQ Group (section wrapper) ─────────────────────────────────────────── */
.faq-group {
margin-bottom: 2.5rem;
}
.faq-group__title {
font-size: 1.2rem;
font-weight: 800;
color: var(--gray-900);
padding-bottom: .75rem;
border-bottom: 2px solid var(--teal);
margin-bottom: 0;
}
/* ── FAQ List & Items ────────────────────────────────────────────────────── */
.faq-list {
border: 1px solid var(--gray-200);
border-top: none;
border-radius: 0 0 var(--r-lg) var(--r-lg);
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-xs);
}
.faq-item {
border-bottom: 1px solid var(--gray-100);
}
.faq-item:last-child {
border-bottom: none;
}
/* ── FAQ Toggle Button ───────────────────────────────────────────────────── */
.faq-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.35rem;
background: none;
border: none;
font-family: var(--font);
font-size: .95rem;
font-weight: 600;
color: var(--gray-900);
text-align: left;
cursor: pointer;
transition: background .15s;
}
.faq-btn:hover {
background: var(--gray-50);
}
.faq-item--open .faq-btn {
color: var(--teal);
}
.faq-chevron {
flex-shrink: 0;
color: var(--gray-400);
transition: transform .25s ease;
}
.faq-item--open .faq-chevron {
transform: rotate(180deg);
color: var(--teal);
}
/* ── FAQ Answer ──────────────────────────────────────────────────────────── */
.faq-answer {
display: none;
padding: 0 1.35rem 1.35rem;
font-size: .9rem;
color: var(--gray-500);
line-height: 1.75;
}
.faq-answer p {
margin-bottom: .75rem;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer ul,
.faq-answer ol {
margin: .5rem 0 .75rem 1.25rem;
}
.faq-answer li {
margin-bottom: .4rem;
}
.faq-answer ul li {
list-style: disc;
}
.faq-answer ol li {
list-style: decimal;
}
.faq-answer strong {
color: var(--gray-700);
}
/* ── CTA Box ─────────────────────────────────────────────────────────────── */
.faq-cta {
background: var(--teal-dk);
border-radius: var(--r-xl);
padding: 2.5rem 2rem;
text-align: center;
margin-top: 1rem;
margin-bottom: 1rem;
}
.faq-cta__title {
font-size: 1.3rem;
font-weight: 800;
color: var(--white);
margin-bottom: .5rem;
}
.faq-cta__desc {
font-size: .92rem;
color: rgba(255, 255, 255, .78);
margin-bottom: 1.5rem;
line-height: 1.6;
}
@media (max-width: 600px) {
.faq-btn {
padding: .9rem 1rem;
font-size: .9rem;
}
.faq-answer {
padding: 0 1rem 1rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
BRANDS PAGE — Append to global.css (minimal additions)
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Brand Cards Grid ────────────────────────────────────────────────────── */
.brand-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
/* ── Brand Card ──────────────────────────────────────────────────────────── */
.brand-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-xs);
transition: var(--transition);
}
.brand-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: rgba(0, 168, 150, .2);
}
/* Coloured header strip */
.brand-card__header {
height: 90px;
display: flex;
align-items: center;
padding: 0 1.25rem;
justify-content: space-between;
position: relative;
}
.brand-card__initials {
width: 52px;
height: 52px;
border-radius: var(--r-md);
background: rgba(255, 255, 255, .22);
border: 2px solid rgba(255, 255, 255, .3);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
color: var(--white);
}
.brand-card__tier-badge {
font-size: .67rem;
font-weight: 800;
padding: .22rem .65rem;
border-radius: var(--r-pill);
text-transform: uppercase;
letter-spacing: .4px;
}
/* Card body */
.brand-card__body {
padding: 1.1rem 1.1rem 1.25rem;
}
.brand-card__name {
font-size: 1.1rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .15rem;
}
.brand-card__tagline {
font-size: .78rem;
color: var(--gray-400);
font-style: italic;
margin-bottom: .65rem;
}
.brand-card__meta {
display: flex;
gap: .85rem;
margin-bottom: .75rem;
}
.brand-card__meta-item {
display: inline-flex;
align-items: center;
gap: .3rem;
font-size: .76rem;
color: var(--gray-500);
font-weight: 500;
}
.brand-card__short {
font-size: .84rem;
color: var(--gray-500);
line-height: 1.65;
margin-bottom: .85rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.brand-card__price {
display: flex;
align-items: baseline;
gap: .5rem;
margin-bottom: .6rem;
}
.brand-card__price-label {
font-size: .72rem;
color: var(--gray-400);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
}
.brand-card__price-val {
font-size: .95rem;
font-weight: 800;
color: var(--gray-900);
}
.brand-card__rating {
display: flex;
align-items: center;
gap: .4rem;
margin-bottom: .85rem;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.brand-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.brand-cards-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
AUTH PAGES (Login / Register) — Append to global.css
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Page wrapper ────────────────────────────────────────────────────────── */
.auth-page {
min-height: calc(100vh - var(--navbar-h));
background: var(--teal-xxlt);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
/* ── Card ────────────────────────────────────────────────────────────────── */
.auth-card {
background: var(--white);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
padding: 2.75rem 2.5rem 2.25rem;
width: 100%;
max-width: 480px;
text-align: center;
}
/* ── Icon circle ─────────────────────────────────────────────────────────── */
.auth-card__icon {
width: 62px;
height: 62px;
border-radius: 50%;
background: var(--teal);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.35rem;
box-shadow: 0 4px 16px rgba(0, 168, 150, .32);
}
/* ── Headings ────────────────────────────────────────────────────────────── */
.auth-card__title {
font-size: 1.75rem;
font-weight: 800;
color: var(--gray-900);
margin-bottom: .4rem;
}
.auth-card__sub {
font-size: .95rem;
color: var(--gray-500);
margin-bottom: 2rem;
}
/* ── Form ────────────────────────────────────────────────────────────────── */
.auth-form {
text-align: left;
}
.auth-input {
font-size: 1rem;
padding: .8rem 1.1rem;
border-radius: var(--r-md);
}
/* Password field wrapper */
.auth-pw-wrap {
position: relative;
}
.auth-pw-wrap .form-input {
padding-right: 3rem;
}
.auth-pw-toggle {
position: absolute;
right: .9rem;
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
transition: color .2s;
}
.auth-pw-toggle:hover {
color: var(--teal);
}
/* Forgot password link */
.auth-forgot {
font-size: .82rem;
font-weight: 600;
color: var(--teal);
transition: color .2s;
}
.auth-forgot:hover {
color: var(--teal-dk);
text-decoration: underline;
}
/* Field-level error */
.auth-field-error {
display: block;
font-size: .8rem;
color: #dc2626;
margin-top: .35rem;
}
/* ── Submit button ───────────────────────────────────────────────────────── */
.auth-submit-btn {
width: 100%;
padding: .9rem;
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
background: var(--teal);
color: var(--white);
font-family: var(--font);
font-size: 1.05rem;
font-weight: 700;
border: none;
border-radius: var(--r-pill);
cursor: pointer;
transition: var(--transition);
box-shadow: 0 3px 14px rgba(0, 168, 150, .32);
margin-bottom: 1.5rem;
}
.auth-submit-btn:hover:not(:disabled) {
background: var(--teal-dk);
box-shadow: var(--shadow-teal);
transform: translateY(-2px);
}
.auth-submit-btn:disabled {
opacity: .7;
cursor: not-allowed;
transform: none;
}
/* ── Footer area ─────────────────────────────────────────────────────────── */
.auth-card__footer-link {
font-size: .93rem;
color: var(--gray-500);
margin-bottom: 1.5rem;
}
.auth-card__footer-link a {
color: var(--teal);
font-weight: 700;
transition: color .2s;
}
.auth-card__footer-link a:hover {
color: var(--teal-dk);
text-decoration: underline;
}
.auth-card__divider {
height: 1px;
background: var(--gray-100);
margin-bottom: 1.1rem;
}
.auth-card__hint {
font-size: .78rem;
color: var(--gray-400);
margin: 0;
}
/* Loading spin animation */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 540px) {
.auth-card {
padding: 2rem 1.25rem 1.75rem;
}
.auth-card__title {
font-size: 1.5rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
REGISTER PAGE additions — Append after auth-append.css in global.css
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Role selector ───────────────────────────────────────────────────────── */
.reg-role-wrap {
text-align: left;
margin-bottom: 1.75rem;
}
.reg-role__label {
font-size: .875rem;
font-weight: 600;
color: var(--gray-700);
margin-bottom: .65rem;
}
.reg-role-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .65rem;
}
.reg-role-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2rem;
padding: .85rem .75rem;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--r-md);
cursor: pointer;
transition: var(--transition);
text-align: center;
}
.reg-role-btn:hover {
border-color: var(--teal);
background: var(--teal-xxlt);
}
.reg-role-btn--active {
border-color: var(--teal);
background: var(--teal-xxlt);
box-shadow: 0 0 0 2px rgba(0, 168, 150, .18);
}
.reg-role-btn__title {
font-size: .97rem;
font-weight: 700;
color: var(--gray-900);
line-height: 1.2;
}
.reg-role-btn--active .reg-role-btn__title {
color: var(--teal-dk);
}
.reg-role-btn__sub {
font-size: .78rem;
color: var(--gray-400);
font-weight: 400;
}
/* ── 2-col form row ──────────────────────────────────────────────────────── */
.reg-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.reg-row .form-group {
margin-bottom: 0;
}
/* ── Password strength ───────────────────────────────────────────────────── */
.reg-pw-strength {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1.25rem;
margin-top: -.5rem;
}
.reg-pw-strength__bars {
display: flex;
gap: 4px;
flex: 1;
}
.reg-pw-bar {
flex: 1;
height: 4px;
border-radius: var(--r-pill);
background: var(--gray-200);
transition: background .25s;
}
.reg-pw-strength__label {
font-size: .78rem;
font-weight: 700;
min-width: 42px;
text-align: right;
transition: color .25s;
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
.reg-row {
grid-template-columns: 1fr;
}
.reg-role-grid {
grid-template-columns: 1fr;
}
.reg-role-btn {
flex-direction: row;
justify-content: flex-start;
gap: .75rem;
}
}