/* ============================================================ Ashulabs — Product page themes & motion system Loaded AFTER css/style.css. Adds: 1. Colour themes for the 2026 product line (7 products) 2. A shared scroll-reveal + motion library (js/reveal.js) 3. Animated hero "graphic" primitives reused across pages Every product page reuses the existing section classes from style.css (.hms-hero, .value-card, .snapshot-card, .module-card, .pricing-card, .faq-item, .contact …) and only swaps the theme. ============================================================ */ :root { /* Product accents — one hue per product, kept well separated */ --meetspace: #0284c7; --meetspace-dark: #0369a1; --restaurant: #e11d48; --restaurant-dark: #be123c; --commerce: #65a30d; --commerce-dark: #4d7c0f; --quickcom: #7c3aed; --quickcom-dark: #6d28d9; --hotel: #b08d57; --hotel-dark: #96733f; --legal: #2f4575; --legal-dark: #25375f; --legal-gold: #c9931a; --ai: #c026d3; --ai-dark: #a21caf; --mail: #0891b2; --mail-dark: #0e7490; --gradient-meetspace: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); --gradient-restaurant: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); --gradient-commerce: linear-gradient(135deg, #a3e635 0%, #4d7c0f 100%); --gradient-quickcom: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); --gradient-hotel: linear-gradient(135deg, #d4b483 0%, #a97c50 100%); --gradient-legal: linear-gradient(135deg, #506a9c 0%, #25375f 100%); --gradient-ai: linear-gradient(135deg, #e879f9 0%, #a21caf 100%); --gradient-mail: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%); } /* ============================================================ 1. MOTION SYSTEM Scroll reveal — elements carrying [data-reveal] start hidden and are un-hidden by js/reveal.js. The `.reveal-ready` class is set by the script on ; without JS the content simply shows (no FOUC, never permanently invisible). ============================================================ */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .reveal-ready [data-reveal='left'] { transform: translateX(-32px); } .reveal-ready [data-reveal='right'] { transform: translateX(32px); } .reveal-ready [data-reveal='scale'] { transform: scale(0.94); } .reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; } /* Keyframes shared by every product hero graphic */ @keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes fx-float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(1.5deg); } } @keyframes fx-pulse-ring { 0% { transform: scale(0.85); opacity: 0.7; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @keyframes fx-draw { to { stroke-dashoffset: 0; } } @keyframes fx-dash-flow { to { stroke-dashoffset: -60; } } @keyframes fx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @keyframes fx-spin { to { transform: rotate(360deg); } } @keyframes fx-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes fx-wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } @keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fx-pop-in { 0% { opacity: 0; transform: scale(0.8) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes fx-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } } /* Motion utilities */ .fx-float { animation: fx-float 6s ease-in-out infinite; } .fx-float-slow { animation: fx-float-slow 9s ease-in-out infinite; } .fx-spin-slow { animation: fx-spin 22s linear infinite; transform-origin: center; } .fx-glow { animation: fx-glow 4s ease-in-out infinite; } .fx-blink { animation: fx-blink 2.4s ease-in-out infinite; } /* Stagger helper: .fx-d1 … .fx-d6 delay any animation on the element */ .fx-d1 { animation-delay: 0.15s; } .fx-d2 { animation-delay: 0.3s; } .fx-d3 { animation-delay: 0.45s; } .fx-d4 { animation-delay: 0.6s; } .fx-d5 { animation-delay: 0.75s; } .fx-d6 { animation-delay: 0.9s; } /* SVG line-drawing: pair with .fx-draw on a path that has a dash array */ .fx-draw { stroke-dasharray: 320; stroke-dashoffset: 320; animation: fx-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; } /* Animated "data flowing along a wire" — for pipeline / integration graphics */ .fx-flow { stroke-dasharray: 6 10; animation: fx-dash-flow 1.6s linear infinite; } /* ============================================================ 2. HERO GRAPHIC PRIMITIVES A product hero is: .hms-hero > .container > .hero-grid .hero-content (copy) | .hero-figure (animated SVG/graphic) ============================================================ */ .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero-figure { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; } .hero-figure svg { width: 100%; height: auto; max-width: 520px; overflow: visible; } /* Soft coloured halo behind a hero graphic */ .hero-figure::before { content: ''; position: absolute; width: 78%; height: 78%; border-radius: 50%; filter: blur(70px); opacity: 0.4; background: rgba(255, 255, 255, 0.18); animation: fx-glow 7s ease-in-out infinite; } /* Glass panel used inside hero graphics (mock UI cards) */ .glass-card { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } /* Live "ping" dot — signals realtime features */ .live-dot { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; } .live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #4ade80; animation: fx-pulse-ring 2s ease-out infinite; } /* Logo / trust marquee strip */ .marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; width: max-content; gap: 56px; animation: fx-marquee 32s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--gray-500); white-space: nowrap; } /* Numbered "how it works" flow with an animated connector */ .flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } .flow-step { position: relative; text-align: center; padding: 32px 24px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .flow-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } .flow-step-num { width: 48px; height: 48px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 1.1rem; color: var(--white); } .flow-step h3 { font-size: 1.15rem; margin-bottom: 10px; } .flow-step p { color: var(--gray-500); font-size: 0.95rem; line-height: 1.65; } /* Comparison table — "why us vs the usual option" */ .compare-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .compare-table th, .compare-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--gray-200); font-size: 0.96rem; } .compare-table thead th { background: var(--gray-100); font-weight: 700; color: var(--dark); } .compare-table tbody tr:last-child td { border-bottom: none; } .compare-table tbody tr:hover { background: var(--gray-100); } .compare-yes { color: #16a34a; font-weight: 600; } .compare-no { color: var(--gray-400); } /* ============================================================ 3. PRODUCT THEMES ============================================================ */ /* ---------- MeetSpace (video meetings) ---------- */ .navbar.navbar-meetspace.scrolled { background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%); } .meetspace-badge { background: rgba(2, 132, 199, 0.2); border: 1px solid rgba(2, 132, 199, 0.45); color: #7dd3fc; } .gradient-text-meetspace { background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #0ea5e9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-meetspace { background: var(--gradient-meetspace); color: var(--white); box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4); } .btn-meetspace:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5); } .btn-meetspace-outline { background: transparent; color: var(--meetspace); border: 2px solid var(--meetspace); } .btn-meetspace-outline:hover { background: var(--meetspace); color: var(--white); } .meetspace-tag { background: rgba(2, 132, 199, 0.1); color: var(--meetspace); } .meetspace-icon-bg { background: var(--gradient-meetspace); color: var(--white); } .meetspace-cta { background: var(--gradient-meetspace); } .page-meetspace .snapshot-card:hover { border-color: var(--meetspace); } .page-meetspace .snapshot-icon { background: rgba(2, 132, 199, 0.1); color: var(--meetspace); } .page-meetspace .module-card:hover { border-color: var(--meetspace); } .page-meetspace .badge-icon { color: var(--meetspace); } .page-meetspace .pricing-card.featured { border-color: var(--meetspace); } .page-meetspace .pricing-badge { background: var(--gradient-meetspace); } .page-meetspace .pricing-features svg { color: var(--meetspace); } .page-meetspace .flow-step-num { background: var(--gradient-meetspace); } .hms-hero.meetspace-hero { background: linear-gradient(135deg, #082f49 0%, #0c4a6e 50%, #075985 100%); } .hms-hero.meetspace-hero .hero-bg { background: radial-gradient(circle at 22% 78%, rgba(56, 189, 248, 0.25) 0%, transparent 50%), radial-gradient(circle at 78% 22%, rgba(2, 132, 199, 0.28) 0%, transparent 50%); } /* ---------- FluxDine (restaurant) ---------- */ .navbar.navbar-restaurant.scrolled { background: linear-gradient(135deg, #881337 0%, #be123c 100%); } .restaurant-badge { background: rgba(225, 29, 72, 0.2); border: 1px solid rgba(225, 29, 72, 0.45); color: #fda4af; } .gradient-text-restaurant { background: linear-gradient(135deg, #fda4af 0%, #fb7185 50%, #f43f5e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-restaurant { background: var(--gradient-restaurant); color: var(--white); box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4); } .btn-restaurant:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5); } .btn-restaurant-outline { background: transparent; color: var(--restaurant); border: 2px solid var(--restaurant); } .btn-restaurant-outline:hover { background: var(--restaurant); color: var(--white); } .restaurant-tag { background: rgba(225, 29, 72, 0.1); color: var(--restaurant); } .restaurant-icon-bg { background: var(--gradient-restaurant); color: var(--white); } .restaurant-cta { background: var(--gradient-restaurant); } .page-restaurant .snapshot-card:hover { border-color: var(--restaurant); } .page-restaurant .snapshot-icon { background: rgba(225, 29, 72, 0.1); color: var(--restaurant); } .page-restaurant .module-card:hover { border-color: var(--restaurant); } .page-restaurant .badge-icon { color: var(--restaurant); } .page-restaurant .pricing-card.featured { border-color: var(--restaurant); } .page-restaurant .pricing-badge { background: var(--gradient-restaurant); } .page-restaurant .pricing-features svg { color: var(--restaurant); } .page-restaurant .flow-step-num { background: var(--gradient-restaurant); } .hms-hero.restaurant-hero { background: linear-gradient(135deg, #4c0519 0%, #881337 50%, #9f1239 100%); } .hms-hero.restaurant-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(251, 113, 133, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(249, 115, 22, 0.22) 0%, transparent 50%); } /* ---------- Commerce (D2C storefront) ---------- */ .navbar.navbar-commerce.scrolled { background: linear-gradient(135deg, #1a2e05 0%, #3f6212 100%); } .commerce-badge { background: rgba(132, 204, 22, 0.2); border: 1px solid rgba(132, 204, 22, 0.45); color: #d9f99d; } .gradient-text-commerce { background: linear-gradient(135deg, #d9f99d 0%, #a3e635 50%, #84cc16 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-commerce { background: var(--gradient-commerce); color: #1a2e05; box-shadow: 0 4px 15px rgba(101, 163, 13, 0.4); } .btn-commerce:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(101, 163, 13, 0.5); } .btn-commerce-outline { background: transparent; color: var(--commerce-dark); border: 2px solid var(--commerce); } .btn-commerce-outline:hover { background: var(--commerce); color: #1a2e05; } .commerce-tag { background: rgba(101, 163, 13, 0.12); color: var(--commerce-dark); } .commerce-icon-bg { background: var(--gradient-commerce); color: #1a2e05; } .commerce-cta { background: var(--gradient-commerce); } .page-commerce .snapshot-card:hover { border-color: var(--commerce); } .page-commerce .snapshot-icon { background: rgba(101, 163, 13, 0.12); color: var(--commerce-dark); } .page-commerce .module-card:hover { border-color: var(--commerce); } .page-commerce .badge-icon { color: var(--commerce-dark); } .page-commerce .pricing-card.featured { border-color: var(--commerce); } .page-commerce .pricing-badge { background: var(--gradient-commerce); color: #1a2e05; } .page-commerce .pricing-features svg { color: var(--commerce-dark); } .page-commerce .flow-step-num { background: var(--gradient-commerce); color: #1a2e05; } .hms-hero.commerce-hero { background: linear-gradient(135deg, #1a2e05 0%, #365314 50%, #3f6212 100%); } .hms-hero.commerce-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(163, 230, 53, 0.22) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(132, 204, 22, 0.25) 0%, transparent 50%); } /* ---------- qCom (quick commerce) ---------- */ .navbar.navbar-quickcom.scrolled { background: linear-gradient(135deg, #3b0764 0%, #6d28d9 100%); } .quickcom-badge { background: rgba(124, 58, 237, 0.22); border: 1px solid rgba(124, 58, 237, 0.45); color: #ddd6fe; } .gradient-text-quickcom { background: linear-gradient(135deg, #e9d5ff 0%, #c084fc 50%, #a855f7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-quickcom { background: var(--gradient-quickcom); color: var(--white); box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); } .btn-quickcom:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5); } .btn-quickcom-outline { background: transparent; color: var(--quickcom); border: 2px solid var(--quickcom); } .btn-quickcom-outline:hover { background: var(--quickcom); color: var(--white); } .quickcom-tag { background: rgba(124, 58, 237, 0.1); color: var(--quickcom); } .quickcom-icon-bg { background: var(--gradient-quickcom); color: var(--white); } .quickcom-cta { background: var(--gradient-quickcom); } .page-quickcom .snapshot-card:hover { border-color: var(--quickcom); } .page-quickcom .snapshot-icon { background: rgba(124, 58, 237, 0.1); color: var(--quickcom); } .page-quickcom .module-card:hover { border-color: var(--quickcom); } .page-quickcom .badge-icon { color: var(--quickcom); } .page-quickcom .pricing-card.featured { border-color: var(--quickcom); } .page-quickcom .pricing-badge { background: var(--gradient-quickcom); } .page-quickcom .pricing-features svg { color: var(--quickcom); } .page-quickcom .flow-step-num { background: var(--gradient-quickcom); } .hms-hero.quickcom-hero { background: linear-gradient(135deg, #2e1065 0%, #4c1d95 50%, #5b21b6 100%); } .hms-hero.quickcom-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.28) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(217, 70, 239, 0.22) 0%, transparent 50%); } /* ---------- Hotel (PMS) ---------- */ .navbar.navbar-hotel.scrolled { background: linear-gradient(135deg, #2c2417 0%, #4a3b25 100%); } .hotel-badge { background: rgba(201, 169, 110, 0.2); border: 1px solid rgba(201, 169, 110, 0.5); color: #e7d3ac; } .gradient-text-hotel { background: linear-gradient(135deg, #f0e2c4 0%, #d4b483 50%, #c9a96e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-hotel { background: var(--gradient-hotel); color: #2c2417; box-shadow: 0 4px 15px rgba(176, 141, 87, 0.4); } .btn-hotel:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(176, 141, 87, 0.55); } .btn-hotel-outline { background: transparent; color: var(--hotel-dark); border: 2px solid var(--hotel); } .btn-hotel-outline:hover { background: var(--hotel); color: #2c2417; } .hotel-tag { background: rgba(176, 141, 87, 0.14); color: var(--hotel-dark); } .hotel-icon-bg { background: var(--gradient-hotel); color: #2c2417; } .hotel-cta { background: linear-gradient(135deg, #96733f 0%, #c9a96e 100%); } .page-hotel .snapshot-card:hover { border-color: var(--hotel); } .page-hotel .snapshot-icon { background: rgba(176, 141, 87, 0.14); color: var(--hotel-dark); } .page-hotel .module-card:hover { border-color: var(--hotel); } .page-hotel .badge-icon { color: var(--hotel-dark); } .page-hotel .pricing-card.featured { border-color: var(--hotel); } .page-hotel .pricing-badge { background: var(--gradient-hotel); color: #2c2417; } .page-hotel .pricing-features svg { color: var(--hotel-dark); } .page-hotel .flow-step-num { background: var(--gradient-hotel); color: #2c2417; } .hms-hero.hotel-hero { background: linear-gradient(135deg, #1c1710 0%, #2c2417 50%, #4a3b25 100%); } .hms-hero.hotel-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(201, 169, 110, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(212, 180, 131, 0.2) 0%, transparent 50%); } /* ---------- LexShield (legal) ---------- */ .navbar.navbar-legal.scrolled { background: linear-gradient(135deg, #0b1222 0%, #25375f 100%); } .legal-badge { background: rgba(201, 147, 26, 0.18); border: 1px solid rgba(201, 147, 26, 0.45); color: #ecc452; } .gradient-text-legal { background: linear-gradient(135deg, #f2d98a 0%, #e6b22f 50%, #c9931a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-legal { background: linear-gradient(135deg, #e6b22f 0%, #c9931a 100%); color: #0b1222; box-shadow: 0 4px 15px rgba(201, 147, 26, 0.4); } .btn-legal:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(201, 147, 26, 0.55); } .btn-legal-outline { background: transparent; color: var(--legal); border: 2px solid var(--legal); } .btn-legal-outline:hover { background: var(--legal); color: var(--white); } .legal-tag { background: rgba(47, 69, 117, 0.1); color: var(--legal); } .legal-icon-bg { background: var(--gradient-legal); color: var(--white); } .legal-cta { background: var(--gradient-legal); } .page-legal .snapshot-card:hover { border-color: var(--legal); } .page-legal .snapshot-icon { background: rgba(47, 69, 117, 0.1); color: var(--legal); } .page-legal .module-card:hover { border-color: var(--legal); } .page-legal .badge-icon { color: var(--legal-gold); } .page-legal .pricing-card.featured { border-color: var(--legal-gold); } .page-legal .pricing-badge { background: linear-gradient(135deg, #e6b22f 0%, #c9931a 100%); color: #0b1222; } .page-legal .pricing-features svg { color: var(--legal); } .page-legal .flow-step-num { background: var(--gradient-legal); } .hms-hero.legal-hero { background: linear-gradient(135deg, #0b1222 0%, #121c33 50%, #1b2845 100%); } .hms-hero.legal-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(80, 106, 156, 0.28) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(230, 178, 47, 0.16) 0%, transparent 50%); } /* ---------- AI (private LLM infrastructure) ---------- */ .navbar.navbar-ai.scrolled { background: linear-gradient(135deg, #3b0764 0%, #a21caf 100%); } .ai-badge { background: rgba(192, 38, 211, 0.2); border: 1px solid rgba(192, 38, 211, 0.45); color: #f5d0fe; } .gradient-text-ai { background: linear-gradient(135deg, #f5d0fe 0%, #e879f9 50%, #c026d3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-ai { background: var(--gradient-ai); color: var(--white); box-shadow: 0 4px 15px rgba(192, 38, 211, 0.4); } .btn-ai:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192, 38, 211, 0.55); } .btn-ai-outline { background: transparent; color: var(--ai); border: 2px solid var(--ai); } .btn-ai-outline:hover { background: var(--ai); color: var(--white); } .ai-tag { background: rgba(192, 38, 211, 0.1); color: var(--ai); } .ai-icon-bg { background: var(--gradient-ai); color: var(--white); } .ai-cta { background: var(--gradient-ai); } .page-ai .snapshot-card:hover { border-color: var(--ai); } .page-ai .snapshot-icon { background: rgba(192, 38, 211, 0.1); color: var(--ai); } .page-ai .module-card:hover { border-color: var(--ai); } .page-ai .badge-icon { color: var(--ai); } .page-ai .pricing-card.featured { border-color: var(--ai); } .page-ai .pricing-badge { background: var(--gradient-ai); } .page-ai .pricing-features svg { color: var(--ai); } .page-ai .flow-step-num { background: var(--gradient-ai); } .hms-hero.ai-hero { background: linear-gradient(135deg, #1e1b4b 0%, #3b0764 50%, #701a75 100%); } .hms-hero.ai-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(232, 121, 249, 0.24) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(162, 28, 175, 0.3) 0%, transparent 50%); } /* ---------- AshuMail (self-hosted email) ---------- */ .navbar.navbar-mail.scrolled { background: linear-gradient(135deg, #083344 0%, #155e75 100%); } .mail-badge { background: rgba(8, 145, 178, 0.2); border: 1px solid rgba(8, 145, 178, 0.45); color: #67e8f9; } .gradient-text-mail { background: linear-gradient(135deg, #a5f3fc 0%, #22d3ee 50%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn-mail { background: var(--gradient-mail); color: var(--white); box-shadow: 0 4px 15px rgba(8, 145, 178, 0.4); } .btn-mail:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(8, 145, 178, 0.5); } .btn-mail-outline { background: transparent; color: var(--mail); border: 2px solid var(--mail); } .btn-mail-outline:hover { background: var(--mail); color: var(--white); } .mail-tag { background: rgba(8, 145, 178, 0.1); color: var(--mail); } .mail-icon-bg { background: var(--gradient-mail); color: var(--white); } .mail-cta { background: var(--gradient-mail); } .page-mail .snapshot-card:hover { border-color: var(--mail); } .page-mail .snapshot-icon { background: rgba(8, 145, 178, 0.1); color: var(--mail); } .page-mail .module-card:hover { border-color: var(--mail); } .page-mail .badge-icon { color: var(--mail); } .page-mail .pricing-card.featured { border-color: var(--mail); } .page-mail .pricing-badge { background: var(--gradient-mail); } .page-mail .pricing-features svg { color: var(--mail); } .page-mail .flow-step-num { background: var(--gradient-mail); } .hms-hero.mail-hero { background: linear-gradient(135deg, #082f3e 0%, #083344 50%, #0e4a5e 100%); } .hms-hero.mail-hero .hero-bg { background: radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.22) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(8, 145, 178, 0.28) 0%, transparent 50%); } /* Homepage service-card accents for the new products */ .service-card.meetspace .service-icon { background: var(--gradient-meetspace); } .service-card.restaurant .service-icon { background: var(--gradient-restaurant); } .service-card.commerce .service-icon { background: var(--gradient-commerce); color: #1a2e05; } .service-card.quickcom .service-icon { background: var(--gradient-quickcom); } .service-card.hotel .service-icon { background: var(--gradient-hotel); color: #2c2417; } .service-card.legal .service-icon { background: var(--gradient-legal); } .service-card.ai .service-icon { background: var(--gradient-ai); } .service-card.mail .service-icon { background: var(--gradient-mail); } .service-card.velix .service-icon { background: linear-gradient(135deg, #64748b 0%, #334155 100%); } .service-card.meetspace:hover { border-color: var(--meetspace); } .service-card.restaurant:hover { border-color: var(--restaurant); } .service-card.commerce:hover { border-color: var(--commerce); } .service-card.quickcom:hover { border-color: var(--quickcom); } .service-card.hotel:hover { border-color: var(--hotel); } .service-card.legal:hover { border-color: var(--legal); } .service-card.ai:hover { border-color: var(--ai); } .service-card.mail:hover { border-color: var(--mail); } .service-card.velix:hover { border-color: #475569; } /* ============================================================ 4. RESPONSIVE ============================================================ */ @media (max-width: 992px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-figure { min-height: 300px; order: 2; } .hero-figure svg { max-width: 420px; } .flow-steps { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 768px) { .hero-figure { min-height: 240px; } .compare-table { display: block; overflow-x: auto; white-space: nowrap; } .marquee-track { gap: 32px; } } /* ============================================================ 4a. HOMEPAGE HERO RING — orbiting product dots The three rings rotate (style.css), but a uniform circle shows no motion. These dots ride the rings so the rotation is visible, each in a product accent colour. ring-2 is dashed for texture. ============================================================ */ .graphic-ring .orbit-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; /* sits on the ring line */ top: -5px; left: 50%; margin-left: -5px; } /* Spread the dots around each ring's circumference */ .ring-1 .orbit-dot:nth-child(2) { top: 50%; left: -5px; margin-top: -5px; margin-left: 0; } .ring-1 .orbit-dot:nth-child(3) { top: auto; bottom: 12%; left: 85%; } .ring-2 .orbit-dot:nth-child(2) { top: 70%; left: -3px; margin-left: 0; } .ring-3 .orbit-dot { top: auto; bottom: -5px; } .dot-ai { background: var(--ai); box-shadow: 0 0 12px rgba(192, 38, 211, 0.8); } .dot-mail { background: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.8); } .dot-hotel { background: #d4b483; box-shadow: 0 0 12px rgba(212, 180, 131, 0.8); } .dot-restaurant { background: #fb7185; box-shadow: 0 0 12px rgba(251, 113, 133, 0.8); } .dot-quickcom { background: #a855f7; box-shadow: 0 0 12px rgba(168, 85, 247, 0.8); } .dot-commerce { background: #a3e635; box-shadow: 0 0 12px rgba(163, 230, 53, 0.8); } /* Dashed middle ring makes the counter-rotation legible */ .graphic-ring.ring-2 { border-style: dashed; border-color: rgba(255, 255, 255, 0.16); } /* Sixth floating card (Legal) — mirrors card-5 on the right edge */ .card-6 { top: 45%; right: -12%; animation-delay: 3.8s; } @media (max-width: 1024px) { .card-6 { right: 0; } } /* Keep the ring's rotation and card float gentle for reduced motion */ @media (prefers-reduced-motion: reduce) { .graphic-ring, .floating-card { animation: none !important; } } /* ============================================================ 4b. FOOTER — two-column product list The product line outgrew a single column; lay it out as a balanced 2-column grid so the footer stays compact. ============================================================ */ /* Give the (2-column) Products column extra width so labels like "Private AI & LLMs" don't wrap. Scoped via :has() to the only footer that carries the grid — the homepage — so other pages' footers are untouched. */ .footer-links:has(.footer-products-grid) { grid-template-columns: 1.9fr 1fr 1fr; } /* Higher specificity than `.footer-column ul` (which forces a single flex column) so the display:grid actually takes effect. */ .footer-column ul.footer-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 12px; } /* Keep each product label on a single line for a clean, even two-column list. */ .footer-column ul.footer-products-grid a { white-space: nowrap; } @media (max-width: 600px) { .footer-links:has(.footer-products-grid) { grid-template-columns: 1fr; } .footer-column ul.footer-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .footer-column ul.footer-products-grid { grid-template-columns: 1fr; } } /* ============================================================ 4c. ANCHOR NAVIGATION — clear the fixed navbar Product pages use a fixed navbar; without this, jumping to a section (e.g. #stack) tucks its heading under the bar. Applies to every in-page anchor target on the product pages. ============================================================ */ .page-meetspace section[id], .page-restaurant section[id], .page-commerce section[id], .page-quickcom section[id], .page-hotel section[id], .page-legal section[id], .page-ai section[id], .page-mail section[id] { scroll-margin-top: 88px; } /* ============================================================ 5. ACCESSIBILITY Users who ask for less motion get a static, fully-visible page: reveals resolve instantly and looping animations stop. ============================================================ */ @media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .fx-float, .fx-float-slow, .fx-spin-slow, .fx-glow, .fx-blink, .fx-draw, .fx-flow, .marquee-track, .hero-figure::before, .live-dot::after { animation: none !important; } .fx-draw { stroke-dashoffset: 0 !important; } }