/* ===================================================================== * Sentifyd landing page shared styles * Used by: platform/landing.html, platform/events-concierge.html * * Brand palette (source: _variables.scss): * --sf-primary : #00bfdb (cyan, primary CTA) * --sf-secondary : #801bea (violet, secondary accent) * --sf-purple : #a44cff (highlight / glow) * --sf-indigo : #6939d2 (deep accent) * ===================================================================== */ :root { --sf-primary: 0, 191, 219; /* #00bfdb */ --sf-secondary: 128, 27, 234; /* #801bea */ --sf-purple: 164, 76, 255; /* #a44cff */ --sf-indigo: 105, 57, 210; /* #6939d2 */ } /* ---------- Mobile-only compact fixed navbar ---------- */ /* Only kicks in on phones (<= 767px). Tablets and up keep the normal sticky navigation-shadow bar. */ .landing-mobile-nav, .landing-mobile-drawer { display: none; } @media (max-width: 767px) { /* Hide the default floating "navigation-shadow" navbar on phones only. It lives inside a position-sticky container right after . */ body.landing > .container.position-sticky { display: none !important; } .landing-mobile-nav { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: 56px; align-items: center; justify-content: space-between; padding: 0 12px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .landing-mobile-nav img { height: 28px; width: auto; } .landing-mobile-nav .btn { padding: .25rem .65rem; font-size: .72rem; } .landing-mobile-nav .hamburger { background: transparent; border: 0; padding: 6px 8px; margin-right: 4px; color: #344767; font-size: 1.1rem; line-height: 1; } .landing-mobile-drawer { display: none; position: fixed; top: 56px; left: 0; right: 0; z-index: 1029; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); max-height: calc(100vh - 56px); overflow-y: auto; } .landing-mobile-drawer.open { display: block; } .landing-mobile-drawer a { display: block; padding: .75rem 1rem; color: #344767; text-decoration: none; font-weight: 600; border-bottom: 1px solid #f0f2f5; } .landing-mobile-drawer a:hover { background: #f8f9fa; } /* Offset the page so the hero clears the fixed bar. */ body.landing { padding-top: 56px; } } /* ---------- Pulsing CTA ---------- */ .btn-pulse { animation: pulse-animation 2s infinite; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0 rgba(var(--sf-primary), 0.45); } 70% { box-shadow: 0 0 0 10px rgba(var(--sf-primary), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--sf-primary), 0); } } /* ---------- Eyebrow / chip / soft section ---------- */ .eyebrow { font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; opacity: 1; } @media (min-width: 768px) { .eyebrow { font-size: 1.05rem; letter-spacing: 2px; } } .chip { display: inline-flex; align-items: center; padding: .35rem .75rem; margin: .2rem; background: rgba(var(--sf-primary), .08); border: 1px solid rgba(var(--sf-primary), .25); border-radius: 20px; font-size: .8rem; color: #344767; font-weight: 600; white-space: nowrap; } .chip i { margin-right: .4rem; } .chip-on-dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(4px); } .chip-on-dark i { color: #33cce3; } .section-soft { background-color: #f8f9fa; } /* ---------- Split hero (light, elegant) ---------- */ .landing-hero-split { position: relative; /* Soft, premium light theme: subtle cyan glow top-left, lavender glow right, on a near-white linen base. Decorative blobs are added below via ::before / ::after for depth. */ background: radial-gradient(900px 520px at 12% 8%, rgba(var(--sf-primary), .18), transparent 60%), radial-gradient(800px 480px at 92% 18%, rgba(var(--sf-secondary), .14), transparent 60%), radial-gradient(700px 500px at 60% 110%, rgba(var(--sf-purple), .10), transparent 65%), linear-gradient(180deg, #f7f9ff 0%, #eef2fb 100%); color: #1f2937; overflow: hidden; isolation: isolate; } /* Decorative soft blobs to add depth without busy-ness. */ .landing-hero-split::before, .landing-hero-split::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; } .landing-hero-split::before { width: 520px; height: 520px; top: -120px; left: -140px; background: radial-gradient(circle, rgba(var(--sf-primary), .55), transparent 70%); } .landing-hero-split::after { width: 600px; height: 600px; top: -60px; right: -180px; background: radial-gradient(circle, rgba(var(--sf-secondary), .35), transparent 70%); } /* Subtle bottom edge that fades into the next section. */ .landing-hero-split > .container.hero-inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--sf-indigo), .25), transparent); } .landing-hero-split .hero-inner { /* Align the hero content with the floating nav pill. The pill uses .container (default x-padding ~.75rem) plus .mx-4 on the

(=1.5rem), so its visible edges sit ~2.25rem from the container's outer edge. We mirror that inset here so the headline and avatar panel land on the same vertical guides as the navbar. */ position: relative; padding: 5.5rem 2.25rem 3rem; } @media (min-width: 768px) and (max-width: 991px) { .landing-hero-split .hero-inner { padding: 8rem 2.25rem 3rem; } } @media (min-width: 992px) { .landing-hero-split .hero-inner { padding: 8rem 2.25rem 5rem; } /* Rebalance the split: give the messaging more horizontal room and pull the avatar in closer so there's less dead space between them. */ .landing-hero-split .hero-inner > .row > .col-lg-6:first-child { flex: 0 0 auto; width: 58.3333%; /* col-lg-7 */ } .landing-hero-split .hero-inner > .row > .col-lg-6:last-child { flex: 0 0 auto; width: 41.6667%; /* col-lg-5 */ } } .landing-hero-split h1 { color: #0f1530; font-size: clamp(1.85rem, 3.4vw, 3.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin-bottom: 1.1rem; } /* Gradient accent on the noun in the headline — applied to a span the author can wrap, but also harmless if not used. */ .landing-hero-split h1 .accent, .landing-hero-split h1 strong { background: linear-gradient(90deg, rgb(var(--sf-primary)), rgb(var(--sf-secondary))); -webkit-background-clip: text; background-clip: text; color: transparent; } .landing-hero-split .lead { color: #475569; font-size: 1.15rem; line-height: 1.6; font-weight: 500; max-width: 36rem; } .landing-hero-split .lead strong { color: #0f1530; font-weight: 700; } /* Eyebrow that ships as `text-white` from the macro — recolour on light. */ .landing-hero-split .eyebrow, .landing-hero-split .eyebrow.text-white { color: rgb(var(--sf-secondary)) !important; opacity: .9; } .landing-hero-split .hero-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; margin-bottom: .25rem; } /* Re-skin the chip-on-dark variant so it reads cleanly on the light hero. */ .landing-hero-split .chip-on-dark { background: rgba(255, 255, 255, .75); border: 1px solid rgba(15, 21, 48, .08); color: #344767; box-shadow: 0 1px 2px rgba(15, 21, 48, .04); backdrop-filter: blur(6px); } .landing-hero-split .chip-on-dark i { color: rgb(var(--sf-primary)); } .landing-hero-split .hero-ctas { margin-top: 1.75rem; } .landing-hero-split .hero-ctas .btn { margin: .25rem .5rem .25rem 0; } /* Landing CTAs: sentence case, consistent weight across primary/secondary. */ .landing-hero-split .hero-ctas .btn, .final-cta .btn { text-transform: none; letter-spacing: .2px; font-weight: 600; } .landing-hero-split .hero-ctas .btn-lg, .final-cta .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; border-radius: 12px; } /* Footnote under CTAs (was text-white-50 on the dark variant). */ .landing-hero-split .hero-ctas + .small, .landing-hero-split .text-white-50 { color: #64748b !important; } /* Avatar panel — frosted-glass card to anchor the right side. */ .landing-hero-split .hero-widget { position: relative; border-radius: 20px; /* Solid white so the panel reads as one continuous canvas with the embedded avatar's own white background — no visible inner border. */ background: #ffffff; /* No internal padding: the avatar widget already has its own rounded white card, so any padding here would show as a grey/white stripe between the two cards. */ padding: 0; /* Constrain width so the avatar doesn't sit in a sea of white space. Pulled to the LEFT of its column so the gap between the headline copy and the avatar is minimised on desktop. */ max-width: 420px; margin-left: 0; margin-right: auto; border: 1px solid rgba(15, 21, 48, .06); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px -20px rgba(15, 21, 48, .25), 0 8px 22px -10px rgba(var(--sf-secondary), .25); color: #344767; /* Clip the embedded avatar to the panel's rounded corners. */ overflow: hidden; } /* Make sure the embedded widget fills the panel edge-to-edge. */ .landing-hero-split .hero-widget > sentifyd-realtime, .landing-hero-split .hero-widget > sentifyd-bot { display: block; width: 100%; border-radius: inherit; } /* Soft glow ring around the avatar panel. */ .landing-hero-split .hero-widget::before { content: ""; position: absolute; inset: -2px; border-radius: 22px; padding: 2px; background: linear-gradient(135deg, rgba(var(--sf-primary), .55), rgba(var(--sf-secondary), .35) 50%, rgba(var(--sf-primary), 0) 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .6; } .landing-hero-split .hero-widget :is(sentifyd-realtime, sentifyd-bot, .modal, .modal-content, .dialog) { color: #344767; } /* Overlay-mode variant: when the embedded avatar uses overlay="true", the hero panel chrome (white card, border, shadow, glow ring) is removed so the avatar appears to stand directly on the hero background. The wrapper still provides positioning and a sensible aspect ratio. */ .landing-hero-split .hero-widget:has(sentifyd-realtime[overlay]), .landing-hero-split .hero-widget:has(sentifyd-realtime[overlay="true"]) { background: transparent; border: 0; box-shadow: none; overflow: visible; aspect-ratio: 4 / 5; } .landing-hero-split .hero-widget:has(sentifyd-realtime[overlay])::before, .landing-hero-split .hero-widget:has(sentifyd-realtime[overlay="true"])::before { content: none; } .landing-hero-split .hero-widget-caption { font-size: .82rem; color: #64748b; text-align: center; margin: .75rem 0 0; } .landing-hero-split .taaft-badge { display: inline-flex; align-items: center; gap: .4rem; background: rgba(15, 21, 48, .04); border: 1px solid rgba(15, 21, 48, .08); border-radius: 999px; padding: .25rem .6rem .25rem .35rem; font-size: .7rem; color: #344767; text-decoration: none; margin-left: .25rem; } .landing-hero-split .taaft-badge img { height: 18px; } @media (max-width: 991px) { /* Compress hero vertically on phones and small tablets so more of the Sento avatar is visible above the fold. NOTE: top padding is reinstated per-range below so the floating navbar never overlaps the headline. */ .landing-hero-split .hero-inner { padding-left: 1.25rem; padding-right: 1.25rem; } /* On mobile/tablet, render the CTAs *after* the avatar so the avatar isn't pushed below the fold by the buttons + footnote. We use `display: contents` on the text column so its children (.hero-text, .hero-actions) become direct flex items of the row, allowing `order` to interleave them with the avatar column. */ .landing-hero-split .hero-text-col { display: contents; } .landing-hero-split .hero-text { order: 1; text-align: center; flex: 0 0 100%; max-width: 100%; } .landing-hero-split .hero-widget-col { order: 2; } .landing-hero-split .hero-actions { order: 3; text-align: center; flex: 0 0 100%; max-width: 100%; } .landing-hero-split h1 { font-size: 1.6rem; margin-bottom: .5rem; } .landing-hero-split .lead { font-size: .95rem !important; line-height: 1.5 !important; margin-bottom: .5rem; } .landing-hero-split .hero-chips { margin-top: .5rem; margin-bottom: .25rem; } .landing-hero-split .hero-ctas { margin-top: 1rem; } .landing-hero-split .hero-widget { margin-top: .5rem; padding: 8px; /* Keep the elegant rounded card on phones too, just snug to the edges. */ max-width: none; margin-left: -.25rem; margin-right: -.25rem; border-radius: 16px; } .landing-hero-split .col-lg-6.mt-5 { margin-top: .5rem !important; } /* Keep only the two strongest chips on small screens. The rest appear in the pillars / trust sections below. */ .landing-hero-split .hero-chips .chip:nth-child(n+3) { display: none; } /* Inline CTAs on mobile with comfortable spacing — not full-width. */ .landing-hero-split .hero-ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; justify-content: center; } .landing-hero-split .hero-ctas .btn { width: auto; margin: 0; padding: .55rem 1.1rem; font-size: .95rem; } } /* Phones: compress top/bottom padding further (no tablet-navbar clearance needed). */ @media (max-width: 767px) { .landing-hero-split .hero-inner { padding-top: 1rem; padding-bottom: 1rem; } } /* Primary CTA text must stay white on the gradient — some global button rules try to inherit the primary color and wash the label out. */ .landing-hero-split .hero-ctas .btn.bg-gradient-primary, .landing-hero-split .hero-ctas .btn.bg-gradient-primary:hover, .landing-hero-split .hero-ctas .btn.bg-gradient-primary:focus, .final-cta .btn.bg-gradient-primary { color: #fff !important; } /* Strengthen the secondary "outline" CTA on the light hero so it reads as a clear, premium dark-bordered ghost button. */ .landing-hero-split .btn-outline-white, .landing-hero-split .btn-outline-primary { color: #0f1530; border: 2px solid rgba(15, 21, 48, .18); background: rgba(255, 255, 255, .65); backdrop-filter: blur(6px); font-weight: 600; } .landing-hero-split .btn-outline-white:hover, .landing-hero-split .btn-outline-primary:hover { background: #fff; color: #0f1530; border-color: rgba(15, 21, 48, .35); box-shadow: 0 6px 16px -8px rgba(15, 21, 48, .25); } /* ---------- Audience strip ---------- */ .audience-strip { padding: 2.5rem 0; } .audience-strip .card { border: 1px solid #e9ecef; border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; height: 100%; } .audience-strip a.card-link, .audience-strip a.card-link:hover { text-decoration: none; color: inherit; } .audience-strip a.card-link:hover .card { transform: translateY(-2px); border-color: rgba(var(--sf-primary), .45); box-shadow: 0 10px 24px rgba(var(--sf-primary), .14); } .audience-strip .audience-icon { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #00bfdb, #801bea); color: #fff; font-size: 1.1rem; margin-bottom: .75rem; } .audience-strip h6, .audience-strip h3.h6 { margin-bottom: .25rem; font-weight: 700; } .audience-strip p { color: #67748e; font-size: .875rem; margin-bottom: 0; } /* ---------- Pricing comparison strip ---------- */ .pricing-strip .pricing-pill { border: 1px solid #e9ecef; border-radius: 14px; padding: 1rem 1.25rem; background: #fff; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .pricing-strip .pricing-pill.recommended { border-color: #fbbf24; box-shadow: 0 10px 24px rgba(251, 191, 36, .18); position: relative; } .pricing-strip .pricing-pill.recommended::before { content: "Recommended"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1f2937; font-size: .7rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; letter-spacing: .3px; } .pricing-strip .pill-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #67748e; } .pricing-strip .pill-price { font-size: 1.5rem; font-weight: 700; color: #344767; margin: .25rem 0; } .pricing-strip .pill-unit { font-size: .9rem; color: #67748e; font-weight: 500; } /* ---------- Compact "goes live" cards ---------- */ .tight-feature .info i { font-size: 2rem; margin-bottom: .75rem; } .tight-feature p { font-size: .9rem; color: #67748e; } /* ---------- Embed code disclosure ---------- */ details.embed-code { border: 1px solid #e9ecef; border-radius: 10px; padding: .5rem 1rem; background: #fff; } details.embed-code summary { cursor: pointer; font-weight: 600; color: #344767; list-style: none; } details.embed-code summary::-webkit-details-marker { display: none; } details.embed-code summary::before { content: "▸ "; display: inline-block; transition: transform .15s ease; } details.embed-code[open] summary::before { transform: rotate(90deg); } details.embed-code pre { margin-top: .75rem; margin-bottom: 0; } /* ---------- Final CTA banner ---------- */ .final-cta { position: relative; overflow: hidden; border-top: 1px solid rgba(var(--sf-primary), .35); background: radial-gradient(900px 500px at 85% 15%, rgba(var(--sf-secondary), .55), transparent 60%), radial-gradient(1000px 600px at 10% 85%, rgba(var(--sf-primary), .40), transparent 60%), linear-gradient(135deg, #1a1340 0%, #0b1220 55%, #0a1f3a 100%); color: #fff; } .final-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; opacity: .4; pointer-events: none; } .final-cta::after { content: ''; position: absolute; top: -40%; right: -10%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--sf-purple), .38), transparent 60%); filter: blur(40px); pointer-events: none; animation: final-cta-float 14s ease-in-out infinite alternate; } @keyframes final-cta-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, 30px) scale(1.08); } } .final-cta .btn-white { background: #fff; border: 2px solid #fff; font-weight: 700; } .final-cta .btn-white:hover { background: #f8f9fa; color: #1f2937; } .final-cta .btn-outline-white { color: #fff; border: 2px solid rgba(255,255,255,.85); background: rgba(255,255,255,.04); font-weight: 600; } .final-cta .btn-outline-white:hover { background: #fff; color: #1f2937; border-color: #fff; } /* Audience-strip lead paragraph contrast bump (page-specific). */ .audience-strip .lead { color: #5c6678; }