/* ========================================================== Public_Website_11 — styles.css Header + Hero. Premium motion-banner redesign. Hebrew RTL · editorial · Stripe-level clarity ========================================================== */ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Tokens ────────────────────────────────────────────── */ :root { /* Ink */ --ink: #0f1a2e; --ink-mid: #233148; --ink-soft: #41506a; --ink-muted: #69788f; --ink-faint: #93a1b4; /* Accent */ --blue: #2f6bff; --blue-deep: #1d3fb0; --violet: #6d54ec; --cyan: #25c0d6; --green: #18a06a; /* Tints */ --blue-tint: #eef4ff; --blue-line: #d6e2fb; --green-tint: #e9f8f1; /* Surface */ --white: #ffffff; --paper: #fbfcfe; --mist: #f4f7fb; --line: #e7edf5; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill:999px; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --t: .2s; /* Type */ --sans: 'Assistant', 'Heebo', 'Rubik', Arial, sans-serif; --sans-body: 'Heebo', 'Assistant', 'Rubik', Arial, sans-serif; } /* ── Base ──────────────────────────────────────────────── */ html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Contain horizontal overflow at the root as well as on , so the ambient decorative layers (glows, grid lines, aurora) can never allow sideways panning on small mobile screens / iOS Safari. IMPORTANT: use `clip` (NOT `hidden`). `overflow-x: hidden` forces `overflow-y` to compute to `auto`, which turns the element into a scroll container and BREAKS the sticky header. `clip` keeps `overflow-y: visible` (no scroll container) so position:sticky keeps working. Older engines that don't support `clip` fall back to `visible`; the sections already clip their own decorative overflow, so no horizontal scrolling returns. */ overflow-x: clip; } /* Offset in-page anchor targets so the sticky header never covers a section heading when a nav link is clicked. (Header is 78px desktop / 66px mobile.) */ section[id] { scroll-margin-top: 92px; } body { font-family: var(--sans-body); font-size: 1rem; line-height: 1.7; color: var(--ink-soft); background: var(--white); direction: rtl; /* `clip` (not `hidden`) so is NOT turned into a scroll container, which would break the sticky header. Still contains horizontal overflow. */ overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--blue); text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; background: none; border: none; } /* ── Shell ─────────────────────────────────────────────── */ .shell { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px; } /* ══════════════════════════════════════════════════════════ HEADER — premium dark navy ══════════════════════════════════════════════════════════ */ :root { --hd-bg: #0d1626; /* near-black navy */ --hd-bg-blur: rgba(13,22,38,.82); --hd-border: rgba(255,255,255,.08); --hd-text: #eef2f8; --hd-muted: #9aa8bd; --hd-faint: #6c7c93; --hd-gold: #cbb074; /* muted gold accent */ } .header { position: sticky; top: 0; z-index: 200; background: var(--hd-bg); border-bottom: 1px solid var(--hd-border); transition: border-color var(--t) var(--ease), background var(--t) var(--ease); } .header.is-scrolled { background: var(--hd-bg-blur); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: rgba(255,255,255,.12); } /* Physical layout: brand+language on the LEFT, nav on the RIGHT. Force LTR flow so DOM order maps to physical left→right regardless of the page's RTL direction. */ .header-wrap { display: flex; direction: ltr; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; } /* Left cluster: brand block + language switch (physical left) */ .header-start { display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; } /* Brand — enlarged, premium */ .brand { display: flex; flex-direction: column; line-height: 1.2; gap: 1px; flex-shrink: 0; } .brand-en { font-size: 1.18rem; font-weight: 700; color: var(--hd-text); direction: ltr; letter-spacing: -.015em; } .brand-sub { font-size: .74rem; font-weight: 400; color: var(--hd-faint); direction: ltr; letter-spacing: .015em; } /* Nav — right side, calm, light gray. direction:rtl so the Hebrew links flow physical right→left (מה הבעיה first on the right) inside the LTR header row. */ .header-nav { display: flex; direction: rtl; align-items: center; gap: .15rem; flex-shrink: 0; } .nav-link { font-size: .875rem; font-weight: 500; color: var(--hd-muted); padding: .42rem .8rem; border-radius: var(--r-sm); white-space: nowrap; transition: color var(--t) var(--ease); position: relative; } .nav-link::after { content: ''; position: absolute; inset-inline: .8rem; bottom: .1rem; height: 1.5px; background: var(--hd-gold); border-radius: 2px; transform: scaleX(0); transition: transform .24s var(--ease); } .nav-link:hover, .nav-link.is-active { color: var(--hd-text); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } /* Language — subtle, sits to the physical right of the brand */ .lang-row { display: flex; align-items: center; gap: .32rem; font-size: .73rem; direction: ltr; padding-left: 1.4rem; border-left: 1px solid rgba(255,255,255,.1); } .lang-on { font-weight: 600; color: var(--hd-muted); } .lang-off { color: var(--hd-faint); } .lang-div { color: var(--hd-faint); } /* Burger — light bars on dark */ .burger { display: none; flex-direction: column; justify-content: center; gap: 4.5px; width: 42px; height: 42px; padding: 9px; border-radius: var(--r-sm); justify-self: end; transition: background var(--t) var(--ease); } .burger span { display: block; width: 100%; height: 2px; background: var(--hd-text); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); } .burger:hover { background: rgba(255,255,255,.06); } .burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile nav — dark dropdown */ .header-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 78px; inset-inline: 0; background: var(--hd-bg); border-bottom: 1px solid var(--hd-border); padding: 14px 24px 20px; gap: 2px; box-shadow: 0 18px 40px rgba(0,0,0,.35); z-index: 199; } .header-nav.is-open .nav-link { padding: .68rem .6rem; font-size: .96rem; color: var(--hd-muted); } .header-nav.is-open .nav-link:hover { color: var(--hd-text); } .header-nav.is-open .nav-link::after { display: none; } /* ══════════════════════════════════════════════════════════ HERO — motion-banner first screen ══════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; background: var(--hero-bg); padding: 120px 0 128px; } /* Hero-scoped dark palette */ .hero { --hero-bg: #0a1120; --hero-text: #f3f6fc; --hero-soft: #aab8cf; --hero-faint: #6f8099; --hero-gold: #cbb074; } /* ── Cinematic atmosphere layer ───────────────────────── */ .atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Deep navy gradient base */ .atmos-base { position: absolute; inset: 0; background: radial-gradient(110% 90% at 78% 18%, #122544 0%, transparent 60%), radial-gradient(120% 100% at 20% 90%, #0c1730 0%, transparent 62%), linear-gradient(160deg, #0c1424 0%, #0a1120 55%, #080e1a 100%); } /* Aurora glows */ .aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .aurora--blue { width: 56vw; height: 40vw; max-width: 760px; max-height: 540px; background: radial-gradient(circle, rgba(47,107,255,.42) 0%, transparent 66%); top: -10%; left: -6%; animation: auroraA 28s ease-in-out infinite; } .aurora--violet { width: 46vw; height: 36vw; max-width: 640px; max-height: 480px; background: radial-gradient(circle, rgba(109,84,236,.4) 0%, transparent 66%); bottom: -16%; left: 14%; animation: auroraB 34s ease-in-out infinite; } .aurora--gold { width: 30vw; height: 24vw; max-width: 420px; max-height: 320px; background: radial-gradient(circle, rgba(203,176,116,.16) 0%, transparent 70%); top: 30%; left: 30%; animation: auroraA 30s ease-in-out infinite reverse; } @keyframes auroraA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,26px) scale(1.08); } } @keyframes auroraB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,-22px) scale(1.1); } } /* Technical grid — local/search atmosphere */ .atmos-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(120% 100% at 35% 45%, #000 25%, transparent 72%); -webkit-mask-image: radial-gradient(120% 100% at 35% 45%, #000 25%, transparent 72%); } /* Slow glowing lines */ .atmos-lines { position: absolute; inset: 0; overflow: hidden; } .gline { position: absolute; height: 1px; width: 60%; left: -10%; background: linear-gradient(90deg, transparent, rgba(120,170,255,.5), transparent); opacity: 0; filter: blur(.4px); animation: glineSlide 11s ease-in-out infinite; } .gline--1 { top: 26%; transform: rotate(-11deg); animation-delay: 0s; } .gline--2 { top: 50%; width: 50%; background: linear-gradient(90deg, transparent, rgba(170,140,255,.45), transparent); transform: rotate(-11deg); animation-delay: 3.6s; } .gline--3 { top: 70%; width: 54%; background: linear-gradient(90deg, transparent, rgba(203,176,116,.4), transparent); transform: rotate(-11deg); animation-delay: 6.8s; } @keyframes glineSlide { 0% { transform: rotate(-11deg) translateX(-25%); opacity: 0; } 20% { opacity: .85; } 55% { opacity: .85; } 100% { transform: rotate(-11deg) translateX(115%); opacity: 0; } } /* Edge vignette for cinematic depth */ .atmos-vignette { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(4,8,16,.55) 100%); } @media (prefers-reduced-motion: reduce) { .aurora { animation: none; } .gline { animation: none; opacity: 0; } } /* ── Hero content ─────────────────────────────────────── */ .hero-wrap { position: relative; z-index: 1; /* Flex with space-between forces the empty room INTO the middle: visual pinned to the physical left, text pinned to the physical right, all inside the SAME .shell container the header uses. */ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; width: 100%; } /* ── Text column (right) ──────────────────────────────── */ .hero-text { order: 1; text-align: right; flex: 0 1 560px; /* sits at the physical right end of the row */ max-width: 560px; } .hero-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--hero-gold); direction: ltr; margin-bottom: 1.5rem; } .hero-h1 { font-family: var(--sans); font-size: clamp(2.05rem, 2.6vw + .6rem, 3.4rem); font-weight: 600; line-height: 1.18; color: var(--hero-text); margin-bottom: 1.4rem; letter-spacing: -.028em; } .h1-line { display: block; } .h1-line--accent { background: linear-gradient(95deg, #6ea0ff 0%, #a98fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #6ea0ff; } .hero-body { font-size: 1.04rem; color: var(--hero-soft); line-height: 1.8; margin-bottom: .7rem; max-width: 520px; /* align flush to the physical right, matching the rest of the text block */ margin-inline-start: 0; margin-inline-end: 0; } .hero-body--soft { color: var(--hero-faint); } .hero-actions { display: flex; align-items: stretch; gap: .7rem; margin-top: 2.1rem; flex-wrap: wrap; } /* Shared button geometry */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 1.3rem; font-size: .92rem; font-weight: 600; border-radius: 11px; white-space: nowrap; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); } /* Primary — deep blue→violet, glows softly on dark */ .btn-primary { color: #fff; background: linear-gradient(135deg, #2f6bff 0%, #6d54ec 100%); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(47,107,255,.4), inset 0 1px 0 rgba(255,255,255,.16); } .btn-primary:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 2px 4px rgba(0,0,0,.34), 0 10px 30px rgba(47,107,255,.5), inset 0 1px 0 rgba(255,255,255,.2); } /* Secondary — dark outline on dark */ .btn-secondary { color: var(--hero-text); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); } .btn-secondary:hover { color: #fff; border-color: var(--hero-gold); background: rgba(203,176,116,.1); } /* ══════════════════════════════════════════════════════════ HERO VISUAL — abstract reputation system ══════════════════════════════════════════════════════════ */ .hero-visual { order: 2; /* DOM-first text, so visual goes to physical left */ flex: 0 1 460px; /* sits at the physical left end of the row */ width: 100%; max-width: 460px; } .repsys { position: relative; width: 100%; aspect-ratio: 1 / 1; } /* ══════════════════════════════════════════════════════════ MAP / LOCAL-SEARCH SURFACE ══════════════════════════════════════════════════════════ */ .map { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 120% at 40% 35%, #11203c 0%, #0b1426 55%, #070d18 100%); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 0 60px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45); } /* Soft breathing glow over the map */ .map-glow { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 48%, rgba(47,107,255,.22) 0%, rgba(109,84,236,.1) 40%, transparent 68%); filter: blur(24px); animation: glowBreathe 7s ease-in-out infinite; } @keyframes glowBreathe { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Faint globe / global-presence layer */ .globe { position: absolute; top: 50%; left: 50%; width: 86%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); opacity: .55; mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 82%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 55%, transparent 82%); pointer-events: none; } .globe-svg { width: 100%; height: 100%; display: block; animation: globeDrift 26s ease-in-out infinite; } .globe-wire * { fill: none; stroke: rgba(125,170,235,.13); stroke-width: 1; } .globe-wire circle { stroke: rgba(125,170,235,.18); } .globe-land path { fill: rgba(120,165,230,.07); stroke: rgba(140,180,240,.1); stroke-width: .8; } @keyframes globeDrift { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.015); } } /* Street / route grid */ .map-grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; } .map-streets path { fill: none; stroke: rgba(125,160,215,.16); stroke-width: 1.4; } .map-blocks rect { fill: rgba(125,160,215,.06); stroke: rgba(125,160,215,.14); stroke-width: 1; } /* ── Radar scanning system ────────────────────────────── */ .scan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .scan-ring { position: absolute; border: 1px solid rgba(120,165,235,.14); border-radius: 50%; } .scan-ring--1 { width: 34%; height: 34%; } .scan-ring--2 { width: 60%; height: 60%; border-color: rgba(120,165,235,.1); } .scan-ring--3 { width: 88%; height: 88%; border-color: rgba(120,165,235,.06); } .scan-core { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #6ea0ff; box-shadow: 0 0 0 5px rgba(110,160,255,.16), 0 0 16px rgba(110,160,255,.7); animation: corePulse 3s ease-in-out infinite; } @keyframes corePulse { 0%,100% { box-shadow: 0 0 0 5px rgba(110,160,255,.16), 0 0 16px rgba(110,160,255,.7); } 50% { box-shadow: 0 0 0 9px rgba(110,160,255,.05), 0 0 22px rgba(110,160,255,.85); } } /* Continuous conic sweep — the "scanning" light */ .scan-sweep { position: absolute; width: 88%; height: 88%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(110,160,255,.34) 0deg, rgba(110,160,255,.06) 26deg, transparent 60deg); animation: sweep 6.5s linear infinite; } @keyframes sweep { to { transform: rotate(360deg); } } /* Local pins discovered on the map */ .mappin { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--hero-gold); box-shadow: 0 0 10px rgba(203,176,116,.7); animation: pinPulse 3.4s ease-in-out infinite; } .mappin--a { top: 28%; left: 62%; animation-delay: 0s; } .mappin--b { top: 60%; left: 30%; animation-delay: 1.1s; background: #6ea0ff; box-shadow: 0 0 10px rgba(110,160,255,.7); } .mappin--c { top: 72%; left: 64%; animation-delay: 2.2s; background: #a98fff; box-shadow: 0 0 10px rgba(169,143,255,.7); } @keyframes pinPulse { 0%,100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } } /* Anchor under the main card + connector beam */ .anchor { position: absolute; top: 38%; left: 56%; width: 12px; height: 12px; border-radius: 50%; background: #6ea0ff; box-shadow: 0 0 12px rgba(110,160,255,.8); } .anchor-pulse { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(110,160,255,.55); animation: anchorPulse 2.6s ease-out infinite; } @keyframes anchorPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } } /* Soft location beam from anchor up to the card */ .beam { position: absolute; top: 20%; left: calc(56% + 6px); width: 1.5px; height: 19%; background: linear-gradient(to top, rgba(110,160,255,.6), transparent); transform-origin: bottom; animation: beamGlow 3s ease-in-out infinite; } @keyframes beamGlow { 0%,100% { opacity: .35; } 50% { opacity: .85; } } /* ══════════════════════════════════════════════════════════ FLOATING GBP-STYLE CARDS ══════════════════════════════════════════════════════════ */ .gcard { position: absolute; background: rgba(17,28,49,.82); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); will-change: transform; } /* Main card — overflows top-left edge */ .gcard--main { top: -11%; left: -9%; width: 70%; padding: 15px 16px; display: flex; flex-direction: column; gap: 11px; animation: cardFloatA 8s ease-in-out infinite; } @keyframes cardFloatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-9px); } } .gcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .gcard-name { font-size: .92rem; font-weight: 700; color: var(--hero-text); } .gcard-live { font-size: .66rem; font-weight: 700; color: #4ad6a0; background: rgba(24,160,106,.16); border: 1px solid rgba(24,160,106,.3); border-radius: 999px; padding: .12rem .55rem; flex-shrink: 0; } .gcard-rating { display: flex; align-items: center; gap: 8px; direction: rtl; } .gcard-score { font-size: 1.05rem; font-weight: 800; color: var(--hero-text); direction: ltr; animation: scorePulse 3.6s ease-in-out infinite; } @keyframes scorePulse { 0%,100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .gcard-stars { display: inline-flex; gap: 2px; direction: ltr; } .star { width: 13px; height: 13px; display: inline-block; background: #f5b740; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z'/%3E%3C/svg%3E") center/contain no-repeat; transform-origin: center bottom; animation: starGlow 3.6s ease-in-out infinite; } .star:nth-child(1) { animation-delay: 0s; } .star:nth-child(2) { animation-delay: .18s; } .star:nth-child(3) { animation-delay: .36s; } .star:nth-child(4) { animation-delay: .54s; } .star:nth-child(5) { animation-delay: .72s; } @keyframes starGlow { 0%, 55%, 100% { transform: translateY(0) scale(1); filter: brightness(.9) drop-shadow(0 0 0 rgba(245,183,64,0)); } 28% { transform: translateY(-2.5px) scale(1.16); filter: brightness(1.55) drop-shadow(0 0 5px rgba(245,183,64,.6)); } } .gcard-reviews { font-size: .72rem; color: var(--hero-faint); animation: reviewBreathe 4s ease-in-out infinite; } @keyframes reviewBreathe { 0%,100% { opacity: .65; } 50% { opacity: 1; } } .gcard-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); } .gcard-row { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--hero-soft); } .gcard-ic { width: 13px; height: 13px; flex-shrink: 0; border-radius: 3px; background: rgba(110,160,255,.18); position: relative; } .gcard-ic--cat { background: rgba(110,160,255,.2); } .gcard-ic--loc { border-radius: 50% 50% 50% 0; background: rgba(245,183,64,.28); transform: rotate(-45deg); } .gcard-ic--tel { background: rgba(74,214,160,.22); } /* Live local-visibility metric module (bottom) — overflows bottom-right */ .gcard--metric { bottom: -7%; right: -10%; width: 54%; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; animation: cardFloatB 9s ease-in-out infinite; } @keyframes cardFloatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,8px); } } .metric-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .metric-title { font-size: .73rem; font-weight: 600; color: var(--hero-soft); } .metric-value { font-size: .82rem; font-weight: 800; color: #4ad6a0; direction: ltr; animation: valueBreathe 4s ease-in-out infinite; } @keyframes valueBreathe { 0%,100% { opacity: .8; } 50% { opacity: 1; } } /* Animated equalizer-style visibility bars */ .metric-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; } .mbar { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #6ea0ff, #2f6bff); opacity: .85; height: 35%; transform-origin: bottom; animation: barRise 3.6s ease-in-out infinite; } .mbar:nth-child(1) { animation-delay: 0s; height: 28%; } .mbar:nth-child(2) { animation-delay: .22s; height: 46%; } .mbar:nth-child(3) { animation-delay: .44s; height: 38%; } .mbar:nth-child(4) { animation-delay: .66s; height: 60%; } .mbar:nth-child(5) { animation-delay: .88s; height: 50%; } .mbar:nth-child(6) { animation-delay: 1.1s; height: 72%; } .mbar:nth-child(7) { animation-delay: 1.32s; height: 58%; } .mbar:nth-child(8) { animation-delay: 1.54s; height: 84%; } .mbar:nth-child(9) { animation-delay: 1.76s; height: 66%; } .mbar:nth-child(10){ animation-delay: 1.98s; height: 92%; } @keyframes barRise { 0%,100% { transform: scaleY(.82); opacity: .7; } 50% { transform: scaleY(1.12); opacity: 1; } } .metric-foot { display: flex; align-items: center; gap: 8px; } .metric-line { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .metric-line-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #2bb8c9, #2f6bff); animation: lineFill 2.6s var(--ease) .5s forwards; } @keyframes lineFill { to { width: 78%; } } .metric-sub { font-size: .66rem; color: var(--hero-faint); flex-shrink: 0; } /* Upper-center compact status card — fills the marked empty zone */ .gcard--status { top: 13%; right: -11%; width: 42%; padding: 10px 13px; display: flex; align-items: center; gap: 10px; animation: cardFloatC 7.5s ease-in-out infinite; } @keyframes cardFloatC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-7px); } } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ad6a0; box-shadow: 0 0 8px rgba(74,214,160,.75); flex-shrink: 0; animation: statusBlink 2.8s ease-in-out infinite; } @keyframes statusBlink { 0%,100% { opacity: 1; box-shadow: 0 0 8px rgba(74,214,160,.75); } 50% { opacity: .55; box-shadow: 0 0 14px rgba(74,214,160,.9); } } .status-text { display: flex; flex-direction: column; gap: 2px; } .status-title { font-size: .76rem; font-weight: 700; color: var(--hero-text); } .status-sub { font-size: .66rem; color: var(--hero-faint); direction: rtl; } @media (prefers-reduced-motion: reduce) { .map-glow, .scan-sweep, .scan-core, .mappin, .globe-svg, .anchor-pulse, .beam, .gcard--main, .gcard--metric, .gcard--status, .star, .gcard-score, .gcard-reviews, .status-dot, .mbar, .metric-value, .metric-line-fill { animation: none; } .metric-line-fill { width: 78%; } .mbar { transform: scaleY(1); opacity: .9; } } /* ── Hero entrance animation ──────────────────────────── */ .hero-text > * { opacity: 0; transform: translateY(14px); animation: heroIn .7s var(--ease) forwards; } .hero-text > *:nth-child(1) { animation-delay: .05s; } .hero-text > *:nth-child(2) { animation-delay: .15s; } .hero-text > *:nth-child(3) { animation-delay: .23s; } .hero-text > *:nth-child(4) { animation-delay: .31s; } .hero-text > *:nth-child(5) { animation-delay: .39s; } @keyframes heroIn { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-text > * { opacity: 1; transform: none; animation: none; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1080px) { .shell { padding: 0 32px; } } @media (max-width: 900px) { .hero { min-height: 0; padding: 76px 0 88px; } /* Stack: visual FIRST (strong first impression), copy/CTA below */ .hero-wrap { flex-direction: column; align-items: center; gap: 40px; } .hero-visual { order: 1; flex: 0 1 auto; max-width: 360px; } .hero-text { order: 2; flex: 0 1 auto; max-width: 640px; width: 100%; } } @media (max-width: 860px) { /* Collapse to brand+language (left) + burger (right) */ .header-wrap { height: 66px; position: relative; } .header-nav { display: none; } .burger { display: flex; } .header-nav.is-open { display: flex; top: 66px; } } /* Hide language on very small screens to protect the brand */ @media (max-width: 520px) { .header-start .lang-row { display: none; } } @media (max-width: 640px) { .shell { padding: 0 20px; } .brand-en { font-size: 1.02rem; } .brand-sub { font-size: .68rem; } .hero { padding: 46px 0 60px; } .hero-h1 { font-size: clamp(1.95rem, 7.5vw, 2.45rem); } .hero-body { font-size: 1.02rem; } .hero-visual { max-width: 300px; } .aurora { filter: blur(70px); opacity: .45; } .hero-actions { gap: .65rem; margin-top: 1.9rem; } } @media (max-width: 380px) { .hero-actions { flex-direction: column; align-items: stretch; gap: .6rem; } .btn-primary, .btn-secondary { width: 100%; } } /* ══════════════════════════════════════════════════════════ SECTION 1 — FIRST IMPRESSION (dark premium continuation) ══════════════════════════════════════════════════════════ */ .impress { position: relative; overflow: hidden; /* generous top padding gives breathing room below the hero (section's own dark bg fills the gap — no white band) */ padding: 152px 0 104px; background: linear-gradient(180deg, #080e1a 0%, #0a1224 45%, #080e1a 100%); --imp-text: #f3f6fc; --imp-soft: #aab8cf; --imp-faint: #6f8099; --imp-blue: #2f6bff; --imp-cyan: #6ea0ff; --imp-gold: #cbb074; } /* Background atmosphere */ .impress-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .impress-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.05) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 80%); } .impress-glow { position: absolute; border-radius: 50%; filter: blur(90px); } .impress-glow--1 { width: 52vw; height: 38vw; max-width: 760px; max-height: 540px; background: radial-gradient(circle, rgba(47,107,255,.2) 0%, transparent 66%); top: 6%; right: -8%; animation: impDrift 30s ease-in-out infinite; } .impress-glow--2 { width: 40vw; height: 30vw; max-width: 560px; max-height: 420px; background: radial-gradient(circle, rgba(109,84,236,.16) 0%, transparent 68%); bottom: -6%; left: -6%; animation: impDrift 36s ease-in-out infinite reverse; } @keyframes impDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-22px) scale(1.06); } } .impress-wrap { position: relative; z-index: 1; } /* ── Top row: visual (left) + text (right) ────────────── */ .impress-top { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 56px; } /* In RTL DOM order is text-first → renders on the right; the compare block is second → renders on the left. */ .impress-text { order: 1; } .compare { order: 2; } /* ── Intro text (right column) ────────────────────────── */ .impress-head { text-align: right; } .impress-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--imp-gold); margin-bottom: 1.1rem; } .impress-title { font-family: var(--sans); font-size: clamp(1.6rem, 1.8vw + .6rem, 2.45rem); font-weight: 600; line-height: 1.22; color: var(--imp-text); letter-spacing: -.028em; margin-bottom: 1.1rem; } .impress-intro { font-size: 1.04rem; line-height: 1.8; color: var(--imp-soft); } /* ── Bullet list (right column) ───────────────────────── */ .impress-list { list-style: none; margin: 1.8rem 0 0; display: flex; flex-direction: column; gap: 11px; } .impress-list li { position: relative; padding-inline-start: 20px; font-size: .98rem; line-height: 1.6; color: var(--imp-soft); } .impress-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--imp-cyan); box-shadow: 0 0 8px rgba(110,160,255,.7); } /* ── Comparison (left column) ─────────────────────────── */ .compare { display: flex; align-items: stretch; /* both panels match the tallest → equal height */ justify-content: center; gap: 0; /* room so the halo rings can breathe beyond the panels */ padding: 2.4rem 1.5rem; } .ccard { position: relative; flex: 1 1 0; max-width: 220px; border-radius: 20px; padding: 1.5px; background: linear-gradient(160deg, rgba(120,170,255,.7), rgba(110,160,255,.1) 58%, rgba(110,160,255,.04)); isolation: isolate; display: flex; /* let the inner panel stretch to full card height */ } .ccard-inner { position: relative; z-index: 3; width: 100%; height: 100%; min-height: 290px; border-radius: 18.5px; padding: 38px 22px 34px; text-align: center; background: radial-gradient(130% 70% at 50% -8%, rgba(47,107,255,.18), transparent 58%), linear-gradient(180deg, rgba(15,26,48,.97), rgba(9,16,32,.98)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } /* Card icon */ .ccard-icon { width: 42px; height: 42px; margin-bottom: 4px; color: var(--imp-cyan); display: flex; align-items: center; justify-content: center; } .ccard-icon svg { width: 100%; height: 100%; } .ccard-icon--google { filter: drop-shadow(0 0 8px rgba(66,133,244,.4)); } .ccard-tag { font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: var(--imp-faint); } .ccard-tag--strong { color: var(--imp-cyan); } .ccard-title { font-size: 1.34rem; font-weight: 700; color: var(--imp-text); letter-spacing: -.02em; } .ccard-desc { font-size: .92rem; line-height: 1.7; color: var(--imp-soft); } /* 5-star row at the bottom of the Google panel */ .ccard-stars { display: inline-flex; gap: 5px; margin-top: 6px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); direction: ltr; } .cstar { width: 15px; height: 15px; display: inline-block; background: #f5b740; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 7.1-1.01z'/%3E%3C/svg%3E") center/contain no-repeat; /* dim resting state; JS lights them 1→5 then 5→1 in a calm loop */ opacity: .28; filter: brightness(.72); transition: opacity .5s var(--ease), filter .5s var(--ease); } .cstar.is-lit { opacity: 1; filter: brightness(1.25) drop-shadow(0 0 5px rgba(245,183,64,.6)); } /* Static, fully shown when motion is reduced (JS also skips the loop) */ @media (prefers-reduced-motion: reduce) { .cstar { opacity: 1; filter: brightness(1); transition: none; } } /* Site card — present but quieter */ .ccard--site { box-shadow: 0 0 40px rgba(47,107,255,.16); /* nudge ONLY this card toward the text column (physical right in RTL), closer to the text side — transform so the bridge/Google card and the layout are not affected or resized. */ transform: translateX(40px); } /* Google card — stronger / more alive */ .ccard--google { background: linear-gradient(160deg, rgba(140,182,255,.95), rgba(109,84,236,.5) 52%, rgba(110,160,255,.14)); box-shadow: 0 0 64px rgba(47,107,255,.4); animation: cardBreathe 5.5s ease-in-out infinite; } @keyframes cardBreathe { 0%,100% { box-shadow: 0 0 56px rgba(47,107,255,.34); } 50% { box-shadow: 0 0 78px rgba(47,107,255,.5); } } .ccard--google .ccard-inner { background: radial-gradient(130% 85% at 50% -10%, rgba(47,107,255,.3), transparent 62%), linear-gradient(180deg, rgba(18,32,60,.97), rgba(11,19,38,.98)); } .ccard--google .ccard-title { background: linear-gradient(95deg, #9cbcff 0%, #bda9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Halo: concentric glow rings + orbiting nodes ─────── */ .ccard-halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; } .halo-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(110,160,255,.16); } .halo-ring--1 { width: 132%; height: 150%; } .halo-ring--2 { width: 168%; height: 188%; border-color: rgba(110,160,255,.09); } .ccard--google .halo-ring--1 { border-color: rgba(120,170,255,.26); } .ccard--google .halo-ring--2 { border-color: rgba(120,170,255,.15); } /* Bright orbiting nodes on the rings */ .halo-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #aacbff; box-shadow: 0 0 10px rgba(140,180,255,.9); animation: nodeTwinkle 4s ease-in-out infinite; } .halo-node--a { top: 6%; left: 30%; animation-delay: 0s; } .halo-node--b { top: 44%; left: 92%; animation-delay: 1s; } .halo-node--c { top: 82%; left: 16%; animation-delay: 2s; } .halo-node--d { top: 20%; left: 84%; animation-delay: 1.6s; } @keyframes nodeTwinkle { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } } /* Soft expanding pulse rings (the "rays") */ .cring { position: absolute; inset: 0; border-radius: 18px; border: 1px solid rgba(110,160,255,.45); opacity: 0; animation: ringPulse 4.6s ease-out infinite; } .cring--2 { animation-delay: 1.5s; } .cring--3 { animation-delay: 3s; } .ccard--google .cring { border-color: rgba(130,175,255,.6); } @keyframes ringPulse { 0% { transform: scale(.98); opacity: .6; } 100% { transform: scale(1.22); opacity: 0; } } /* Bridge between cards — horizontal connector with glow line */ .bridge { position: relative; z-index: 4; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; width: 96px; /* minimal shift (half the site card's move) to keep the pill visually centered between the two cards after the site card was nudged right */ transform: translateX(20px); } .bridge-line { flex: 1; height: 1.5px; width: auto; background: linear-gradient(to right, transparent, rgba(120,170,255,.7), transparent); position: relative; overflow: hidden; } /* travelling light along the connector lines */ .bridge-line::after { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(to right, transparent, #cfe0ff, transparent); animation: bridgeFlow 3.2s linear infinite; } @keyframes bridgeFlow { 0% { left: -40%; } 100% { left: 110%; } } .bridge-pill { position: relative; display: inline-flex; align-items: center; white-space: nowrap; font-size: .78rem; font-weight: 700; color: var(--imp-text); padding: .44rem 1rem; border-radius: 999px; background: linear-gradient(135deg, rgba(47,107,255,.95), rgba(109,84,236,.95)); box-shadow: 0 0 26px rgba(47,107,255,.55), inset 0 1px 0 rgba(255,255,255,.25); direction: rtl; flex-shrink: 0; animation: pillGlow 3.4s ease-in-out infinite; } .bridge-arrow { direction: ltr; display: inline-block; } .bridge-spark { position: absolute; inset: -3px; border-radius: 999px; border: 1px solid rgba(140,180,255,.5); opacity: 0; animation: ringPulse 3.6s ease-out infinite; } @keyframes pillGlow { 0%,100% { box-shadow: 0 0 20px rgba(47,107,255,.45), inset 0 1px 0 rgba(255,255,255,.22); } 50% { box-shadow: 0 0 34px rgba(47,107,255,.7), inset 0 1px 0 rgba(255,255,255,.28); } } /* ── Takeaway band ────────────────────────────────────── */ .takeaway { position: relative; /* standardized statement-block spacing/container (see site statement system) */ margin-top: 3.2rem; border-radius: 20px; padding: 34px 40px; text-align: center; overflow: hidden; background: linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.92)); border: 1px solid rgba(120,170,255,.26); box-shadow: 0 0 56px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); } .takeaway-glow { position: absolute; inset: 0; background: radial-gradient(80% 150% at 50% 0%, rgba(47,107,255,.26), transparent 60%); animation: takeBreathe 6s ease-in-out infinite; } @keyframes takeBreathe { 0%,100% { opacity: .65; } 50% { opacity: 1; } } /* dotted-grid texture accents at the band ends (like the reference) */ .takeaway-dots { position: absolute; top: 50%; transform: translateY(-50%); width: 120px; height: 70%; background-image: radial-gradient(rgba(120,170,255,.4) 1.1px, transparent 1.3px); background-size: 11px 11px; opacity: .5; mask-image: linear-gradient(to var(--dir, right), #000, transparent); -webkit-mask-image: linear-gradient(to var(--dir, right), #000, transparent); } .takeaway-dots--start { left: 22px; --dir: right; } .takeaway-dots--end { right: 22px; --dir: left; } /* soft top sweep of light */ .takeaway-sweep { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(to right, transparent, rgba(160,195,255,.8), transparent); width: 45%; animation: takeSweep 5s ease-in-out infinite; } @keyframes takeSweep { 0% { transform: translateX(-60%); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(180%); opacity: 0; } } .takeaway-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-weight: 600; line-height: 1.4; } .takeaway-line { font-size: clamp(1.25rem, 1.9vw + .5rem, 1.95rem); letter-spacing: -.02em; } .takeaway-line--muted { color: var(--imp-soft); font-weight: 500; } .takeaway-line--strong { color: var(--imp-text); background: linear-gradient(95deg, #9cbcff 0%, #bda9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Reveal-on-scroll ─────────────────────────────────── */ /* Hidden state only applies when JS is active (html.js-reveal) and will un-hide via the observer. Without JS the content stays fully visible. */ .js-reveal .reveal-up { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js-reveal .reveal-up.is-in { opacity: 1; transform: translateY(0); } /* Safety net: if a reveal element is still hidden 3s after load (observer never fired for any reason), force it visible. */ /* ── Motion / responsive guards ───────────────────────── */ @media (prefers-reduced-motion: reduce) { .impress-glow--1, .impress-glow--2, .cring, .bridge-pill, .bridge-spark, .bridge-line::after, .halo-node, .ccard--google, .takeaway-glow, .takeaway-sweep { animation: none; } .cring, .bridge-spark { opacity: 0; } .js-reveal .reveal-up { opacity: 1; transform: none; transition: none; } } @media (max-width: 980px) { /* Stack: text on top, comparison visual below */ .impress-top { grid-template-columns: 1fr; gap: 12px; } .impress-text { order: 1; } .compare { order: 2; } /* The desktop nudge that pulls this card toward the text column makes no sense once the compare block is centered below the text — reset it so the card stays centred and never overflows the viewport on mobile. */ .ccard--site { transform: none; } .impress-head { text-align: center; max-width: 680px; margin: 0 auto; } .impress-list { max-width: 560px; margin-inline: auto; } } @media (max-width: 640px) { .impress { padding: 92px 0 76px; } /* panels stack vertically with a vertical connector */ .compare { flex-direction: column; align-items: center; padding: 2rem 0; } .ccard { width: 100%; max-width: 330px; flex: none; } .ccard-inner { min-height: 0; } .halo-ring--1 { width: 116%; height: 124%; } .halo-ring--2 { width: 138%; height: 148%; } .bridge { flex-direction: column; width: auto; padding: 16px 0; } .bridge-line { width: 1.5px; height: 26px; flex: none; background: linear-gradient(to bottom, transparent, rgba(120,170,255,.7), transparent); } .bridge-line::after { display: none; } .takeaway { padding: 26px 24px; margin-top: 2.4rem; } .takeaway-dots { width: 70px; } } /* ══════════════════════════════════════════════════════════ SEARCH BAR — animated typing strip (Hero → Section 1) A single premium neon search bar with a typewriter loop. ══════════════════════════════════════════════════════════ */ /* Full-width DARK band so the page's white body never shows behind it. The bar is floated up onto the hero → Section 1 seam with translateY (NOT margin/padding) so the hero keeps its full approved height — the transform shifts the bar visually without collapsing layout flow. A matching negative bottom margin reclaims the space the lift opens up below, keeping controlled breathing room before Section 1. */ .searchbar-section { width: 100%; position: relative; z-index: 2; transform: translateY(-60px); margin-bottom: -60px; background: linear-gradient(180deg, #080e1a 0%, #0a1326 50%, #080e1a 100%); padding: 24px 0 40px; } /* The bar: contained width, dark glass, rounded, blue-violet glowing border. */ .searchbar { position: relative; display: flex; align-items: center; gap: 20px; width: calc(100% - 48px); max-width: 1240px; min-height: 88px; margin: 0 auto; padding: 0 30px; border-radius: 28px; /* RTL bar: icon physical-left, text physical-right. Force physical order with LTR on the flex container; inner field re-applies RTL for Hebrew. */ direction: ltr; background: radial-gradient(120% 180% at 0% 50%, rgba(47,107,255,.10), transparent 60%), radial-gradient(120% 180% at 100% 50%, rgba(138,120,240,.08), transparent 62%), linear-gradient(180deg, rgba(17,27,52,.78), rgba(11,19,40,.82)); border: 1px solid rgba(140,180,255,.30); box-shadow: 0 0 40px rgba(47,107,255,.14), 0 14px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; animation: searchbarBreathe 6s ease-in-out infinite; } /* Animated glowing border ripple (reuses --cms-angle / cmsBorderSpin). */ .searchbar::before { content: ''; position: absolute; inset: 0; border-radius: 28px; padding: 1.3px; background: conic-gradient(from var(--cms-angle, 0deg), rgba(120,170,255,0) 0deg, rgba(150,190,255,.9) 60deg, rgba(160,135,255,.5) 130deg, rgba(120,170,255,0) 210deg, rgba(120,170,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .8; filter: drop-shadow(0 0 5px rgba(120,170,255,.45)); animation: cmsBorderSpin 9s linear infinite; pointer-events: none; z-index: 0; } @keyframes searchbarBreathe { 0%,100% { box-shadow: 0 0 36px rgba(47,107,255,.12), 0 14px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(140,180,255,.26); } 50% { box-shadow: 0 0 60px rgba(47,107,255,.22), 0 14px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(150,185,255,.44); } } /* soft top light sweep across the bar */ .searchbar-glow { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(150,190,255,.8), rgba(160,135,255,.5), transparent); width: 38%; z-index: 1; animation: searchbarSweep 8s ease-in-out infinite; pointer-events: none; } @keyframes searchbarSweep { 0% { transform: translateX(-60%); opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(330%); opacity: 0; } } /* search icon (left) */ .searchbar-icon { position: relative; z-index: 2; flex: 0 0 auto; width: 26px; height: 26px; color: rgba(170,200,255,.92); filter: drop-shadow(0 0 6px rgba(120,170,255,.55)); animation: searchbarIconPulse 4.5s ease-in-out infinite; } .searchbar-icon svg { width: 100%; height: 100%; display: block; } @keyframes searchbarIconPulse { 0%,100% { filter: drop-shadow(0 0 5px rgba(120,170,255,.45)); } 50% { filter: drop-shadow(0 0 11px rgba(150,185,255,.85)); } } /* thin vertical divider between icon and text */ .searchbar-divider { position: relative; z-index: 2; flex: 0 0 auto; width: 1px; height: 38px; background: linear-gradient(180deg, transparent, rgba(140,180,255,.4), transparent); } /* typing field (right, RTL) */ .searchbar-field { position: relative; z-index: 2; flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; /* in RTL this anchors text to the right */ direction: rtl; min-width: 0; overflow: hidden; white-space: nowrap; } .searchbar-text { font-family: var(--sans); font-size: 1.32rem; font-weight: 500; letter-spacing: .005em; color: rgba(216,228,250,.96); text-shadow: 0 0 10px rgba(120,170,255,.35); white-space: nowrap; } /* blinking caret */ .searchbar-caret { display: inline-block; width: 2px; height: 1.45rem; margin-right: 3px; /* RTL: caret sits to the LEFT of the text end */ background: linear-gradient(180deg, rgba(150,190,255,1), rgba(160,135,255,.9)); box-shadow: 0 0 8px rgba(140,180,255,.8); vertical-align: middle; animation: searchbarCaret 1.05s step-end infinite; } @keyframes searchbarCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } } @media (max-width: 760px) { .searchbar-section { transform: translateY(-40px); margin-bottom: -40px; margin-top: 0; padding: 18px 0 30px; } .searchbar { width: calc(100% - 32px); min-height: 72px; gap: 14px; padding: 0 20px; border-radius: 22px; } .searchbar::before { border-radius: 22px; } .searchbar-icon { width: 22px; height: 22px; } .searchbar-divider { height: 30px; } .searchbar-text { font-size: 1.06rem; } .searchbar-caret { height: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .searchbar { animation: none; } .searchbar::before { animation: none; opacity: .55; } .searchbar-glow, .searchbar-icon { animation: none; } .searchbar-caret { animation: none; opacity: 1; } } /* ══════════════════════════════════════════════════════════ SECTION 2 — REPUTATION GAP (diagnostic comparison) ══════════════════════════════════════════════════════════ */ /* animated-border angle custom property (smoothly interpolatable) */ @property --bg-angle { syntax: ''; inherits: false; initial-value: 0deg; } .gap { position: relative; overflow: hidden; /* reduced top padding so this section connects to the previous one (bottom padding unchanged) */ padding: 46px 0 104px; background: linear-gradient(180deg, #080e1a 0%, #0a1326 50%, #080e1a 100%); --gp-text: #f3f6fc; --gp-soft: #aab8cf; --gp-faint: #6f8099; --gp-blue: #2f6bff; --gp-cyan: #6ea0ff; --gp-violet:#8a78f0; --gp-gold: #cbb074; } /* Background atmosphere */ .gap-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .gap-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.05) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(120% 90% at 35% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 90% at 35% 40%, #000 30%, transparent 80%); } .gap-glow { position: absolute; border-radius: 50%; filter: blur(90px); } .gap-glow--1 { width: 48vw; height: 36vw; max-width: 700px; max-height: 500px; background: radial-gradient(circle, rgba(47,107,255,.18) 0%, transparent 66%); top: 4%; left: -6%; animation: gapDrift 32s ease-in-out infinite; } .gap-glow--2 { width: 38vw; height: 28vw; max-width: 540px; max-height: 400px; background: radial-gradient(circle, rgba(138,120,240,.14) 0%, transparent 68%); bottom: -6%; left: 24%; animation: gapDrift 38s ease-in-out infinite reverse; } @keyframes gapDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-20px) scale(1.05); } } .gap-wrap { position: relative; z-index: 1; } /* ── Centered heading area ────────────────────────────── */ .gap-head { text-align: center; max-width: 720px; margin: 0 auto 3.4rem; } .gap-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--gp-gold); margin-bottom: 1.1rem; } .gap-title { font-family: var(--sans); font-size: clamp(1.7rem, 2vw + .6rem, 2.6rem); font-weight: 600; line-height: 1.22; color: var(--gp-text); letter-spacing: -.028em; margin-bottom: 1.1rem; } .gap-line { display: block; } .gap-line--accent { background: linear-gradient(95deg, #8fb6ff 0%, #b6a3ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gap-intro { font-size: 1.02rem; line-height: 1.8; color: var(--gp-soft); margin-bottom: .4rem; max-width: 620px; margin-inline: auto; } .gap-intro--soft { color: var(--gp-faint); } /* ── Two columns: visual (right) + text (left) ────────── */ .gap-top { display: grid; /* visual column is wider/dominant; text column narrower/lighter */ grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); align-items: center; gap: 52px; } .gap-visual { order: 1; } /* DOM-first → right in RTL */ /* text column fills the row height so it balances the tall panels */ .gap-text { order: 2; text-align: right; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } /* ── Text column ──────────────────────────────────────── */ .gap-text-title { font-family: var(--sans); font-size: 1.18rem; font-weight: 600; line-height: 1.3; color: var(--gp-text); /* brighter, clearer than before */ letter-spacing: -.015em; text-align: center; /* centered at the top of the block */ margin-bottom: .5rem; } .gap-text-lead { font-size: .92rem; line-height: 1.7; color: var(--gp-faint); margin-bottom: 1.2rem; } /* problem list (compact pill rows) — flex:1 so it helps fill height */ .gap-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; } .gl-row { position: relative; display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--gp-soft); padding: 13px 15px; border-radius: 11px; background: linear-gradient(180deg, rgba(20,32,56,.5), rgba(12,20,40,.55)); border: 1px solid rgba(120,160,220,.1); overflow: hidden; transition: border-color .5s var(--ease), background .5s var(--ease); } .gl-row .gl-bar { width: 3px; height: 15px; border-radius: 2px; background: rgba(110,160,255,.55); flex-shrink: 0; transition: background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease); } /* diagnostic-scan lit state (driven by JS top→bottom→top) */ .gl-row.is-lit { border-color: rgba(120,170,255,.4); background: linear-gradient(180deg, rgba(34,52,86,.7), rgba(18,28,52,.7)); } .gl-row.is-lit .gl-bar { background: var(--gp-cyan); box-shadow: 0 0 9px rgba(110,160,255,.85); height: 18px; } /* soft travelling highlight sheen on the lit row */ .gl-row::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(110,160,255,.12), transparent); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; } .gl-row.is-lit::after { opacity: 1; } /* ── Takeaway box — dark navy, matches the site ───────── */ .gap-quote { position: relative; margin-top: 1.5rem; padding: 20px 20px 20px 22px; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 130% at 0% 0%, rgba(47,107,255,.14), transparent 55%), linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.92)); border: 1px solid rgba(120,170,255,.24); box-shadow: 0 0 34px rgba(47,107,255,.14), inset 0 1px 0 rgba(255,255,255,.05); } /* soft violet glow accent bar on the leading edge */ .gap-quote-bar { position: absolute; top: 14px; bottom: 14px; inset-inline-end: 0; /* right edge in RTL */ width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gp-cyan), var(--gp-violet)); box-shadow: 0 0 10px rgba(110,160,255,.6); } .gap-quote-text { position: relative; display: flex; flex-direction: column; gap: 5px; font-weight: 600; line-height: 1.5; padding-inline-end: 12px; } .gq-line { font-size: .95rem; color: var(--gp-soft); } .gq-line--strong { color: var(--gp-text); background: linear-gradient(95deg, #9cbcff 0%, #bda9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ══════════════════════════════════════════════════════════ DIAGNOSTIC PANELS — animated glowing border (no rings/waves) ══════════════════════════════════════════════════════════ */ .gap-visual { display: flex; align-items: stretch; /* RTL: flex-start = physical right → push the panel group toward the right edge of its cell so it aligns with the page-grid right side */ justify-content: flex-start; gap: 0; } .dpanel { position: relative; flex: 1 1 0; max-width: 300px; /* enlarged — core visual carries more weight */ border-radius: 24px; padding: 1.5px; /* border thickness */ display: flex; isolation: isolate; /* static base border gradient (fallback when @property unsupported) */ background: linear-gradient(150deg, rgba(120,170,255,.55), rgba(110,160,255,.08) 60%, rgba(110,160,255,.04)); } /* Rotating conic glow that lives just behind the panel edge — this is the "smooth animated glowing border" (no pulsing). */ .dpanel-glow { position: absolute; inset: -1.5px; z-index: 0; border-radius: 22px; padding: 1.5px; background: conic-gradient( from var(--bg-angle), rgba(110,160,255,0) 0deg, rgba(120,175,255,.9) 70deg, rgba(140,120,250,.4) 130deg, rgba(110,160,255,0) 200deg, rgba(110,160,255,0) 360deg ); /* show only the border ring */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: borderSpin 7s linear infinite; } @keyframes borderSpin { to { --bg-angle: 360deg; } } /* Google/weak panel: cooler, slightly dimmer glow sweep */ .dpanel--online .dpanel-glow { background: conic-gradient( from var(--bg-angle), rgba(110,160,255,0) 0deg, rgba(110,150,230,.55) 70deg, rgba(110,160,255,0) 180deg, rgba(110,160,255,0) 360deg ); animation-duration: 9s; } /* real/strong panel glows a touch warmer/brighter */ .dpanel--real .dpanel-glow { animation-duration: 6.5s; } .dpanel-inner { position: relative; z-index: 1; width: 100%; border-radius: 22.5px; padding: 28px 22px 22px; /* roomier → taller panels */ background: radial-gradient(130% 60% at 50% 0%, rgba(47,107,255,.12), transparent 55%), linear-gradient(180deg, rgba(16,27,49,.97), rgba(10,17,33,.98)); display: flex; flex-direction: column; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .dpanel-head { text-align: center; margin-bottom: 20px; } .dpanel-title { font-size: 1.12rem; font-weight: 700; color: var(--gp-text); letter-spacing: -.01em; } .dpanel--online .dpanel-title { background: linear-gradient(95deg, #9cbcff, #bda9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dpanel-sub { font-size: .76rem; color: var(--gp-faint); margin-top: 3px; } .dpanel-list { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; } .drow { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.08); } .drow-label { font-size: .84rem; color: var(--gp-soft); line-height: 1.35; } .drow-meter { height: 3px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; } .drow-meter > span { display: block; height: 100%; width: var(--w, 50%); border-radius: 3px; } .drow--strong .drow-meter > span { background: linear-gradient(90deg, #6ea0ff, #2f6bff); box-shadow: 0 0 6px rgba(47,107,255,.5); } .drow--weak .drow-meter > span { background: linear-gradient(90deg, rgba(110,150,210,.6), rgba(90,120,180,.5)); } .dpanel-foot { margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); text-align: center; font-size: .82rem; font-weight: 600; } .dpanel-foot--strong { color: var(--gp-cyan); } .dpanel-foot--weak { color: var(--gp-faint); } /* ── Bridge between panels ────────────────────────────── */ .gap-bridge { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 78px; flex-shrink: 0; } .gap-bridge-line { width: 1.5px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(120,170,255,.55), transparent); } .gap-bridge-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--gp-gold); white-space: nowrap; text-align: center; line-height: 1.3; } /* ── Reveal + motion guards ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { .gap-glow--1, .gap-glow--2, .dpanel-glow { animation: none; } /* static elegant border instead of the rotating glow */ .dpanel-glow { background: linear-gradient(150deg, rgba(120,175,255,.7), rgba(110,160,255,.1) 60%, transparent); } /* problem rows: static elegant state, no scan sweep */ .gl-row { transition: none; } .gl-row::after { display: none; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 980px) { .gap-head { margin-bottom: 2.6rem; } .gap-top { grid-template-columns: 1fr; gap: 40px; } /* visual on top, text below when stacked — re-center the panel group (the right-shift only applies on the wide two-column desktop layout) */ .gap-visual { order: 1; justify-content: center; } .gap-text { order: 2; max-width: 620px; margin: 0 auto; text-align: right; } .gap-list { max-width: 620px; margin-inline: auto; } .gap-quote { max-width: 620px; margin-inline: auto; } } @media (max-width: 640px) { .gap { padding: 36px 0 76px; } .gap-visual { flex-direction: column; align-items: center; } .dpanel { width: 100%; max-width: 360px; flex: none; } .gap-bridge { flex-direction: row; width: auto; padding: 14px 0; } .gap-bridge-line { width: 30px; height: 1.5px; } } /* ══════════════════════════════════════════════════════════ SECTION 3 — WHAT THE CLINIC GETS (operations dashboard) ══════════════════════════════════════════════════════════ */ .gets { position: relative; overflow: hidden; padding: 96px 0 104px; background: linear-gradient(180deg, #080e1a 0%, #0a1224 50%, #070d18 100%); --gs-text: #f3f6fc; --gs-soft: #aab8cf; --gs-faint: #6f8099; --gs-blue: #2f6bff; --gs-cyan: #6ea0ff; --gs-violet:#8a78f0; --gs-gold: #cbb074; --gs-green: #34d39a; } .gets-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .gets-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(120% 90% at 40% 35%, #000 32%, transparent 80%); -webkit-mask-image: radial-gradient(120% 90% at 40% 35%, #000 32%, transparent 80%); } .gets-glow { position: absolute; border-radius: 50%; filter: blur(95px); } .gets-glow--1 { width: 46vw; height: 34vw; max-width: 680px; max-height: 480px; background: radial-gradient(circle, rgba(47,107,255,.16) 0%, transparent 66%); top: 2%; left: -4%; animation: getsDrift 34s ease-in-out infinite; } .gets-glow--2 { width: 36vw; height: 26vw; max-width: 520px; max-height: 380px; background: radial-gradient(circle, rgba(138,120,240,.12) 0%, transparent 68%); bottom: 8%; left: 30%; animation: getsDrift 40s ease-in-out infinite reverse; } @keyframes getsDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.05); } } .gets-wrap { position: relative; z-index: 1; } /* Top: text (right) + dashboard (left) */ .gets-top { display: grid; /* narrower text col first (→ right in RTL), wider board col (→ left) */ grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); align-items: center; gap: 52px; } .gets-text { order: 1; text-align: right; } /* DOM-first → right in RTL */ .gets-board { order: 2; } /* → left in RTL */ /* ── Text column ──────────────────────────────────────── */ .gets-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--gs-gold); margin-bottom: 1rem; } .gets-title { font-family: var(--sans); font-size: clamp(1.8rem, 1.8vw + .7rem, 2.6rem); font-weight: 600; line-height: 1.18; color: var(--gs-text); letter-spacing: -.03em; margin-bottom: 1.1rem; } .gets-intro { font-size: 1rem; line-height: 1.8; color: var(--gs-soft); margin-bottom: 1.6rem; } .gets-body { font-size: 1rem; line-height: 1.85; color: var(--gs-soft); padding-top: 1.5rem; margin-bottom: 1.3rem; border-top: 1px solid rgba(255,255,255,.08); } .gets-points { list-style: none; display: flex; flex-direction: column; gap: 11px; } .gets-points li { display: flex; align-items: center; gap: 11px; font-size: .92rem; color: var(--gs-soft); } .gp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gs-cyan); box-shadow: 0 0 8px rgba(110,160,255,.7); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ DASHBOARD FRAME + 6 CARDS ══════════════════════════════════════════════════════════ */ .board-frame { position: relative; border-radius: 22px; padding: 18px; background: radial-gradient(120% 80% at 50% 0%, rgba(47,107,255,.07), transparent 55%), linear-gradient(180deg, rgba(14,24,44,.7), rgba(9,15,30,.8)); border: 1px solid rgba(120,160,220,.14); box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gcell { position: relative; border-radius: 16px; padding: 16px 16px 15px; background: linear-gradient(180deg, rgba(22,34,60,.6), rgba(12,20,40,.7)); border: 1px solid rgba(120,160,220,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .gcell > * { position: relative; z-index: 1; } .gcell:hover { box-shadow: 0 12px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); transform: translateY(-2px); } .gcell--google { background: radial-gradient(120% 80% at 50% 0%, rgba(47,107,255,.16), transparent 60%), linear-gradient(180deg, rgba(24,38,68,.7), rgba(13,22,42,.78)); } /* ── Per-card animated glowing border ─────────────────── */ .gcell-glow { position: absolute; inset: 0; z-index: 0; border-radius: 16px; padding: 1px; /* border thickness */ background: linear-gradient(150deg, rgba(120,170,255,.6) 0%, rgba(138,120,240,.28) 45%, rgba(110,160,255,.08) 80%); /* show only the border ring */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .55; animation: cellGlowBreathe 5s ease-in-out infinite; } .gcell:hover .gcell-glow { opacity: .9; } /* slightly staggered breathing so the grid feels alive, not synced */ .gcell:nth-child(2) .gcell-glow { animation-delay: -1.1s; } .gcell:nth-child(3) .gcell-glow { animation-delay: -2.2s; } .gcell:nth-child(4) .gcell-glow { animation-delay: -3.3s; } .gcell:nth-child(5) .gcell-glow { animation-delay: -1.7s; } .gcell:nth-child(6) .gcell-glow { animation-delay: -2.8s; } @keyframes cellGlowBreathe { 0%,100% { opacity: .4; } 50% { opacity: .75; } } /* Google card border glows a touch brighter */ .gcell--google .gcell-glow { background: linear-gradient(150deg, rgba(140,182,255,.85) 0%, rgba(138,120,240,.4) 48%, rgba(110,160,255,.12) 82%); opacity: .7; } .gcell--google .gcell-glow { animation-name: cellGlowBreatheStrong; } @keyframes cellGlowBreatheStrong { 0%,100% { opacity: .55; } 50% { opacity: .9; } } .gcell-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .gcell-ic { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--gs-cyan); background: radial-gradient(120% 120% at 30% 20%, rgba(47,107,255,.3), transparent 70%), linear-gradient(160deg, rgba(47,107,255,.18), rgba(138,120,240,.1)); border: 1px solid rgba(120,170,255,.3); box-shadow: 0 0 18px rgba(47,107,255,.22), inset 0 1px 0 rgba(255,255,255,.08); } .gcell-ic svg { width: 26px; height: 26px; } .gcell-ic--google { background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.14), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.16); box-shadow: 0 0 18px rgba(120,170,255,.2), inset 0 1px 0 rgba(255,255,255,.1); } .gcell-ic--google svg { width: 27px; height: 27px; } .gcell-status { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; border: 1px solid transparent; } .gcell-status .st-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .gcell-status--on { color: var(--gs-green); background: rgba(52,211,154,.12); border-color: rgba(52,211,154,.25); } .gcell-status--on .st-dot { background: var(--gs-green); box-shadow: 0 0 6px rgba(52,211,154,.8); animation: stPulse 2.6s ease-in-out infinite; } .gcell-status--track { color: var(--gs-cyan); background: rgba(110,160,255,.12); border-color: rgba(110,160,255,.25); } .gcell-status--track .st-dot { background: var(--gs-cyan); box-shadow: 0 0 6px rgba(110,160,255,.8); } .gcell-status--upd { color: var(--gs-violet); background: rgba(138,120,240,.14); border-color: rgba(138,120,240,.28); } .gcell-status--upd .st-dot { background: var(--gs-violet); box-shadow: 0 0 6px rgba(138,120,240,.8); } @keyframes stPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .gcell-title { font-size: 1rem; font-weight: 700; color: var(--gs-text); letter-spacing: -.01em; margin-bottom: 7px; } .gcell--google .gcell-title { background: linear-gradient(95deg, #9cbcff, #bda9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gcell-desc { font-size: .8rem; line-height: 1.55; color: var(--gs-faint); margin-bottom: 16px; flex: 1; } /* ── Data area (shared) ───────────────────────────────── */ .gcell-data { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.06); } .gcell-data--split { justify-content: space-between; } .data-stat { display: flex; align-items: baseline; gap: 6px; } .data-stat--col { flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; } .data-num { font-size: 1.4rem; font-weight: 800; color: var(--gs-text); letter-spacing: -.02em; direction: ltr; line-height: 1; } .data-stat--accent .data-num { color: var(--gs-cyan); } .data-lbl { font-size: .68rem; color: var(--gs-faint); line-height: 1.3; } /* 1 — mini bars */ .mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; flex: 1; max-width: 100px; } .mini-bars span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--gs-cyan), var(--gs-blue)); height: 0; /* animates to --h on reveal */ transform-origin: bottom; transition: height .8s cubic-bezier(.4,0,.2,1); } .is-animated .mini-bars span { height: var(--h); } /* continuous gentle equalizer drift (scaleY won't fight the height transition) */ .is-animated[data-anim="bars"] .mini-bars span { animation: barDrift 3.6s ease-in-out infinite; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(2) { animation-delay: -.4s; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(3) { animation-delay: -.8s; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(4) { animation-delay: -1.2s; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(5) { animation-delay: -1.6s; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(6) { animation-delay: -2s; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(7) { animation-delay: -2.4s; } .is-animated[data-anim="bars"] .mini-bars span:nth-child(8) { animation-delay: -2.8s; } @keyframes barDrift { 0%,100% { transform: scaleY(1); opacity: .92; } 50% { transform: scaleY(.82); opacity: .7; } } /* 2 — mini line + travelling glow sweep */ .mini-line { position: relative; width: 100px; height: 32px; color: var(--gs-cyan); flex-shrink: 0; } .ml-path { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.4s var(--ease); filter: drop-shadow(0 0 4px rgba(110,160,255,.4)); } .is-animated .ml-path { stroke-dashoffset: 0; } /* soft moving highlight that sweeps across the line after it draws */ .is-animated .mini-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(160,195,255,.5), transparent); width: 40%; animation: lineSweep 3.4s ease-in-out 1.4s infinite; pointer-events: none; } @keyframes lineSweep { 0% { transform: translateX(-120%); opacity: 0; } 35% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(170%); opacity: 0; } } /* 3 — progress ring */ .mini-ring { position: relative; width: 58px; height: 58px; flex-shrink: 0; } .mini-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring-track { stroke: rgba(255,255,255,.08); } .ring-fill { stroke: var(--gs-cyan); stroke-dasharray: 113; /* 2πr, r=18 */ stroke-dashoffset: 113; /* JS drives the offset (fill + oscillation) */ /* soft glow pulse, gently synced to the oscillation period */ filter: drop-shadow(0 0 4px rgba(110,160,255,.5)); } .is-animated .ring-fill { animation: ringGlowPulse 4.2s ease-in-out 1.2s infinite; } @keyframes ringGlowPulse { 0%,100% { filter: drop-shadow(0 0 4px rgba(110,160,255,.45)); } 50% { filter: drop-shadow(0 0 8px rgba(110,160,255,.8)); } } .ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 800; color: var(--gs-text); direction: ltr; } /* 4 — tracking dots */ .mini-dots { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; max-width: 110px; } .mini-dots .md-line { position: absolute; left: 4px; right: 4px; top: 50%; height: 1.5px; background: rgba(120,160,220,.18); } .mini-dots .md-dot { position: relative; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: rgba(120,160,220,.3); transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); } .is-animated .md-dot.md-on { background: var(--gs-cyan); box-shadow: 0 0 7px rgba(110,160,255,.8); } /* the single "scanning" dot rides across after the initial light-up */ .is-animated .md-dot.md-active { background: #cfe0ff; box-shadow: 0 0 10px rgba(160,195,255,.95); transform: scale(1.25); } /* 5 — message flow */ .flow-line { position: relative; display: block; width: 80px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 5px; } .flow-fill { position: relative; display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gs-cyan), var(--gs-blue)); transition: width 1.1s var(--ease); } .is-animated .flow-fill { width: var(--w); } /* travelling shimmer suggesting active message flow */ .is-animated .flow-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(220,235,255,.7), transparent); width: 50%; animation: flowShimmer 2.8s ease-in-out 1.1s infinite; } @keyframes flowShimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } } /* 6 — report row */ .report-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.1); opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .is-animated .report-row { opacity: 1; transform: translateY(0); } .report-ic { width: 22px; height: 22px; color: var(--gs-violet); flex-shrink: 0; } .report-ic svg { width: 100%; height: 100%; } /* subtle calm glow pulse on the report icon after reveal */ .is-animated .report-ic { animation: reportGlow 4.5s ease-in-out 1s infinite; } @keyframes reportGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(138,120,240,0)); } 50% { filter: drop-shadow(0 0 5px rgba(138,120,240,.7)); } } .report-txt { display: flex; flex-direction: column; } .report-title { font-size: .78rem; font-weight: 600; color: var(--gs-soft); } .report-sub { font-size: .66rem; color: var(--gs-faint); } /* ── Takeaway band ────────────────────────────────────── */ .gets-takeaway { position: relative; margin-top: 3.2rem; border-radius: 20px; padding: 34px 40px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, rgba(47,107,255,.14), transparent 55%), linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.92)); border: 1px solid rgba(120,170,255,.26); box-shadow: 0 0 56px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); text-align: center; } /* when it introduces the section it sits at the top, spacing below */ .gets-takeaway--top { margin-top: 0; margin-bottom: 3.2rem; } .gt-bar { position: absolute; top: 18px; bottom: 18px; inset-inline-end: 26px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gs-cyan), var(--gs-violet)); box-shadow: 0 0 10px rgba(110,160,255,.6); } .gt-glow { position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% 0%, rgba(47,107,255,.14), transparent 60%); animation: getsBreathe 6s ease-in-out infinite; } @keyframes getsBreathe { 0%,100% { opacity: .6; } 50% { opacity: 1; } } .gt-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; font-family: var(--sans); font-weight: 600; line-height: 1.5; } .gt-line { font-size: clamp(1.05rem, 1.2vw + .5rem, 1.5rem); letter-spacing: -.02em; } .gt-line--muted { color: var(--gs-soft); font-weight: 500; } .gt-line--strong { color: var(--gs-text); background: linear-gradient(95deg, #9cbcff 0%, #bda9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .gets-glow--1, .gets-glow--2, .gt-glow, .gcell-status--on .st-dot, .gcell-glow, .is-animated[data-anim="bars"] .mini-bars span, .is-animated .mini-line::after, .is-animated .ring-fill, .is-animated .flow-fill::after, .is-animated .report-ic { animation: none; } /* show every data element in finished state, no transitions */ .mini-bars span { height: var(--h); transform: none; transition: none; animation: none; } .ml-path { stroke-dashoffset: 0; transition: none; } .mini-line::after { display: none; } .ring-fill { transition: none; } /* JS sets final offset immediately */ .flow-fill { width: var(--w); transition: none; } .flow-fill::after { display: none; } .report-row { opacity: 1; transform: none; transition: none; } .md-dot { transition: none; } .gcell-glow { opacity: .5; } /* static border, no breathing */ } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 980px) { .gets-top { grid-template-columns: 1fr; gap: 38px; } .gets-board { order: 2; } .gets-text { order: 1; max-width: 680px; margin: 0 auto; text-align: center; } .gets-points { max-width: 460px; margin: 0 auto; text-align: right; } } @media (max-width: 760px) { .board-frame { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .gets { padding: 64px 0 76px; } .board-frame { grid-template-columns: 1fr; padding: 14px; gap: 12px; } .gets-takeaway { padding: 26px 24px; margin-top: 2.4rem; } } /* ══════════════════════════════════════════════════════════ CONTACT CTA STRIP (compact transition before next section) ══════════════════════════════════════════════════════════ */ .cta-strip-wrap { background: linear-gradient(180deg, #070d18 0%, #0a1020 100%); /* reduced top gap — the gets section already has bottom padding above */ padding: 8px 0 48px; --c-text: #f3f6fc; --c-soft: #aab8cf; --c-faint: #6f8099; --c-blue: #2f6bff; --c-cyan: #6ea0ff; --c-violet:#8a78f0; --c-gold: #cbb074; } .cta-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 36px; border-radius: 20px; padding: 22px 32px; overflow: hidden; background: radial-gradient(120% 160% at 0% 0%, rgba(47,107,255,.14), transparent 55%), linear-gradient(180deg, rgba(18,30,56,.92), rgba(11,18,36,.94)); border: 1px solid rgba(120,170,255,.22); box-shadow: 0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); } /* breathing glow border */ .cta-strip-glow { position: absolute; inset: 0; z-index: 0; border-radius: 20px; padding: 1px; background: linear-gradient(150deg, rgba(120,170,255,.6), rgba(138,120,240,.25) 55%, rgba(110,160,255,.06)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .6; animation: ctaGlowBreathe 5s ease-in-out infinite; } @keyframes ctaGlowBreathe { 0%,100% { opacity: .45; } 50% { opacity: .8; } } .cta-strip-text { position: relative; z-index: 1; text-align: right; } .cta-strip-label { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .2em; color: var(--c-gold); margin-bottom: .7rem; } .cta-strip-title { font-family: var(--sans); font-size: clamp(1.15rem, 1.3vw + .5rem, 1.55rem); font-weight: 600; line-height: 1.3; color: var(--c-text); letter-spacing: -.02em; margin-bottom: .55rem; } .cta-strip-sub { font-size: .9rem; line-height: 1.65; color: var(--c-soft); max-width: 560px; /* wider so the shortened text stays on one line */ } /* form */ .cta-strip-form { position: relative; z-index: 1; } .cta-fields { display: flex; gap: 10px; margin-bottom: 10px; } .cta-input { flex: 1; min-width: 0; font-family: inherit; font-size: .9rem; color: var(--c-text); background: rgba(255,255,255,.04); /* dark field, not bright white */ border: 1px solid rgba(120,160,220,.22); border-radius: 11px; padding: .72rem .9rem; direction: rtl; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .cta-input::placeholder { color: var(--c-faint); } .cta-input:focus { outline: none; border-color: rgba(120,170,255,.55); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(47,107,255,.16); } .cta-submit { width: 100%; font-family: inherit; font-size: .94rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-violet) 100%); border-radius: 12px; padding: .78rem 1.4rem; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(47,107,255,.32); } .cta-submit:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 2px 4px rgba(0,0,0,.34), 0 10px 26px rgba(47,107,255,.42); } .cta-submit:disabled { opacity: .6; cursor: default; transform: none; } .cta-note { font-size: .72rem; color: var(--c-faint); margin-top: .7rem; text-align: center; } .cta-success { font-size: .85rem; font-weight: 600; color: #4ad6a0; margin-top: .7rem; text-align: center; background: rgba(24,160,106,.12); border: 1px solid rgba(24,160,106,.28); border-radius: 10px; padding: .62rem .8rem; } @media (prefers-reduced-motion: reduce) { .cta-strip-glow { animation: none; opacity: .55; } } @media (max-width: 860px) { .cta-strip { grid-template-columns: 1fr; gap: 22px; padding: 24px 24px; } .cta-strip-text { text-align: center; } .cta-strip-sub { margin-inline: auto; } } @media (max-width: 560px) { .cta-fields { flex-direction: column; } .cta-strip-wrap { padding: 32px 0 40px; } } /* ══════════════════════════════════════════════════════════ SECTION 4 — CONTENT MANAGEMENT (we take the content work) ══════════════════════════════════════════════════════════ */ @property --cms-angle { syntax: ''; inherits: false; initial-value: 0deg; } .cms { position: relative; overflow: hidden; padding: 100px 0 104px; background: linear-gradient(180deg, #070d18 0%, #0a1326 48%, #070d18 100%); --cm-text: #f3f6fc; --cm-soft: #aab8cf; --cm-faint: #6f8099; --cm-blue: #2f6bff; --cm-cyan: #6ea0ff; --cm-violet:#8a78f0; --cm-gold: #cbb074; --cm-green: #34d39a; --cm-line: rgba(120,160,220,.12); } .cms-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .cms-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(120% 90% at 35% 35%, #000 32%, transparent 80%); -webkit-mask-image: radial-gradient(120% 90% at 35% 35%, #000 32%, transparent 80%); } .cms-glow { position: absolute; border-radius: 50%; filter: blur(95px); } .cms-glow--1 { width: 46vw; height: 34vw; max-width: 680px; max-height: 480px; background: radial-gradient(circle, rgba(47,107,255,.16) 0%, transparent 66%); top: 4%; left: -6%; animation: cmsDrift 34s ease-in-out infinite; } .cms-glow--2 { width: 34vw; height: 26vw; max-width: 480px; max-height: 360px; background: radial-gradient(circle, rgba(138,120,240,.13) 0%, transparent 68%); bottom: 10%; left: 22%; animation: cmsDrift 40s ease-in-out infinite reverse; } @keyframes cmsDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,-16px) scale(1.05); } } .cms-wrap { position: relative; z-index: 1; } /* Top: dashboard (left) + text (right) */ .cms-top { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, .66fr); align-items: stretch; gap: 48px; } .cms-board { order: 1; } /* DOM-first → physical left? see below */ .cms-text { order: 2; text-align: right; } /* In RTL the first grid cell is on the right; we want the dashboard on the LEFT, so place the board in the 2nd visual cell via grid-column. */ .cms-board { grid-column: 1; } .cms-text { grid-column: 2; } /* ── Right text ───────────────────────────────────────── */ .cms-text { align-self: center; } .cms-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--cm-gold); margin-bottom: 1rem; } .cms-title { font-family: var(--sans); font-size: clamp(1.6rem, 1.7vw + .6rem, 2.4rem); font-weight: 600; line-height: 1.22; color: var(--cm-text); letter-spacing: -.028em; margin-bottom: 1.1rem; } .cms-line { display: block; } .cms-line--accent { background: linear-gradient(95deg, #8fb6ff 0%, #b6a3ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cms-para { font-size: .98rem; line-height: 1.85; color: var(--cm-soft); margin-bottom: .8rem; } .cms-para--strong { color: var(--cm-text); font-weight: 500; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); } .cms-points { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 1.5rem; } .cms-points li { display: flex; align-items: center; gap: 11px; font-size: .92rem; color: var(--cm-soft); } .cp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-cyan); box-shadow: 0 0 8px rgba(110,160,255,.7); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════ DASHBOARD BOARD ══════════════════════════════════════════════════════════ */ .cms-board { position: relative; border-radius: 22px; padding: 18px 18px 14px; background: radial-gradient(120% 60% at 50% 0%, rgba(47,107,255,.1), transparent 55%), linear-gradient(180deg, rgba(14,24,46,.74), rgba(7,12,26,.84)); border: 1px solid rgba(120,165,235,.22); box-shadow: 0 28px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05), 0 0 50px rgba(47,107,255,.1); display: flex; flex-direction: column; } /* corner lighting accents on the outer dashboard container */ .cms-board::after { content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: radial-gradient(60% 50% at 0% 0%, rgba(110,160,255,.1), transparent 60%), radial-gradient(55% 45% at 100% 100%, rgba(138,120,240,.08), transparent 60%); } .cms-board-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 16px; } .cms-modules, .cms-board-foot { position: relative; z-index: 1; } .cms-board-title { font-size: .82rem; font-weight: 700; color: var(--cm-soft); letter-spacing: .02em; } .cms-board-live { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 700; color: var(--cm-green); } .cbl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-green); box-shadow: 0 0 6px rgba(52,211,154,.8); animation: cmsBlink 2.6s ease-in-out infinite; } @keyframes cmsBlink { 0%,100% { opacity: 1; } 50% { opacity: .4; } } .cms-modules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } /* ── Module card ──────────────────────────────────────── */ .cmod { position: relative; border-radius: 14px; padding: 14px 13px; background: radial-gradient(120% 60% at 50% 0%, rgba(47,107,255,.1), transparent 60%), linear-gradient(180deg, rgba(22,36,64,.72), rgba(10,17,34,.8)); border: 1px solid rgba(120,165,235,.18); /* layered depth: inner top light + deep inner shadow + soft outer glow */ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -20px 40px rgba(0,0,0,.35), 0 8px 26px rgba(0,0,0,.3), 0 0 22px rgba(47,107,255,.08); display: flex; flex-direction: column; /* spread internal elements evenly top→bottom so columns fill the height */ justify-content: flex-start; gap: 11px; transition: box-shadow .3s var(--ease); } .cmod > * { position: relative; z-index: 1; } .cmod:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -20px 40px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.34), 0 0 34px rgba(47,107,255,.18); } /* animated glowing border per module — traveling light pass + ambient ring */ .cmod-glow { position: absolute; inset: 0; z-index: 0; border-radius: 14px; padding: 1.4px; background: conic-gradient(from var(--cms-angle), rgba(110,160,255,0) 0deg, rgba(140,185,255,1) 50deg, rgba(150,130,255,.6) 110deg, rgba(110,160,255,.12) 175deg, rgba(110,160,255,0) 240deg, rgba(110,160,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .8; filter: drop-shadow(0 0 4px rgba(110,160,255,.4)); animation: cmsBorderSpin 7s linear infinite; } .cmod:nth-child(2) .cmod-glow { animation-delay: -1.4s; } .cmod:nth-child(3) .cmod-glow { animation-delay: -2.8s; } .cmod:nth-child(4) .cmod-glow { animation-delay: -4.2s; } .cmod:nth-child(5) .cmod-glow { animation-delay: -5.6s; } @keyframes cmsBorderSpin { to { --cms-angle: 360deg; } } /* static ambient inner ring under the traveling glow (always-on presence) */ .cmod::before { content: ''; position: absolute; inset: 0; border-radius: 14px; border: 1px solid rgba(120,170,255,.18); pointer-events: none; z-index: 0; } .cmod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; } .cmod-titles { display: flex; flex-direction: column; gap: 2px; } .cmod-title { font-size: .86rem; font-weight: 700; color: var(--cm-text); } .cmod-sub { font-size: .64rem; color: var(--cm-faint); } .cmod-badge { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 800; color: var(--cm-cyan); background: rgba(47,107,255,.2); border: 1px solid rgba(110,160,255,.45); box-shadow: 0 0 12px rgba(47,107,255,.3); } /* line chart — draws on reveal, then a soft glow pulse keeps it alive */ .cmod-line { position: relative; width: 100%; height: 40px; display: block; } .cmod-stroke { stroke-dasharray: 320; stroke-dashoffset: 320; filter: drop-shadow(0 0 4px rgba(110,160,255,.5)); transition: stroke-dashoffset 1.6s var(--ease); } .cms-on .cmod-stroke { stroke-dashoffset: 0; } .cms-on .cmod-stroke { animation: cmsLineGlow 4.5s ease-in-out 1.6s infinite; } @keyframes cmsLineGlow { 0%,100% { filter: drop-shadow(0 0 4px rgba(110,160,255,.4)); } 50% { filter: drop-shadow(0 0 8px rgba(110,160,255,.85)); } } .cmod-area { opacity: 0; transition: opacity .8s var(--ease) .5s; } .cms-on .cmod-area { opacity: 1; } /* metrics */ .cmod-metrics { display: flex; flex-direction: column; gap: 8px; } .cm-stat { display: flex; align-items: baseline; gap: 8px; } .cm-num { font-size: 1.18rem; font-weight: 800; color: var(--cm-text); direction: ltr; letter-spacing: -.02em; } .cm-delta { font-size: .68rem; font-weight: 700; direction: ltr; } .cm-delta--up { color: var(--cm-green); animation: cmsDeltaShimmer 3.4s ease-in-out infinite; } .cm-delta--up:nth-of-type(1) { animation-delay: -1.2s; } @keyframes cmsDeltaShimmer { 0%,100% { opacity: .78; text-shadow: none; } 50% { opacity: 1; text-shadow: 0 0 8px rgba(52,211,154,.6); } } @keyframes cmsSoftPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } } /* bar chart */ .cmod-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; } .cmod-bars span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--cm-cyan), var(--cm-blue)); height: var(--h); transform-origin: bottom; animation: cmsBarDrift 3.8s ease-in-out infinite; } .cmod-bars span:nth-child(2){animation-delay:-.5s} .cmod-bars span:nth-child(3){animation-delay:-1s} .cmod-bars span:nth-child(4){animation-delay:-1.5s} .cmod-bars span:nth-child(5){animation-delay:-2s} .cmod-bars span:nth-child(6){animation-delay:-2.5s} @keyframes cmsBarDrift { 0%,100% { transform: scaleY(1); opacity:.92; } 50% { transform: scaleY(.8); opacity:.68; } } /* checklist */ .cmod-checks { list-style: none; display: flex; flex-direction: column; gap: 7px; } .cmod-checks li { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--cm-soft); } .cmod-checks .ck { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(110,160,255,.4); background: rgba(47,107,255,.14); position: relative; } .cmod-checks .ck::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 42%, var(--cm-cyan) 42%, var(--cm-cyan) 58%, transparent 58%) no-repeat 3px 1px / 8px 8px; -webkit-mask: none; } /* simpler checkmark via border */ .cmod-checks .ck { display: flex; align-items: center; justify-content: center; } .cmod-checks .ck::after { content: '✓'; background: none; position: static; inset: auto; font-size: .62rem; color: var(--cm-cyan); line-height: 1; animation: cmsCkGlow 3.6s ease-in-out infinite; } @keyframes cmsCkGlow { 0%,100% { opacity: .7; } 50% { opacity: 1; text-shadow: 0 0 6px rgba(110,160,255,.7); } } /* subtle UI filler — small activity row / mini metric to balance height */ .cmod-activity { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.025); border: 1px solid rgba(120,160,220,.09); } .ca-label { font-size: .62rem; color: var(--cm-faint); white-space: nowrap; } .ca-dots { display: inline-flex; gap: 4px; } .ca-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(120,160,220,.3); animation: caDotRide 3.2s ease-in-out infinite; } .ca-dots i:nth-child(2){animation-delay:.18s} .ca-dots i:nth-child(3){animation-delay:.36s} .ca-dots i:nth-child(4){animation-delay:.54s} .ca-dots i:nth-child(5){animation-delay:.72s} .ca-dots i:nth-child(6){animation-delay:.9s} @keyframes caDotRide { 0%,100% { background: rgba(120,160,220,.3); box-shadow: none; } 45% { background: var(--cm-cyan); box-shadow: 0 0 6px rgba(110,160,255,.8); } } .ca-mini { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; } .ca-mini-fill { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--cm-cyan), var(--cm-blue)); box-shadow: 0 0 6px rgba(110,160,255,.5); position: relative; } .ca-mini-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(220,235,255,.6), transparent); width: 50%; animation: flowShimmer 3.4s ease-in-out infinite; } /* draft / in-review footer state (gold) */ .cmod-state--draft { color: var(--cm-gold); background: rgba(203,176,116,.12); border: 1px solid rgba(203,176,116,.34); box-shadow: 0 0 14px rgba(203,176,116,.16); animation: cmsDraftGlow 4.2s ease-in-out infinite; } .cmod-state--draft::before { background: var(--cm-gold); box-shadow: 0 0 7px rgba(203,176,116,.9); animation: cmsBlink 2.8s ease-in-out infinite; } /* module footer state */ .cmod-foot { margin-top: auto; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.06); display: flex; } .cmod-state { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .68rem; font-weight: 700; direction: ltr; padding: .42rem .6rem; border-radius: 8px; } .cmod-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .cmod-state--pub { color: var(--cm-cyan); background: rgba(47,107,255,.16); border: 1px solid rgba(110,160,255,.4); box-shadow: 0 0 16px rgba(47,107,255,.22), inset 0 0 12px rgba(47,107,255,.1); animation: cmsPillGlow 4s ease-in-out infinite; } .cmod-state--pub::before { background: var(--cm-cyan); box-shadow: 0 0 8px rgba(110,160,255,.95); animation: cmsBlink 2.8s ease-in-out infinite; } .cmod-state--ok { color: var(--cm-green); background: rgba(52,211,154,.14); border: 1px solid rgba(52,211,154,.4); box-shadow: 0 0 16px rgba(52,211,154,.2), inset 0 0 12px rgba(52,211,154,.08); animation: cmsPillGlowGreen 4s ease-in-out infinite; } .cmod-state--ok::before { background: var(--cm-green); box-shadow: 0 0 8px rgba(52,211,154,.95); animation: cmsBlink 2.8s ease-in-out infinite; } @keyframes cmsPillGlow { 0%,100% { box-shadow: 0 0 12px rgba(47,107,255,.18), inset 0 0 10px rgba(47,107,255,.08); } 50% { box-shadow: 0 0 22px rgba(47,107,255,.34), inset 0 0 14px rgba(47,107,255,.14); } } @keyframes cmsPillGlowGreen { 0%,100% { box-shadow: 0 0 12px rgba(52,211,154,.16), inset 0 0 10px rgba(52,211,154,.06); } 50% { box-shadow: 0 0 22px rgba(52,211,154,.3), inset 0 0 14px rgba(52,211,154,.12); } } /* Module 2 — info card */ .cms-info { background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.1); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; } .cms-info-title { font-size: .72rem; font-weight: 700; color: var(--cm-soft); } .cms-info-row { display: flex; justify-content: space-between; font-size: .68rem; color: var(--cm-faint); } .cms-info-val { color: var(--cm-soft); direction: ltr; } .cms-info-upd { display: flex; align-items: center; gap: 6px; font-size: .64rem; color: var(--cm-faint); margin-top: 2px; } .upd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-green); box-shadow: 0 0 6px rgba(52,211,154,.8); animation: cmsBlink 2.4s ease-in-out infinite; } /* Module 3 — reviews */ .cms-reviews { display: flex; flex-direction: column; gap: 7px; } .cms-rev { background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.1); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .cms-rev-stars { font-size: .72rem; color: #f5b740; letter-spacing: 1px; direction: ltr; animation: cmsStarGlow 4s ease-in-out infinite; } .star-dim { color: rgba(245,183,64,.3); } @keyframes cmsStarGlow { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgba(245,183,64,.6)); } } .cms-rev-txt { font-size: .68rem; color: var(--cm-soft); line-height: 1.5; } .cms-rev-tag { font-size: .6rem; color: var(--cm-cyan); align-self: flex-start; } /* subtle shimmer */ .cms-rev::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(90deg, transparent, rgba(120,170,255,.08), transparent); animation: cmsShimmer 5s ease-in-out infinite; } .cms-rev:nth-child(2)::after { animation-delay: 1.6s; } .cms-rev:nth-child(3)::after { animation-delay: 3.2s; } @keyframes cmsShimmer { 0% { left: -50%; } 60%,100% { left: 130%; } } /* Module 4 — message */ .cms-msg { background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.1); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 5px; } .cms-msg-top { display: flex; justify-content: space-between; align-items: baseline; } .cms-msg-title { font-size: .72rem; font-weight: 700; color: var(--cm-text); } .cms-msg-time { font-size: .62rem; color: var(--cm-faint); direction: ltr; } .cms-msg-when { font-size: .64rem; color: var(--cm-cyan); direction: ltr; } .cms-msg-body { font-size: .68rem; color: var(--cm-soft); line-height: 1.5; } .cms-msg-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 700; color: var(--cm-green); direction: ltr; background: rgba(52,211,154,.14); border: 1px solid rgba(52,211,154,.4); border-radius: 999px; padding: .14rem .5rem; margin-top: 2px; box-shadow: 0 0 14px rgba(52,211,154,.22); animation: cmsPillGlowGreen 4s ease-in-out infinite; } .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cm-green); box-shadow: 0 0 6px rgba(52,211,154,.9); animation: cmsBlink 2.6s ease-in-out infinite; } /* Module 5 — post */ .cms-post { background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.1); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; } .cms-post-state { align-self: flex-start; font-size: .6rem; font-weight: 700; color: var(--cm-gold); direction: ltr; background: rgba(203,176,116,.14); border: 1px solid rgba(203,176,116,.42); border-radius: 6px; padding: .12rem .45rem; box-shadow: 0 0 14px rgba(203,176,116,.2); animation: cmsDraftGlow 4s ease-in-out infinite; } @keyframes cmsDraftGlow { 0%,100% { box-shadow: 0 0 10px rgba(203,176,116,.16); opacity: .85; } 50% { box-shadow: 0 0 20px rgba(203,176,116,.32); opacity: 1; } } .cms-post-label { font-size: .62rem; color: var(--cm-faint); } .cms-post-txt { font-size: .7rem; color: var(--cm-soft); line-height: 1.5; } .cms-post-prog { position: relative; display: block; height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .cms-post-fill { position: relative; display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cm-cyan), var(--cm-blue)); box-shadow: 0 0 8px rgba(110,160,255,.5); transition: width 1.4s var(--ease); } .cms-on .cms-post-fill { width: var(--w); } /* travelling shimmer along the progress fill after it fills */ .cms-on .cms-post-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(220,235,255,.7), transparent); width: 50%; animation: flowShimmer 3s ease-in-out 1.4s infinite; } .cms-post-year { font-size: .62rem; color: var(--cm-faint); direction: ltr; align-self: flex-end; } /* ── Board footer strip ───────────────────────────────── */ .cms-board-foot { margin-top: 14px; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(120,160,220,.1); font-size: .68rem; color: var(--cm-faint); text-align: center; letter-spacing: .01em; } /* ══════════════════════════════════════════════════════════ BOTTOM STATEMENT BAR ══════════════════════════════════════════════════════════ */ .cms-statement { position: relative; margin-top: 3.2rem; border-radius: 20px; padding: 34px 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(120% 150% at 0% 0%, rgba(47,107,255,.14), transparent 55%), radial-gradient(100% 130% at 100% 100%, rgba(138,120,240,.1), transparent 60%), linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.92)); border: 1px solid rgba(120,170,255,.26); box-shadow: 0 0 56px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); text-align: center; } .cms-statement-glow { position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% 0%, rgba(47,107,255,.14), transparent 60%); animation: getsBreathe 6s ease-in-out infinite; } .cms-statement-bar { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; width: 45%; background: linear-gradient(to right, transparent, rgba(160,195,255,.8), transparent); animation: takeSweep 5s ease-in-out infinite; } .cms-statement-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; font-family: var(--sans); font-weight: 600; line-height: 1.5; } .cs-line { font-size: clamp(1.05rem, 1.2vw + .5rem, 1.5rem); letter-spacing: -.02em; } .cs-line--muted { color: var(--cm-soft); font-weight: 500; } .cs-line--strong { color: var(--cm-text); background: linear-gradient(95deg, #9cbcff 0%, #bda9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cms-glow--1, .cms-glow--2, .cmod-glow, .cbl-dot, .cm-delta--up, .cmod-bars span, .cmod-checks .ck::after, .cmod-state--pub, .cmod-state--ok, .cmod-state--pub::before, .cmod-state--ok::before, .upd-dot, .cms-rev-stars, .cms-rev::after, .pill-dot, .cms-msg-pill, .cms-post-state, .cms-post-fill::after, .cms-statement-glow, .cms-statement-bar, .cms-on .cmod-stroke, .ca-dots i, .ca-mini-fill::after, .cmod-state--draft, .cmod-state--draft::before { animation: none; } .cmod-stroke { stroke-dashoffset: 0; transition: none; } .cmod-area { opacity: 1; transition: none; } .cms-post-fill { width: var(--w); transition: none; } .cms-post-fill::after { display: none; } .cmod-glow { opacity: .5; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 1080px) { .cms-top { grid-template-columns: 1fr; gap: 36px; } .cms-board { grid-column: 1; order: 2; } .cms-text { grid-column: 1; order: 1; max-width: 680px; margin: 0 auto; text-align: center; } .cms-points { max-width: 480px; margin-inline: auto; text-align: right; } } @media (max-width: 760px) { .cms-modules { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cms { padding: 64px 0 76px; } .cms-modules { grid-template-columns: 1fr; } .cms-statement { padding: 26px 24px; margin-top: 2.4rem; flex-direction: column; gap: 14px; } } /* ══════════════════════════════════════════════════════════ SECTION 5 — ONGOING WORKLOAD ORBIT ══════════════════════════════════════════════════════════ */ .orbit { position: relative; overflow: hidden; /* tighter top spacing so it connects to the section above */ padding: 56px 0 112px; background: linear-gradient(180deg, #070d18 0%, #0a1224 50%, #070d18 100%); --or-text: #f3f6fc; --or-soft: #aab8cf; --or-faint: #6f8099; --or-blue: #2f6bff; --or-cyan: #6ea0ff; --or-violet:#8a78f0; --or-gold: #cbb074; } .orbit-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .orbit-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(90% 80% at 50% 55%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(90% 80% at 50% 55%, #000 30%, transparent 78%); } .orbit-glow { position: absolute; border-radius: 50%; filter: blur(100px); } .orbit-glow--1 { width: 44vw; height: 40vw; max-width: 620px; max-height: 560px; background: radial-gradient(circle, rgba(47,107,255,.18) 0%, transparent 66%); top: 18%; left: 32%; animation: orbitDrift 30s ease-in-out infinite; } .orbit-glow--2 { width: 32vw; height: 30vw; max-width: 460px; max-height: 420px; background: radial-gradient(circle, rgba(138,120,240,.14) 0%, transparent 68%); bottom: 6%; left: 18%; animation: orbitDrift 38s ease-in-out infinite reverse; } @keyframes orbitDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.06); } } .orbit-wrap { position: relative; z-index: 1; } /* ── Heading ──────────────────────────────────────────── */ .orbit-head { text-align: center; max-width: 680px; margin: 0 auto 3.6rem; } .orbit-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--or-gold); margin-bottom: 1.1rem; } .orbit-title { font-family: var(--sans); font-size: clamp(1.7rem, 2vw + .6rem, 2.5rem); font-weight: 600; line-height: 1.22; color: var(--or-text); letter-spacing: -.028em; margin-bottom: 1.2rem; } .orbit-intro { font-size: 1.02rem; line-height: 1.85; color: var(--or-soft); max-width: 580px; margin: 0 auto .5rem; } .orbit-intro--soft { color: var(--or-faint); } /* ── Orbital stage ────────────────────────────────────── */ .orbit-stage { position: relative; width: 100%; max-width: 600px; margin: 2rem auto 0; aspect-ratio: 1 / 1; } /* ambient rings */ .orbit-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid rgba(120,170,255,.1); } .orbit-ring--1 { width: 58%; height: 58%; animation: orbitSpin 60s linear infinite; } .orbit-ring--2 { width: 86%; height: 86%; border-color: rgba(120,170,255,.06); animation: orbitSpin 90s linear infinite reverse; } .orbit-ring--1::after, .orbit-ring--2::after { content: ''; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--or-cyan); box-shadow: 0 0 8px rgba(110,160,255,.9); } @keyframes orbitSpin { to { transform: translate(-50%,-50%) rotate(360deg); } } /* connector lines */ .orbit-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ── Center hub ───────────────────────────────────────── */ .hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34%; aspect-ratio: 1/1; z-index: 3; } .hub-glow { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.32) 0%, rgba(138,120,240,.14) 45%, transparent 70%); filter: blur(14px); animation: hubPulse 5s ease-in-out infinite; } @keyframes hubPulse { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .hub-inner { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, rgba(47,107,255,.28), transparent 60%), linear-gradient(180deg, rgba(22,38,70,.95), rgba(11,19,40,.96)); border: 1px solid rgba(120,170,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 40px rgba(47,107,255,.34); } .hub-icon { width: 34px; height: 34px; color: var(--or-cyan); } .hub-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(110,160,255,.6)); } .hub-title { font-size: .92rem; font-weight: 700; color: var(--or-text); } .hub-sub { font-size: .62rem; color: var(--or-faint); } /* ── Task blocks ──────────────────────────────────────── */ .task { position: absolute; width: 21%; aspect-ratio: 1/1; z-index: 2; animation: taskFloat 6s ease-in-out infinite; } /* positions around the center */ .task--1 { top: 0; left: 50%; transform: translateX(-50%); } /* top */ .task--2 { top: 26%; right: -2%; animation-delay: -1.2s; } /* right-up */ .task--3 { bottom: 4%; right: 12%; animation-delay: -2.4s; } /* right-down */ .task--4 { bottom: 4%; left: 12%; animation-delay: -3.6s; } /* left-down */ .task--5 { top: 26%; left: -2%; animation-delay: -4.8s; } /* left-up (ours) */ @keyframes taskFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* soft pulsing wave ring radiating from each block */ .task-wave { position: absolute; inset: 0; border-radius: 18px; border: 1px solid rgba(110,160,255,.5); opacity: 0; animation: taskWave 4.5s ease-out infinite; } .task--2 .task-wave { animation-delay: -1s; } .task--3 .task-wave { animation-delay: -2s; } .task--4 .task-wave { animation-delay: -3s; } .task--5 .task-wave { animation-delay: -1.5s; border-color: rgba(150,130,255,.5); } @keyframes taskWave { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } } .task-inner { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 6px; background: radial-gradient(120% 80% at 50% 0%, rgba(47,107,255,.14), transparent 60%), linear-gradient(180deg, rgba(20,33,60,.92), rgba(11,18,38,.94)); border: 1px solid rgba(120,165,235,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.34), 0 0 18px rgba(47,107,255,.12); overflow: hidden; } /* traveling neon highlight along the block edge */ .task-inner::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px; background: conic-gradient(from var(--cms-angle, 0deg), rgba(110,160,255,0) 0deg, rgba(140,185,255,.9) 60deg, rgba(150,130,255,.4) 120deg, rgba(110,160,255,0) 200deg, rgba(110,160,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: cmsBorderSpin 7s linear infinite; } .task--2 .task-inner::before { animation-delay: -1.4s; } .task--3 .task-inner::before { animation-delay: -2.8s; } .task--4 .task-inner::before { animation-delay: -4.2s; } .task--5 .task-inner::before { animation-delay: -5.6s; } .task-icon { width: 24px; height: 24px; color: var(--or-cyan); } .task-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 5px rgba(110,160,255,.5)); } .task-label { font-size: .72rem; font-weight: 700; color: var(--or-text); } /* "our role" block — cool violet accent (on-palette, still distinct) */ .task--ours .task-inner { background: radial-gradient(120% 80% at 50% 0%, rgba(138,120,240,.24), transparent 60%), linear-gradient(180deg, rgba(24,30,62,.94), rgba(13,16,38,.95)); border-color: rgba(150,130,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.34), 0 0 24px rgba(138,120,240,.24); } .task--ours .task-inner::before { background: conic-gradient(from var(--cms-angle, 0deg), rgba(150,130,255,0) 0deg, rgba(170,150,255,.95) 60deg, rgba(110,160,255,.45) 130deg, rgba(150,130,255,0) 210deg, rgba(150,130,255,0) 360deg); } .task--ours .task-icon { color: var(--or-violet); } .task--ours .task-icon svg { filter: drop-shadow(0 0 6px rgba(150,130,255,.7)); } /* ── tiny inner UI motion ─────────────────────────────── */ .task-bit { display: flex; align-items: center; justify-content: center; } .task-bit--dots { gap: 4px; } .task-bit--dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(120,160,220,.4); animation: caDotRide 3s ease-in-out infinite; } .task-bit--dots i:nth-child(2){animation-delay:.25s} .task-bit--dots i:nth-child(3){animation-delay:.5s} .task-bit--scan { width: 70%; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.08); position: relative; } .task-bit--scan::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -45%; background: linear-gradient(90deg, transparent, var(--or-cyan), transparent); animation: taskScan 2.4s ease-in-out infinite; } @keyframes taskScan { 0% { left: -45%; } 100% { left: 110%; } } .task-bit--pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--or-cyan); box-shadow: 0 0 8px rgba(110,160,255,.9); animation: cmsBlink 2s ease-in-out infinite; } .task-bit--bars { gap: 3px; align-items: flex-end; height: 12px; } .task-bit--bars i { width: 3px; border-radius: 1px; background: var(--or-cyan); transform-origin: bottom; animation: cmsBarDrift 3s ease-in-out infinite; } .task-bit--bars i:nth-child(1){height:50%} .task-bit--bars i:nth-child(2){height:80%;animation-delay:-.5s} .task-bit--bars i:nth-child(3){height:60%;animation-delay:-1s} .task-bit--bars i:nth-child(4){height:95%;animation-delay:-1.5s} .task-bit--ours { font-size: .56rem; color: var(--or-violet); font-weight: 600; } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .orbit-glow--1, .orbit-glow--2, .orbit-ring--1, .orbit-ring--2, .hub-glow, .task, .task-wave, .task-inner::before, .task-bit--dots i, .task-bit--scan::after, .task-bit--pulse, .task-bit--bars i { animation: none; } .task-wave { opacity: 0; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 600px) { .orbit { padding: 40px 0 70px; } .orbit-stage { max-width: 380px; } .task-label { font-size: .64rem; } .hub-title { font-size: .82rem; } } @media (max-width: 400px) { .orbit-stage { max-width: 320px; } .task-bit { display: none; } } /* ══════════════════════════════════════════════════════════ SECTION 6 — 90-DAY PROCESS ══════════════════════════════════════════════════════════ */ .proc { position: relative; overflow: hidden; padding: 56px 0 104px; background: linear-gradient(180deg, #070d18 0%, #0a1224 50%, #070d18 100%); --pr-text: #f3f6fc; --pr-soft: #aab8cf; --pr-faint: #6f8099; --pr-blue: #2f6bff; --pr-cyan: #6ea0ff; --pr-violet:#8a78f0; --pr-gold: #cbb074; } .proc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .proc-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(110% 80% at 50% 45%, #000 32%, transparent 80%); -webkit-mask-image: radial-gradient(110% 80% at 50% 45%, #000 32%, transparent 80%); } .proc-glow { position: absolute; border-radius: 50%; filter: blur(100px); } .proc-glow--1 { width: 46vw; height: 30vw; max-width: 700px; max-height: 440px; background: radial-gradient(circle, rgba(47,107,255,.16) 0%, transparent 66%); top: 28%; left: 28%; animation: procDrift 32s ease-in-out infinite; } .proc-glow--2 { width: 32vw; height: 24vw; max-width: 460px; max-height: 340px; background: radial-gradient(circle, rgba(138,120,240,.12) 0%, transparent 68%); bottom: 4%; left: 12%; animation: procDrift 40s ease-in-out infinite reverse; } @keyframes procDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(22px,-16px) scale(1.05); } } .proc-wrap { position: relative; z-index: 1; } /* ── Heading ──────────────────────────────────────────── */ .proc-head { text-align: center; max-width: 760px; margin: 0 auto 3.6rem; } .proc-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; color: var(--pr-gold); margin-bottom: 1.1rem; } .proc-title { font-family: var(--sans); font-size: clamp(1.7rem, 2.2vw + .6rem, 2.7rem); font-weight: 600; line-height: 1.22; color: var(--pr-text); letter-spacing: -.028em; margin-bottom: 1.2rem; } .proc-intro { font-size: 1.02rem; line-height: 1.8; color: var(--pr-soft); max-width: 600px; margin: 0 auto .4rem; } .proc-intro--soft { color: var(--pr-faint); } /* ── Track with timeline ──────────────────────────────── */ .proc-track { position: relative; margin-top: 2.4rem; padding-bottom: 8px; } /* glowing horizontal line passing across the lower part of the cards */ .proc-line { position: absolute; left: 4%; right: 4%; bottom: 64px; height: 2px; background: linear-gradient(90deg, rgba(110,160,255,.16), rgba(110,160,255,.65) 50%, rgba(110,160,255,.16)); box-shadow: 0 0 16px rgba(47,107,255,.55); overflow: hidden; } /* two staggered traveling light pulses so progress always feels in motion */ .proc-line::before, .proc-line::after { content: ''; position: absolute; top: 0; bottom: 0; left: -28%; width: 28%; background: linear-gradient(90deg, transparent, #dceaff, transparent); box-shadow: 0 0 10px rgba(200,225,255,.8); animation: procLineFlow 4.5s linear infinite; } .proc-line::before { animation-delay: -2.25s; opacity: .7; } @keyframes procLineFlow { 0% { left: -28%; } 100% { left: 120%; } } .proc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; } /* ── Step card ────────────────────────────────────────── */ .pstep { position: relative; padding-top: 22px; /* room for the node hanging at the top corner */ } .pstep-inner { position: relative; height: 100%; border-radius: 18px; padding: 26px 26px 22px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, rgba(47,107,255,.12), transparent 55%), linear-gradient(180deg, rgba(20,33,62,.74), rgba(10,17,34,.82)); border: 1px solid rgba(120,165,235,.26); /* deeper inner contrast + stronger outer neon edge, gently breathing */ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -22px 44px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.38), 0 0 30px rgba(47,107,255,.14); display: flex; flex-direction: column; text-align: right; animation: pstepBreathe 6s ease-in-out infinite; } .pstep:nth-child(2) .pstep-inner { animation-delay: -2s; } .pstep:nth-child(3) .pstep-inner { animation-delay: -4s; } @keyframes pstepBreathe { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -22px 44px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.38), 0 0 26px rgba(47,107,255,.12); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -22px 44px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.38), 0 0 42px rgba(47,107,255,.24); } } /* soft diagonal highlight sweep across the card body */ .pstep-inner::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(140,180,255,.07), transparent); transform: skewX(-12deg); animation: pstepSweep 7s ease-in-out infinite; pointer-events: none; } .pstep:nth-child(2) .pstep-inner::after { animation-delay: -2.3s; } .pstep:nth-child(3) .pstep-inner::after { animation-delay: -4.6s; } @keyframes pstepSweep { 0% { left: -60%; opacity: 0; } 25% { opacity: 1; } 55% { opacity: 1; } 80%,100% { left: 130%; opacity: 0; } } /* animated glowing border — brighter + sharper traveling neon */ .pstep-glow { position: absolute; inset: 22px 0 0 0; border-radius: 18px; padding: 1.4px; background: conic-gradient(from var(--cms-angle, 0deg), rgba(110,160,255,0) 0deg, rgba(150,190,255,1) 55deg, rgba(160,135,255,.55) 120deg, rgba(110,160,255,.1) 180deg, rgba(110,160,255,0) 250deg, rgba(110,160,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .85; filter: drop-shadow(0 0 5px rgba(120,170,255,.5)); animation: cmsBorderSpin 7s linear infinite; pointer-events: none; } .pstep:nth-child(2) .pstep-glow { animation-delay: -2.3s; } .pstep:nth-child(3) .pstep-glow { animation-delay: -4.6s; } /* numbered node at the top-left corner (RTL) */ .pstep-node { position: absolute; top: 0; left: 22px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, rgba(46,68,124,.98), rgba(12,20,40,.98)); border: 1px solid rgba(130,175,255,.6); box-shadow: 0 0 0 5px rgba(10,17,34,1), 0 0 20px rgba(47,107,255,.5); animation: pnodeBreathe 4s ease-in-out infinite; } .pstep:nth-child(2) .pstep-node { animation-delay: -1.3s; } .pstep:nth-child(3) .pstep-node { animation-delay: -2.6s; } @keyframes pnodeBreathe { 0%,100% { box-shadow: 0 0 0 5px rgba(10,17,34,1), 0 0 16px rgba(47,107,255,.4); } 50% { box-shadow: 0 0 0 5px rgba(10,17,34,1), 0 0 28px rgba(47,107,255,.7); } } /* expanding halo ripple around the number circle */ .pstep-node::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(130,175,255,.6); animation: pnodeRipple 3.6s ease-out infinite; } .pstep:nth-child(2) .pstep-node::before { animation-delay: -1.2s; } .pstep:nth-child(3) .pstep-node::before { animation-delay: -2.4s; } @keyframes pnodeRipple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } } .pn-num { position: relative; z-index: 1; font-size: 1rem; font-weight: 800; color: var(--pr-cyan); direction: ltr; text-shadow: 0 0 8px rgba(110,160,255,.6); } .pstep-head { margin-bottom: 18px; } .pstep-days { font-size: .8rem; font-weight: 700; color: var(--pr-cyan); letter-spacing: .02em; direction: rtl; } .pstep-title { font-size: 1.18rem; font-weight: 700; color: var(--pr-text); margin-top: 4px; letter-spacing: -.01em; } /* body: icon on the physical left, list on the right */ .pstep-body { display: flex; flex-direction: row-reverse; /* list (rtl) leads, icon to physical left */ align-items: center; gap: 18px; flex: 1; margin-bottom: 20px; } .pstep-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--pr-cyan); background: radial-gradient(120% 120% at 30% 20%, rgba(47,107,255,.34), transparent 70%), linear-gradient(160deg, rgba(47,107,255,.2), rgba(138,120,240,.1)); border: 1px solid rgba(130,175,255,.42); box-shadow: 0 0 22px rgba(47,107,255,.28), inset 0 1px 0 rgba(255,255,255,.1); animation: picoBreathe 4.5s ease-in-out infinite; } .pstep:nth-child(2) .pstep-icon { animation-delay: -1.5s; } .pstep:nth-child(3) .pstep-icon { animation-delay: -3s; } @keyframes picoBreathe { 0%,100% { box-shadow: 0 0 16px rgba(47,107,255,.22), inset 0 1px 0 rgba(255,255,255,.1); } 50% { box-shadow: 0 0 30px rgba(47,107,255,.42), inset 0 1px 0 rgba(255,255,255,.12); } } .pstep-icon svg { width: 30px; height: 30px; filter: drop-shadow(0 0 7px rgba(110,160,255,.75)); animation: picoShimmer 4.5s ease-in-out infinite; } @keyframes picoShimmer { 0%,100% { filter: drop-shadow(0 0 5px rgba(110,160,255,.55)); } 50% { filter: drop-shadow(0 0 10px rgba(110,160,255,.95)); } } .pstep-list { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; } .pstep-list li { display: flex; align-items: center; gap: 9px; justify-content: flex-start; font-size: .9rem; color: var(--pr-soft); } .pl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pr-cyan); box-shadow: 0 0 7px rgba(110,160,255,.7); flex-shrink: 0; } /* status pill — bottom right (RTL) */ .pstep-foot { display: flex; justify-content: flex-start; padding-top: 8px; } .pstep-state { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--pr-soft); padding: .42rem .9rem; border-radius: 999px; background: rgba(60,90,160,.12); border: 1px solid rgba(130,175,255,.32); box-shadow: 0 0 14px rgba(47,107,255,.12), inset 0 0 10px rgba(47,107,255,.06); animation: pstatePulse 4s ease-in-out infinite; } .pstep:nth-child(2) .pstep-state { animation-delay: -1.3s; } .pstep:nth-child(3) .pstep-state { animation-delay: -2.6s; } @keyframes pstatePulse { 0%,100% { box-shadow: 0 0 10px rgba(47,107,255,.1), inset 0 0 8px rgba(47,107,255,.05); } 50% { box-shadow: 0 0 20px rgba(47,107,255,.24), inset 0 0 12px rgba(47,107,255,.1); } } .pstep-state--managed { background: rgba(90,72,160,.14); border-color: rgba(160,135,255,.36); animation: pstatePulseV 4s ease-in-out infinite; } @keyframes pstatePulseV { 0%,100% { box-shadow: 0 0 10px rgba(138,120,240,.12), inset 0 0 8px rgba(138,120,240,.05); } 50% { box-shadow: 0 0 20px rgba(138,120,240,.26), inset 0 0 12px rgba(138,120,240,.1); } } .ps-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pr-cyan); box-shadow: 0 0 9px rgba(110,160,255,.95); animation: cmsBlink 2.2s ease-in-out infinite; } .pstep-state--active .ps-dot { background: var(--pr-cyan); } .pstep-state--managed .ps-dot { background: var(--pr-violet); box-shadow: 0 0 9px rgba(150,130,255,.95); } /* the node dot sitting on the timeline line (bottom of card) */ .pstep::after { content: ''; position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 12px rgba(160,195,255,.9); z-index: 2; animation: cmsBlink 3s ease-in-out infinite; } /* ── Bottom statement strip ───────────────────────────── */ .proc-statement { position: relative; margin-top: 3.2rem; border-radius: 20px; padding: 34px 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(120% 150% at 0% 0%, rgba(47,107,255,.14), transparent 55%), radial-gradient(100% 130% at 100% 100%, rgba(138,120,240,.1), transparent 60%), linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.92)); border: 1px solid rgba(120,170,255,.26); box-shadow: 0 0 56px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); animation: pstmtBreathe 6s ease-in-out infinite; } @keyframes pstmtBreathe { 0%,100% { box-shadow: 0 0 50px rgba(47,107,255,.14), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(130,175,255,.26); } 50% { box-shadow: 0 0 80px rgba(47,107,255,.26), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(130,175,255,.42); } } .proc-statement-glow { position: absolute; inset: 0; background: radial-gradient(70% 130% at 50% 0%, rgba(47,107,255,.14), transparent 60%); animation: getsBreathe 6s ease-in-out infinite; } .proc-statement-bar { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; width: 45%; background: linear-gradient(to right, transparent, rgba(160,195,255,.8), transparent); animation: takeSweep 5s ease-in-out infinite; } .proc-statement-icon { position: relative; z-index: 1; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pr-cyan); background: radial-gradient(circle at 35% 30%, rgba(47,107,255,.38), rgba(12,20,40,.62)); border: 1px solid rgba(150,190,255,.55); box-shadow: 0 0 26px rgba(47,107,255,.42), inset 0 1px 0 rgba(255,255,255,.12); animation: picoBreathe 4.5s ease-in-out infinite; } /* halo ripple around the shield icon */ .proc-statement-icon::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(130,175,255,.5); animation: pnodeRipple 3.8s ease-out infinite; } .proc-statement-icon svg { width: 29px; height: 29px; filter: drop-shadow(0 0 8px rgba(140,180,255,.9)); } .proc-statement-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; font-family: var(--sans); font-weight: 600; line-height: 1.5; text-align: right; } .prs-line { font-size: clamp(1rem, 1.1vw + .5rem, 1.4rem); letter-spacing: -.02em; } .prs-line--muted { color: var(--pr-soft); font-weight: 500; } .prs-line--strong { color: var(--pr-text); background: linear-gradient(95deg, #9cbcff 0%, #bda9ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .proc-glow--1, .proc-glow--2, .proc-line::before, .proc-line::after, .pstep-glow, .pstep-inner, .pstep-inner::after, .pstep-node, .pstep-node::before, .pstep-icon, .pstep-icon svg, .pstep-state, .ps-dot, .pstep::after, .proc-statement, .proc-statement-glow, .proc-statement-bar, .proc-statement-icon, .proc-statement-icon::before { animation: none; } .pstep-glow { opacity: .5; } .pstep-inner::after, .pstep-node::before, .proc-statement-icon::before { opacity: 0; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 900px) { .proc-cards { grid-template-columns: 1fr; gap: 40px; max-width: 460px; margin: 0 auto; } .proc-line { display: none; } .pstep::after { display: none; } } @media (max-width: 600px) { .proc { padding: 40px 0 70px; } .proc-statement { flex-direction: column; text-align: center; gap: 16px; padding: 26px 24px; } .proc-statement-text { text-align: center; } } /* ══════════════════════════════════════════════════════════ SECTION 7 — TRUST SIGNALS (search-inspired) ══════════════════════════════════════════════════════════ */ .srch { position: relative; overflow: hidden; padding: 56px 0 104px; background: linear-gradient(180deg, #070d18 0%, #0a1224 50%, #070d18 100%); --sr-text: #f3f6fc; --sr-soft: #aab8cf; --sr-faint: #6f8099; --sr-blue: #2f6bff; --sr-cyan: #6ea0ff; --sr-violet:#8a78f0; --sr-gold: #cbb074; } .srch-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .srch-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(100% 70% at 50% 30%, #000 35%, transparent 82%); -webkit-mask-image: radial-gradient(100% 70% at 50% 30%, #000 35%, transparent 82%); } .srch-glow { position: absolute; border-radius: 50%; filter: blur(100px); } .srch-glow--1 { width: 46vw; height: 28vw; max-width: 700px; max-height: 420px; background: radial-gradient(circle, rgba(47,107,255,.16) 0%, transparent 66%); top: 16%; left: 28%; animation: srchDrift 32s ease-in-out infinite; } .srch-glow--2 { width: 32vw; height: 22vw; max-width: 460px; max-height: 320px; background: radial-gradient(circle, rgba(138,120,240,.12) 0%, transparent 68%); bottom: 8%; left: 20%; animation: srchDrift 40s ease-in-out infinite reverse; } @keyframes srchDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-14px) scale(1.05); } } .srch-wrap { position: relative; z-index: 1; } /* ── Heading ──────────────────────────────────────────── */ .srch-head { text-align: center; max-width: 720px; margin: 0 auto 2.4rem; } .srch-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--sr-gold); margin-bottom: 1.1rem; } .srch-title { font-family: var(--sans); font-size: clamp(1.7rem, 2.2vw + .6rem, 2.7rem); font-weight: 600; line-height: 1.22; color: var(--sr-text); letter-spacing: -.028em; margin-bottom: 1.1rem; } .srch-intro { font-size: 1.02rem; line-height: 1.8; color: var(--sr-soft); max-width: 580px; margin: 0 auto .35rem; } .srch-intro--soft { color: var(--sr-faint); } /* ── Search bar ───────────────────────────────────────── */ .srch-bar { position: relative; max-width: 720px; margin: 0 auto 2.6rem; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 999px; background: radial-gradient(120% 200% at 50% 0%, rgba(47,107,255,.12), transparent 60%), linear-gradient(180deg, rgba(18,30,56,.82), rgba(11,18,36,.88)); border: 1px solid rgba(130,175,255,.34); box-shadow: 0 0 40px rgba(47,107,255,.2), inset 0 1px 0 rgba(255,255,255,.06); animation: srchBarBreathe 5s ease-in-out infinite; } @keyframes srchBarBreathe { 0%,100% { box-shadow: 0 0 32px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(130,175,255,.3); } 50% { box-shadow: 0 0 52px rgba(47,107,255,.3), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(130,175,255,.5); } } /* traveling highlight line across the top edge of the bar */ .srch-bar-glow { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; width: 40%; border-radius: 2px; background: linear-gradient(to right, transparent, rgba(180,210,255,.95), transparent); animation: srchBarSweep 4.5s ease-in-out infinite; } @keyframes srchBarSweep { 0% { transform: translateX(-40%); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(220%); opacity: 0; } } .srch-spark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sr-cyan); background: rgba(47,107,255,.12); border: 1px solid rgba(130,175,255,.28); } .srch-spark svg { width: 22px; height: 22px; animation: srchSparkle 4s ease-in-out infinite; } @keyframes srchSparkle { 0%,100% { filter: drop-shadow(0 0 3px rgba(110,160,255,.5)); opacity: .8; } 50% { filter: drop-shadow(0 0 9px rgba(110,160,255,.95)); opacity: 1; } } .srch-typed { flex: 1; text-align: right; direction: rtl; font-size: 1.02rem; color: var(--sr-soft); white-space: nowrap; overflow: hidden; } .srch-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--sr-cyan); margin-inline-start: 3px; vertical-align: -2px; box-shadow: 0 0 6px rgba(110,160,255,.9); animation: srchCaret 1.1s step-end infinite; } @keyframes srchCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } } .srch-go { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--sr-blue), var(--sr-violet)); box-shadow: 0 0 22px rgba(47,107,255,.4), inset 0 1px 0 rgba(255,255,255,.2); animation: srchGoGlow 4s ease-in-out infinite; } .srch-go svg { width: 22px; height: 22px; } @keyframes srchGoGlow { 0%,100% { box-shadow: 0 0 18px rgba(47,107,255,.32), inset 0 1px 0 rgba(255,255,255,.2); } 50% { box-shadow: 0 0 30px rgba(47,107,255,.5), inset 0 1px 0 rgba(255,255,255,.22); } } /* ── Trust-signal rows ────────────────────────────────── */ .srch-rows { list-style: none; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .srow { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: 16px; background: radial-gradient(120% 60% at 100% 0%, rgba(47,107,255,.07), transparent 55%), linear-gradient(180deg, rgba(18,30,56,.6), rgba(10,17,34,.7)); border: 1px solid rgba(120,165,235,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 26px rgba(0,0,0,.26); overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); } .srow:hover { border-color: rgba(130,175,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.3), 0 0 26px rgba(47,107,255,.16); transform: translateY(-1px); } /* icon tile — physical right (first in RTL flow) */ .srow-icon { order: 1; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--sr-cyan); background: radial-gradient(120% 120% at 30% 20%, rgba(47,107,255,.28), transparent 70%), linear-gradient(160deg, rgba(47,107,255,.16), rgba(138,120,240,.08)); border: 1px solid rgba(130,175,255,.34); box-shadow: 0 0 16px rgba(47,107,255,.2), inset 0 1px 0 rgba(255,255,255,.08); } .srow-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(110,160,255,.55)); } .srow-dot { order: 2; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--sr-cyan); box-shadow: 0 0 9px rgba(110,160,255,.9); animation: cmsBlink 2.4s ease-in-out infinite; } .srow-text { order: 3; flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: right; } .srow-title { font-size: 1.02rem; font-weight: 700; color: var(--sr-text); } .srow-sub { font-size: .85rem; color: var(--sr-faint); line-height: 1.5; } /* left waveform / scan line with a riding dot */ .srow-wave { order: 4; position: relative; width: 30%; max-width: 300px; min-width: 120px; height: 22px; flex-shrink: 0; } .sw-line { position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(110,160,255,.5) 0 2px, transparent 2px 6px); -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity: .5; } .sw-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); background: #cfe0ff; box-shadow: 0 0 12px rgba(170,200,255,.95); animation: swRide 9s ease-in-out infinite; } .srow:nth-child(2) .sw-dot { animation-delay: -1.4s; } .srow:nth-child(3) .sw-dot { animation-delay: -2.7s; } .srow:nth-child(4) .sw-dot { animation-delay: -4s; } .srow:nth-child(5) .sw-dot { animation-delay: -5.4s; } .srow:nth-child(6) .sw-dot { animation-delay: -6.8s; } @keyframes swRide { 0%,100% { left: 14%; } 50% { left: 86%; } } /* bottom note */ .srch-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2.2rem; font-size: .92rem; color: var(--sr-soft); text-align: center; } .srch-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sr-cyan); box-shadow: 0 0 9px rgba(110,160,255,.9); animation: cmsBlink 2.6s ease-in-out infinite; } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .srch-glow--1, .srch-glow--2, .srch-bar, .srch-bar-glow, .srch-spark svg, .srch-caret, .srch-go, .srow-dot, .sw-dot, .srch-note-dot { animation: none; } .srch-caret { opacity: 1; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 760px) { .srow-wave { display: none; } .srch-typed { font-size: .92rem; } } @media (max-width: 600px) { .srch { padding: 40px 0 70px; } .srch-bar { gap: 10px; padding: 10px 12px; } .srch-spark { width: 36px; height: 36px; } .srch-go { width: 44px; height: 44px; } .srow { padding: 14px 16px; gap: 12px; } .srow-sub { font-size: .8rem; } } /* ══════════════════════════════════════════════════════════ SECTION 8 — PRINCIPLES / STANDARDS ══════════════════════════════════════════════════════════ */ .prin { position: relative; overflow: hidden; padding: 56px 0 104px; background: linear-gradient(180deg, #070d18 0%, #0a1224 50%, #070d18 100%); --pp-text: #f3f6fc; --pp-soft: #aab8cf; --pp-faint: #6f8099; --pp-blue: #2f6bff; --pp-cyan: #6ea0ff; --pp-violet:#8a78f0; --pp-gold: #cbb074; } .prin-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .prin-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(110% 80% at 50% 40%, #000 32%, transparent 82%); -webkit-mask-image: radial-gradient(110% 80% at 50% 40%, #000 32%, transparent 82%); } .prin-glow { position: absolute; border-radius: 50%; filter: blur(100px); } .prin-glow--1 { width: 46vw; height: 30vw; max-width: 700px; max-height: 440px; background: radial-gradient(circle, rgba(47,107,255,.16) 0%, transparent 66%); top: 14%; left: 30%; animation: prinDrift 32s ease-in-out infinite; } .prin-glow--2 { width: 32vw; height: 22vw; max-width: 460px; max-height: 320px; background: radial-gradient(circle, rgba(138,120,240,.12) 0%, transparent 68%); bottom: 6%; left: 18%; animation: prinDrift 40s ease-in-out infinite reverse; } @keyframes prinDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-14px) scale(1.05); } } .prin-wrap { position: relative; z-index: 1; } /* ── Heading ──────────────────────────────────────────── */ .prin-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; } .prin-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--pp-gold); margin-bottom: 1.1rem; } .prin-title { font-family: var(--sans); font-size: clamp(1.8rem, 2.4vw + .6rem, 2.9rem); font-weight: 600; line-height: 1.2; color: var(--pp-text); letter-spacing: -.028em; margin-bottom: 1.2rem; } .prin-title-accent { background: linear-gradient(95deg, #8fb6ff 0%, #b6a3ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .prin-intro { font-size: 1.02rem; line-height: 1.8; color: var(--pp-soft); max-width: 600px; margin: 0 auto .35rem; } .prin-intro--soft { color: var(--pp-faint); } /* ── Cards grid ───────────────────────────────────────── */ .prin-grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pcard { position: relative; border-radius: 18px; padding: 26px 26px 30px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, rgba(47,107,255,.08), transparent 55%), linear-gradient(180deg, rgba(18,30,56,.66), rgba(10,17,34,.76)); border: 1px solid rgba(120,165,235,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 40px rgba(0,0,0,.3), 0 0 24px rgba(47,107,255,.08); text-align: right; animation: pcardBreathe 6s ease-in-out infinite; } .pcard:nth-child(2){animation-delay:-1s} .pcard:nth-child(3){animation-delay:-2s} .pcard:nth-child(4){animation-delay:-3s} .pcard:nth-child(5){animation-delay:-4s} .pcard:nth-child(6){animation-delay:-5s} @keyframes pcardBreathe { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 40px rgba(0,0,0,.3), 0 0 22px rgba(47,107,255,.08); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 40px rgba(0,0,0,.3), 0 0 38px rgba(47,107,255,.18); } } /* animated glowing border */ .pcard-glow { position: absolute; inset: 0; border-radius: 18px; padding: 1.2px; background: conic-gradient(from var(--cms-angle, 0deg), rgba(110,160,255,0) 0deg, rgba(150,190,255,.9) 60deg, rgba(160,135,255,.45) 125deg, rgba(110,160,255,0) 200deg, rgba(110,160,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .7; animation: cmsBorderSpin 8s linear infinite; pointer-events: none; } .pcard:nth-child(2) .pcard-glow{animation-delay:-1.3s} .pcard:nth-child(3) .pcard-glow{animation-delay:-2.6s} .pcard:nth-child(4) .pcard-glow{animation-delay:-4s} .pcard:nth-child(5) .pcard-glow{animation-delay:-5.3s} .pcard:nth-child(6) .pcard-glow{animation-delay:-6.6s} .pcard-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; } /* icon — physical right (first in RTL row); larger, brighter neon frame */ .pcard-icon { position: relative; width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #bcd6ff; background: radial-gradient(circle at 38% 30%, rgba(70,120,220,.45), rgba(12,20,40,.55) 70%), radial-gradient(circle, rgba(47,107,255,.16), transparent 72%); border: 1.5px solid rgba(150,190,255,.62); box-shadow: 0 0 26px rgba(47,107,255,.5), 0 0 8px rgba(110,160,255,.6), inset 0 0 14px rgba(70,120,220,.35), inset 0 1px 0 rgba(255,255,255,.14); animation: picoBreathe 4.5s ease-in-out infinite; } .pcard:nth-child(2) .pcard-icon{animation-delay:-.8s} .pcard:nth-child(3) .pcard-icon{animation-delay:-1.6s} .pcard:nth-child(4) .pcard-icon{animation-delay:-2.4s} .pcard:nth-child(5) .pcard-icon{animation-delay:-3.2s} .pcard:nth-child(6) .pcard-icon{animation-delay:-4s} /* soft outer halo ring that gently pulses */ .pcard-icon::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(140,180,255,.4); box-shadow: 0 0 16px rgba(47,107,255,.35); animation: picoHalo 4.5s ease-in-out infinite; } .pcard:nth-child(2) .pcard-icon::before{animation-delay:-.8s} .pcard:nth-child(3) .pcard-icon::before{animation-delay:-1.6s} .pcard:nth-child(4) .pcard-icon::before{animation-delay:-2.4s} .pcard:nth-child(5) .pcard-icon::before{animation-delay:-3.2s} .pcard:nth-child(6) .pcard-icon::before{animation-delay:-4s} @keyframes picoHalo { 0%,100% { transform: scale(1); opacity: .5; box-shadow: 0 0 12px rgba(47,107,255,.28); } 50% { transform: scale(1.06); opacity: .85; box-shadow: 0 0 22px rgba(47,107,255,.5); } } .pcard-icon svg { position: relative; z-index: 1; width: 32px; height: 32px; stroke-width: 1.7; filter: drop-shadow(0 0 8px rgba(140,180,255,.95)); animation: picoShimmer 4.5s ease-in-out infinite; } /* number badge — physical left */ .pcard-num { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; color: var(--pp-cyan); direction: ltr; background: rgba(47,107,255,.1); border: 1px solid rgba(130,175,255,.3); box-shadow: 0 0 12px rgba(47,107,255,.18); text-shadow: 0 0 6px rgba(110,160,255,.5); } .pcard-title { position: relative; z-index: 1; font-size: 1.12rem; font-weight: 700; color: var(--pp-text); margin-bottom: 9px; letter-spacing: -.01em; } .pcard-desc { position: relative; z-index: 1; font-size: .88rem; line-height: 1.7; color: var(--pp-faint); } /* bottom connector line + riding dot */ .pcard-line { position: relative; z-index: 1; display: block; margin-top: 18px; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(110,160,255,.4) 50%, transparent); } .pcard-line .pl-dot { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%,-50%); background: #cfe0ff; box-shadow: 0 0 10px rgba(170,200,255,.95); animation: pcardDotRide 8s ease-in-out infinite; } .pcard:nth-child(2) .pl-dot{animation-delay:-1.3s} .pcard:nth-child(3) .pl-dot{animation-delay:-2.6s} .pcard:nth-child(4) .pl-dot{animation-delay:-4s} .pcard:nth-child(5) .pl-dot{animation-delay:-5.3s} .pcard:nth-child(6) .pl-dot{animation-delay:-6.6s} @keyframes pcardDotRide { 0%,100% { left: 18%; } 50% { left: 82%; } } /* ── Bottom trust strip ───────────────────────────────── */ .prin-statement { position: relative; margin-top: 3.2rem; border-radius: 20px; padding: 34px 40px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: radial-gradient(120% 150% at 100% 50%, rgba(47,107,255,.14), transparent 55%), radial-gradient(100% 130% at 0% 0%, rgba(138,120,240,.1), transparent 60%), linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.92)); border: 1px solid rgba(120,170,255,.26); box-shadow: 0 0 56px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); animation: pstmtBreathe 6s ease-in-out infinite; } .prin-statement-glow { position: absolute; inset: 0; background: radial-gradient(60% 130% at 50% 0%, rgba(47,107,255,.12), transparent 60%); animation: getsBreathe 6s ease-in-out infinite; } .prin-statement-bar { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; width: 45%; background: linear-gradient(to right, transparent, rgba(160,195,255,.8), transparent); animation: takeSweep 5s ease-in-out infinite; } .prin-statement-text { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); font-weight: 600; line-height: 1.5; text-align: center; } .prs2-line { font-size: clamp(1.05rem, 1.2vw + .5rem, 1.5rem); letter-spacing: -.02em; } .prs2-line--muted { color: var(--pp-soft); font-weight: 500; } .prs2-line--strong { color: var(--pp-text); } .prs2-hl { background: linear-gradient(95deg, #8fb6ff 0%, #b6a3ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* animated trust shield — larger, stronger focal neon presence */ .prin-shield { position: relative; z-index: 1; width: 110px; height: 110px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } /* ambient glow bloom behind the whole shield */ .prin-shield::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.4) 0%, rgba(138,120,240,.16) 45%, transparent 70%); filter: blur(10px); animation: shieldBloom 5s ease-in-out infinite; } @keyframes shieldBloom { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* two orbiting energy rings (tilted) with traveling nodes */ .shield-orbit { position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(140,180,255,.4); transform: rotateX(70deg); box-shadow: 0 0 22px rgba(47,107,255,.4); animation: shieldOrbit 8s linear infinite; } .shield-orbit::after { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 12px rgba(170,200,255,.98); } .shield-orbit::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(160,135,255,.3); box-shadow: 0 0 14px rgba(138,120,240,.3); } @keyframes shieldOrbit { to { transform: rotateX(70deg) rotate(360deg); } } .shield-core { position: relative; width: 66px; height: 66px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #c8ddff; background: radial-gradient(circle at 36% 28%, rgba(70,120,225,.6), rgba(12,20,40,.78) 72%); border: 1.5px solid rgba(150,190,255,.7); box-shadow: 0 0 34px rgba(47,107,255,.6), 0 0 10px rgba(110,160,255,.7), inset 0 0 18px rgba(70,120,220,.4), inset 0 1px 0 rgba(255,255,255,.18); animation: shieldBreathe 4s ease-in-out infinite; } @keyframes shieldBreathe { 0%,100% { box-shadow: 0 0 26px rgba(47,107,255,.46), 0 0 8px rgba(110,160,255,.6), inset 0 0 16px rgba(70,120,220,.36), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(0); } 50% { box-shadow: 0 0 48px rgba(47,107,255,.7), 0 0 14px rgba(110,160,255,.8), inset 0 0 20px rgba(70,120,220,.5), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-4px); } } .shield-core svg { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(150,190,255,1)); } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .prin-glow--1, .prin-glow--2, .pcard, .pcard-glow, .pcard-icon, .pcard-icon::before, .pcard-icon svg, .pl-dot, .prin-statement, .prin-statement-glow, .prin-statement-bar, .prin-shield::before, .shield-orbit, .shield-core { animation: none; } .pcard-glow { opacity: .5; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 980px) { .prin-grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .prin-grid-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .prin-statement { flex-direction: column; text-align: center; gap: 20px; padding: 26px 24px; } } @media (max-width: 600px) { .prin { padding: 40px 0 70px; } } /* ══════════════════════════════════════════════════════════ SECTION 9 — FINAL CONTACT / CTA ══════════════════════════════════════════════════════════ */ .fcta { position: relative; overflow: hidden; padding: 56px 0 110px; background: linear-gradient(180deg, #070d18 0%, #0a1224 50%, #060a14 100%); --fc-text: #f3f6fc; --fc-soft: #aab8cf; --fc-faint: #6f8099; --fc-blue: #2f6bff; --fc-cyan: #6ea0ff; --fc-violet:#8a78f0; --fc-gold: #cbb074; } .fcta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fcta-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.04) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(110% 90% at 50% 45%, #000 35%, transparent 84%); -webkit-mask-image: radial-gradient(110% 90% at 50% 45%, #000 35%, transparent 84%); } .fcta-glow { position: absolute; border-radius: 50%; filter: blur(110px); } .fcta-glow--1 { width: 44vw; height: 30vw; max-width: 660px; max-height: 440px; background: radial-gradient(circle, rgba(47,107,255,.18) 0%, transparent 66%); top: 10%; left: 30%; animation: fctaDrift 34s ease-in-out infinite; } .fcta-glow--2 { width: 30vw; height: 22vw; max-width: 440px; max-height: 320px; background: radial-gradient(circle, rgba(138,120,240,.13) 0%, transparent 68%); bottom: 8%; left: 14%; animation: fctaDrift 42s ease-in-out infinite reverse; } @keyframes fctaDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-14px) scale(1.05); } } /* faint floating light particles */ .fcta-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 8px rgba(170,200,255,.9); opacity: .5; } .fcta-spark--1 { top: 22%; right: 12%; animation: fctaFloat 9s ease-in-out infinite; } .fcta-spark--2 { bottom: 26%; right: 22%; animation: fctaFloat 11s ease-in-out infinite -3s; } .fcta-spark--3 { top: 40%; right: 6%; width: 3px; height: 3px; animation: fctaFloat 13s ease-in-out infinite -6s; } @keyframes fctaFloat { 0%,100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-16px); opacity: .8; } } /* ── Neon divider (above the contact panel) ───────────── */ .neon-divider { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 340px; /* nudged up ~25px (bottom margin grown equally so content below stays put) */ margin: -25px auto 73px; } .nd-line { position: relative; flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(110,160,255,.55), rgba(150,130,255,.45)); overflow: hidden; box-shadow: 0 0 10px rgba(47,107,255,.3); } .nd-line:last-child { background: linear-gradient(90deg, rgba(150,130,255,.45), rgba(110,160,255,.55), transparent); } /* traveling light sweep along each half */ .nd-line::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, #dceaff, transparent); animation: ndFlow 4.5s ease-in-out infinite; } .nd-line:last-child::after { animation-delay: -2.25s; } @keyframes ndFlow { 0% { left: -40%; } 100% { left: 120%; } } /* central breathing node */ .nd-node { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #cfe0ff; box-shadow: 0 0 12px rgba(170,200,255,.95), 0 0 22px rgba(47,107,255,.5); animation: ndNode 3.6s ease-in-out infinite; } @keyframes ndNode { 0%,100% { transform: scale(1); box-shadow: 0 0 10px rgba(170,200,255,.85), 0 0 16px rgba(47,107,255,.4); } 50% { transform: scale(1.25); box-shadow: 0 0 16px rgba(170,200,255,1), 0 0 28px rgba(47,107,255,.6); } } .fcta-wrap { position: relative; z-index: 1; } /* ── Panel ────────────────────────────────────────────── */ .fcta-panel { position: relative; border-radius: 28px; padding: 44px 48px; overflow: hidden; background: radial-gradient(110% 80% at 80% 10%, rgba(47,107,255,.12), transparent 55%), radial-gradient(90% 80% at 10% 90%, rgba(138,120,240,.08), transparent 60%), linear-gradient(180deg, rgba(16,27,52,.72), rgba(9,15,30,.82)); border: 1px solid rgba(130,175,255,.26); box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05), 0 0 60px rgba(47,107,255,.12); } /* animated glowing edge on the panel */ .fcta-panel-glow { position: absolute; inset: 0; border-radius: 28px; padding: 1.4px; background: conic-gradient(from var(--cms-angle, 0deg), rgba(110,160,255,0) 0deg, rgba(150,190,255,.85) 70deg, rgba(160,135,255,.4) 140deg, rgba(110,160,255,0) 220deg, rgba(110,160,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .6; animation: cmsBorderSpin 12s linear infinite; pointer-events: none; } .fcta-grid-cols { position: relative; z-index: 1; display: grid; /* Force LTR flow so DOM order maps to physical left→right: form (1st) → physical LEFT, text (last) → physical RIGHT, regardless of the page's RTL direction. Inner Hebrew stays RTL. */ direction: ltr; grid-template-columns: minmax(0,1.12fr) 1px minmax(0,.92fr); align-items: center; gap: 50px; } /* ── Form (physical left) ─────────────────────────────── */ .fcta-form { direction: rtl; } .fcta-fields { display: flex; flex-direction: column; gap: 14px; } .ffield { position: relative; } .ffield-input { width: 100%; font-family: inherit; font-size: .96rem; color: var(--fc-text); text-align: right; direction: rtl; background: rgba(255,255,255,.03); border: 1px solid rgba(130,175,255,.28); border-radius: 12px; padding: 1rem 1.1rem 1rem 3rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .ffield-input::placeholder { color: var(--fc-faint); } .ffield-input:focus { outline: none; border-color: rgba(150,190,255,.7); background: rgba(255,255,255,.05); box-shadow: 0 0 0 3px rgba(47,107,255,.16), 0 0 18px rgba(47,107,255,.2); } /* icon inside field (physical left) */ .ffield-ic { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); width: 24px; height: 24px; color: var(--fc-cyan); display: flex; align-items: center; justify-content: center; animation: ffieldIcGlow 4.5s ease-in-out infinite; } .ffield:nth-child(2) .ffield-ic { animation-delay: -1.1s; } .ffield:nth-child(3) .ffield-ic { animation-delay: -2.2s; } .ffield:nth-child(4) .ffield-ic { animation-delay: -3.3s; } .ffield-ic svg { width: 20px; height: 20px; } @keyframes ffieldIcGlow { 0%,100% { filter: drop-shadow(0 0 2px rgba(110,160,255,.5)); opacity: .72; transform: translateY(-50%) scale(1); } 50% { filter: drop-shadow(0 0 8px rgba(110,160,255,.95)); opacity: 1; transform: translateY(-50%) scale(1.08); } } .fcta-submit { position: relative; overflow: hidden; width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: 1rem; font-weight: 700; color: #fff; padding: 1.05rem 1.4rem; border-radius: 13px; /* wider gradient so it can slowly drift */ background: linear-gradient(120deg, var(--fc-blue) 0%, var(--fc-violet) 45%, var(--fc-blue) 100%); background-size: 200% 100%; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 8px 26px rgba(47,107,255,.36), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .2s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease); animation: fctaBtnGlow 4s ease-in-out infinite, fctaBtnGrad 8s ease-in-out infinite; } .fcta-submit:hover { transform: translateY(-1px); filter: brightness(1.05); } .fcta-submit:disabled { opacity: .6; cursor: default; transform: none; } /* slow light sweep across the button */ .fcta-submit::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-16deg); animation: fctaBtnSweep 5.5s ease-in-out infinite; pointer-events: none; } @keyframes fctaBtnSweep { 0% { left: -45%; opacity: 0; } 20% { opacity: 1; } 55% { opacity: 1; } 80%,100% { left: 130%; opacity: 0; } } .fcta-submit-ic { position: relative; z-index: 1; width: 20px; height: 20px; display: flex; } .fcta-submit-ic svg { width: 20px; height: 20px; filter: drop-shadow(0 0 5px rgba(255,255,255,.6)); animation: fctaPlaneGlow 4s ease-in-out infinite; } .fcta-submit-label { position: relative; z-index: 1; } @keyframes fctaBtnGrad { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } @keyframes fctaPlaneGlow { 0%,100% { filter: drop-shadow(0 0 3px rgba(255,255,255,.45)); transform: translateX(0); } 50% { filter: drop-shadow(0 0 8px rgba(200,225,255,.9)); transform: translateX(-2px); } } @keyframes fctaBtnGlow { 0%,100% { box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 7px 22px rgba(47,107,255,.3), inset 0 1px 0 rgba(255,255,255,.2); } 50% { box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 11px 32px rgba(47,107,255,.5), inset 0 1px 0 rgba(255,255,255,.22); } } .fcta-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .76rem; color: var(--fc-faint); text-align: center; } .fcta-note-ic { width: 15px; height: 15px; color: var(--fc-faint); flex-shrink: 0; } .fcta-note-ic svg { width: 15px; height: 15px; } .fcta-success { margin-top: 16px; text-align: center; font-size: .92rem; font-weight: 600; color: #4ad6a0; background: rgba(24,160,106,.12); border: 1px solid rgba(24,160,106,.3); border-radius: 12px; padding: 1rem 1.1rem; } /* ── Divider ──────────────────────────────────────────── */ .fcta-divide { align-self: stretch; width: 1px; background: linear-gradient(to bottom, transparent, rgba(130,175,255,.4) 50%, transparent); position: relative; } .fcta-divide::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%,-50%); background: #cfe0ff; box-shadow: 0 0 12px rgba(170,200,255,.95); animation: cmsBlink 2.6s ease-in-out infinite; } /* ── Text / offer (physical right → grid col 3) ───────── */ .fcta-text { direction: rtl; text-align: center; } .fcta-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--fc-gold); margin-bottom: 1.1rem; } .fcta-title { font-family: var(--sans); font-size: clamp(1.7rem, 2vw + .6rem, 2.5rem); font-weight: 700; line-height: 1.28; color: var(--fc-text); letter-spacing: -.02em; margin-bottom: 1.2rem; } .fcta-title-g { /* wider gradient so the light can sweep across the word */ background: linear-gradient(95deg, #8fb6ff 0%, #b6a3ff 35%, #cfe0ff 50%, #b6a3ff 65%, #8fb6ff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* soft glow on the (transparent) text via a subtle drop-shadow layer */ filter: drop-shadow(0 0 6px rgba(140,180,255,.35)); animation: gSweep 6s ease-in-out infinite, gGlow 4s ease-in-out infinite; } @keyframes gSweep { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } } @keyframes gGlow { 0%,100% { filter: drop-shadow(0 0 4px rgba(140,180,255,.25)); } 50% { filter: drop-shadow(0 0 10px rgba(150,130,255,.6)); } } .fcta-para { font-size: .96rem; line-height: 1.8; color: var(--fc-soft); margin-bottom: .7rem; max-width: 460px; margin-inline: auto; } /* wider so the forced
holds its two intended lines without re-wrapping */ .fcta-para--wide { max-width: 540px; } .fcta-para--soft { color: var(--fc-faint); } .fcta-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 1.4rem 0 0; } .fcta-points li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--fc-soft); } .fp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fc-cyan); box-shadow: 0 0 8px rgba(110,160,255,.8); flex-shrink: 0; animation: cmsBlink 2.4s ease-in-out infinite; } /* trust shield — large, centered under the text (like the reference) */ .fcta-shield { position: relative; display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; margin: 2.4rem auto 0; /* centered under the offer text */ } .fsh-halo { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.42) 0%, rgba(138,120,240,.16) 45%, transparent 70%); filter: blur(11px); animation: shieldBloom 5s ease-in-out infinite; } .fsh-halo::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: 1px solid rgba(140,180,255,.42); box-shadow: 0 0 18px rgba(47,107,255,.42); animation: picoHalo 4.5s ease-in-out infinite; } /* tilted orbit ring with a traveling node */ .fsh-orbit { position: absolute; inset: 2%; border-radius: 50%; border: 1px solid rgba(150,130,255,.28); transform: rotateX(70deg); box-shadow: 0 0 16px rgba(47,107,255,.3); animation: shieldOrbit 8s linear infinite; } .fsh-orbit::after { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 10px rgba(170,200,255,.95); } .fsh-core { position: relative; width: 66px; height: 66px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #c8ddff; background: radial-gradient(circle at 36% 28%, rgba(70,120,225,.62), rgba(12,20,40,.8) 72%); border: 1.5px solid rgba(150,190,255,.72); box-shadow: 0 0 38px rgba(47,107,255,.6), inset 0 0 20px rgba(70,120,220,.42), inset 0 1px 0 rgba(255,255,255,.18); animation: shieldBreathe 4s ease-in-out infinite; } .fsh-core svg { width: 36px; height: 36px; filter: drop-shadow(0 0 11px rgba(150,190,255,1)); } /* ── Motion guards ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .fcta-glow--1, .fcta-glow--2, .fcta-spark, .fcta-panel-glow, .ffield-ic, .fcta-submit, .fcta-submit::after, .fcta-submit-ic svg, .fcta-title-g, .fcta-divide::after, .fp-dot, .nd-line::after, .nd-node, .fsh-halo, .fsh-halo::after, .fsh-orbit, .fsh-core { animation: none; } .fcta-panel-glow { opacity: .5; } .fcta-submit::after, .nd-line::after { display: none; } .fcta-title-g { background-position: 0 0; } } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 880px) { .fcta-grid-cols { grid-template-columns: 1fr; gap: 32px; } .fcta-divide { display: none; } .fcta-form { order: 2; } .fcta-text { order: 1; text-align: center; } .fcta-para { margin-inline: auto; } .fcta-points { justify-content: center; } .fcta-shield { margin-inline: auto; } } @media (max-width: 600px) { .fcta { padding: 40px 0 70px; } .fcta-panel { padding: 28px 22px; border-radius: 22px; } } /* ══════════════════════════════════════════════════════════ SHARED STATEMENT / TAKEAWAY COMPONENT (.stmt) One unified design family for every wide closing strip. Placed last in source so it overrides the per-section block rules on equal (single-class) specificity. ══════════════════════════════════════════════════════════ */ .stmt { width: 100%; box-sizing: border-box; min-height: 160px; /* within the 150–170px target */ border-radius: 30px; /* within the 28–32px target */ padding: 44px 64px; /* 44 top/bottom · 64 left/right */ display: flex; align-items: center; /* text vertically centered */ justify-content: center; /* text horizontally centered */ gap: 26px; text-align: center; overflow: hidden; position: relative; background: radial-gradient(120% 150% at 0% 0%, rgba(47,107,255,.14), transparent 55%), radial-gradient(100% 130% at 100% 100%, rgba(138,120,240,.1), transparent 60%), linear-gradient(180deg, rgba(18,30,56,.9), rgba(11,18,36,.93)); border: 1px solid rgba(130,175,255,.28); box-shadow: 0 0 56px rgba(47,107,255,.16), inset 0 1px 0 rgba(255,255,255,.06); margin-top: 3.4rem; /* connected to section above */ margin-bottom: 0; /* section's own bottom padding follows */ animation: stmtBreathe 6.5s ease-in-out infinite; } /* very subtle breathing border + glow (calm, premium) */ @keyframes stmtBreathe { 0%,100% { box-shadow: 0 0 48px rgba(47,107,255,.13), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(130,175,255,.24); } 50% { box-shadow: 0 0 68px rgba(47,107,255,.22), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(130,175,255,.38); } } /* keep the inner text vertically centered in the taller min-height box */ .stmt .takeaway-text, .stmt .cms-statement-text, .stmt .proc-statement-text, .stmt .prin-statement-text, .stmt .gt-text { margin: 0; } /* icon blocks: content spread with the icon beside the (centered) text */ .stmt.stmt--icon { justify-content: space-between; } .stmt.stmt--icon .proc-statement-text, .stmt.stmt--icon .prin-statement-text { flex: 1; } /* gets-takeaway introduces its section (sits at the TOP): flip the rhythm */ .stmt.gets-takeaway--top { margin-top: 0; margin-bottom: 3.4rem; } @media (max-width: 760px) { .stmt { min-height: 0; border-radius: 22px; padding: 30px 28px; margin-top: 2.6rem; gap: 18px; } .stmt.stmt--icon { flex-direction: column; justify-content: center; } .stmt.gets-takeaway--top { margin-top: 0; margin-bottom: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .stmt { animation: none; } } /* ══════════════════════════════════════════════════════════ STATEMENT-BLOCK STANDARD — shared baseline used by the first-impression block and any block opting into it. Specificity 0-2-0 beats .stmt / .takeaway / .gets-takeaway (0-1-0); last in source — so these values definitely apply. ══════════════════════════════════════════════════════════ */ .stmt.stmt--first-impression, .stmt.stmt--gets, .stmt.stmt--cms, .stmt.stmt--proc, .stmt.stmt--prin { position: relative; width: calc(100% - 48px); max-width: 1240px; margin-inline: auto; min-height: 130px; padding: 30px 64px; border-radius: 30px; margin-top: 48px; margin-bottom: 48px; display: flex; align-items: center; /* content vertically centered */ justify-content: center; /* content horizontally centered */ text-align: center; overflow: hidden; /* premium dark navy glass + soft center glow */ background: radial-gradient(130% 160% at 0% 0%, rgba(47,107,255,.15), transparent 56%), radial-gradient(110% 140% at 100% 100%, rgba(138,120,240,.11), transparent 60%), radial-gradient(80% 120% at 50% 50%, rgba(47,107,255,.08), transparent 70%), linear-gradient(180deg, rgba(19,31,58,.9), rgba(10,17,34,.93)); border: 1px solid rgba(140,180,255,.34); box-shadow: 0 0 56px rgba(47,107,255,.18), 0 16px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07); /* slow breathing glow */ animation: stmtStdBreathe 6s ease-in-out infinite; } @keyframes stmtStdBreathe { 0%,100% { box-shadow: 0 0 48px rgba(47,107,255,.14), 0 16px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07); border-color: rgba(140,180,255,.28); } 50% { box-shadow: 0 0 72px rgba(47,107,255,.24), 0 16px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07); border-color: rgba(150,185,255,.46); } } /* animated edge ripple — a light travels around the inner border */ .stmt.stmt--first-impression::before, .stmt.stmt--gets::before, .stmt.stmt--cms::before, .stmt.stmt--proc::before, .stmt.stmt--prin::before { content: ''; position: absolute; inset: 0; border-radius: 30px; padding: 1.4px; background: conic-gradient(from var(--cms-angle, 0deg), rgba(120,170,255,0) 0deg, rgba(150,190,255,.95) 60deg, rgba(160,135,255,.5) 130deg, rgba(120,170,255,0) 210deg, rgba(120,170,255,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .8; filter: drop-shadow(0 0 5px rgba(120,170,255,.45)); animation: cmsBorderSpin 9s linear infinite; pointer-events: none; z-index: 0; } /* soft top light sweep */ .stmt.stmt--first-impression::after, .stmt.stmt--gets::after, .stmt.stmt--cms::after, .stmt.stmt--proc::after, .stmt.stmt--prin::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; width: 42%; background: linear-gradient(to right, transparent, rgba(170,200,255,.85), transparent); animation: stmtStdSweep 8s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes stmtStdSweep { 0% { transform: translateX(-50%); opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(230%); opacity: 0; } } /* two-line text, centered, max-width ~820px, balanced 11px gap */ .stmt.stmt--first-impression .takeaway-text, .stmt.stmt--gets .gt-text, .stmt.stmt--cms .cms-statement-text { position: relative; z-index: 2; margin: 0 auto; max-width: 820px; display: flex; flex-direction: column; gap: 11px; align-items: center; justify-content: center; } /* side dotted patterns — first-impression uses its native .takeaway-dots, the gets & cms blocks use matching .gt-dots spans (same look). */ .stmt.stmt--first-impression .takeaway-dots { opacity: .4; z-index: 0; } .stmt.stmt--gets .gt-dots, .stmt.stmt--cms .gt-dots, .stmt.stmt--proc .gt-dots, .stmt.stmt--prin .gt-dots { position: absolute; top: 50%; transform: translateY(-50%); width: 120px; height: 70%; background-image: radial-gradient(rgba(120,170,255,.4) 1.1px, transparent 1.3px); background-size: 11px 11px; opacity: .4; z-index: 0; pointer-events: none; } .stmt.stmt--gets .gt-dots--start, .stmt.stmt--cms .gt-dots--start, .stmt.stmt--proc .gt-dots--start, .stmt.stmt--prin .gt-dots--start { left: 22px; mask-image: linear-gradient(to right, #000, transparent); -webkit-mask-image: linear-gradient(to right, #000, transparent); } .stmt.stmt--gets .gt-dots--end, .stmt.stmt--cms .gt-dots--end, .stmt.stmt--proc .gt-dots--end, .stmt.stmt--prin .gt-dots--end { right: 22px; mask-image: linear-gradient(to left, #000, transparent); -webkit-mask-image: linear-gradient(to left, #000, transparent); } /* this block has no vertical neon line (the .gt-bar was removed) */ .stmt.stmt--gets .gt-bar { display: none; } /* cms block: hide its old static top bar (the standard ::after sweep replaces it) */ .stmt.stmt--cms .cms-statement-bar { display: none; } /* proc block: hide its old static top bar; the standard ::after sweep replaces it */ .stmt.stmt--proc .proc-statement-bar { display: none; } /* prin block: hide its old static top bar; the standard ::after sweep replaces it */ .stmt.stmt--prin .prin-statement-bar { display: none; } /* ── icon blocks (proc + prin): icon + text centered as ONE group ── */ /* override .stmt--icon's space-between so the icon is not edge-pushed */ .stmt.stmt--proc, .stmt.stmt--prin { justify-content: center; gap: 32px; animation: stmtStdBreathe 6s ease-in-out infinite; /* unify breathing */ } .stmt.stmt--proc .proc-statement-icon, .stmt.stmt--prin .prin-shield { position: relative; z-index: 2; flex: 0 0 auto; /* keep its size; do not stretch to the edge */ } .stmt.stmt--proc .proc-statement-text, .stmt.stmt--prin .prin-statement-text { position: relative; z-index: 2; flex: 0 1 auto; /* text sits beside the icon, not pushed away */ margin: 0; max-width: 720px; display: flex; flex-direction: column; gap: 11px; align-items: center; justify-content: center; } @media (max-width: 760px) { .stmt.stmt--first-impression, .stmt.stmt--gets, .stmt.stmt--cms, .stmt.stmt--proc, .stmt.stmt--prin { width: calc(100% - 32px); min-height: 120px; padding: 24px 22px; border-radius: 22px; margin-top: 36px; margin-bottom: 36px; } .stmt.stmt--first-impression::before, .stmt.stmt--gets::before, .stmt.stmt--cms::before, .stmt.stmt--proc::before, .stmt.stmt--prin::before { border-radius: 22px; } /* icon blocks: icon stacks above text on small screens, still centered */ .stmt.stmt--proc, .stmt.stmt--prin { flex-direction: column; gap: 18px; } } @media (prefers-reduced-motion: reduce) { .stmt.stmt--first-impression, .stmt.stmt--gets, .stmt.stmt--cms, .stmt.stmt--proc, .stmt.stmt--prin { animation: none; } .stmt.stmt--first-impression::before, .stmt.stmt--gets::before, .stmt.stmt--cms::before, .stmt.stmt--proc::before, .stmt.stmt--prin::before { animation: none; opacity: .55; } .stmt.stmt--first-impression::after, .stmt.stmt--gets::after, .stmt.stmt--cms::after, .stmt.stmt--proc::after, .stmt.stmt--prin::after { display: none; } } /* First-impression block only: more breathing room above so it reads as the section's closing thought and clears the radar/wave lines above it (other statement blocks stay at 48px). */ .stmt.stmt--first-impression { margin-top: 116px; } @media (max-width: 760px) { .stmt.stmt--first-impression { margin-top: 64px; } } /* ══════════════════════════════════════════════════════════ NEON ORB DIVIDER — between the cms statement block and the orbit section. Sits in the transition gap (dark section bg). ══════════════════════════════════════════════════════════ */ .neon-orb-divider { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; width: 440px; max-width: calc(100% - 48px); /* centred in the empty gap, balanced breathing room above/below */ margin: 8px auto 56px; } .nod-line { position: relative; flex: 1; height: 1.5px; overflow: hidden; } .nod-line--left { background: linear-gradient(90deg, transparent, rgba(110,160,255,.55) 85%, rgba(150,190,255,.8)); } .nod-line--right { background: linear-gradient(90deg, rgba(150,190,255,.8), rgba(110,160,255,.55) 15%, transparent); } /* soft light drift along each line */ .nod-line::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; background: linear-gradient(90deg, transparent, rgba(220,235,255,.85), transparent); animation: nodFlow 5.5s ease-in-out infinite; } .nod-line--right::after { animation-delay: -2.75s; } @keyframes nodFlow { 0% { left: -45%; } 100% { left: 120%; } } /* center orb + bloom */ .nod-orb { position: relative; flex: 0 0 auto; width: 12px; height: 12px; margin: 0 12px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ffffff, #bcd6ff 45%, #6ea0ff 100%); box-shadow: 0 0 10px rgba(170,200,255,.95), 0 0 22px rgba(47,107,255,.6); animation: nodOrbPulse 4s ease-in-out infinite; } /* subtle bloom around the center point */ .nod-orb::before { content: ''; position: absolute; inset: -180%; border-radius: 50%; background: radial-gradient(circle, rgba(47,107,255,.35) 0%, rgba(138,120,240,.14) 40%, transparent 70%); filter: blur(4px); animation: nodBloom 4s ease-in-out infinite; } @keyframes nodOrbPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 9px rgba(170,200,255,.85), 0 0 18px rgba(47,107,255,.5); } 50% { transform: scale(1.18); box-shadow: 0 0 14px rgba(170,200,255,1), 0 0 28px rgba(47,107,255,.7); } } @keyframes nodBloom { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .nod-line::after, .nod-orb, .nod-orb::before { animation: none; } } @media (max-width: 600px) { .neon-orb-divider { width: 320px; margin: 4px auto 40px; } } /* gets-section divider only: centre it in the gap above the statement block (the section has 96px top padding, so pull up + add space below to balance the empty space on both sides). Does NOT affect the other divider (between the cms statement and the orbit section). */ .gets-wrap > .neon-orb-divider { margin-top: -76px; margin-bottom: 110px; } @media (max-width: 600px) { .gets-wrap > .neon-orb-divider { margin-top: -48px; margin-bottom: 72px; } } /* orbit-section divider only: move it up to sit centred in the gap above the "סביב הקליניקה" heading (does NOT affect the gets-section divider). */ .orbit-wrap > .neon-orb-divider { margin-top: -36px; margin-bottom: 110px; } @media (max-width: 600px) { .orbit-wrap > .neon-orb-divider { margin-top: -40px; margin-bottom: 72px; } } /* ── Netlify honeypot (visually removed, kept for bots) ── */ .hidden-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ══════════════════════════════════════════════════════════ SITE FOOTER — dark premium closing section (4 columns) Compact, cohesive, clean top divider (no floating dot). ══════════════════════════════════════════════════════════ */ .site-footer { position: relative; overflow: hidden; border-top: 1px solid rgba(120,150,200,.14); background: radial-gradient(120% 80% at 50% 0%, rgba(20,32,58,.45) 0%, transparent 58%), linear-gradient(180deg, #070d18 0%, #060a14 50%, #04070d 100%); padding: 52px 0 30px; --sf-text: #f3f6fc; --sf-soft: #aeb9cd; --sf-faint: #708099; --sf-blue: #6ea0ff; --sf-gold: #cbb074; --sf-hair: rgba(120,150,200,.12); } /* subtle premium accent line centred on the top border */ .site-footer::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: min(620px, 70%); height: 1px; background: linear-gradient(90deg, transparent, rgba(110,160,255,.5), transparent); } /* ── Ambient background ───────────────────────────────────── */ .site-footer-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .sf-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(120,150,200,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,200,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(110% 80% at 50% 0%, #000 26%, transparent 72%); -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 26%, transparent 72%); } .sf-glow { position: absolute; border-radius: 50%; filter: blur(120px); } .sf-glow--1 { width: 34vw; height: 20vw; max-width: 520px; max-height: 300px; background: radial-gradient(circle, rgba(47,107,255,.14) 0%, transparent 68%); top: -16%; right: 8%; } .sf-glow--2 { width: 26vw; height: 18vw; max-width: 400px; max-height: 270px; background: radial-gradient(circle, rgba(110,80,236,.09) 0%, transparent 70%); bottom: -24%; left: 6%; } .site-footer-wrap { position: relative; z-index: 1; } /* ── 4-column grid ────────────────────────────────────────── */ .sf-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 28px 44px; align-items: start; } .sf-col-title { font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sf-faint); margin-bottom: 16px; } /* Col 1 — brand & statement (anchor column, a touch stronger) */ .sf-col--brand { max-width: 380px; } .sf-brand-link { display: inline-block; } .sf-brand-name { display: block; font-size: 1.72rem; font-weight: 800; color: var(--sf-text); direction: ltr; letter-spacing: -.02em; line-height: 1.05; } .sf-brand-tag { margin-top: 10px; font-size: 1.02rem; font-weight: 600; color: var(--sf-soft); } .sf-statement { margin-top: 14px; font-size: .94rem; line-height: 1.7; color: var(--sf-faint); } .sf-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid rgba(203,176,116,.28); background: linear-gradient(180deg, rgba(203,176,116,.10), rgba(203,176,116,.03)); font-size: .84rem; font-weight: 600; color: #e4d4ad; } .sf-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-gold); box-shadow: 0 0 10px 1px rgba(203,176,116,.6); } /* shared footer lists (cols 2 & 3) */ .sf-list { display: flex; flex-direction: column; gap: 9px; } .sf-list li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--sf-soft); } .sf-mdot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-blue); box-shadow: 0 0 8px 1px rgba(110,160,255,.45); } .sf-check { position: relative; flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(110,160,255,.4); background: rgba(110,160,255,.08); } .sf-check::after { content: ""; position: absolute; left: 50%; top: 46%; width: 4px; height: 7px; border: solid var(--sf-blue); border-width: 0 1.6px 1.6px 0; transform: translate(-50%, -50%) rotate(45deg); } /* Col 4 — contact / operator */ .sf-contact-op { font-size: .95rem; font-weight: 600; color: var(--sf-text); } .sf-contact-row { margin-top: 4px; font-size: .9rem; color: var(--sf-faint); } .sf-contact-row a { color: var(--sf-blue); transition: color var(--t) var(--ease); } .sf-contact-row a:hover { color: #9bc0ff; text-decoration: underline; } .sf-legal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sf-hair); display: flex; align-items: center; gap: 10px; font-size: .9rem; } .sf-legal a { color: var(--sf-soft); transition: color var(--t) var(--ease); } .sf-legal a:hover { color: var(--sf-text); } .sf-legal-div { color: var(--sf-faint); } /* ── Bottom row ───────────────────────────────────────────── */ .sf-bottom { position: relative; z-index: 1; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--sf-hair); display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .84rem; color: var(--sf-faint); } .sf-copy { unicode-bidi: plaintext; } .sf-domain { color: var(--sf-soft); letter-spacing: .03em; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 960px) { .sf-cols { grid-template-columns: 1fr 1fr; gap: 32px 40px; } .sf-col--brand { grid-column: 1 / -1; max-width: 560px; } } @media (max-width: 600px) { .site-footer { padding: 40px 0 26px; } .sf-cols { grid-template-columns: 1fr; gap: 30px; } .sf-col--brand { max-width: none; } .sf-brand-name { font-size: 1.5rem; } .sf-bottom { margin-top: 28px; } } /* ══════════════════════════════════════════════════════════ LEGAL PAGES — privacy.html / terms.html ══════════════════════════════════════════════════════════ */ .legal-page { background: linear-gradient(180deg, #070d18 0%, #0a1224 60%, #060a14 100%); min-height: 100vh; color: #d6deec; } .legal-topbar { border-bottom: 1px solid rgba(120,150,200,.10); background: rgba(6,10,20,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .legal-topbar-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; padding-bottom: 18px; } .legal-brand { display: flex; flex-direction: column; line-height: 1.2; } .legal-brand-name { font-size: 1.18rem; font-weight: 800; color: #f3f6fc; direction: ltr; letter-spacing: -.02em; } .legal-brand-sub { font-size: .72rem; color: #6f8099; } .legal-back { font-size: .92rem; font-weight: 600; color: #6ea0ff; } .legal-back:hover { text-decoration: underline; } .legal-main { position: relative; z-index: 1; padding: 64px 0 90px; } .legal-article { max-width: 820px; margin: 0 auto; } .legal-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6ea0ff; margin-bottom: 14px; } .legal-h1 { font-family: var(--sans); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; color: #f3f6fc; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 10px; } .legal-updated { font-size: .9rem; color: #6f8099; margin-bottom: 40px; } .legal-section { margin-bottom: 34px; } .legal-section h2 { font-family: var(--sans); font-size: 1.28rem; font-weight: 700; color: #eaf0fa; margin-bottom: 12px; } .legal-section p { font-size: 1rem; line-height: 1.8; color: #c2cdde; margin-bottom: 12px; } .legal-section ul { margin: 8px 0 12px; padding: 0; } .legal-section ul li { position: relative; padding-inline-start: 20px; font-size: 1rem; line-height: 1.7; color: #c2cdde; margin-bottom: 7px; } .legal-section ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: #6ea0ff; } .legal-section a { color: #6ea0ff; } .legal-section a:hover { text-decoration: underline; } .legal-note { margin-top: 40px; padding: 18px 20px; border: 1px solid rgba(120,150,200,.14); border-radius: var(--r-md); background: rgba(20,30,52,.4); font-size: .9rem; line-height: 1.7; color: #93a1b4; } /* ══════════════════════════════════════════════════════════ WHATSAPP CTA — Official ClinicTrust WhatsApp number Subtle premium accent on dark, not a bright green button. ══════════════════════════════════════════════════════════ */ .wa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid rgba(37,211,102,.34); background: linear-gradient(180deg, rgba(37,211,102,.13), rgba(37,211,102,.04)); color: #d7f3e2; font-weight: 600; font-size: .85rem; line-height: 1; white-space: nowrap; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); } .wa-btn:hover { border-color: rgba(37,211,102,.55); background: rgba(37,211,102,.18); color: #eafbf1; transform: translateY(-1px); } .wa-ic { display: inline-flex; width: 18px; height: 18px; color: #25d366; flex-shrink: 0; } .wa-ic svg { width: 100%; height: 100%; display: block; } /* Header CTA — lives inside the nav (desktop row + mobile drawer), so the mobile header row stays just brand + burger (no overflow). */ .wa-btn--nav { margin-inline-start: .5rem; padding: 7px 13px; font-size: .8rem; } /* Contact-section variant */ .fcta-wa { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(120,150,200,.14); } .fcta-wa-text { font-size: .96rem; line-height: 1.6; color: var(--fc-soft); margin-bottom: 12px; } .wa-btn--contact { padding: 11px 20px; font-size: .9rem; } /* Footer contact variant — accented inline link */ .sf-wa { display: inline-flex; align-items: center; gap: 7px; } .sf-contact-row a.sf-wa { color: var(--sf-soft); } .sf-contact-row a.sf-wa:hover { color: #b7f0d2; text-decoration: none; } .sf-wa .wa-ic { width: 15px; height: 15px; } /* Mobile: the nav becomes the dropdown drawer — show the WhatsApp CTA as a clear full-width button at the bottom of the menu. */ @media (max-width: 860px) { .wa-btn--nav { margin: 8px 0 2px; justify-content: center; padding: 12px 16px; font-size: .94rem; } }