/* ============================ FEATURES PAGE Heavy 3D Frosted Glass Triptychon ============================ */ /* ── FORC Prevention: Pre-hide panels ONLY until JS is ready ── JS adds .features-ready to after the entrance animation, which permanently deactivates this rule. Without the scope, every style.cssText='' in closeWorld() would re-trigger opacity:0. NOTE: No !important — GSAP inline styles must be able to override this. */ body:not(.features-ready) .features-panel { opacity: 0; } /* ── Hero: Full-Viewport Triptychon ── */ .features-hero { position: relative; width: 100%; height: 100vh; overflow: hidden; /* Dark base so clip-path wave gaps never show white behind panels */ background: #06080f; } /* Ambient background behind glass — fills with panel image during transitions */ .features-hero__bg { position: absolute; inset: 0; /* Dark fallback — visible through clip-path wave gaps */ background: #06080f; z-index: 0; } /* Overlay tint on hero bg — dark so gaps behind panels look seamless */ .features-hero__bg::after { content: ''; position: absolute; inset: 0; background: rgba(6, 8, 15, 0.75); pointer-events: none; z-index: 1; } .features-hero__panels { display: flex; width: 100%; height: 100%; position: relative; z-index: 2; perspective: 800px; overflow: hidden; /* Dark fill so wave-edge gaps in clip-paths appear dark, not white */ background: #06080f; } /* ── Individual Glass Panels ── */ .features-panel { position: relative; height: 100%; overflow: hidden; cursor: pointer; transform-style: preserve-3d; will-change: transform; /* Clip-paths applied via JS — never removed on expand, panels slide out */ } /* Panel sizing — Business (middle) slightly largest */ .features-panel:nth-child(1) { flex: 0 0 37%; z-index: 3; } .features-panel:nth-child(2) { flex: 0 0 38%; z-index: 4; margin-left: -5%; } .features-panel:nth-child(3) { flex: 0 0 36%; z-index: 2; margin-left: -6%; } /* ── GLASSMORPHISM — the real deal ── */ .features-panel__bg { position: absolute; inset: 0; will-change: transform; } /* Each panel — background image with dark tint overlay */ .features-panel--personal .features-panel__bg { background: url('../images/features/personal/features-background-hero-personal.jpg') center / cover no-repeat; } .features-panel--business .features-panel__bg { background: url('../images/features/business/features-background-hero-business.jpg') center / cover no-repeat; } .features-panel--companion .features-panel__bg { background: url('../images/features/companion/features-background-hero-companion.png') center / cover no-repeat; } /* Color overlay on top of image (via ::after) */ .features-panel__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: background 0.6s ease; } /* Personal: dark blue overlay */ .features-panel--personal .features-panel__bg::after { background: rgba(15, 35, 75, 0.52); } /* Business: dark navy overlay */ .features-panel--business .features-panel__bg::after { background: rgba(12, 22, 55, 0.55); } /* Companion: dark purple-pink overlay */ .features-panel--companion .features-panel__bg::after { background: rgba(55, 15, 45, 0.50); } /* Hover: brighten panel by reducing overlay */ .features-panel--personal:hover .features-panel__bg::after { background: rgba(15, 35, 75, 0.10); } .features-panel--business:hover .features-panel__bg::after { background: rgba(12, 22, 55, 0.12); } .features-panel--companion:hover .features-panel__bg::after { background: rgba(55, 15, 45, 0.10); } /* Expanded: keep the bright overlay when panel is active/clicked */ .features-panel.is-expanded.features-panel--personal .features-panel__bg::after { background: rgba(15, 35, 75, 0.08); } .features-panel.is-expanded.features-panel--business .features-panel__bg::after { background: rgba(12, 22, 55, 0.10); } .features-panel.is-expanded.features-panel--companion .features-panel__bg::after { background: rgba(55, 15, 45, 0.08); } /* ── 3D Depth via layered box-shadows — realistic thick-glass look ── */ .features-panel { box-shadow: /* deep ambient shadow (far, soft) */ -8px 0 60px rgba(0, 0, 0, .28), /* contact shadow (close, sharp) */ -3px 0 12px rgba(0, 0, 0, .22), /* subtle side-cast shadow */ -1px 0 3px rgba(0, 0, 0, .15), /* inner glass highlight — top edge */ inset 0 1px 0 rgba(255, 255, 255, .14), /* inner glass shadow — bottom edge */ inset 0 -1px 0 rgba(0, 0, 0, .08); } .features-panel:first-child { box-shadow: 8px 0 60px rgba(0, 0, 0, .18), 3px 0 12px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .12); } /* ── Glass Edge Highlight (refraction line on left edge of overlapping panels) ── */ .features-panel__edge { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .08) 20%, rgba(255, 255, 255, .20) 45%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .25) 100%); z-index: 8; pointer-events: none; box-shadow: 1px 0 6px rgba(255, 255, 255, .06); } .features-panel:first-child .features-panel__edge { display: none; } /* ── Gloss Sweep (hover) ── */ .features-panel__gloss { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; } .features-panel__gloss::after { content: ''; position: absolute; top: 0; left: -130%; width: 70%; height: 100%; background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 62%, transparent 75%); transform: skewX(-12deg); pointer-events: none; } .features-panel.is-glossing .features-panel__gloss::after { animation: glossSweep 0.7s cubic-bezier(.3, .1, .3, 1) forwards; } @keyframes glossSweep { 0% { left: -130%; } 100% { left: 170%; } } /* ── Panel Content Overlay ── */ .features-panel__content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 40px; padding-bottom: 40px; /* comfortable edge margin — explore is absolute */ z-index: 9; background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .05) 65%, transparent 100%); transition: padding-bottom .5s cubic-bezier(.25, .46, .45, .94); } /* On hover: increase padding to push the text stack up while explore fades in */ .features-panel:hover .features-panel__content { padding-bottom: 72px; } /* ── Per-panel text alignment ── */ /* Personal: left-aligned (default) */ /* Business: centered */ .features-panel--business .features-panel__content { text-align: center; } .features-panel--business .features-panel__sub { margin-left: auto; margin-right: auto; } .features-panel--business .features-panel__explore { justify-content: center; } /* Companion: right-aligned */ .features-panel--companion .features-panel__content { text-align: right; } .features-panel--companion .features-panel__sub { margin-left: auto; } .features-panel--companion .features-panel__explore { justify-content: flex-end; } /* ── Panel hero state is handled entirely by GSAP inline styles ── */ .features-panel__eyebrow { font-family: var(--ff); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; transition: color 0.6s ease; } .features-panel--personal .features-panel__eyebrow { color: rgba(170, 205, 255, 1); } .features-panel--business .features-panel__eyebrow { color: rgba(160, 195, 255, 1); } .features-panel--companion .features-panel__eyebrow { color: rgba(245, 180, 220, 1); } .features-panel__title { font-family: var(--ff-serif); font-size: clamp(1.6rem, 2.5vw, 2.4rem); font-weight: 700; color: #ffffff; line-height: 1.12; margin-bottom: 14px; transition: color 0.6s ease; } .features-panel__sub { font-size: 1rem; color: rgba(255, 255, 255, 0.95); line-height: 1.5; max-width: 300px; transition: color 0.6s ease; } .features-panel__explore { /* Taken out of flex flow — sits absolutely at the panel bottom so the text stack above it is never pushed up by reserved invisible space */ position: absolute; bottom: 40px; /* same as content padding-bottom so it sits flush */ left: 40px; right: 40px; display: flex; /* spans full width; per-panel justify-content handles alignment */ align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: #ffffff; opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.25, .46, .45, .94), transform .5s cubic-bezier(.25, .46, .45, .94); } .features-panel__explore svg { transition: transform .3s var(--ease); } .features-panel:hover .features-panel__explore { opacity: 1; transform: translateY(0); } .features-panel:hover .features-panel__explore svg { transform: translateX(4px); } /* ── EXPAND STATE ── */ /* GSAP controls all expand/collapse via inline styles */ /* Explore button always hidden while a world is open */ .features-panel.is-expanded .features-panel__explore { opacity: 0 !important; pointer-events: none; transition: none; } /* Subtle text-shadow on expanded panel text for readability */ .features-panel.is-expanded .features-panel__eyebrow, .features-panel.is-expanded .features-panel__title, .features-panel.is-expanded .features-panel__sub { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 2px 16px rgba(0, 0, 0, 0.35); } /* ── Bottom Pill Nav (matching main navbar style) ── */ .features-world-nav { position: fixed; bottom: 28px; top: auto; left: 50%; transform: translateX(-50%) translateY(12px); display: flex; gap: 2px; padding: 4px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); border: 1px solid rgba(255, 255, 255, .15); border-radius: 9999px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .12); } .features-world-nav.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Sliding pill indicator */ .features-world-nav__slider { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); border-radius: 9999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .12); pointer-events: none; transition: width 0.35s cubic-bezier(.4, 0, .2, 1); width: 0; } .features-world-nav__btn { position: relative; z-index: 1; padding: 7px 22px; font-size: .78rem; font-weight: 500; color: rgba(255, 255, 255, .78); border-radius: 9999px; transition: color .25s var(--ease), transform .3s cubic-bezier(.34, 1.56, .64, 1), text-shadow .25s var(--ease); font-family: var(--ff); white-space: nowrap; letter-spacing: .01em; cursor: pointer; } .features-world-nav__btn:hover { color: #fff; transform: translateY(-2px); text-shadow: 0 0 16px rgba(120, 180, 255, .55), 0 0 4px rgba(120, 180, 255, .3); } .features-world-nav__btn:active { transform: translateY(0px) scale(0.96); transition-duration: .1s; } .features-world-nav__btn.is-active { color: #fff; font-weight: 600; text-shadow: 0 0 12px rgba(255, 255, 255, .25); } /* Subtle separator after Overview button */ .features-world-nav__btn[data-world="overview"] { margin-right: 8px; } .features-world-nav__btn[data-world="personal"] { margin-left: 8px; } .features-world-nav__btn[data-world="overview"]::after { content: ''; position: absolute; right: -9px; top: 20%; height: 60%; width: 1px; background: rgba(255, 255, 255, 0.25); border-radius: 1px; pointer-events: none; transition: background .35s var(--ease); } /* ── Light-section adaptation (mirrors navbar-dark logic) ── */ .features-world-nav { transition: opacity .4s var(--ease), transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .features-world-nav.world-nav-light { background: rgba(255, 255, 255, .72); border-color: rgba(0, 0, 0, .08); box-shadow: 0 8px 32px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .90); } .features-world-nav.world-nav-light .features-world-nav__btn { color: rgba(20, 30, 55, .65); } .features-world-nav.world-nav-light .features-world-nav__btn:hover { color: #0f1f45; text-shadow: none; } .features-world-nav.world-nav-light .features-world-nav__btn.is-active { color: #0f1f45; text-shadow: none; } .features-world-nav.world-nav-light .features-world-nav__slider { background: rgba(20, 30, 55, .10); box-shadow: 0 1px 4px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .70); } .features-world-nav.world-nav-light .features-world-nav__btn[data-world="overview"]::after { background: rgba(20, 30, 55, .18); } /* ── World section header bar ── */ .features-world-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 14px 32px; background: rgba(8, 10, 18, 0.72); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .features-world-header__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } .features-world-header__name { font-size: 0.88rem; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .features-world-header__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); flex-shrink: 0; } /* ============================ EXPANDED WORLDS ============================ */ .features-world { display: none; opacity: 0; visibility: hidden; /* Double-lock: prevents ANY frame from rendering content */ /* No CSS transition — GSAP controls opacity to prevent flash */ position: relative; z-index: 20; /* Must be above hero (z-index: 10) to scroll over it */ } .features-world.is-active { display: block; } /* Only become renderable after GSAP has positioned & set opacity:0 */ .features-world.is-ready { visibility: visible; } .features-world.is-visible { opacity: 1; } /* ── Scroll Indicator — Elliptical Orbit Ring ── */ .scroll-indicator { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 10; pointer-events: none; opacity: 0; } /* Elliptical ring container — expanded for multi-orbit constellation */ .scroll-indicator__orbit { position: relative; width: 86px; margin-top: -15px; height: 18px; } /* The visible ring border — a real CSS ellipse */ .scroll-indicator__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 10px rgba(120, 160, 255, 0.05); animation: ringGlow 4s ease-in-out infinite; } /* ── Main Particle — primary comet on the ring ── */ .scroll-indicator__particle { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(170, 210, 255, 1) 40%, rgba(120, 170, 255, 0.6) 70%, transparent 100%); box-shadow: 0 0 3px rgba(200, 220, 255, 1), 0 0 8px rgba(140, 190, 255, 0.9), 0 0 16px rgba(100, 160, 255, 0.5), 0 0 30px rgba(80, 140, 255, 0.2); /* Main orbit: rx=43, ry=9 — matches the 86×18 ring */ offset-path: path('M 43 0 A 43 9 0 1 1 43 18 A 43 9 0 1 1 43 0'); offset-rotate: auto; animation: orbitScroll 5s ease-in-out infinite, particlePulse 2.5s ease-in-out infinite; } /* Halo aura around particle */ .scroll-indicator__particle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 180, 255, 0.35) 0%, rgba(100, 160, 255, 0.15) 40%, transparent 70%); filter: blur(2px); } /* ── Trail dots — each on a slightly different ellipse for depth ── */ .scroll-indicator__trail1, .scroll-indicator__trail2, .scroll-indicator__trail3, .scroll-indicator__trail4 { position: absolute; top: 0; left: 0; border-radius: 50%; offset-rotate: auto; pointer-events: none; } /* Trail 1 — slightly inner orbit, tight behind the particle */ .scroll-indicator__trail1 { width: 3.5px; height: 3.5px; background: radial-gradient(circle, rgba(170, 215, 255, 0.85) 0%, rgba(130, 185, 255, 0.3) 50%, transparent 75%); box-shadow: 0 0 4px rgba(140, 195, 255, 0.7), 0 0 10px rgba(110, 170, 255, 0.3); /* Slightly smaller ellipse — hugs inside the ring */ offset-path: path('M 43 1 A 41 8 0 1 1 43 17 A 41 8 0 1 1 43 1'); animation: orbitScroll 5s ease-in-out infinite; animation-delay: 0.15s; opacity: 0.75; } /* Trail 2 — outer orbit, drifts slightly above */ .scroll-indicator__trail2 { width: 2.8px; height: 2.8px; background: radial-gradient(circle, rgba(155, 205, 255, 0.65) 0%, rgba(120, 175, 255, 0.2) 50%, transparent 75%); box-shadow: 0 0 3px rgba(130, 185, 255, 0.55), 0 0 8px rgba(100, 160, 255, 0.2); /* Slightly wider ellipse — floats outside the ring */ offset-path: path('M 43 -1 A 45 10 0 1 1 43 19 A 45 10 0 1 1 43 -1'); animation: orbitScroll 5s ease-in-out infinite; animation-delay: 0.32s; opacity: 0.55; } /* Trail 3 — on the main ring, well behind */ .scroll-indicator__trail3 { width: 2.2px; height: 2.2px; background: radial-gradient(circle, rgba(140, 195, 255, 0.5) 0%, rgba(110, 170, 255, 0.12) 50%, transparent 75%); box-shadow: 0 0 3px rgba(120, 175, 255, 0.35); offset-path: path('M 43 0 A 43 9 0 1 1 43 18 A 43 9 0 1 1 43 0'); animation: orbitScroll 5s ease-in-out infinite; animation-delay: 0.5s; opacity: 0.4; } /* Trail 4 — inner orbit, farthest behind, faintest */ .scroll-indicator__trail4 { width: 1.6px; height: 1.6px; background: radial-gradient(circle, rgba(130, 185, 255, 0.3) 0%, transparent 70%); box-shadow: 0 0 2px rgba(110, 165, 255, 0.2); offset-path: path('M 43 2 A 40 7 0 1 1 43 16 A 40 7 0 1 1 43 2'); animation: orbitScroll 5s ease-in-out infinite; animation-delay: 0.68s; opacity: 0.25; } /* ── Constellation companion stars ── */ /* Star 1 — medium, wider orbit, ahead of main particle */ .scroll-indicator__star1 { position: absolute; top: 0; left: 0; width: 2.5px; height: 2.5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(160, 200, 255, 0.5) 60%, transparent 100%); box-shadow: 0 0 3px rgba(140, 190, 255, 0.7), 0 0 8px rgba(100, 160, 255, 0.3); /* Wider ellipse — orbits at a different radius */ offset-path: path('M 43 -2 A 47 11 0 1 1 43 20 A 47 11 0 1 1 43 -2'); offset-rotate: auto; animation: orbitScroll 5s ease-in-out infinite; animation-delay: -1.8s; opacity: 0.65; } /* Star 2 — tiny, tighter inner orbit, well behind */ .scroll-indicator__star2 { position: absolute; top: 0; left: 0; width: 1.5px; height: 1.5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(180, 210, 255, 0.35) 60%, transparent 100%); box-shadow: 0 0 2px rgba(160, 200, 255, 0.5), 0 0 6px rgba(120, 170, 255, 0.2); /* Tight inner ellipse */ offset-path: path('M 43 3 A 38 6 0 1 1 43 15 A 38 6 0 1 1 43 3'); offset-rotate: auto; animation: orbitScroll 5s ease-in-out infinite; animation-delay: -3.2s; opacity: 0.45; } /* ── Ambient dust particles — independent drifting specks ── */ .scroll-indicator__dust1, .scroll-indicator__dust2, .scroll-indicator__dust3 { position: absolute; top: 0; left: 0; border-radius: 50%; offset-rotate: auto; pointer-events: none; } /* Dust 1 — wide orbit, warm-white tint, far ahead */ .scroll-indicator__dust1 { width: 1.8px; height: 1.8px; background: radial-gradient(circle, rgba(255, 240, 220, 0.7) 0%, transparent 70%); box-shadow: 0 0 3px rgba(255, 220, 180, 0.3); offset-path: path('M 43 -3 A 50 12 0 1 1 43 21 A 50 12 0 1 1 43 -3'); animation: orbitScroll 5s ease-in-out infinite, dustTwinkle 3s ease-in-out infinite; animation-delay: -2.5s, 0s; opacity: 0.5; } /* Dust 2 — tight inner orbit, cool blue, opposite side */ .scroll-indicator__dust2 { width: 1.2px; height: 1.2px; background: radial-gradient(circle, rgba(180, 210, 255, 0.6) 0%, transparent 70%); box-shadow: 0 0 2px rgba(150, 190, 255, 0.25); offset-path: path('M 43 4 A 35 5 0 1 1 43 14 A 35 5 0 1 1 43 4'); animation: orbitScroll 5s ease-in-out infinite, dustTwinkle 4s ease-in-out infinite; animation-delay: -4s, 1.5s; opacity: 0.4; } /* Dust 3 — mid orbit, pale purple tint, trailing far behind */ .scroll-indicator__dust3 { width: 1.4px; height: 1.4px; background: radial-gradient(circle, rgba(200, 180, 255, 0.55) 0%, transparent 70%); box-shadow: 0 0 2px rgba(180, 160, 255, 0.2); offset-path: path('M 43 1 A 42 8 0 1 1 43 17 A 42 8 0 1 1 43 1'); animation: orbitScroll 5s ease-in-out infinite, dustTwinkle 3.5s ease-in-out infinite; animation-delay: -1s, 0.8s; opacity: 0.35; } /* Label */ .scroll-indicator__label { font-family: var(--ff); font-size: .56rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } /* Thin vertical stem — directional hint below label */ .scroll-indicator__stem { width: 1px; height: 20px; margin-top: -4px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), transparent); } /* ── Keyframes ── */ /* Primary orbit — scroll-pause-scroll pattern */ @keyframes orbitScroll { 0% { offset-distance: 0%; } 12% { offset-distance: 22%; } 22% { offset-distance: 24%; } 35% { offset-distance: 48%; } 45% { offset-distance: 50%; } 58% { offset-distance: 74%; } 68% { offset-distance: 76%; } 85% { offset-distance: 98%; } 100% { offset-distance: 100%; } } /* Dust twinkle — opacity breathing */ @keyframes dustTwinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.3); } } /* Particle glow breathing */ @keyframes particlePulse { 0%, 100% { box-shadow: 0 0 3px rgba(200, 220, 255, 1), 0 0 8px rgba(140, 190, 255, 0.9), 0 0 16px rgba(100, 160, 255, 0.5), 0 0 30px rgba(80, 140, 255, 0.2); } 50% { box-shadow: 0 0 4px rgba(210, 225, 255, 1), 0 0 12px rgba(150, 200, 255, 1), 0 0 22px rgba(110, 170, 255, 0.6), 0 0 38px rgba(80, 140, 255, 0.3); } } /* Ring glow breathing */ @keyframes ringGlow { 0%, 100% { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 0 8px rgba(120, 160, 255, 0.04); } 50% { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 0 14px rgba(120, 160, 255, 0.1); } } /* ── World Mini-Hero (legacy — now handled by expanded panel content) ── */ /* ── Feature Category Block ── */ .feature-category { padding: var(--section-pad) 24px; position: relative; overflow: hidden; } .feature-category__header { margin-bottom: 56px; } .feature-category__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 20px; } .s-dark .feature-category__icon { background: rgba(255, 255, 255, .06); } .s-light .feature-category__icon { background: var(--accent-glow); } .feature-category__title { font-family: var(--ff-serif); font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; margin-bottom: 12px; } .s-dark .feature-category__title { color: #fff; } .s-light .feature-category__title { color: var(--text); } .feature-category__sub { font-size: .92rem; line-height: 1.6; max-width: 520px; } .s-dark .feature-category__sub { color: var(--text-dark-muted); } .s-light .feature-category__sub { color: #4a4f6a; } /* ── Feature Items Grid ── */ .feature-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .feature-item { padding: 32px 28px; border-radius: var(--radius-lg); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); position: relative; overflow: hidden; } .s-light .feature-item { background: rgba(255, 255, 255, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .5); box-shadow: var(--shadow-sm); } .s-light .feature-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(79, 110, 247, .2); } .s-dark .feature-item { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); } .s-dark .feature-item:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .12); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); } .feature-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-1); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .feature-item:hover::before { transform: scaleX(1); } .feature-item__icon { font-size: 1.5rem; margin-bottom: 16px; } .feature-item__name { font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .s-dark .feature-item__name { color: #fff; } .s-light .feature-item__name { color: var(--text); } .feature-item__desc { font-size: .86rem; line-height: 1.65; } .s-dark .feature-item__desc { color: var(--text-dark-muted); } .s-light .feature-item__desc { color: #4a4f6a; } /* ── World CTA ── */ .world-cta { text-align: center; padding: 0; } /* World CTA uses the same dark background as the footer */ .world-cta.s-dark { background: linear-gradient(180deg, #000000 0%, #070a14 40%, #0b0f1c 70%, #000000 100%); } .world-cta .footer-divider { padding: 0 48px; } .world-cta__inner { padding: 72px 24px 56px; } .world-cta__text { font-family: var(--ff-serif); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; margin-bottom: 16px; color: #fff; } .world-cta .btn-primary { transition: transform .35s var(--ease-bounce), box-shadow .35s var(--ease); } .world-cta .btn-primary:hover { box-shadow: 0 4px 24px rgba(79, 110, 247, .35); } /* ── Companion Emotional Blocks ── */ .companion-block { padding: var(--section-pad) 24px; position: relative; } .companion-block__inner { width: min(80vw, 1400px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .companion-block:nth-child(even) .companion-block__inner { direction: rtl; } .companion-block:nth-child(even) .companion-block__inner>* { direction: ltr; } .companion-block__tag { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; } .s-dark .companion-block__tag { color: var(--accent-light); } .s-light .companion-block__tag { color: var(--accent); } .companion-block__title { font-family: var(--ff-serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; margin-bottom: 20px; line-height: 1.15; } .s-dark .companion-block__title { color: #ffffff; } .s-light .companion-block__title { color: #0d0f18; } .companion-block__desc { font-size: 1.12rem; line-height: 1.8; } .s-dark .companion-block__desc { color: #dce0f0; } .s-light .companion-block__desc { color: #1a1d2b; } /* ── All worlds: dark sections use the about-us dark blue-black ── */ .features-world .s-dark { background: linear-gradient(180deg, #080a12 0%, #0b0d18 100%); } /* World CTA keeps the footer gradient (more specific) */ .features-world .world-cta.s-dark { background: linear-gradient(180deg, #000000 0%, #070a14 40%, #0b0f1c 70%, #000000 100%); } .companion-block__visual { aspect-ratio: 4/3; min-height: 320px; border-radius: var(--radius-xl); position: relative; overflow: hidden; align-self: stretch; } .s-dark .companion-block__visual { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); } .s-light .companion-block__visual { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .4); box-shadow: var(--shadow-md); } /* ── Companion block photo fill ── */ .companion-block__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; transition: transform 0.6s cubic-bezier(.25, .46, .45, .94); } .companion-block__visual:hover .companion-block__img { transform: scale(1.04); } /* Overlay — dark section: subtle dark-navy tint over photo */ .companion-block__img-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(5, 12, 35, 0.20); } /* Overlay — light section: white tint to soften image */ .s-light .companion-block__img-overlay { background: rgba(255, 255, 255, 0.20); } /* Overlay — dark section: explicit for clarity */ .s-dark .companion-block__img-overlay { background: rgba(5, 12, 35, 0.20); } /* ── Memory Tiers Visual ── */ .memory-tiers { display: flex; flex-direction: column; gap: 12px; padding: 32px; height: 100%; justify-content: center; position: relative; z-index: 2; } .memory-tier { padding: 20px 24px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 16px; opacity: 0; transform: translateX(-20px); } .memory-tier.is-visible { opacity: 1; transform: translateX(0); transition: all .6s var(--ease); } .memory-tier__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .memory-tier--hot .memory-tier__dot { background: #EF4444; box-shadow: 0 0 12px rgba(239, 68, 68, .4); } .memory-tier--warm .memory-tier__dot { background: #F59E0B; box-shadow: 0 0 12px rgba(245, 158, 11, .4); } .memory-tier--cold .memory-tier__dot { background: #4F6EF7; box-shadow: 0 0 12px rgba(79, 110, 247, .4); } .s-dark .memory-tier { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); } .memory-tier__name { font-weight: 600; font-size: .88rem; margin-bottom: 2px; } .s-dark .memory-tier__name { color: #fff; } .memory-tier__desc { font-size: .78rem; } .s-dark .memory-tier__desc { color: var(--text-dark-muted); } /* ============================ COMPANION SETUP SECTION ============================ */ .companion-setup { position: relative; padding: var(--section-pad) 24px; text-align: center; overflow: hidden; } /* Geometric Grid canvas — companion setup */ .companion-setup .geo-grid-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .companion-setup__inner { position: relative; z-index: 1; max-width: var(--container); } .companion-setup__header { max-width: 640px; margin: 0 auto 64px; } .companion-setup__eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .companion-setup__headline { font-family: var(--ff-serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; color: #0d0f18; line-height: 1.15; margin-bottom: 20px; } .companion-setup__sub { font-size: 1.1rem; line-height: 1.75; color: #2a2d3a; } .companion-setup__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; position: relative; } /* Connector line removed */ .companion-setup__step { padding: 36px 32px; border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); /* ── Premium glassmorphism (light bg) ── */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.70) 0%, rgba(240, 244, 255, 0.50) 50%, rgba(255, 255, 255, 0.60) 100%); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.80); box-shadow: 0 8px 32px rgba(79, 110, 247, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3); } /* Subtle inner glow overlay */ .companion-setup__step::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%, transparent 80%, rgba(79, 110, 247, 0.03) 100%); pointer-events: none; z-index: 0; } .companion-setup__step>* { position: relative; z-index: 1; } .companion-setup__step:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 20px 60px rgba(79, 110, 247, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.4); } .companion-setup__step-num { font-family: var(--ff-serif); font-size: 3.5rem; font-weight: 700; color: var(--accent); opacity: .5; line-height: 1; margin-bottom: 16px; } .companion-setup__step-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(79, 110, 247, .15); border: 1px solid rgba(79, 110, 247, .25); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--accent-light); } .companion-setup__step-title { font-family: var(--ff-serif); font-size: 1.2rem; font-weight: 700; color: #0d0f18; margin-bottom: 12px; } .companion-setup__step-text { font-size: 1rem; line-height: 1.7; color: #2a2d3a; } .companion-setup__hint { margin-top: 40px; font-size: .95rem; color: #4a4f6a; opacity: .85; } /* ============================ COMPANION GROWTH SECTION (wide-format statement) ============================ */ .companion-growth { padding: var(--section-pad) 24px; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60vh; } .companion-growth__inner { width: min(80vw, 1100px); display: flex; flex-direction: column; align-items: center; gap: 28px; } .companion-growth__inner .companion-block__tag { /* reuse tag style but centered */ display: block; } .companion-growth__title { font-family: var(--ff-serif); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; color: #fff; line-height: 1.1; } .companion-growth__body { font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.75; color: #dce0f0; max-width: 820px; } @media (max-width: 767px) { .companion-growth__inner { width: 92vw; } .companion-growth__title { font-size: 1.85rem; } .companion-growth__body { font-size: 1rem; } } /* ============================ COMPANION MENTAL WELLNESS PILLS ============================ */ .companion-wellness__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .companion-wellness__pill { padding: 6px 16px; border-radius: 9999px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; background: rgba(79, 110, 247, .12); border: 1px solid rgba(79, 110, 247, .25); color: var(--accent-light); } /* ============================ PERSONAL AHA-MOMENT SECTION ============================ */ .personal-aha { position: relative; height: 100vh; overflow: clip; background: #f4f6fc; } /* Geometric Grid canvas — personal aha */ .personal-aha .geo-grid-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .personal-aha__block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--section-pad) 24px; text-align: center; z-index: 1; will-change: transform, opacity; /* transparent — geo-grid canvas shows through fully */ background: none; } .personal-aha__eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; opacity: .85; } .personal-aha__headline { font-family: var(--ff-serif); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; max-width: 800px; color: #1a1a2e; line-height: 1.15; margin-bottom: 24px; } .personal-aha__body { max-width: 620px; font-size: 1.05rem; line-height: 1.8; color: #2a2a3a; margin-bottom: 16px; } .personal-aha__visual { max-width: 680px; width: 100%; } /* Minimal gap between body text and orbit/planet visual */ .aha-visual--orbit { margin-top: -8px; } /* — Notification visual — */ .aha-notif { display: inline-flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 0, 0, .08); backdrop-filter: blur(20px); text-align: left; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); } .aha-notif__icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(37, 211, 102, .15); border: 1px solid rgba(37, 211, 102, .3); display: flex; align-items: center; justify-content: center; color: rgb(37, 211, 102); flex-shrink: 0; } .aha-notif__app { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .45); margin-bottom: 4px; } .aha-notif__msg { font-size: .92rem; color: #1a1a2e; } /* — Timeline visual — */ .aha-timeline { display: flex; align-items: center; justify-content: center; gap: 0; padding: 32px; } .aha-timeline__item { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; } .aha-timeline__dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, .08); border: 2px solid rgba(0, 0, 0, .12); transition: all .4s var(--ease); } .aha-timeline__dot--glow { background: var(--accent); border-color: var(--accent-light); box-shadow: 0 0 16px rgba(79, 110, 247, .6); } .aha-timeline__dot--accent { background: #fff; border-color: #fff; width: 18px; height: 18px; box-shadow: 0 0 24px rgba(255, 255, 255, .5); } .aha-timeline__line { flex: 1 1 80px; max-width: 100px; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .08), rgba(79, 110, 247, .4), rgba(0, 0, 0, .08)); margin: 0 8px; align-self: center; } .aha-timeline__label { font-weight: 600; font-size: .82rem; color: #1a1a2e; } .aha-timeline__desc { font-size: .75rem; color: #555; text-align: center; max-width: 100px; } /* — Orbit visual — */ .aha-orbit { position: relative; width: 220px; height: 220px; margin: 0 auto; } .aha-orbit__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(79, 110, 247, .15); border: 1.5px solid rgba(79, 110, 247, .4); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(79, 110, 247, .25); z-index: 2; } .aha-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(0, 0, 0, .1); animation: orbitSpin 14s linear infinite; } .aha-orbit__icon { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .10); display: flex; align-items: center; justify-content: center; font-size: 1rem; top: 50%; left: 50%; /* Place each icon at angle = i * 60deg on a radius of ~88px */ --angle: calc(var(--i) * 60deg); transform: translate(-50%, -50%) rotate(var(--angle)) translateX(88px) rotate(calc(-1 * var(--angle))); } @keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* — Chat visual — */ .aha-chat { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--radius-lg); background: rgba(0, 0, 0, .02); border: 1px solid rgba(0, 0, 0, .08); text-align: left; max-width: 420px; margin: 0 auto; } .aha-chat__msg { padding: 10px 16px; border-radius: 16px; font-size: .86rem; line-height: 1.5; max-width: 90%; animation: chatFadeIn .5s ease both; } .aha-chat__msg--user { background: rgba(79, 110, 247, .15); border: 1px solid rgba(79, 110, 247, .25); color: #1a1a2e; align-self: flex-end; border-radius: 16px 16px 4px 16px; } .aha-chat__msg--bot { background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .06); color: #333; align-self: flex-start; border-radius: 16px 16px 16px 4px; } .aha-chat__msg--status { opacity: .75; font-style: italic; } .aha-chat__msg--success { background: rgba(34, 197, 94, .08); border-color: rgba(34, 197, 94, .18); color: #1a7a42; } .aha-chat__dots span { animation: dotBounce 1.2s ease-in-out infinite; display: inline-block; } .aha-chat__dots span:nth-child(2) { animation-delay: .2s; } .aha-chat__dots span:nth-child(3) { animation-delay: .4s; } @keyframes dotBounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } } @keyframes chatFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* — Tabs visual — */ .aha-tabs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .aha-tab { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 9999px; font-size: .86rem; font-weight: 600; color: rgba(0, 0, 0, .45); background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .08); transition: all .3s var(--ease); } .aha-tab--active { color: #1a1a2e; background: rgba(79, 110, 247, .1); border-color: rgba(79, 110, 247, .3); box-shadow: 0 4px 16px rgba(79, 110, 247, .12); } /* ============================ PERSONAL CATEGORY NAV ============================ */ .personal-cat-nav { position: sticky; top: 60px; z-index: 50; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(15, 17, 24, 0.88); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0 24px; overflow-x: auto; scrollbar-width: none; } .personal-cat-nav::-webkit-scrollbar { display: none; } .personal-cat-nav__items { display: flex; gap: 0; justify-content: center; width: max-content; min-width: 100%; } .personal-cat-nav__item { font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--text-dark-muted); padding: 16px 24px; border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; font-family: var(--ff); letter-spacing: .01em; } .personal-cat-nav__item:hover { color: rgba(255, 255, 255, .75); } .personal-cat-nav__item.is-active { color: var(--accent-light); border-bottom-color: var(--accent-light); } /* ============================ BUSINESS SETUP SECTION ============================ */ .biz-setup { position: relative; padding: var(--section-pad) 24px; overflow: hidden; } /* Geometric Grid canvas — biz setup */ .biz-setup .geo-grid-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .biz-setup .container { position: relative; z-index: 1; max-width: 85vw; width: 85vw; } .biz-setup__header { text-align: center; margin-bottom: 48px; } .biz-setup__header .eyebrow { color: var(--accent); margin-bottom: 12px; } .biz-setup__header .section-h2 { color: var(--text); } .biz-setup__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; } .biz-setup__card { padding: 36px 32px; border-radius: var(--radius-lg); text-align: center; position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); /* ── Premium glassmorphism ── */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(224, 232, 255, 0.30) 50%, rgba(255, 255, 255, 0.40) 100%); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.70); box-shadow: 0 8px 32px rgba(79, 110, 247, 0.10), 0 4px 16px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(255, 255, 255, 0.25); } .biz-setup__card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.90); box-shadow: 0 20px 60px rgba(79, 110, 247, 0.14), 0 8px 24px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.35); } .biz-setup__card-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-glow); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; color: var(--accent); } .biz-setup__card-title { font-family: var(--ff-serif); font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 10px; } .biz-setup__card-desc { font-size: .88rem; line-height: 1.65; color: #4a4f6a; margin-bottom: 24px; } /* ── Section entry animations — triggers on world.is-visible ── */ /* .is-visible is added in onComplete of the world fade-in, so the world is fully opaque when these animations play. */ .biz-setup__anim { opacity: 0; transform: translateY(24px); } .features-world.is-visible .biz-setup__anim { animation: sectionReveal .8s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--biz-d, 0s); } .comp-setup__anim { opacity: 0; transform: translateY(24px); } .features-world.is-visible .comp-setup__anim { animation: sectionReveal .8s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--comp-d, 0s); } @keyframes sectionReveal { to { opacity: 1; transform: translateY(0); } } /* ── Clickable image-banner CTA ─────────────────────────────── */ .biz-setup__card-img-wrap { display: block; position: relative; overflow: hidden; border-radius: 16px; width: 100%; aspect-ratio: 4 / 1; cursor: pointer; will-change: transform; text-decoration: none; transition: box-shadow .5s cubic-bezier(.22, 1, .36, 1), border-color .5s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 4px 18px rgba(79, 110, 247, .15); border: 1px solid transparent; } .biz-setup__card-img-wrap:hover { box-shadow: 0 20px 60px rgba(79, 110, 247, .25), 0 8px 24px rgba(0, 0, 0, .12); border-color: rgba(79, 110, 247, .18); } /* image */ .biz-setup__card-img-wrap img { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); object-fit: cover; object-position: top; display: block; transform: scale(1.15); transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .5s ease; filter: saturate(.92); } .biz-setup__card-img-wrap:hover img { filter: saturate(1); } /* white veil */ .biz-setup__card-img-wrap::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(200, 215, 255, .20); transition: background .5s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .biz-setup__card-img-wrap:hover::before { background: rgba(200, 215, 255, 0); } /* label overlay — cursor-driven spotlight via --glow-x / --glow-y */ .biz-setup__card-img-label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: rgba(200, 215, 255, .20); color: #fff; transition: background .5s cubic-bezier(.22, 1, .36, 1); } .biz-setup__card-img-wrap:hover .biz-setup__card-img-label { background: radial-gradient(ellipse 280px 160px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(79, 110, 247, .10) 0%, rgba(10, 14, 30, .08) 55%, transparent 100%); } /* ── Text — per-letter proximity glow ── */ .biz-setup__card-img-text { font-size: 1.05rem; font-weight: 700; letter-spacing: .05em; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; gap: 0; } /* Individual letter spans — JS sets --letter-glow (0–1) per letter */ .biz-setup__card-img-text .banner-letter { display: inline-block; transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .35s cubic-bezier(.22, 1, .36, 1); color: #fff; opacity: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, .4), 0 0 calc(var(--letter-glow, 0) * 20px) rgba(255, 255, 255, calc(var(--letter-glow, 0) * .6)), 0 0 calc(var(--letter-glow, 0) * 40px) rgba(255, 255, 255, calc(var(--letter-glow, 0) * .25)); transform: translateY(0); will-change: transform; } /* Smooth lift on hover — CSS driven, like navbar links */ .biz-setup__card-img-wrap:hover .banner-letter { transform: translateY(-1.5px); } /* Spaces need width */ .biz-setup__card-img-text .banner-letter-space { width: .3em; } /* accent line — absolutely positioned below text, elastic draw-on */ .biz-setup__card-img-accent-line { position: absolute; left: 50%; top: calc(50% + 16px); transform: translateX(-50%); width: 80%; max-width: 200px; height: 1px; pointer-events: none; } .biz-setup__card-img-accent-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .55) 70%, transparent 100%); transform-origin: var(--line-origin, 50%) center; transform: scaleX(0); opacity: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s cubic-bezier(.22, 1, .36, 1); } .biz-setup__card-img-wrap:hover .biz-setup__card-img-accent-line::after { transform: scaleX(1); opacity: 1; } /* ── Arrow — absolutely positioned, morph from dot + cursor tracking ── */ .biz-setup__card-img-arrow { position: absolute; left: 50%; top: calc(50% + 26px); width: 18px; height: 18px; margin-left: -9px; /* center the 18px element */ pointer-events: none; /* cursor tracking — JS sets --arrow-tx */ transform: translateX(calc(var(--arrow-tx, 0) * 1px)); transition: transform .15s cubic-bezier(.22, 1, .36, 1); } /* The dot (default state) */ .biz-setup__card-img-arrow::before { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s cubic-bezier(.22, 1, .36, 1); box-shadow: 0 0 8px rgba(255, 255, 255, .3); } /* Show dot on hover */ .biz-setup__card-img-wrap:hover .biz-setup__card-img-arrow::before { opacity: 1; } /* The SVG arrow line morphs in (replaces dot) */ .biz-setup__card-img-arrow svg { display: block; width: 18px; height: 18px; stroke: #fff; opacity: 0; transform: scaleX(0); transform-origin: left center; transition: opacity .35s cubic-bezier(.22, 1, .36, 1) .2s, transform .4s cubic-bezier(.22, 1, .36, 1) .2s; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3)); } /* Hover: dot fades out, arrow morphs in */ .biz-setup__card-img-wrap:hover .biz-setup__card-img-arrow::before { opacity: 0; transform: translate(-50%, -50%) scale(0); transition: opacity .25s cubic-bezier(.22, 1, .36, 1) .15s, transform .25s cubic-bezier(.22, 1, .36, 1) .15s; } .biz-setup__card-img-wrap:hover .biz-setup__card-img-arrow svg { opacity: .9; transform: scaleX(1); } /* ── Setup card buttons ── */ .biz-setup__card-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 100px; font-size: .88rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); /* filled — primary */ background: linear-gradient(135deg, var(--accent) 0%, #7c9bff 100%); color: #fff; box-shadow: 0 4px 18px rgba(79, 110, 247, .30); will-change: transform; } .biz-setup__card-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 32px rgba(79, 110, 247, .45); } /* outline variant — Full-Service */ .biz-setup__card-btn--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 14px rgba(79, 110, 247, .12); } .biz-setup__card-btn--outline:hover { background: rgba(79, 110, 247, .08); box-shadow: inset 0 0 0 1.5px var(--accent), 0 10px 28px rgba(79, 110, 247, .25); } .biz-setup__highlight { text-align: center; padding: 28px 40px; border-radius: var(--radius-lg); /* ── Glassmorphism ── */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.40) 0%, rgba(210, 222, 255, 0.28) 50%, rgba(255, 255, 255, 0.35) 100%); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.60); box-shadow: 0 8px 32px rgba(79, 110, 247, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.20); transition: box-shadow .4s var(--ease), border-color .4s var(--ease); } .biz-setup__highlight p { font-size: .95rem; line-height: 1.75; color: var(--text); max-width: 720px; margin: 0 auto; } /* ============================ BUSINESS DEPARTMENT SECTIONS ============================ */ .biz-dept { padding: var(--section-pad) 24px; position: relative; overflow: hidden; } .biz-dept__inner { max-width: 85vw; width: 85vw; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* Alternate layout: even departments have text on the right, visual on the left */ .biz-dept:nth-child(even) .biz-dept__inner { direction: rtl; } .biz-dept:nth-child(even) .biz-dept__inner>* { direction: ltr; } .biz-dept__tag { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; } .s-dark .biz-dept__tag { color: var(--accent-light); } .s-light .biz-dept__tag { color: var(--accent); } .biz-dept__title { font-family: var(--ff-serif); font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 700; line-height: 1.25; margin-bottom: 16px; } .s-dark .biz-dept__title { color: #ffffff; } .s-light .biz-dept__title { color: #0d0f18; } .biz-dept__sub { font-size: 1.05rem; line-height: 1.65; margin-bottom: 28px; } .s-dark .biz-dept__sub { color: rgba(240, 243, 255, 0.88); } .s-light .biz-dept__sub { color: #1a1d2b; } .biz-dept__capabilities { list-style: none; display: flex; flex-direction: column; gap: 14px; } .biz-dept__capability { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.6; } .s-dark .biz-dept__capability { color: rgba(230, 235, 255, 0.90); } .s-light .biz-dept__capability { color: #1a1d2b; } .biz-dept__capability-icon { flex-shrink: 0; margin-top: 2px; } .s-dark .biz-dept__capability-icon { color: var(--accent-light); } .s-light .biz-dept__capability-icon { color: var(--accent); } /* Visual placeholder */ .biz-dept__visual { aspect-ratio: 16/10; border-radius: var(--radius-xl); background: linear-gradient(135deg, rgba(79, 110, 247, .08) 0%, rgba(79, 110, 247, .03) 100%); min-height: 220px; position: relative; overflow: hidden; align-self: stretch; } .s-dark .biz-dept__visual { border: 1px solid rgba(255, 255, 255, .06); } .s-light .biz-dept__visual { border: 1px solid rgba(79, 110, 247, .12); box-shadow: var(--shadow-md); } /* ── Business dept photo fill ── */ .biz-dept__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; transition: transform 0.6s cubic-bezier(.25, .46, .45, .94); } .biz-dept__visual:hover .biz-dept__img { transform: scale(1.04); } /* Overlay — dark section: subtle dark-navy tint over photo */ .biz-dept__visual::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(5, 12, 35, 0.20); } /* Overlay — light section: soft blue-white tint */ .s-light .biz-dept__visual::after { background: rgba(220, 232, 255, 0.20); } /* Overlay — dark section: explicit */ .s-dark .biz-dept__visual::after { background: rgba(5, 12, 35, 0.20); } /* ============================ RESPONSIVE ============================ */ @media (max-width: 1024px) { .companion-block__inner { grid-template-columns: 1fr; gap: 32px; } .companion-block:nth-child(even) .companion-block__inner { direction: ltr; } } @media (max-width: 768px) { .features-hero__panels { flex-direction: column; perspective: none; } .features-panel { flex: 0 0 33.333% !important; clip-path: none !important; margin-left: 0 !important; box-shadow: none !important; } .features-panel__edge { display: none; } .features-panel+.features-panel { border-top: 1px solid rgba(255, 255, 255, .08); } .features-panel__content { padding: 32px 24px; } .features-panel__title { font-size: 1.4rem; } .features-panel__explore { opacity: 1; transform: translateY(0); } .features-world-nav { bottom: 16px; width: calc(100% - 32px); left: 16px; transform: translateY(12px); justify-content: center; padding: 3px; border-radius: 14px; } .features-world-nav.is-visible { transform: translateY(0); } .features-world-nav__btn { padding: 8px 14px; font-size: .72rem; } .features-world-nav__slider { border-radius: 11px; top: 3px; left: 3px; height: calc(100% - 6px); } .feature-items { grid-template-columns: 1fr; } } /* Tablet overrides for new sections */ @media (max-width: 1024px) { .companion-setup__steps { grid-template-columns: 1fr; } .companion-setup__steps::before { display: none; } .biz-dept__inner { grid-template-columns: 1fr; gap: 40px; } /* Reset RTL alternating on tablet/mobile */ .biz-dept:nth-child(even) .biz-dept__inner { direction: ltr; } .biz-setup__cards { grid-template-columns: 1fr; } .personal-cat-nav__items { justify-content: flex-start; } } /* Mobile overrides */ @media (max-width: 767px) { .personal-aha__block { min-height: 60vh; padding: 64px 20px; } .personal-aha__headline { font-size: 1.65rem; } .personal-aha__body { font-size: .95rem; margin-bottom: 32px; } .aha-timeline { flex-direction: column; gap: 16px; padding: 24px; } .aha-timeline__line { width: 1px; height: 40px; background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(79, 110, 247, .4), rgba(0, 0, 0, .08)); margin: 0; flex: 0 0 auto; } .aha-orbit { width: 180px; height: 180px; } .aha-orbit__icon { --angle: calc(var(--i) * 60deg); transform: translate(-50%, -50%) rotate(var(--angle)) translateX(70px) rotate(calc(-1 * var(--angle))); } .biz-setup__highlight { padding: 24px 20px; } .biz-dept__visual { min-height: 160px; } .companion-setup__steps { gap: 20px; } .companion-setup__step { padding: 24px 20px; } } /* ============================ PERSONAL: TIMELINE DOT VARIANTS ============================ */ /* Plain: faint dark ring */ .aha-timeline__dot--plain { background: rgba(0, 0, 0, .06); border: 2px solid rgba(0, 0, 0, .12); } /* Ring: blue outer glow, white core */ .aha-timeline__dot--ring { background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(79, 110, 247, .30), 0 0 14px rgba(79, 110, 247, .55); width: 14px; height: 14px; } /* Full accent: bright blue solid */ .aha-timeline__dot--full { background: var(--accent); border: 2px solid var(--accent-light); box-shadow: 0 0 0 5px rgba(79, 110, 247, .25), 0 0 20px rgba(79, 110, 247, .6); width: 18px; height: 18px; } /* ============================ PERSONAL: MULTI-RING CANVAS ORBIT ============================ */ .aha-orbit--multi { position: relative; width: 340px; height: 340px; margin: 0 auto; overflow: visible; } .aha-orbit__canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* 3D Planet canvas — centered */ .aha-planet__canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; pointer-events: none; z-index: 5; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25)); } /* App icons on outer ring — positioned via transform by JS */ .aha-orbit__emoji { position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 1px solid rgba(0, 0, 0, .10); display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; will-change: transform; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .aha-orbit__emoji img { width: 18px; height: 18px; object-fit: contain; } /* ============================ PERSONAL: LIQUID GLASS CHAT ============================ */ .aha-chat-lg { background: rgba(255, 255, 255, .88); border: 1px solid rgba(0, 0, 0, .08); backdrop-filter: blur(20px) saturate(140%); border-radius: 20px; overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto; box-shadow: 0 24px 64px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .5); } /* Chat header */ .aha-chat-lg__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(0, 0, 0, .02); border-bottom: 1px solid rgba(0, 0, 0, .06); } .aha-chat-lg__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #8fa7f7 100%); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; overflow: hidden; } .aha-chat-lg__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .aha-chat-lg__header-info { flex: 1; min-width: 0; } .aha-chat-lg__header-name { font-size: .82rem; font-weight: 700; color: #1a1a2e; line-height: 1.2; } .aha-chat-lg__header-status { font-size: .72rem; color: rgba(0, 0, 0, .45); display: flex; align-items: center; gap: 5px; margin-top: 2px; } .aha-chat-lg__status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf82; box-shadow: 0 0 6px rgba(76, 175, 130, .6); animation: statusPulse 2.4s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .aha-chat-lg__header-time { font-size: .68rem; color: rgba(0, 0, 0, .30); } /* Chat messages area */ .aha-chat-lg__messages { padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; } .aha-chat-lg__messages::-webkit-scrollbar { width: 0; } .aha-chat-lg__row { display: flex; align-items: flex-end; gap: 8px; } .aha-chat-lg__row--user { justify-content: flex-end; } .aha-chat-lg__row--bot { justify-content: flex-start; } .aha-chat-lg__avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent) 0%, #8fa7f7 100%); display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; align-self: flex-end; overflow: hidden; } .aha-chat-lg__avatar-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Chat bubbles */ .aha-chat-lg__bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: .78rem; line-height: 1.5; position: relative; } .aha-chat-lg__bubble--user { background: linear-gradient(135deg, var(--accent) 0%, #6b8ff7 100%); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 16px rgba(79, 110, 247, .35); } .aha-chat-lg__bubble--bot { background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .06); color: #333; border-bottom-left-radius: 4px; backdrop-filter: blur(10px); } .aha-chat-lg__bubble--status { background: rgba(79, 110, 247, .06); border-color: rgba(79, 110, 247, .15); color: rgba(60, 80, 140, .8); font-style: italic; font-size: .74rem; } .aha-chat-lg__bubble--success { background: rgba(76, 175, 130, .08); border: 1px solid rgba(76, 175, 130, .18); color: #1a7a42; } .aha-chat-lg__ts { display: block; text-align: right; font-size: .64rem; color: rgba(0, 0, 0, .28); margin-top: 4px; } .aha-chat-lg__bubble--user .aha-chat-lg__ts { color: rgba(255, 255, 255, .50); } /* Typing dots for status bubble */ .aha-chat-lg__typing { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; } .aha-chat-lg__typing span { width: 4px; height: 4px; border-radius: 50%; background: rgba(160, 180, 255, .7); animation: typingDot 1.2s ease-in-out infinite; } .aha-chat-lg__typing span:nth-child(2) { animation-delay: .2s; } .aha-chat-lg__typing span:nth-child(3) { animation-delay: .4s; } @keyframes typingDot { 0%, 80%, 100% { transform: scaleY(1); opacity: .5; } 40% { transform: scaleY(1.5); opacity: 1; } } /* ============================ PERSONAL: TIMELINE DOT VARIANTS ============================ */ .aha-timeline__dot--plain { background: rgba(0, 0, 0, .06); border: 2px solid rgba(0, 0, 0, .12); } .aha-timeline__dot--ring { background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(79, 110, 247, .30), 0 0 14px rgba(79, 110, 247, .55); width: 14px; height: 14px; } .aha-timeline__dot--full { background: var(--accent); border: 2px solid var(--accent-light); box-shadow: 0 0 0 5px rgba(79, 110, 247, .25), 0 0 20px rgba(79, 110, 247, .6); width: 18px; height: 18px; } /* ============================ PERSONAL: AHA PROGRESS DOTS (storytelling) ============================ */ .aha-progress-dots { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .35s ease; } .aha-progress-dots.is-visible { opacity: 1; pointer-events: auto; } .aha-progress-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .15); border: 1px solid rgba(0, 0, 0, .2); transition: background .3s, transform .3s, box-shadow .3s; } .aha-progress-dot.is-active { background: var(--accent); box-shadow: 0 0 8px rgba(79, 110, 247, .5); transform: scale(1.35); } .aha-progress-dot.is-done { background: rgba(79, 110, 247, .35); } /* (duplicate orbit/planet/emoji CSS removed — see primary block above) */ /* (duplicate liquid glass chat CSS removed — see primary block above) */ /* ============================ PERSONAL: SIDE-BY-SIDE CHAT LAYOUT (Blocks 4 & 5) ============================ */ .personal-aha__block--sidebyside { flex-direction: row !important; align-items: center !important; justify-content: center !important; text-align: left !important; /* Content width constraint — block itself remains full-width for GSAP */ gap: 48px; padding-left: 12vw; padding-right: 12vw; } /* Reversed variant — text on right gets right-aligned */ .personal-aha__block--reversed .personal-aha__text-col .personal-aha__eyebrow, .personal-aha__block--reversed .personal-aha__text-col .personal-aha__headline, .personal-aha__block--reversed .personal-aha__text-col .personal-aha__body { text-align: left; } .personal-aha__text-col { flex: 1 1 45%; max-width: 45%; } .personal-aha__text-col .personal-aha__eyebrow, .personal-aha__text-col .personal-aha__headline, .personal-aha__text-col .personal-aha__body { text-align: left; margin-left: 0; margin-right: 0; } .personal-aha__chat-col { flex: 1 1 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; } /* Static chat — no scroll, show all messages */ .aha-chat-lg--static .aha-chat-lg__messages { max-height: none; overflow-y: visible; } .personal-aha__chat-col .aha-chat-lg { max-width: 100%; width: 100%; } /* WhatsApp avatar — green background */ .aha-chat-lg__avatar--whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); } .aha-chat-lg__avatar--whatsapp img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Responsive: stack on mobile */ @media (max-width: 900px) { .personal-aha__block--sidebyside { flex-direction: column !important; max-width: 92vw; text-align: center !important; gap: 24px; } .personal-aha__text-col { flex: 1 1 100%; max-width: 100%; } .personal-aha__text-col .personal-aha__eyebrow, .personal-aha__text-col .personal-aha__headline, .personal-aha__text-col .personal-aha__body { text-align: center; } .personal-aha__chat-col { flex: 1 1 100%; max-width: 100%; } }