:root { --brand-primary: #4c1d95; --brand-purple: #7c3aed; --brand-cyan: #4fc3f7; --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-purple) 100%); --ink: #1b2430; --muted: #6c7685; --bg-soft: #f4f6fb; --whatsapp: #25d366; /* Retint Bootstrap's own "primary" tokens so text-primary/bg-primary/ border-primary (which read these vars) follow the brand color too. */ --bs-primary: #4c1d95; --bs-primary-rgb: 76, 29, 149; } /* .btn-primary / .btn-outline-primary bake their colors into per-component custom properties at Bootstrap's build time, so overriding --bs-primary alone doesn't reach them — set those explicitly here instead. */ .btn-primary { --bs-btn-bg: var(--v-primary, var(--brand-primary)); --bs-btn-border-color: var(--v-primary, var(--brand-primary)); --bs-btn-hover-bg: var(--v-primary-dark, #3f1878); --bs-btn-hover-border-color: var(--v-primary-dark, #3f1878); --bs-btn-active-bg: var(--v-primary-dark, #35135f); --bs-btn-active-border-color: var(--v-primary-dark, #35135f); --bs-btn-disabled-bg: var(--v-primary, var(--brand-primary)); --bs-btn-disabled-border-color: var(--v-primary, var(--brand-primary)); --bs-btn-focus-shadow-rgb: 76, 29, 149; } .btn-outline-primary { --bs-btn-color: var(--v-primary, var(--brand-primary)); --bs-btn-border-color: var(--v-primary, var(--brand-primary)); --bs-btn-hover-bg: var(--v-primary, var(--brand-primary)); --bs-btn-hover-border-color: var(--v-primary, var(--brand-primary)); --bs-btn-active-bg: var(--v-primary, var(--brand-primary)); --bs-btn-active-border-color: var(--v-primary, var(--brand-primary)); --bs-btn-focus-shadow-rgb: 76, 29, 149; } body { color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Per-vertical themes — each business page sets one of these classes on to swap its accent palette. Components below read var(--v-*) with a fallback to the default brand purple, so untagged pages (home, pricing, industries) are unaffected. */ .theme-hotels { --v-primary: #7c2d42; --v-primary-dark: #55202f; --v-accent: #c9a35c; --v-gradient: linear-gradient(135deg, #4a1c29 0%, #7c2d42 55%, #b5824a 130%); } .theme-supermarkets { --v-primary: #15803d; --v-primary-dark: #0f5c2c; --v-accent: #84cc16; --v-gradient: linear-gradient(135deg, #0f4023 0%, #15803d 55%, #65a30d 130%); } .theme-pharmacy { --v-primary: #0d7d72; --v-primary-dark: #095c54; --v-accent: #0ea5e9; --v-gradient: linear-gradient(135deg, #073b36 0%, #0d7d72 55%, #0ea5e9 130%); } .theme-warehouses { --v-primary: #373098; --v-primary-dark: #211d5c; --v-accent: #f0993b; --v-gradient: linear-gradient(135deg, #1c1a45 0%, #373098 55%, #6355d6 130%); } .icon-wrap-primary { background: color-mix(in srgb, var(--v-primary, var(--brand-primary)) 12%, white); } .icon-wrap-primary i { color: var(--v-primary, var(--brand-primary)); } .icon-wrap-accent { background: color-mix(in srgb, var(--v-accent, var(--brand-cyan)) 18%, white); } .icon-wrap-accent i { color: var(--v-accent, var(--brand-cyan)); } .icon-wrap-dark { background: color-mix(in srgb, var(--v-primary-dark, var(--brand-primary)) 12%, white); } .icon-wrap-dark i { color: var(--v-primary-dark, var(--brand-primary)); } a { text-decoration: none; } .navbar-brand { font-weight: 700; letter-spacing: .3px; } .navbar-brand .accent { color: var(--brand-cyan); } .navbar-brand .logo-badge { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-gradient); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-right: .5rem; } .hero { background: var(--v-gradient, var(--brand-gradient)); color: #fff; padding: 4.5rem 0 5rem; } .hero h1 { font-weight: 800; line-height: 1.15; } .hero .lead { opacity: .92; } .hero .badge-soft { background: rgba(255,255,255,.15); color: #fff; font-weight: 500; } .btn-cta { background: #fff; color: var(--v-primary, var(--brand-primary)); font-weight: 600; border: none; } .btn-cta:hover { background: #eef3ff; color: var(--v-primary, var(--brand-primary)); } .btn-outline-cta { border: 1px solid rgba(255,255,255,.6); color: #fff; font-weight: 600; } .btn-outline-cta:hover { background: rgba(255,255,255,.12); color: #fff; } .btn-whatsapp { background: var(--whatsapp); color: #fff; font-weight: 600; border: none; } .btn-whatsapp:hover { background: #1ebc59; color: #fff; } section { padding: 4rem 0; } .section-soft { background: var(--bg-soft); } .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--v-primary, var(--brand-primary)); } .navbar-nav .nav-link.active { color: var(--v-primary, var(--brand-primary)); font-weight: 600; } .card-feature { border: 0; border-radius: .9rem; box-shadow: 0 2px 14px rgba(20,30,60,.06); height: 100%; } .card-feature .icon-wrap { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; } .vertical-card { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 18px rgba(20,30,60,.08); transition: transform .15s ease, box-shadow .15s ease; height: 100%; } .vertical-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(20,30,60,.14); } .vertical-card .card-top { height: 6px; } .pricing-card { border-radius: 1rem; border: 1px solid #e6e9f2; height: 100%; } .pricing-card.featured { border: 2px solid var(--v-primary, var(--brand-primary)); box-shadow: 0 10px 30px rgba(20,30,60,.14); } /* Pricing page: business-type tabs above the plan cards */ .pricing-tabs .nav-link { color: var(--muted); font-weight: 600; border-radius: 2rem; padding: .55rem 1.1rem; } .pricing-tabs .nav-link.active { background: var(--brand-gradient); color: #fff; } .price-note { font-size: .78rem; color: var(--muted); } .badge-example { background: #fff3cd; color: #7a5b00; font-weight: 600; } .whatsapp-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; background: var(--whatsapp); color: #fff; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 6px 18px rgba(37,211,102,.45); } .whatsapp-float:hover { color: #fff; filter: brightness(1.05); } footer.site-footer { background: #10131a; color: #b7bfcd; padding: 2.5rem 0; } footer.site-footer a { color: #dfe4ee; } footer.site-footer a:hover { color: var(--brand-cyan); } .cta-band { background: var(--v-gradient, var(--brand-gradient)); color: #fff; border-radius: 1.25rem; } /* Real product screenshot showcase */ .browser-frame { border-radius: .9rem; overflow: hidden; box-shadow: 0 20px 50px rgba(20,30,60,.25); background: #fff; border: 1px solid rgba(0,0,0,.06); } .browser-frame .browser-chrome { background: #e9ecf2; padding: .55rem .75rem; display: flex; align-items: center; gap: .4rem; } .browser-frame .browser-dot { width: 10px; height: 10px; border-radius: 50%; background: #d3d8e2; } .browser-frame img { display: block; width: 100%; height: auto; } /* FAQ accordion tweaks */ .faq .accordion-button:not(.collapsed) { color: var(--brand-primary); background: rgba(76,29,149,.06); box-shadow: none; } .faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(76,29,149,.15); } @media (max-width: 767px) { .hero { padding: 3rem 0 3.5rem; text-align: center; } section { padding: 3rem 0; } }