/* ============================================================ Aquatel Technologies - Core Design System Pure Water. Refined by Science. Delivered Fresh. ------------------------------------------------------------ Edit the CSS variables in :root to re-theme the whole site. ============================================================ */ /* ---------- 1. Design Tokens ---------- */ :root { /* Brand palette */ --navy: #032B5F; --deep-blue: #0057D9; --aqua: #00C2E8; --soft-aqua: #DDF8FF; --ice-white: #F7FCFF; --text-dark: #071B3A; --muted-text: #5B6B84; --success-aqua: #20D6B5; --warning: #FFB020; /* Glass surfaces */ --card-white: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.35); --glass-blur: 16px; /* Semantic surface tokens (theme-aware) */ --bg: var(--ice-white); --bg-alt: #ECF7FF; --surface: var(--card-white); --surface-solid: #ffffff; --border: rgba(3, 43, 95, 0.10); --text: var(--text-dark); --text-muted: var(--muted-text); --heading: var(--navy); /* Gradients */ --grad-brand: linear-gradient(135deg, var(--deep-blue) 0%, var(--aqua) 100%); --grad-deep: linear-gradient(160deg, var(--navy) 0%, var(--deep-blue) 70%); --grad-soft: linear-gradient(180deg, var(--ice-white) 0%, var(--soft-aqua) 100%); --grad-text: linear-gradient(120deg, var(--deep-blue), var(--aqua)); /* Typography */ --font-head: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-num: 'Manrope', system-ui, sans-serif; /* Type scale */ --fs-display: clamp(2.4rem, 6vw, 4.4rem); --fs-h1: clamp(2rem, 4.5vw, 3.2rem); --fs-h2: clamp(1.6rem, 3.2vw, 2.4rem); --fs-h3: clamp(1.25rem, 2vw, 1.6rem); --fs-body: 1rem; --fs-small: 0.875rem; /* Spacing scale (8pt rhythm) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; /* Radius */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* Shadows / elevation scale */ --sh-1: 0 2px 8px rgba(3, 43, 95, 0.06); --sh-2: 0 10px 30px rgba(3, 43, 95, 0.10); --sh-3: 0 20px 50px rgba(3, 43, 95, 0.16); --sh-glow: 0 12px 40px rgba(0, 194, 232, 0.30); /* Layout */ --container: 1200px; --nav-h: 76px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 240ms; /* z-index scale */ --z-base: 1; --z-raised: 10; --z-sticky: 40; --z-float: 60; --z-nav: 100; --z-modal: 1000; } /* Dark mode (toggled by [data-theme="dark"] on ) */ [data-theme="dark"] { --bg: #04183a; --bg-alt: #061f47; --surface: rgba(13, 38, 76, 0.72); --surface-solid: #0a234d; --border: rgba(120, 190, 255, 0.16); --text: #E8F3FF; --text-muted: #9FB6D6; --heading: #EAF6FF; --card-white: rgba(13, 38, 76, 0.72); --glass-border: rgba(120, 190, 255, 0.22); --grad-soft: linear-gradient(180deg, #04183a 0%, #061f47 100%); --sh-1: 0 2px 8px rgba(0, 0, 0, 0.30); --sh-2: 0 12px 30px rgba(0, 0, 0, 0.38); --sh-3: 0 22px 50px rgba(0, 0, 0, 0.45); } /* ---------- 2. Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Lenis disables native smooth scroll when active */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--heading); line-height: 1.15; font-weight: 700; margin: 0 0 var(--sp-2); letter-spacing: -0.01em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--sp-2); max-width: 70ch; } a { color: var(--deep-blue); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--aqua); } img, svg { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--aqua); color: #fff; } /* Skip link for keyboard users */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; z-index: var(--z-modal); } .skip-link:focus { left: 0; } /* ---------- 3. Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); } .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--alt { background: var(--bg-alt); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-num); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-blue); background: var(--soft-aqua); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--sp-2); } [data-theme="dark"] .eyebrow { background: rgba(0,194,232,0.14); color: var(--aqua); } .section-head { max-width: 720px; margin: 0 auto var(--sp-5); text-align: center; } .section-head.left { margin-inline: 0; text-align: left; } .section-head p { color: var(--text-muted); margin-inline: auto; } .section-head.left p { margin-inline: 0; } .text-gradient { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .grid { display: grid; gap: var(--sp-3); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-6 { grid-template-columns: repeat(6, 1fr); } /* ---------- 4. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; line-height: 1; padding: 15px 26px; min-height: 48px; border: none; border-radius: var(--r-pill); cursor: pointer; position: relative; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg, .btn i { width: 18px; height: 18px; } .btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--sh-glow); } .btn-primary:hover { box-shadow: 0 16px 46px rgba(0, 194, 232, 0.42); color: #fff; } .btn-ghost { background: var(--surface); color: var(--heading); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--sh-1); } .btn-ghost:hover { color: var(--heading); box-shadow: var(--sh-2); } .btn-outline { background: transparent; color: var(--deep-blue); border: 2px solid var(--deep-blue); } [data-theme="dark"] .btn-outline { color: var(--aqua); border-color: var(--aqua); } .btn-outline:hover { background: var(--deep-blue); color: #fff; } [data-theme="dark"] .btn-outline:hover { background: var(--aqua); color: var(--navy); } .btn-whatsapp { background: #25D366; color: #fff; } .btn-whatsapp:hover { background: #1ebe5b; color: #fff; } .btn-sm { padding: 10px 18px; min-height: 40px; font-size: 0.85rem; } .btn-block { width: 100%; } /* Ripple */ .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.5); animation: ripple-anim 600ms var(--ease); pointer-events: none; } /* ---------- 5. Glass card ---------- */ .card { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-2); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); position: relative; } .card--hover:hover { transform: translateY(-6px); box-shadow: var(--sh-3); } .card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--grad-brand); color: #fff; margin-bottom: var(--sp-2); box-shadow: var(--sh-glow); } .card__icon i, .card__icon svg { width: 28px; height: 28px; } /* ---------- 6. Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: var(--z-nav); display: flex; align-items: center; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); } .nav.scrolled { background: var(--surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--glass-border); box-shadow: var(--sh-1); } .nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--heading); } .brand:hover { color: var(--heading); } .brand__mark { width: 40px; height: 40px; object-fit: contain; } /* Brand wordmark stays light while nav is transparent over the navy hero */ .nav:not(.scrolled) .brand { color: #fff; } .nav:not(.scrolled) .brand small { color: #9FC6F0; } .brand small { display: block; font-size: 0.6rem; letter-spacing: 0.24em; color: var(--text-muted); font-weight: 600; font-family: var(--font-num); } .nav__links { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1.1rem); } .nav__links a { font-family: var(--font-head); font-weight: 500; font-size: 0.92rem; color: var(--text); padding: 8px 6px; position: relative; } .nav__links a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 2px; height: 2px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav__links a:hover { color: var(--deep-blue); } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); } .nav__links a[aria-current="page"] { color: var(--deep-blue); font-weight: 600; } .nav__actions { display: flex; align-items: center; gap: 12px; } .theme-toggle, .nav__burger { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--surface); color: var(--heading); backdrop-filter: blur(var(--glass-blur)); } .theme-toggle i { width: 20px; height: 20px; } .nav__burger { display: none; } .nav__burger span { display: block; width: 20px; height: 2px; background: var(--heading); position: relative; transition: var(--dur); } .nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--heading); transition: var(--dur); } .nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; } .nav__burger.open span { background: transparent; } .nav__burger.open span::before { top: 0; transform: rotate(45deg); } .nav__burger.open span::after { top: 0; transform: rotate(-45deg); } /* Mobile slide-out panel */ .mobile-panel { position: fixed; inset: 0 0 0 auto; width: min(85vw, 340px); background: var(--surface-solid); z-index: var(--z-modal); transform: translateX(100%); transition: transform 360ms var(--ease); padding: calc(var(--nav-h) + 1rem) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sh-3); overflow-y: auto; } .mobile-panel.open { transform: translateX(0); } .mobile-panel a { font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; color: var(--text); padding: 14px 4px; border-bottom: 1px solid var(--border); } .mobile-panel a[aria-current="page"] { color: var(--deep-blue); } .mobile-panel .btn { margin-top: var(--sp-3); } .nav-overlay { position: fixed; inset: 0; background: rgba(3, 17, 40, 0.5); backdrop-filter: blur(2px); z-index: var(--z-float); opacity: 0; visibility: hidden; transition: var(--dur); } .nav-overlay.open { opacity: 1; visibility: visible; } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--deep-blue), var(--aqua), #7FE9FF); z-index: calc(var(--z-nav) + 1); transition: width 80ms linear; box-shadow: 0 0 10px rgba(0, 194, 232, 0.6); } /* ---------- 7. Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; background: var(--grad-deep); } /* Soft cyan glow + grid depth behind hero content */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 30%, rgba(0, 194, 232, 0.30), transparent 45%), radial-gradient(circle at 12% 80%, rgba(0, 87, 217, 0.30), transparent 40%); pointer-events: none; z-index: 1; } .hero__particles { position: absolute; inset: 0; z-index: 0; } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-5); align-items: center; } .hero__content { color: #EAF6FF; } .hero h1 { color: #fff; font-size: var(--fs-display); margin-bottom: var(--sp-3); } .hero h1 .text-gradient { background: linear-gradient(120deg, #7FE9FF, #00C2E8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__sub { font-size: 1.15rem; color: #C5E4FF; max-width: 56ch; margin-bottom: var(--sp-4); } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: var(--sp-5); } .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); } .hero__stat { text-align: left; } .hero__stat b { font-family: var(--font-num); font-size: 1.4rem; color: #fff; display: block; } .hero__stat span { font-size: 0.8rem; color: #9FC6F0; } /* Floating bottle illustration */ .hero__visual { position: relative; display: grid; place-items: center; } .hero__bottle { width: min(420px, 92%); height: auto; border-radius: var(--r-lg); box-shadow: 0 30px 60px rgba(0, 30, 80, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); } /* ---------- 8. Trust strip ---------- */ .trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: var(--sp-3) var(--sp-2); background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .trust-item:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .trust-item i { width: 30px; height: 30px; color: var(--deep-blue); } .trust-item:hover i { color: var(--aqua); } .trust-item span { font-size: 0.82rem; font-weight: 600; color: var(--heading); line-height: 1.3; } /* ---------- 9. Product cards ---------- */ .product-card { display: flex; flex-direction: column; text-align: center; } .product-card .product-art { height: 150px; display: grid; place-items: center; margin-bottom: var(--sp-2); } .product-card .product-art svg { height: 100%; width: auto; } /* Real bottle photos: framed product tile */ .product-card.has-photo .product-art { height: 210px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(180deg, #EAF6FF, #DDF8FF); } .product-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s var(--ease); } .product-card.has-photo:hover .product-photo { transform: scale(1.05); } .product-photo-lg { width: 100%; height: 100%; object-fit: contain; } .product-card h3 { margin-bottom: 4px; } .product-card .product-type { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); margin-bottom: var(--sp-1); } .product-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--sp-2); } .product-card .use-case { font-size: 0.8rem; color: var(--text-muted); margin-bottom: var(--sp-3); } .product-card .price { font-family: var(--font-num); font-weight: 800; font-size: 1.3rem; color: var(--heading); margin-bottom: 4px; } .product-card .price small { display: block; font-size: 0.68rem; font-weight: 600; color: var(--warning); text-transform: uppercase; letter-spacing: 0.06em; } .product-card .btn { margin-top: auto; } .badge { display: inline-block; font-family: var(--font-num); font-weight: 700; font-size: 0.7rem; padding: 4px 10px; border-radius: var(--r-pill); background: var(--soft-aqua); color: var(--deep-blue); } /* ---------- 10. RO Process stepper ---------- */ .process-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-5); align-items: center; } .process-steps { display: flex; flex-direction: column; gap: 12px; } .process-step { display: flex; gap: 16px; align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: all var(--dur) var(--ease); width: 100%; text-align: left; } .process-step:hover { border-color: var(--aqua); } .process-step.active { background: var(--grad-brand); border-color: transparent; box-shadow: var(--sh-glow); } .process-step.active .step-num, .process-step.active h3, .process-step.active p { color: #fff; } .process-step.active .step-num { background: rgba(255,255,255,0.22); } .step-num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--soft-aqua); color: var(--deep-blue); font-family: var(--font-num); font-weight: 800; } .process-step h3 { font-size: 1.05rem; margin-bottom: 2px; } .process-step .step-body { max-height: 0; overflow: hidden; opacity: 0; transition: all 360ms var(--ease); } .process-step.active .step-body { max-height: 200px; opacity: 1; margin-top: 6px; } .process-step p { font-size: 0.88rem; margin: 0; } /* Animated pipe visual */ .process-visual { position: relative; display: grid; place-items: center; min-height: 360px; } .flow-droplet { fill: var(--aqua); filter: drop-shadow(0 0 8px var(--aqua)); } /* ---------- 11. Comparison / chart ---------- */ .compare-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; } .chart-box { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-2); } .metric-list { display: flex; flex-direction: column; gap: var(--sp-2); } .metric-row { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center; } .metric-row .label { font-weight: 600; color: var(--heading); font-size: 0.9rem; display: flex; align-items: center; gap: 6px; } .metric-row .label .help { width: 16px; height: 16px; color: var(--text-muted); cursor: help; } .bar-track { background: var(--border); height: 12px; border-radius: var(--r-pill); overflow: hidden; position: relative; } .bar-fill { height: 100%; border-radius: var(--r-pill); width: 0; transition: width 1s var(--ease); } .bar-fill.tap { background: linear-gradient(90deg, #9aa7bd, #c2ccdb); } .bar-fill.aquatel { background: var(--grad-brand); } .legend { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); font-size: 0.82rem; color: var(--text-muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .dot.tap { background: #aab6c9; } .dot.aquatel { background: var(--aqua); } /* ---------- 12. Service cards / tabs ---------- */ .service-card { text-align: left; } .service-card h3 { margin-bottom: 6px; } .service-card .best-for { font-size: 0.8rem; color: var(--aqua); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: var(--sp-2) 0; } .service-card p { font-size: 0.92rem; color: var(--text-muted); } .tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-4); } .tab-btn { padding: 10px 22px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--text); transition: all var(--dur) var(--ease); min-height: 44px; } .tab-btn.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); } .tab-panel { display: none; animation: fade-up 0.5s var(--ease); } .tab-panel.active { display: block; } /* ---------- 13. Calculator ---------- */ .calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .calc-form { display: flex; flex-direction: column; gap: var(--sp-3); } .calc-result { background: var(--grad-deep); color: #fff; border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: var(--sh-3); justify-content: center; } .calc-result h3 { color: #fff; } .calc-result .big-num { font-family: var(--font-num); font-size: 2.6rem; font-weight: 800; color: #7FE9FF; line-height: 1; } .calc-result .result-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.14); } .calc-result .result-row span:first-child { color: #9FC6F0; } .calc-result .result-row b { font-family: var(--font-num); } /* Form fields */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 600; font-size: 0.88rem; color: var(--heading); } .field label .req { color: #e5484d; } .field input, .field select, .field textarea { width: 100%; padding: 13px 15px; min-height: 48px; font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--r-sm); transition: border var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(0,194,232,0.18); } .field .helper { font-size: 0.78rem; color: var(--text-muted); } .field .error-msg { font-size: 0.78rem; color: #e5484d; display: none; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e5484d; } .field.invalid .error-msg { display: block; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } /* ---------- 14. Subscription plans ---------- */ .toggle-switch { display: inline-flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: var(--sp-4); width: 100%; } .toggle-switch button { background: var(--surface); border: 1px solid var(--border); padding: 8px 20px; border-radius: var(--r-pill); font-family: var(--font-head); font-weight: 600; color: var(--text-muted); min-height: 44px; } .toggle-switch button.active { background: var(--grad-brand); color: #fff; border-color: transparent; } .plan-card { display: flex; flex-direction: column; gap: var(--sp-2); } .plan-card.featured { border: 2px solid var(--aqua); box-shadow: var(--sh-glow); } .plan-card .plan-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); } .plan-card .plan-price { font-family: var(--font-num); font-size: 2rem; font-weight: 800; color: var(--heading); } .plan-card .plan-price small { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; } .plan-card ul.features { display: flex; flex-direction: column; gap: 10px; margin: var(--sp-2) 0; } .plan-card ul.features li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--text-muted); } .plan-card ul.features li i { width: 18px; height: 18px; color: var(--success-aqua); flex-shrink: 0; margin-top: 2px; } .plan-card .btn { margin-top: auto; } /* ---------- 15. Sustainability ---------- */ .sustain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); } .sustain-item { text-align: center; padding: var(--sp-3) var(--sp-2); } .sustain-item i { width: 36px; height: 36px; color: var(--success-aqua); margin-bottom: var(--sp-1); } .sustain-item h4 { font-size: 0.95rem; color: var(--heading); margin-bottom: 4px; } .sustain-item p { font-size: 0.82rem; color: var(--text-muted); margin: 0; } /* ---------- 16. Testimonials ---------- */ .testimonial { padding: var(--sp-4); } .testimonial .quote { font-size: 1.05rem; color: var(--text); font-style: italic; margin-bottom: var(--sp-3); } .testimonial .author { display: flex; align-items: center; gap: 12px; } .testimonial .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-family: var(--font-num); font-weight: 800; } .testimonial .author b { display: block; color: var(--heading); font-size: 0.92rem; } .testimonial .author span { font-size: 0.8rem; color: var(--text-muted); } .stars { color: var(--warning); display: flex; gap: 2px; margin-bottom: var(--sp-2); } .stars i { width: 16px; height: 16px; fill: var(--warning); } /* ---------- 17. FAQ accordion ---------- */ .faq-list { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--r-md); overflow: hidden; } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: var(--sp-3); background: none; border: none; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--heading); min-height: 56px; } .faq-q i { width: 20px; height: 20px; color: var(--aqua); transition: transform var(--dur) var(--ease); flex-shrink: 0; } .faq-item.open .faq-q i { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 360ms var(--ease); } .faq-a p { padding: 0 var(--sp-3) var(--sp-3); color: var(--text-muted); margin: 0; } /* ---------- 18. Footer ---------- */ .footer { background: var(--navy); color: #C5E4FF; padding-block: var(--sp-6) var(--sp-4); position: relative; } [data-theme="dark"] .footer { background: #02152f; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-4); margin-bottom: var(--sp-5); } .footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: var(--sp-2); } .footer__brand .brand { color: #fff; margin-bottom: var(--sp-2); } .footer__brand .brand small { color: #7FA8D9; } .footer__brand p { font-size: 0.9rem; color: #9FC6F0; } .footer ul li { margin-bottom: 10px; } .footer ul li a { color: #9FC6F0; font-size: 0.9rem; } .footer ul li a:hover { color: var(--aqua); } .footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; } .footer__contact i { width: 18px; height: 18px; color: var(--aqua); flex-shrink: 0; margin-top: 2px; } .footer__social { display: flex; gap: 12px; margin-top: var(--sp-2); } .footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); color: #fff; } .footer__social a:hover { background: var(--aqua); color: var(--navy); } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--sp-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: #7FA8D9; } /* ---------- 19. Floating UI ---------- */ .float-whatsapp { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-float); width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,0.5); transition: transform var(--dur) var(--ease); } .float-whatsapp:hover { transform: scale(1.08); color: #fff; } .float-whatsapp i { width: 28px; height: 28px; } .float-whatsapp::after { content: "Order on WhatsApp"; position: absolute; right: 70px; white-space: nowrap; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: var(--r-sm); font-size: 0.82rem; opacity: 0; pointer-events: none; transition: opacity var(--dur); } .float-whatsapp:hover::after { opacity: 1; } .back-top { position: fixed; bottom: 24px; left: 24px; z-index: var(--z-float); width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--glass-border); color: var(--heading); display: grid; place-items: center; box-shadow: var(--sh-2); backdrop-filter: blur(var(--glass-blur)); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--dur) var(--ease); } .back-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-top i { width: 22px; height: 22px; } /* Cursor glow (desktop only, injected via JS) */ .cursor-glow { position: fixed; top: 0; left: 0; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,232,0.18) 0%, transparent 60%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: opacity 400ms; opacity: 0; mix-blend-mode: screen; } /* ---------- 20. Modal (product quick-view) ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(3,17,40,0.55); backdrop-filter: blur(4px); z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-3); opacity: 0; visibility: hidden; transition: var(--dur); } .modal-overlay.open { opacity: 1; visibility: visible; } .modal { background: var(--surface-solid); border-radius: var(--r-lg); padding: var(--sp-5); max-width: 540px; width: 100%; box-shadow: var(--sh-3); position: relative; transform: scale(0.95); transition: transform 320ms var(--ease); max-height: 90vh; overflow-y: auto; } .modal-overlay.open .modal { transform: scale(1); } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); border: none; color: var(--heading); display: grid; place-items: center; } .modal-close i { width: 20px; height: 20px; } /* ---------- 21. Enquiry cart (products page) ---------- */ .cart-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--surface-solid); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(3,43,95,0.12); padding: var(--sp-2) 0; transform: translateY(110%); transition: transform 360ms var(--ease); } .cart-bar.show { transform: translateY(0); } .cart-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; } .cart-summary { font-family: var(--font-num); font-weight: 700; color: var(--heading); } .cart-summary span { color: var(--deep-blue); } .qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); overflow: hidden; } .qty button { width: 36px; height: 36px; background: var(--bg-alt); border: none; color: var(--heading); font-size: 1.2rem; } .qty input { width: 44px; text-align: center; border: none; min-height: 36px; background: transparent; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Page hero (subpages) */ .page-hero { background: var(--grad-deep); color: #fff; padding-top: calc(var(--nav-h) + var(--sp-5)); padding-bottom: var(--sp-6); position: relative; overflow: hidden; text-align: center; } .page-hero h1 { color: #fff; } .page-hero p { color: #C5E4FF; margin-inline: auto; max-width: 60ch; } .page-hero .container { position: relative; z-index: 2; } /* Wave divider */ .wave-divider { display: block; width: 100%; height: auto; line-height: 0; } .wave-divider svg { width: 100%; height: auto; display: block; } /* Comparison table */ .compare-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); } .compare-table th, .compare-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .compare-table th { background: var(--navy); color: #fff; font-family: var(--font-head); } .compare-table tr:last-child td { border-bottom: none; } .compare-table .check { color: var(--success-aqua); } .compare-table .cross { color: var(--text-muted); } /* Utility */ .center { text-align: center; } .mt-4 { margin-top: var(--sp-4); } .mb-0 { margin-bottom: 0; } .flex-cta { display: flex; gap: 14px; flex-wrap: wrap; } .flex-cta.center { justify-content: center; } .muted { color: var(--text-muted); } .hidden { display: none !important; } .value-list { display: flex; flex-direction: column; gap: 12px; } .value-list li { display: flex; gap: 12px; align-items: flex-start; } .value-list li i { width: 22px; height: 22px; color: var(--success-aqua); flex-shrink: 0; margin-top: 2px; }