/* ============================== REGA - Meditation & Sleep App Complete Redesign v2 ============================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Deep calming palette with warmer tones */ --bg-deep: #0a0c1a; --bg-mid: #121629; --bg-surface: #1a1f3a; --bg-card: rgba(26, 31, 58, 0.7); /* Primary - soft lavender */ --lavender: #9f8fef; --lavender-soft: #b8aef5; --lavender-glow: rgba(159, 143, 239, 0.35); --lavender-dim: rgba(159, 143, 239, 0.12); /* Accent - gentle rose */ --rose: #e8a0bf; --rose-glow: rgba(232, 160, 191, 0.25); /* Accent - aurora */ --aurora: #6dd5c4; --aurora-glow: rgba(109, 213, 196, 0.2); /* Warm gold */ --gold: #f0c27a; --gold-soft: #f5d69e; /* Text */ --text: #d4d8e8; --text-dim: #8891ad; --text-bright: #eef0f7; --text-muted: #5c6480; /* Glass - lightweight, no backdrop-filter */ --glass-bg: rgba(17, 25, 54, 0.55); --glass-border: rgba(159, 143, 239, 0.08); --glass-hover: rgba(159, 143, 239, 0.06); /* Layout */ --radius: 1rem; --radius-lg: 1.5rem; --radius-xl: 2rem; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } html { font-size: 106.25%; /* 17px base for better readability */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Assistant', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-deep); color: var(--text); direction: rtl; overflow-x: hidden; /* fallback */ overflow-x: clip; /* prevent horizontal drag overflow */ min-height: 100vh; line-height: 1.7; } /* ===== MOBILE SAFETY / PERFORMANCE ===== */ html, body { width: 100%; overflow-x: hidden; /* fallback */ overflow-x: clip; /* prevent iOS horizontal rubber-banding revealing page edges */ } /* iOS Safari/Chrome can get janky with lots of fixed + blur + animations */ @media (max-width: 768px), (prefers-reduced-motion: reduce) { .ambient-bg { animation: none !important; } .stars-field { animation: none !important; } /* Decorative layers that can cause horizontal rubber-banding on iOS */ .nebula-cloud, .gradient-orb { animation: none !important; display: none !important; } /* Biggest perf offenders */ .aurora-container, .floating-orbs, .constellation-canvas { display: none !important; } } /* Low-power / data-saver mode (JS adds .reduced-fx on ) */ html.reduced-fx .ambient-bg, html.reduced-fx .stars-field, html.reduced-fx .nebula-cloud, html.reduced-fx .gradient-orb, html.reduced-fx .float-orb, html.reduced-fx .night-cloud, html.reduced-fx .sun, html.reduced-fx .sun-rays, html.reduced-fx .bird, html.reduced-fx .moon-body, html.reduced-fx .moon-glow { animation: none !important; } html.reduced-fx .star, html.reduced-fx .wave-bar { animation: none !important; } html.reduced-fx .shooting-star, html.reduced-fx .aurora-container, html.reduced-fx .floating-orbs, html.reduced-fx .constellation-canvas { display: none !important; } html.reduced-fx .nebula-cloud, html.reduced-fx .gradient-orb, html.reduced-fx .float-orb { filter: none !important; } html.reduced-fx * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; } .hidden { display: none !important; } /* ===== SKIP LINK (a11y) ===== */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: var(--lavender); color: white; padding: 0.75rem 1.5rem; border-radius: 0 0 var(--radius) var(--radius); z-index: 9999; font-weight: 600; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ===== FOCUS VISIBLE ===== */ :focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 4px; } /* Remove outline for mouse clicks */ :focus:not(:focus-visible) { outline: none; } /* ===== PAGE LOAD FADE ===== */ body { animation: pageIn 0.6s ease-out; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } /* ===== AMBIENT BACKGROUND ===== */ /* Magical night sky with stars, nebula, and aurora */ .ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse at top, #1a1f3a 0%, transparent 50%), radial-gradient(ellipse at bottom right, #1e2341 0%, transparent 50%), linear-gradient(to bottom, #0a0c1a 0%, #121629 40%, #1a1f3a 70%, #252a4a 100%); background-size: 100% 100%, 100% 100%, 100% 200%; animation: gradientShift 20s ease-in-out infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; } 50% { background-position: 0% 0%, 0% 0%, 0% 100%; } } /* Stars field container */ .stars-field { position: absolute; width: 100%; height: 100%; z-index: 1; } /* Individual star styling */ .star { position: absolute; background: white; border-radius: 50%; animation: twinkle 4s ease-in-out infinite; box-shadow: 0 0 2px white, 0 0 4px rgba(255, 255, 255, 0.5); } .star.bright { box-shadow: 0 0 4px white, 0 0 8px rgba(159, 143, 239, 0.6); } @keyframes twinkle { 0%, 100% { opacity: 0.4; transform: scale(1); filter: brightness(1); } 50% { opacity: 1; transform: scale(1.3); filter: brightness(1.5); } } /* Shooting stars */ .shooting-star { position: absolute; width: 2px; height: 2px; background: white; box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8); border-radius: 50%; animation: shootingStar 3s ease-out; } @keyframes shootingStar { 0% { transform: translateX(0) translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-400px) translateY(200px); opacity: 0; } } /* Nebula clouds */ .nebula-cloud { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.3; mix-blend-mode: screen; will-change: transform, opacity; } .nebula-1 { width: 600px; height: 400px; background: radial-gradient(ellipse at center, rgba(159, 143, 239, 0.4) 0%, rgba(232, 160, 191, 0.2) 40%, transparent 70%); top: 10%; right: -10%; animation-duration: 45s; } .nebula-2 { width: 500px; height: 500px; background: radial-gradient(circle at center, rgba(109, 213, 196, 0.3) 0%, rgba(159, 143, 239, 0.2) 50%, transparent 70%); bottom: 20%; left: -15%; animation-duration: 55s; animation-delay: -20s; } .nebula-3 { width: 400px; height: 300px; background: radial-gradient(ellipse at center, rgba(240, 194, 122, 0.2) 0%, rgba(232, 160, 191, 0.15) 50%, transparent 70%); top: 50%; left: 30%; animation-duration: 65s; animation-delay: -30s; } @keyframes cloudDrift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; } 25% { transform: translate(30px, -20px) scale(1.1); opacity: 0.4; } 50% { transform: translate(-20px, 30px) scale(0.9); opacity: 0.25; } 75% { transform: translate(-30px, -10px) scale(1.05); opacity: 0.35; } } .gradient-orb { position: absolute; border-radius: 50%; will-change: transform; opacity: 0.7; z-index: 2; } .orb-1 { width: 50vw; height: 50vw; max-width: 700px; max-height: 700px; background: radial-gradient(circle, rgba(159, 143, 239, 0.12) 0%, rgba(109, 213, 196, 0.05) 40%, transparent 70%); top: -15%; right: -10%; animation: orbDrift1 30s ease-in-out infinite; } .orb-2 { width: 45vw; height: 45vw; max-width: 600px; max-height: 600px; background: radial-gradient(circle, rgba(109, 213, 196, 0.06) 0%, transparent 70%); bottom: 10%; left: -15%; animation: orbDrift2 35s ease-in-out infinite; } .orb-3 { width: 35vw; height: 35vw; max-width: 500px; max-height: 500px; background: radial-gradient(circle, rgba(232, 160, 191, 0.05) 0%, transparent 70%); top: 40%; right: 20%; animation: orbDrift3 25s ease-in-out infinite; } @keyframes orbDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-30px, 20px) scale(1.05); } 66% { transform: translate(15px, -15px) scale(0.95); } } @keyframes orbDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(25px, -30px) scale(1.03); } } @keyframes orbDrift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, -20px); } } .stars-field { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 8% 15%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 22% 55%, rgba(255,255,255,0.4), transparent), radial-gradient(1.2px 1.2px at 48% 12%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 65% 38%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 78% 68%, rgba(255,255,255,0.4), transparent), radial-gradient(1.2px 1.2px at 92% 25%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 35% 82%, rgba(255,255,255,0.3), transparent), radial-gradient(1px 1px at 55% 92%, rgba(255,255,255,0.4), transparent); animation: starsTwinkle 8s ease-in-out infinite alternate; } @keyframes starsTwinkle { 0% { opacity: 0.4; } 100% { opacity: 0.9; } } /* ===== AURORA BOREALIS ===== */ .aurora-container { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .aurora-band { position: absolute; width: 200%; height: 180px; left: -50%; opacity: 0; filter: blur(60px); mix-blend-mode: screen; border-radius: 50%; animation: auroraPulse 12s ease-in-out infinite, auroraSway 20s ease-in-out infinite; } .aurora-band-1 { top: 5%; background: linear-gradient( 90deg, transparent 0%, rgba(109, 213, 196, 0.15) 15%, rgba(159, 143, 239, 0.2) 35%, rgba(109, 213, 196, 0.18) 55%, rgba(232, 160, 191, 0.1) 75%, transparent 100% ); animation-duration: 12s, 25s; height: 160px; } .aurora-band-2 { top: 12%; background: linear-gradient( 90deg, transparent 0%, rgba(159, 143, 239, 0.12) 20%, rgba(232, 160, 191, 0.15) 45%, rgba(109, 213, 196, 0.12) 70%, transparent 100% ); animation-duration: 15s, 30s; animation-delay: -4s, -8s; height: 140px; } .aurora-band-3 { top: 2%; background: linear-gradient( 90deg, transparent 0%, rgba(240, 194, 122, 0.08) 25%, rgba(109, 213, 196, 0.12) 50%, rgba(159, 143, 239, 0.1) 75%, transparent 100% ); animation-duration: 18s, 22s; animation-delay: -8s, -12s; height: 120px; } @keyframes auroraPulse { 0%, 100% { opacity: 0; } 15% { opacity: 0.6; } 50% { opacity: 0.9; } 85% { opacity: 0.5; } } @keyframes auroraSway { 0%, 100% { transform: translateX(0) scaleY(1); } 25% { transform: translateX(8%) scaleY(1.2); } 50% { transform: translateX(-5%) scaleY(0.8); } 75% { transform: translateX(6%) scaleY(1.1); } } /* ===== CONSTELLATION CANVAS ===== */ .constellation-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0.5; } /* ===== FLOATING LIGHT ORBS ===== */ .floating-orbs { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .float-orb { position: absolute; border-radius: 50%; opacity: 0; animation: floatOrb 20s ease-in-out infinite; } .float-orb-1 { width: 8px; height: 8px; background: radial-gradient(circle, rgba(159, 143, 239, 0.9), rgba(159, 143, 239, 0) 70%); box-shadow: 0 0 12px 4px rgba(159, 143, 239, 0.3); top: 25%; left: 15%; animation-duration: 18s; animation-delay: 0s; } .float-orb-2 { width: 6px; height: 6px; background: radial-gradient(circle, rgba(109, 213, 196, 0.9), rgba(109, 213, 196, 0) 70%); box-shadow: 0 0 10px 3px rgba(109, 213, 196, 0.3); top: 40%; right: 20%; animation-duration: 22s; animation-delay: -5s; } .float-orb-3 { width: 10px; height: 10px; background: radial-gradient(circle, rgba(232, 160, 191, 0.8), rgba(232, 160, 191, 0) 70%); box-shadow: 0 0 14px 5px rgba(232, 160, 191, 0.25); top: 60%; left: 70%; animation-duration: 25s; animation-delay: -10s; } .float-orb-4 { width: 5px; height: 5px; background: radial-gradient(circle, rgba(240, 194, 122, 0.9), rgba(240, 194, 122, 0) 70%); box-shadow: 0 0 8px 3px rgba(240, 194, 122, 0.25); top: 15%; right: 35%; animation-duration: 20s; animation-delay: -3s; } .float-orb-5 { width: 7px; height: 7px; background: radial-gradient(circle, rgba(159, 143, 239, 0.7), rgba(109, 213, 196, 0) 70%); box-shadow: 0 0 10px 4px rgba(159, 143, 239, 0.2); bottom: 30%; left: 40%; animation-duration: 24s; animation-delay: -8s; } @keyframes floatOrb { 0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); } 10% { opacity: 0.7; transform: translate(10px, -15px) scale(1); } 30% { opacity: 0.9; transform: translate(-20px, -40px) scale(1.2); } 50% { opacity: 0.6; transform: translate(15px, -70px) scale(0.9); } 70% { opacity: 0.8; transform: translate(-10px, -100px) scale(1.1); } 90% { opacity: 0.3; transform: translate(5px, -130px) scale(0.7); } } /* ===== SCROLL REVEAL ===== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .benefits-grid .reveal:nth-child(2) { transition-delay: 0.12s; } .benefits-grid .reveal:nth-child(3) { transition-delay: 0.24s; } .sessions-grid .reveal:nth-child(2) { transition-delay: 0.06s; } .sessions-grid .reveal:nth-child(3) { transition-delay: 0.12s; } .sessions-grid .reveal:nth-child(4) { transition-delay: 0.18s; } .sessions-grid .reveal:nth-child(5) { transition-delay: 0.24s; } .sessions-grid .reveal:nth-child(6) { transition-delay: 0.30s; } .testimonials-grid .reveal:nth-child(2) { transition-delay: 0.12s; } .testimonials-grid .reveal:nth-child(3) { transition-delay: 0.24s; } .pulse-dot { width: 6px; height: 6px; background: var(--aurora); border-radius: 50%; box-shadow: 0 0 6px var(--aurora-glow); animation: pulseGlow 3s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 4px rgba(109, 213, 196, 0.3); opacity: 0.7; } 50% { box-shadow: 0 0 10px rgba(109, 213, 196, 0.6); opacity: 1; } } /* Night clouds — wispy, translucent dark clouds */ .night-cloud { position: absolute; will-change: transform, opacity; z-index: 3; } .nc-part { position: absolute; /* Lighter, more visible night clouds (still subtle) */ background: rgba(78, 92, 160, 0.26); border-radius: 50%; box-shadow: 0 0 60px 28px rgba(159, 143, 239, 0.12), 0 0 40px 18px rgba(30, 35, 65, 0.22); } .night-cloud-1 { top: 10%; right: 5%; } .night-cloud-1 .nc-part:nth-child(1) { width: 180px; height: 70px; top: 10px; left: 0; border-radius: 50px; } .night-cloud-1 .nc-part:nth-child(2) { width: 120px; height: 100px; top: -30px; left: 50px; } .night-cloud-1 .nc-part:nth-child(3) { width: 140px; height: 60px; top: 5px; left: 100px; border-radius: 45px; } .night-cloud-2 { top: 20%; left: 15%; opacity: 0.5; } .night-cloud-2 .nc-part:nth-child(1) { width: 150px; height: 60px; top: 8px; left: 0; border-radius: 40px; } .night-cloud-2 .nc-part:nth-child(2) { width: 100px; height: 80px; top: -20px; left: 35px; } .night-cloud-2 .nc-part:nth-child(3) { width: 110px; height: 50px; top: 5px; left: 70px; border-radius: 35px; } .night-cloud-3 { top: 6%; right: 35%; opacity: 0.4; } .night-cloud-3 .nc-part:nth-child(1) { width: 120px; height: 50px; top: 5px; left: 0; border-radius: 35px; } .night-cloud-3 .nc-part:nth-child(2) { width: 80px; height: 70px; top: -18px; left: 30px; } /* Night clouds spread across the full page */ .night-cloud-4 { top: 35%; right: 10%; opacity: 0.45; } .night-cloud-4 .nc-part:nth-child(1) { width: 200px; height: 80px; top: 12px; left: 0; border-radius: 50px; } .night-cloud-4 .nc-part:nth-child(2) { width: 130px; height: 110px; top: -28px; left: 55px; } .night-cloud-4 .nc-part:nth-child(3) { width: 160px; height: 70px; top: 8px; left: 100px; border-radius: 45px; } .night-cloud-5 { top: 55%; left: 10%; opacity: 0.35; } .night-cloud-5 .nc-part:nth-child(1) { width: 160px; height: 65px; top: 10px; left: 0; border-radius: 40px; } .night-cloud-5 .nc-part:nth-child(2) { width: 100px; height: 85px; top: -20px; left: 40px; } .night-cloud-6 { top: 72%; right: 20%; opacity: 0.3; } .night-cloud-6 .nc-part:nth-child(1) { width: 180px; height: 75px; top: 14px; left: 0; border-radius: 48px; } .night-cloud-6 .nc-part:nth-child(2) { width: 120px; height: 100px; top: -25px; left: 45px; } .night-cloud-6 .nc-part:nth-child(3) { width: 140px; height: 60px; top: 8px; left: 90px; border-radius: 40px; } /* Hide night clouds in day mode */ body.day-mode .night-cloud { display: none; } /* ===== HERO ===== */ .hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3rem 2rem 1.5rem; position: relative; z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 680px; } .trust-badge { /* floating text (no pill) with laurels */ --badge-laurel-size: 56px; --badge-mid-width: 22ch; display: grid; grid-template-columns: var(--badge-laurel-size) var(--badge-mid-width) var(--badge-laurel-size); align-items: center; justify-content: center; column-gap: 0; margin: 0 auto 1.4rem; background: transparent; padding: 0; border-radius: 0; font-size: 0.92rem; border: none; color: rgba(255, 255, 255, 0.86); letter-spacing: 0.25px; text-shadow: 0 10px 26px rgba(0,0,0,0.30); } .badge-text { /* Fixed width so the laurels never shift when the rotating text changes */ width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding-inline: 0.1rem; } .badge-rotate { display: block; width: 100%; font-weight: 650; color: rgba(255, 255, 255, 0.92); transition: opacity 220ms ease, transform 220ms ease; line-height: 1.15; } .badge-line { display: block; } .badge-rotate.is-out { opacity: 0; transform: translateY(2px); } .badge-laurel { width: var(--badge-laurel-size, 56px); height: var(--badge-laurel-size, 56px); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; opacity: 0.95; filter: drop-shadow(0 14px 34px rgba(0,0,0,0.30)) drop-shadow(0 0 26px rgba(255,255,255,0.10)); } .badge-laurel-img { width: 100%; height: 100%; object-fit: contain; display: block; /* Make laurels white regardless of source color */ image-rendering: -webkit-optimize-contrast; filter: brightness(0) invert(1); opacity: 0.95; } /* Tighter placement around text */ .badge-laurel--left { justify-self: end; } .badge-laurel--right { justify-self: start; } /* Laurels orientation */ .badge-laurel--left .badge-laurel-img, .badge-laurel--right .badge-laurel-img { transform: translateY(1px); transform-origin: 50% 50%; } body.day-mode .trust-badge { color: rgba(255, 255, 255, 0.92); text-shadow: 0 10px 26px rgba(0,0,0,0.18); } body.day-mode .badge-rotate { color: rgba(255, 255, 255, 0.96); } body.day-mode .badge-laurel { opacity: 0.9; filter: drop-shadow(0 10px 24px rgba(120, 140, 180, 0.22)); } body.day-mode .badge-laurel-img { filter: brightness(0) invert(1); } @media (max-width: 520px) { .trust-badge { font-size: 0.80rem; --badge-laurel-size: 40px; --badge-mid-width: 18ch; grid-template-columns: var(--badge-laurel-size) var(--badge-mid-width) var(--badge-laurel-size); column-gap: 0; } .badge-text { padding-inline: 0.05rem; } } .hero h1 { font-size: clamp(3.2rem, 9vw, 5.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 1rem; background: linear-gradient(135deg, #fff 0%, var(--lavender-soft) 40%, var(--rose) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .subtitle { font-size: clamp(1.15rem, 2.8vw, 1.5rem); font-weight: 300; color: var(--text-dim); margin-bottom: 0.5rem; } .description { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.25rem; } .hero-cta { display: inline-block; background: linear-gradient(135deg, var(--lavender), #7c6bd6); color: white; text-decoration: none; padding: 1rem 2.75rem; border-radius: 50px; font-size: 1.1rem; font-weight: 600; transition: transform 0.25s var(--ease-spring), box-shadow 0.3s var(--ease); box-shadow: 0 4px 24px var(--lavender-glow), 0 0 0 0 transparent; position: relative; overflow: hidden; } .hero-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1)); opacity: 0; transition: opacity 0.3s; } .hero-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 32px var(--lavender-glow), 0 0 60px rgba(159, 143, 239, 0.15); } .hero-cta:hover::after { opacity: 1; } .hero-cta:active { transform: translateY(0) scale(0.98); } /* Hero Moon - gentle breathing glow */ .hero-moon { position: absolute; top: 12%; left: 8%; z-index: 1; pointer-events: none; will-change: transform, opacity; transition: opacity 0.1s linear; } .moon-body { width: 120px; height: 120px; background: radial-gradient(circle at 35% 35%, #fef7e7 0%, #fef3c7 30%, #f0c27a 100%), radial-gradient(circle at 70% 70%, transparent 0%, rgba(159, 143, 239, 0.1) 100%); border-radius: 50%; box-shadow: 0 0 80px rgba(240, 194, 122, 0.4), 0 0 120px rgba(240, 194, 122, 0.2), 0 0 160px rgba(159, 143, 239, 0.15), inset -15px -15px 30px rgba(0,0,0,0.1), inset 10px 10px 30px rgba(255,255,255,0.2); animation: moonBreath 12s ease-in-out infinite; } .moon-glow { position: absolute; inset: -50px; background: radial-gradient(circle, rgba(240, 194, 122, 0.15), transparent 50%), radial-gradient(circle, rgba(159, 143, 239, 0.08), transparent 70%); border-radius: 50%; animation: moonGlowPulse 6s ease-in-out infinite; } @keyframes moonGlowPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes moonBreath { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; } 50% { transform: translateY(-10px) scale(1.03); opacity: 1; } } /* ===== SOCIAL PROOF ===== */ .social-proof { padding: 2.5rem 0 4rem; direction: rtl; } .social-proof-shell { position: relative; } .social-proof-glass { position: relative; border-radius: 32px; padding: 2.75rem 2.6rem 4.25rem; /* iOS-style “Apple glass” (ultra transparent) */ background: rgba(255, 255, 255, 0.028); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 54px rgba(8, 12, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.05); backdrop-filter: blur(42px) saturate(185%); -webkit-backdrop-filter: blur(42px) saturate(185%); overflow: hidden; /* Improve contrast inside this glass block */ --proof-text: rgba(255, 255, 255, 0.98); --proof-text-dim: rgba(255, 255, 255, 0.82); } .social-proof-glass .section-title { color: var(--proof-text); text-shadow: 0 6px 18px rgba(12, 18, 32, 0.35); } .social-proof-glass .section-subtitle { color: var(--proof-text-dim); } .social-proof-glass::before { content: ''; position: absolute; inset: 0; /* Night sky background + specular highlights */ background: url('assets/backgrounds/socialproof-night-sky.jpg') center / cover no-repeat, radial-gradient(1200px 600px at 18% 10%, rgba(255, 255, 255, 0.22), transparent 60%), radial-gradient(900px 520px at 86% 86%, rgba(255, 255, 255, 0.12), transparent 55%), radial-gradient(700px 420px at 70% 18%, rgba(255, 255, 255, 0.08), transparent 52%); opacity: 0.55; pointer-events: none; } .social-proof-glass::after { content: ''; position: absolute; inset: 0; /* Thin diagonal sheen */ background: linear-gradient( 120deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03) 42%, transparent 65% ); opacity: 0.35; pointer-events: none; } .social-proof-header { text-align: center; margin-bottom: 2rem; position: relative; z-index: 1; } .proof-live-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.55rem 1.3rem; margin: 0 auto 1.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--proof-text); font-size: 0.92rem; letter-spacing: 0.2px; box-shadow: 0 14px 40px rgba(8, 12, 22, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.22); backdrop-filter: blur(28px) saturate(175%); -webkit-backdrop-filter: blur(28px) saturate(175%); } .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); flex-shrink: 0; animation: dotPulse 2s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); } 50% { opacity: 0.4; box-shadow: 0 0 12px rgba(74, 222, 128, 0.9); } } .pill-text { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; } .proof-title-line { display: inline; } /* Stars (Headspace-style, no numeric rating) */ .proof-stars { display: inline-flex; align-items: center; justify-content: center; gap: 0.22rem; line-height: 1; } .proof-stars .rating-star { /* reset global `.star` (background sky dots) styles */ position: static; inset: auto; width: auto; height: auto; display: inline-block; background: none; border-radius: 0; box-shadow: none; animation: none; transform: none; filter: none; font-size: 18px; line-height: 1; color: #fbbf24; /* warm gold */ } /* 4.6/5: show an "almost full" last star (Headspace vibe) */ .proof-stars .rating-star.is-part { position: relative; color: rgba(251, 191, 36, 0.22); } .proof-stars .rating-star.is-part::before { content: '★'; position: absolute; inset: 0; width: 92%; overflow: hidden; color: #fbbf24; } .proof-floater { position: absolute; width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 24px rgba(14, 20, 42, 0.25); opacity: 0.92; animation: floaterDrift 12s ease-in-out infinite; } .proof-floater img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; } .floater-1 { top: -0.4rem; inset-inline-start: 6%; width: 48px; height: 48px; animation-delay: -2s; } .floater-2 { top: 1.3rem; inset-inline-end: 10%; width: 68px; height: 68px; animation-delay: -6s; } .floater-3 { top: 56%; inset-inline-start: -1%; width: 56px; height: 56px; animation-delay: -4s; } .floater-4 { top: 62%; inset-inline-end: -2%; width: 64px; height: 64px; animation-delay: -8s; } .floater-5 { bottom: -1.2rem; inset-inline-start: 22%; width: 52px; height: 52px; animation-delay: -10s; } @keyframes floaterDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.03); } } .proof-stats { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 1.4rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.25); text-align: center; position: relative; z-index: 1; } .proof-stat { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; justify-content: center; min-height: 110px; } .proof-stat-value { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; color: var(--proof-text); text-shadow: 0 10px 20px rgba(8, 14, 30, 0.35); } .proof-stat-label { font-size: 0.95rem; color: var(--proof-text-dim); max-width: 12rem; } .proof-stat-sub { font-size: 0.78rem; color: var(--proof-text-dim); opacity: 0.7; margin-top: 0.15rem; } @media (max-width: 900px) { .proof-stats { grid-template-columns: repeat(2, minmax(160px, 1fr)); } .proof-floater { width: 54px; height: 54px; } } @media (max-width: 640px) { .social-proof { padding: 1.6rem 0 2.2rem; } .social-proof-glass { padding: 1.8rem 1.25rem 2.1rem; border-radius: 28px; } .social-proof-header { margin-bottom: 1.2rem; } .proof-live-pill { margin-bottom: 0.9rem; font-size: 0.86rem; } .social-proof-glass .section-title { line-height: 1.1; margin-bottom: 0.55rem; } .proof-title-line { display: block; } .social-proof-glass .section-subtitle { font-size: 0.98rem; margin-bottom: 0.2rem; } .proof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.9rem; margin-top: 1.2rem; padding-top: 1.1rem; } .proof-stat { min-height: 88px; gap: 0.25rem; } .proof-stat-value { font-size: 1.55rem; } .proof-stat-label { font-size: 0.86rem; } .proof-stat-sub { font-size: 0.74rem; margin-top: 0; } /* avatars removed */ } /* ===== SECTION SHARED ===== */ section { position: relative; z-index: 1; } .section-title { text-align: center; font-size: clamp(1.8rem, 4.5vw, 2.5rem); font-weight: 600; color: var(--text-bright); margin-bottom: 0.75rem; } .section-subtitle { text-align: center; color: var(--text-dim); font-size: 1.12rem; margin-bottom: 1.5rem; } /* ===== BENEFITS ===== */ .benefits { padding: 2rem 0 3.5rem; } .benefits .section-title { margin-bottom: 2.5rem; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .benefit-card { background: rgba(22, 27, 52, 0.92); border: 1px solid rgba(159, 143, 239, 0.12); border-radius: 1.25rem; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .benefit-card:hover { transform: scale(1.025); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(159, 143, 239, 0.1); } .benefit-cover { position: relative; width: 100%; height: 220px; overflow: hidden; } .benefit-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.55s var(--ease); } /* Experts photo: crop out title text, blend light bg into dark card */ .benefit-card:nth-child(2) .benefit-cover img { object-position: center 55%; } .benefit-card:nth-child(2) .benefit-cover::after { height: 100%; background: linear-gradient(to top, var(--bg-card) 0%, rgba(26, 31, 58, 0.55) 35%, rgba(26, 31, 58, 0.25) 55%, rgba(26, 31, 58, 0.65) 100%); } .benefit-card:hover .benefit-cover img { transform: scale(1.06); } /* Soft gradient fade from image into card body */ .benefit-cover::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 62%; background: linear-gradient(to top, var(--bg-card) 0%, rgba(26, 31, 58, 0.35) 35%, transparent 100%); pointer-events: none; } /* Numa cover: same dimensions, image will be swapped later */ .benefit-cover--numa { background: linear-gradient(135deg, #2a1f4e 0%, #1a1f3a 55%, #1e2847 100%); } .benefit-cover--numa img { object-fit: contain; padding: 1.5rem; } .benefit-body { padding: 1.25rem 1.75rem 2rem; text-align: center; flex: 1; } .benefit-card h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.6rem; color: var(--text-bright); } .benefit-card p { color: var(--text-dim); font-size: 1.02rem; line-height: 1.65; } /* ===== APP SHOWCASE ===== */ .app-showcase { padding: 5rem 0; } .showcase-carousel { margin-top: 2.25rem; } .showcase-shell { position: relative; display: flex; justify-content: center; align-items: center; padding: 0 3.75rem; } .showcase-phone { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .showcase-phone:focus-visible { outline: 2px solid rgba(159, 143, 239, 0.6); outline-offset: 8px; border-radius: 36px; } .showcase-phone .phone-frame { /* Keep a consistent, “natural iPhone” silhouette (don’t stretch per screenshot). */ width: min(320px, 84vw); height: min(640px, 78vh); border-radius: 34px; padding: 10px; border-color: rgba(159, 143, 239, 0.35); box-shadow: 0 18px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(159, 143, 239, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .showcase-phone .phone-screen { border-radius: 26px; } .showcase-phone .phone-notch { width: 110px; height: 26px; border-radius: 0 0 16px 16px; } .showcase-viewport { width: 100%; height: 100%; overflow: hidden; direction: ltr; touch-action: pan-y; } .showcase-track { width: 100%; height: 100%; display: flex; transition: transform 0.45s var(--ease); will-change: transform; } .showcase-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .showcase-slide .screen-placeholder { padding: 2rem; gap: 0.9rem; } .showcase-slide .screen-placeholder span { font-size: 0.95rem; } .showcase-slide .screen-placeholder .placeholder-sub { font-size: 0.75rem; } .showcase-meta { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .showcase-label { font-size: 0.95rem; color: var(--text-dim); font-weight: 500; text-align: center; } .showcase-dots { display: flex; gap: 0.6rem; align-items: center; justify-content: center; } .showcase-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(159, 143, 239, 0.3); background: rgba(15, 18, 37, 0.8); padding: 0; cursor: pointer; transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .showcase-dot.is-active { background: var(--lavender); border-color: var(--lavender); transform: scale(1.15); box-shadow: 0 0 14px rgba(159, 143, 239, 0.45); } .showcase-dot:focus-visible { outline: 2px solid rgba(159, 143, 239, 0.6); outline-offset: 3px; } .showcase-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(15, 18, 37, 0.85); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .showcase-nav::before { content: ""; display: block; width: 12px; height: 12px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; } .showcase-prev { left: 0; } .showcase-prev::before { transform: rotate(135deg); } .showcase-next { right: 0; } .showcase-next::before { transform: rotate(-45deg); } /* Day mode: nav arrows must be visible on the light sky */ body.day-mode .showcase-nav { background: rgba(255, 255, 255, 0.55); border-color: rgba(120, 140, 180, 0.28); color: rgba(31, 42, 87, 0.88); box-shadow: 0 10px 26px rgba(120, 110, 90, 0.12); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); } body.day-mode .showcase-nav:not(:disabled):hover { border-color: rgba(31, 42, 87, 0.32); box-shadow: 0 14px 34px rgba(120, 110, 90, 0.16); } .showcase-nav:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .showcase-nav:not(:disabled):hover { transform: translateY(-50%) translateY(-2px); border-color: rgba(159, 143, 239, 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .showcase-nav:focus-visible { outline: 2px solid rgba(159, 143, 239, 0.6); outline-offset: 3px; } /* RTL: keep showcase arrows in their physical left/right positions (matches user expectation). */ .phone-mockup { flex: 0 0 auto; text-align: center; transition: transform 0.4s var(--ease); } .phone-mockup:hover { transform: translateY(-8px); } .phone-mockup.featured { transform: scale(1.08); z-index: 2; } .phone-mockup.featured:hover { transform: scale(1.08) translateY(-8px); } .phone-frame { width: 200px; height: 400px; background: linear-gradient(160deg, #1e2340, #151930); border: 2px solid rgba(159, 143, 239, 0.2); border-radius: 28px; padding: 8px; position: relative; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .phone-mockup.featured .phone-frame { border-color: rgba(159, 143, 239, 0.35); box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(159, 143, 239, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; background: #0a0c1a; border-radius: 0 0 14px 14px; z-index: 3; } .phone-screen { width: 100%; height: 100%; background: linear-gradient(180deg, #0f1225 0%, #181d3a 50%, #1a1f3a 100%); border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .phone-screenshot { width: 100%; height: 100%; object-fit: cover; display: block; } /* Use this to show the screenshot larger inside the phone (may crop slightly). */ .phone-screenshot--contain { object-fit: cover; } /* Sleep insights screen: keep the status/header area visible while still filling the mock. */ .phone-screenshot--sleep-insights { object-position: 50% 20%; } .screen-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; text-align: center; color: var(--text-dim); } .screen-placeholder svg { width: 40px; height: 40px; opacity: 0.4; color: var(--lavender); } .screen-placeholder span { font-size: 0.85rem; font-weight: 600; color: var(--text); } .screen-placeholder .placeholder-sub { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); background: var(--lavender-dim); padding: 0.25rem 0.75rem; border-radius: 20px; border: 1px solid rgba(159, 143, 239, 0.15); } .phone-label { margin-top: 1rem; font-size: 0.88rem; color: var(--text-dim); font-weight: 500; } /* Stagger showcase reveal */ .showcase-carousel.reveal { transition-delay: 0.1s; } /* ===== SESSIONS / BREATHING ===== */ .sessions { padding: 1.5rem 0 2.5rem; } /* Breathing exercises grid */ /* Breathing carousel (single-item) */ .breathing-carousel-shell { position: relative; max-width: 480px; margin: 0 auto; } .breathing-single { display: flex; justify-content: center; align-items: center; width: 100%; } .breathing-single .breathing-item { flex: 0 0 auto; width: auto; margin: 0 auto; text-align: center; } .breathing-single .phone-mockup { margin: 0 auto; } .breathing-single .phone-frame { width: 280px; height: 560px; border-radius: 36px; padding: 10px; } .breathing-single .phone-notch { width: 100px; height: 26px; } .breathing-single .phone-screen { border-radius: 28px; } .breathing-carousel-viewport { overflow: hidden; touch-action: pan-y; } .breathing-carousel-track { display: flex; transition: transform 0.45s var(--ease); will-change: transform; } .breathing-item { text-align: center; flex: 0 0 100%; width: 100%; } .breathing-nav { top: 40%; } .breathing-dots { display: flex; gap: 0.6rem; align-items: center; justify-content: center; margin-top: 1rem; } .breathing-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(159, 143, 239, 0.3); background: rgba(15, 18, 37, 0.8); padding: 0; cursor: pointer; transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease); } .breathing-dot.is-active { background: var(--lavender); border-color: var(--lavender); transform: scale(1.15); box-shadow: 0 0 14px rgba(159, 143, 239, 0.45); } body.day-mode .breathing-dot { border-color: rgba(120, 140, 180, 0.35); background: rgba(255, 255, 255, 0.6); } body.day-mode .breathing-dot.is-active { background: var(--lavender); border-color: var(--lavender); } .breathing-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1rem 1.25rem; gap: 0.5rem; position: relative; } /* Video version (plays inside the phone mockup) */ .breathing-screen--video { gap: 0.85rem; padding: 0; overflow: hidden; } .breathing-screen--video .breathing-title { position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 1rem; color: rgba(255,255,255,0.92); text-shadow: 0 8px 30px rgba(0,0,0,0.55); } .breathing-video-wrap { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; border: none; background: rgba(0,0,0,0.18); overflow: hidden; box-shadow: none; } .breathing-video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #000; } .breathing-video-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.95); cursor: pointer; box-shadow: 0 18px 46px rgba(0,0,0,0.35); backdrop-filter: blur(8px); } .breathing-video-play svg { width: 26px; height: 26px; } .breathing-video-wrap.is-playing .breathing-video-play { opacity: 0; pointer-events: none; } .breathing-circle-wrap { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 0.25rem 0; position: relative; --breathing-bg: linear-gradient(180deg, rgba(18, 26, 44, 0.95) 0%, rgba(21, 35, 64, 0.98) 55%, rgba(18, 26, 44, 0.95) 100%); --breathing-border: rgba(120, 155, 220, 0.2); --breathing-title: #E7EDFF; --breathing-text: rgba(225, 233, 255, 0.9); --breathing-accent: #7fb5ff; --breathing-accent-strong: #5f97f2; --breathing-circle: radial-gradient(circle at 30% 30%, rgba(160, 200, 255, 0.7) 0%, rgba(120, 170, 255, 0.35) 55%, transparent 75%); --breathing-circle-expanded: radial-gradient(circle at 30% 30%, rgba(190, 220, 255, 0.85) 0%, rgba(130, 175, 255, 0.5) 60%, transparent 80%); --breathing-circle-border: rgba(140, 190, 255, 0.55); --breathing-circle-glow: rgba(140, 190, 255, 0.35); --breathing-orb: rgba(195, 225, 255, 0.9); --breathing-particle: rgba(200, 225, 255, 0.7); --breathing-btn-bg: linear-gradient(135deg, rgba(127, 181, 255, 0.9), rgba(95, 151, 242, 0.95)); --breathing-btn-shadow: rgba(95, 151, 242, 0.35); --breathing-btn-text: #fff; background: var(--breathing-bg) !important; border: 1px solid var(--breathing-border); box-shadow: 0 18px 40px rgba(7, 12, 28, 0.35); } .breathing-title { font-size: 0.85rem; font-weight: 600; color: var(--breathing-title); letter-spacing: 0.3px; } .breathing-circle-wrap { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 0.25rem 0; position: relative; } .breathing-circle-wrap::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle at 22% 30%, var(--breathing-particle) 0 2px, transparent 3px), radial-gradient(circle at 78% 26%, var(--breathing-particle) 0 2px, transparent 3px), radial-gradient(circle at 28% 78%, var(--breathing-particle) 0 1.5px, transparent 3px), radial-gradient(circle at 72% 70%, var(--breathing-particle) 0 1.5px, transparent 3px); opacity: 0.55; filter: blur(0.2px); animation: breathing-drift 10s ease-in-out infinite; pointer-events: none; } .breathing-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--breathing-circle); background-size: 140% 140%; border: 2px solid var(--breathing-circle-border); box-shadow: 0 0 22px var(--breathing-circle-glow); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out; transform: scale(1); position: relative; animation: breathing-pulse 6.5s ease-in-out infinite, breathing-shift 12s ease-in-out infinite; } .breathing-circle::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%); opacity: 0.6; filter: blur(6px); animation: breathing-halo 8s ease-in-out infinite; } .breathing-circle::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: linear-gradient( 135deg, transparent 30%, var(--breathing-orb) 50%, transparent 70% ); opacity: 0; filter: blur(3px); animation: breathing-shimmer 6s ease-in-out infinite; } .breathing-circle.expanded { transform: scale(1.85); background: var(--breathing-circle-expanded); box-shadow: 0 0 32px var(--breathing-circle-glow), 0 0 60px var(--breathing-circle-glow); } /* Box Breath: square shape */ .breathing-square { border-radius: 15%; } .breathing-square::before { border-radius: 15%; } .breathing-square::after { border-radius: 15%; } .breathing-square-wrap::before { border-radius: 15%; } .breathing-phase { font-size: 0.75rem; color: var(--breathing-text); font-weight: 400; min-height: 1.2em; } .breathing-timer { font-size: 1.1rem; font-weight: 200; color: var(--breathing-text); font-variant-numeric: tabular-nums; letter-spacing: 1px; } .breathing-start-btn { background: var(--breathing-btn-bg); color: var(--breathing-btn-text); border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.4rem 1.5rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s; margin-top: 0.25rem; } .breathing-start-btn:hover { transform: scale(1.05); box-shadow: 0 6px 18px var(--breathing-btn-shadow); } .breathing-start-btn:active { transform: scale(0.96); } .breathing-start-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; } .breathing-start-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .breathing-benefit { margin-top: 0.8rem; font-size: 0.95rem; font-weight: 500; color: var(--text); opacity: 0.9; max-width: 240px; margin-left: auto; margin-right: auto; line-height: 1.45; } .breathing-screen[data-breathing="stress"] { --breathing-bg: linear-gradient(180deg, rgba(16, 32, 38, 0.95) 0%, rgba(18, 46, 58, 0.98) 55%, rgba(12, 30, 36, 0.95) 100%); --breathing-border: rgba(120, 200, 210, 0.25); --breathing-title: #DFF7F8; --breathing-text: rgba(215, 245, 246, 0.9); --breathing-accent: #7bd7d5; --breathing-accent-strong: #54bfc1; --breathing-circle: radial-gradient(circle at 35% 30%, rgba(145, 238, 230, 0.7) 0%, rgba(90, 196, 190, 0.35) 55%, transparent 75%); --breathing-circle-expanded: radial-gradient(circle at 35% 30%, rgba(175, 245, 238, 0.85) 0%, rgba(110, 210, 204, 0.45) 60%, transparent 80%); --breathing-circle-border: rgba(120, 220, 215, 0.55); --breathing-circle-glow: rgba(120, 220, 215, 0.35); --breathing-orb: rgba(200, 255, 250, 0.9); --breathing-particle: rgba(175, 240, 235, 0.7); --breathing-btn-bg: linear-gradient(135deg, rgba(123, 215, 213, 0.95), rgba(84, 191, 193, 0.95)); --breathing-btn-shadow: rgba(84, 191, 193, 0.35); } .breathing-screen[data-breathing="sleep"] { --breathing-bg: linear-gradient(180deg, rgba(22, 18, 56, 0.98) 0%, rgba(30, 24, 76, 0.98) 55%, rgba(18, 16, 44, 0.95) 100%); --breathing-border: rgba(150, 140, 240, 0.25); --breathing-title: #ECE7FF; --breathing-text: rgba(232, 227, 255, 0.9); --breathing-accent: #b7a6ff; --breathing-accent-strong: #8d7cf4; --breathing-circle: radial-gradient(circle at 30% 30%, rgba(190, 175, 255, 0.8) 0%, rgba(130, 120, 220, 0.4) 55%, transparent 78%); --breathing-circle-expanded: radial-gradient(circle at 30% 30%, rgba(205, 190, 255, 0.9) 0%, rgba(150, 135, 235, 0.5) 60%, transparent 80%); --breathing-circle-border: rgba(165, 150, 240, 0.55); --breathing-circle-glow: rgba(165, 150, 240, 0.35); --breathing-orb: rgba(220, 210, 255, 0.9); --breathing-particle: rgba(200, 190, 255, 0.7); --breathing-btn-bg: linear-gradient(135deg, rgba(183, 166, 255, 0.95), rgba(141, 124, 244, 0.95)); --breathing-btn-shadow: rgba(141, 124, 244, 0.35); } .breathing-screen[data-breathing="focus"] { --breathing-bg: linear-gradient(180deg, rgba(34, 29, 20, 0.95) 0%, rgba(52, 42, 24, 0.98) 55%, rgba(28, 24, 18, 0.95) 100%); --breathing-border: rgba(240, 200, 120, 0.25); --breathing-title: #FFF3D6; --breathing-text: rgba(255, 241, 214, 0.9); --breathing-accent: #f4c97a; --breathing-accent-strong: #e1a84f; --breathing-circle: radial-gradient(circle at 30% 30%, rgba(255, 214, 140, 0.75) 0%, rgba(230, 170, 90, 0.4) 55%, transparent 78%); --breathing-circle-expanded: radial-gradient(circle at 30% 30%, rgba(255, 228, 170, 0.85) 0%, rgba(240, 185, 115, 0.5) 60%, transparent 80%); --breathing-circle-border: rgba(245, 200, 120, 0.55); --breathing-circle-glow: rgba(245, 200, 120, 0.35); --breathing-orb: rgba(255, 231, 186, 0.9); --breathing-particle: rgba(255, 214, 150, 0.75); --breathing-btn-bg: linear-gradient(135deg, rgba(244, 201, 122, 0.95), rgba(225, 168, 79, 0.95)); --breathing-btn-shadow: rgba(225, 168, 79, 0.35); } @keyframes breathing-pulse { 0%, 100% { box-shadow: 0 0 18px var(--breathing-circle-glow); } 50% { box-shadow: 0 0 30px var(--breathing-circle-glow); } } @keyframes breathing-shift { 0%, 100% { background-position: 20% 30%; } 50% { background-position: 70% 80%; } } @keyframes breathing-halo { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.8; } } @keyframes breathing-shimmer { 0%, 100% { opacity: 0; transform: rotate(0deg); } 40% { opacity: 0.45; } 50% { opacity: 0.55; transform: rotate(60deg); } 60% { opacity: 0.45; } 100% { opacity: 0; transform: rotate(120deg); } } @keyframes breathing-drift { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-5px); opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .breathing-circle, .breathing-circle::before, .breathing-circle::after, .breathing-circle-wrap::before { animation: none !important; } .breathing-circle.expanded { transform: scale(1.35) !important; } } /* Content & Meditations section */ .content-section { padding: 3rem 0 2.5rem; position: relative; z-index: 1; } .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } /* Thumbnails inside content cards (cover the entire card) */ .content-card { position: relative; padding: 0; justify-content: flex-end; min-height: 190px; } .content-thumb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden; z-index: 0; } .content-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.05) contrast(1.05); } /* Readability overlay */ .content-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 28, 0.05) 20%, rgba(10, 12, 28, 0.88) 100%); z-index: 0; } .content-card .session-duration, .content-card h3, .content-card .session-play { position: relative; z-index: 1; margin-right: 1.25rem; margin-left: 1.25rem; } .content-card .session-duration { margin-top: 1.15rem; margin-bottom: 0.45rem; } .content-card .content-tag { display: inline-block; position: relative; z-index: 1; margin-right: 1.25rem; margin-left: 1.25rem; margin-bottom: 0.3rem; font-size: 0.72rem; font-weight: 600; color: rgba(159, 143, 239, 0.9); letter-spacing: 0.3px; } body.day-mode .content-card .content-tag { color: rgba(107, 70, 193, 0.85); } .content-card h3 { font-size: 1.15rem; margin-bottom: 0.9rem; } .content-card .session-play { margin-bottom: 1.2rem; } body.day-mode .content-card::after { background: linear-gradient(180deg, rgba(255, 243, 229, 0.0) 25%, rgba(255, 243, 229, 0.92) 100%); } body.day-mode .content-card .session-duration { color: rgba(63, 81, 148, 0.85); } body.day-mode .content-card h3 { color: #3F5194; } /* Breathing download popup */ .breathing-popup-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; } .breathing-popup-overlay.show { opacity: 1; } .breathing-popup-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .breathing-popup { position: relative; z-index: 1; background: linear-gradient(160deg, #1e1b3a, #2a2560); border: 1px solid rgba(88, 109, 183, 0.35); border-radius: 1.5rem; padding: 2.5rem 2rem; max-width: 420px; width: calc(100% - 2rem); text-align: center; transform: scale(0.92); transition: transform 0.35s var(--ease-spring); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(88, 109, 183, 0.1); } .breathing-popup-overlay.show .breathing-popup { transform: scale(1); } .breathing-popup h3 { font-size: 1.5rem; color: #E1E1FA; margin-bottom: 0.5rem; } .breathing-popup p { color: rgba(225, 225, 250, 0.7); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; } .breathing-popup-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; } .breathing-popup-btn { display: inline-block; padding: 0.7rem 1.5rem; background: #586DB7; color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 500; text-decoration: none; border-radius: 50px; transition: transform 0.2s var(--ease-spring), background 0.2s ease; } .breathing-popup-btn:hover { transform: translateY(-2px) scale(1.03); background: #3F5194; } .breathing-popup-dismiss { background: transparent; color: rgba(225, 225, 250, 0.5); border: 1px solid rgba(225, 225, 250, 0.15); padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: all 0.2s ease; } .breathing-popup-dismiss:hover { background: rgba(225, 225, 250, 0.05); color: #E1E1FA; border-color: rgba(225, 225, 250, 0.3); } /* Sessions grid (now used for content cards) */ .sessions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .session-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.75rem; cursor: pointer; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: right; font-family: inherit; color: inherit; -webkit-appearance: none; min-height: 140px; } .session-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--lavender-glow), var(--rose-glow)); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .session-card:hover { transform: translateY(-3px); border-color: rgba(159, 143, 239, 0.22); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } .session-card:hover::before { opacity: 0.12; } .session-card:active { transform: translateY(-1px) scale(0.99); } .session-duration { position: relative; z-index: 1; font-size: 0.75rem; color: var(--lavender); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .session-card h3 { position: relative; z-index: 1; font-size: 1.4rem; font-weight: 600; color: var(--text-bright); margin-bottom: auto; } .session-play { position: relative; z-index: 1; width: 40px; height: 40px; background: linear-gradient(135deg, var(--lavender), #8070d4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-top: 1.25rem; transition: transform 0.25s var(--ease-spring), box-shadow 0.3s var(--ease); } .session-card:hover .session-play { transform: scale(1.1); box-shadow: 0 4px 16px var(--lavender-glow); } .session-play svg { width: 16px; height: 16px; margin-right: 1px; } /* ===== AUDIO PLAYER (bottom bar) ===== */ .audio-player { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(6, 10, 24, 0.95); border-top: 1px solid rgba(159, 143, 239, 0.1); transform: translateY(100%); transition: transform 0.35s var(--ease); z-index: 1000; } .audio-player.active { transform: translateY(0); } .player-content { max-width: 560px; margin: 0 auto; padding: 1.25rem 1.75rem; position: relative; } .close-player { position: absolute; top: 0.5rem; left: 0.5rem; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); transition: color 0.2s; line-height: 1; padding: 0.25rem; } .close-player:hover { color: var(--text-bright); } .now-playing { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; font-weight: 600; color: var(--text-bright); font-size: 0.95rem; } .progress-bar { height: 3px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; margin-bottom: 0.75rem; cursor: pointer; overflow: hidden; transition: height 0.2s; } .progress-bar:hover { height: 5px; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--lavender), var(--rose)); border-radius: 2px; width: 0%; transition: width 0.3s linear; margin-right: auto; direction: ltr; } .player-controls { display: flex; justify-content: center; margin-bottom: 0.5rem; } .control-btn { width: 50px; height: 50px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--lavender), #8070d4); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s var(--ease-spring), box-shadow 0.3s; } .control-btn:hover { transform: scale(1.06); box-shadow: 0 4px 16px var(--lavender-glow); } .control-btn:active { transform: scale(0.96); } .control-btn svg { width: 20px; height: 20px; } .time-display { text-align: center; color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } /* ===== FREQUENCY RADIO ===== */ .frequency-radio { padding: 2.5rem 0; } .radio-header { text-align: center; margin-bottom: 2.5rem; } .radio-subtitle { color: var(--lavender); font-size: 1.05rem; } .radio-player { max-width: 720px; margin: 0 auto; } .radio-interface { position: relative; border-radius: var(--radius-xl); padding: 1.1rem 1.4rem; /* Airy iOS-style glass */ background: rgba(255, 255, 255, 0.028); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 18px 54px rgba(8, 12, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); backdrop-filter: blur(36px) saturate(170%); -webkit-backdrop-filter: blur(36px) saturate(170%); overflow: hidden; transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease); } .radio-interface::before { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 200%; /* Flowing “frequency wave” background (GPU-friendly: transform only) */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20600%20120%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%27600%27%20y2%3D%270%27%20gradientUnits%3D%27userSpaceOnUse%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%236dd5c4%27%20stop-opacity%3D%270%27/%3E%3Cstop%20offset%3D%270.22%27%20stop-color%3D%27%236dd5c4%27%20stop-opacity%3D%270.14%27/%3E%3Cstop%20offset%3D%270.55%27%20stop-color%3D%27%239f8fef%27%20stop-opacity%3D%270.16%27/%3E%3Cstop%20offset%3D%270.82%27%20stop-color%3D%27%23e8a0bf%27%20stop-opacity%3D%270.14%27/%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23e8a0bf%27%20stop-opacity%3D%270%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%27M0%2060%20C%2075%2015%20150%20105%20225%2060%20S%20375%20105%20450%2060%20S%20525%2015%20600%2060%27%20fill%3D%27none%27%20stroke%3D%27url(%23g)%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M0%2070%20C%2075%2035%20150%20115%20225%2070%20S%20375%20115%20450%2070%20S%20525%2035%20600%2070%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-opacity%3D%270.07%27%20stroke-width%3D%271.2%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 600px 120px; background-position: 0 56%; opacity: 0.95; filter: blur(0.2px); transform: translate3d(0, 0, 0); will-change: transform; animation: radioBgWave 18s linear infinite; /* Fade the wave at top/bottom so it feels “in the glass” */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.95) 18%, rgba(0,0,0,0.95) 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.95) 18%, rgba(0,0,0,0.95) 82%, transparent 100%); pointer-events: none; z-index: 0; } .radio-interface::after { content: ''; position: absolute; inset: -1px; /* Desert photo (very subtle) + specular highlights + diagonal sheen */ background: url("assets/radio/negev-bg.jpg"), radial-gradient(900px 520px at 18% 10%, rgba(255, 255, 255, 0.18), transparent 62%), radial-gradient(720px 460px at 84% 18%, rgba(109, 213, 196, 0.12), transparent 58%), radial-gradient(760px 520px at 78% 92%, rgba(232, 160, 191, 0.10), transparent 60%), linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 45%, transparent 70%); background-size: cover, auto, auto, auto, auto; background-position: center, 0 0, 0 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; opacity: 0.24; filter: saturate(0.85) contrast(1.06) brightness(0.95); pointer-events: none; z-index: 0; } .radio-interface > * { position: relative; z-index: 1; } .radio-interface:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 22px 68px rgba(8, 12, 22, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.20); transform: translateY(-1px); } .radio-interface.playing { border-color: rgba(159, 143, 239, 0.26); box-shadow: 0 24px 74px rgba(8, 12, 22, 0.28), 0 0 40px rgba(159, 143, 239, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* Frequency Display */ .freq-display { text-align: center; margin-bottom: 0.5rem; } .freq-value { display: inline-flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.15rem; } .freq-number { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 200; color: var(--text-bright); letter-spacing: -1.5px; transition: color 0.4s var(--ease), text-shadow 0.5s var(--ease); } .radio-interface.playing .freq-number { text-shadow: 0 0 30px var(--lavender-glow); } .freq-unit { font-size: 1.05rem; color: rgba(255, 255, 255, 0.72); font-weight: 400; } .freq-label { color: var(--text-dim); font-size: 1rem; transition: color 0.3s; } /* CSS Waveform Visualizer */ .waveform { display: flex; align-items: center; justify-content: center; gap: 2.2px; height: 32px; margin-bottom: 0.5rem; opacity: 0.18; transition: opacity 0.5s var(--ease); } .radio-interface.playing .waveform { opacity: 1; } .wave-bar { width: 2.5px; height: 5px; background: linear-gradient(to top, var(--aurora), var(--lavender), var(--rose)); border-radius: 999px; transition: height 0.12s var(--ease); will-change: height; filter: drop-shadow(0 0 10px rgba(159, 143, 239, 0.18)); } /* CSS fallback animation for playing state */ .radio-interface.playing .wave-bar { animation: waveIdle 1.4s ease-in-out infinite alternate; } .radio-interface.playing .wave-bar:nth-child(2n) { animation-delay: 0.08s; } .radio-interface.playing .wave-bar:nth-child(3n) { animation-delay: 0.16s; } .radio-interface.playing .wave-bar:nth-child(5n) { animation-delay: 0.12s; } .radio-interface.playing .wave-bar:nth-child(7n) { animation-delay: 0.20s; } .radio-interface.playing .wave-bar:nth-child(11n) { animation-delay: 0.24s; } @keyframes waveIdle { 0% { height: 4px; opacity: 0.4; } 100% { height: 24px; opacity: 1; } } @keyframes radioBgWave { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .radio-interface::before { animation: none; } } /* Radio Controls */ .radio-controls { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-bottom: 0.75rem; } .radio-play-btn { width: 44px; height: 44px; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-bright); box-shadow: 0 14px 36px rgba(8, 12, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: all 0.25s var(--ease); } .radio-play-btn::before { content: ''; position: absolute; inset: -10px; background: conic-gradient( from 220deg, rgba(109, 213, 196, 0.00), rgba(109, 213, 196, 0.26), rgba(159, 143, 239, 0.26), rgba(232, 160, 191, 0.22), rgba(109, 213, 196, 0.00) ); filter: blur(10px); opacity: 0; transition: opacity 0.25s var(--ease); } .radio-play-btn svg { position: relative; z-index: 1; } .radio-play-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); transform: scale(1.05); box-shadow: 0 18px 44px rgba(8, 12, 22, 0.26), 0 0 26px rgba(159, 143, 239, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24); } .radio-play-btn:hover::before { opacity: 1; } .radio-play-btn:active { transform: scale(0.97); } .radio-play-btn.playing { background: rgba(255, 255, 255, 0.06); border-color: rgba(232, 160, 191, 0.28); color: var(--text-bright); box-shadow: 0 18px 48px rgba(8, 12, 22, 0.30), 0 0 30px rgba(232, 160, 191, 0.12); } .radio-play-btn.playing::before { opacity: 1; } .radio-play-btn svg { width: 22px; height: 22px; } .timer-display { text-align: center; } #radioTimer { font-size: 1.5rem; font-weight: 200; color: var(--text-bright); display: block; font-variant-numeric: tabular-nums; letter-spacing: 1px; } #radioTimer.warning { color: var(--rose); animation: timerPulse 1s ease-in-out infinite; } @keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .timer-label { color: rgba(255, 255, 255, 0.58); font-size: 0.82rem; text-transform: none; letter-spacing: 0; } /* Frequency Pills */ .freq-pills { display: flex; width: fit-content; justify-content: center; align-items: center; gap: 0.25rem; flex-wrap: wrap; padding: 0.35rem; margin: 0 auto; border-radius: 999px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 40px rgba(8, 12, 22, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.16); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); } .freq-pill { background: transparent; border: 0; color: rgba(255, 255, 255, 0.72); padding: 0.45rem 0.75rem; border-radius: 999px; cursor: pointer; font-size: 0.86rem; font-weight: 600; font-family: inherit; transition: all 0.2s var(--ease); display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; min-width: 0; } .freq-pill .pill-name { font-weight: 700; font-size: 0.86rem; } .freq-pill .pill-hz { font-size: 0.76rem; opacity: 0.62; font-weight: 600; } .freq-pill:hover { color: var(--text-bright); background: rgba(255, 255, 255, 0.06); } .freq-pill.active { background: linear-gradient(135deg, rgba(109, 213, 196, 0.18), rgba(159, 143, 239, 0.18), rgba(232, 160, 191, 0.14)); color: white; box-shadow: 0 0 18px rgba(159, 143, 239, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .freq-pill.active .pill-hz { opacity: 0.9; } .freq-range { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); margin-top: 0.1rem; letter-spacing: 0.3px; } /* ===== RADIO INSIGHTS (replaces redundant cards) ===== */ .radio-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 0.95rem; } .radio-insight { position: relative; border-radius: 22px; padding: 1rem 1rem 0.9rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: 0 16px 46px rgba(8, 12, 22, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); } .radio-insight::before { content: ''; position: absolute; inset: 0; /* No photo background here - keep it clean so the SVG graphics “float” */ background: radial-gradient(720px 420px at 18% 14%, rgba(255, 255, 255, 0.14), transparent 60%), radial-gradient(700px 420px at 82% 22%, rgba(109, 213, 196, 0.10), transparent 58%), radial-gradient(760px 520px at 78% 92%, rgba(232, 160, 191, 0.08), transparent 62%); opacity: 0.55; pointer-events: none; } .radio-insight::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 45%, transparent 70%); opacity: 0.28; pointer-events: none; } .radio-insight > * { position: relative; z-index: 1; } .radio-insight:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.16); } .insight-top { text-align: right; } .insight-kicker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); letter-spacing: 0.2px; margin-bottom: 0.35rem; } .insight-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, rgba(109, 213, 196, 0.9), rgba(159, 143, 239, 0.9), rgba(232, 160, 191, 0.8)); box-shadow: 0 0 12px rgba(159, 143, 239, 0.18); } .insight-title { color: var(--text-bright); font-weight: 700; font-size: 1.05rem; line-height: 1.25; } .insight-sub { color: rgba(255, 255, 255, 0.66); font-size: 0.86rem; margin-top: 0.25rem; } /* Day mode: radio insight cards need stronger contrast */ body.day-mode .radio-insight { background: rgba(255, 255, 255, 0.42); border-color: rgba(63, 81, 148, 0.16); box-shadow: 0 18px 50px rgba(120, 110, 90, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } body.day-mode .radio-insight:hover { border-color: rgba(63, 81, 148, 0.22); } body.day-mode .insight-kicker { color: rgba(47, 63, 122, 0.78); } body.day-mode .insight-title { color: #1f2a57; } body.day-mode .insight-sub { color: rgba(45, 31, 20, 0.82); } body.day-mode .insight-img { mix-blend-mode: normal; opacity: 0.98; } .insight-visual { margin-top: 0.85rem; } .insight-svg { width: 100%; height: auto; display: block; } .insight-img { width: 100%; height: auto; display: block; border-radius: 16px; mix-blend-mode: screen; opacity: 0.92; /* Fade edges (useful when the generated image contains a faint frame) */ -webkit-mask-image: radial-gradient(ellipse 92% 90% at center, black 60%, transparent 100%); mask-image: radial-gradient(ellipse 92% 90% at center, black 60%, transparent 100%); } /* Spotify vs Frequencies: generated as full-bleed on pure black, so don't crop it */ .insight-compare .insight-img { border-radius: 0; -webkit-mask-image: none; mask-image: none; opacity: 0.96; } .insight-compare-media { position: relative; } .insight-compare-label { position: absolute; top: 63%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; text-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); } .insight-compare-left { left: 34%; } .insight-compare-right { left: 70%; } .insight-compare-label .ic-main { font-size: 0.82rem; font-weight: 750; letter-spacing: 0.2px; color: rgba(255, 255, 255, 0.86); } .insight-compare-label .ic-sub { font-size: 0.72rem; margin-top: 0.08rem; color: rgba(255, 255, 255, 0.62); } /* scale labels removed */ @media (max-width: 768px) { .radio-insights { grid-template-columns: 1fr; gap: 0.75rem; } } /* ===== NUMA ===== */ .numa { padding: 3.5rem 0; } .numa-layout { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 4vw, 3.2rem); } .numa-copy { display: flex; flex-direction: column; gap: 1.25rem; max-width: 520px; flex: 1 1 520px; } .numa-layout .numa-embed { flex: 0 1 320px; } .numa-copy .numa-desc { margin-bottom: 0; } .numa .section-title { text-align: right; } .numa-subtitle { font-size: 1.3rem; color: var(--gold); margin-bottom: 0.75rem; } .numa-desc { color: var(--text-dim); font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; } .numa-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .numa-features li { color: var(--text); font-size: 1rem; padding-right: 1.4rem; position: relative; } .numa-features li::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; background: var(--lavender); border-radius: 50%; } .numa-chat { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.75rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); } .chat-msg { padding: 0.9rem 1.3rem; border-radius: 1.15rem; max-width: 85%; font-size: 0.95rem; line-height: 1.5; } .chat-msg.user { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: var(--text); align-self: flex-start; border-bottom-right-radius: 0.25rem; } .chat-msg.numa { background: linear-gradient(135deg, var(--lavender), #8070d4); color: white; align-self: flex-end; border-bottom-left-radius: 0.25rem; } /* ===== NUMA PHONE MOCKUP ===== */ .numa-mockup-wrapper { display: flex; flex-direction: column; align-items: center; } .numa-phone .phone-frame { width: 240px; height: 460px; } .numa-chat-screen { width: 100%; height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #0f1225 0%, #181d3a 100%); } .numa-chat-header { display: flex; align-items: center; gap: 0.6rem; padding: 2.25rem 1rem 0.75rem; border-bottom: 1px solid var(--glass-border); font-size: 0.85rem; font-weight: 600; color: var(--text-bright); direction: rtl; } .numa-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender), var(--rose)); flex-shrink: 0; } .numa-chat-messages { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; overflow: hidden; direction: rtl; } .numa-chat-messages .chat-msg { font-size: 0.72rem; padding: 0.5rem 0.7rem; border-radius: 0.8rem; max-width: 85%; line-height: 1.4; } .numa-chat-messages .chat-msg.user { align-self: flex-start; border-bottom-right-radius: 0.2rem; } .numa-chat-messages .chat-msg.numa { align-self: flex-end; border-bottom-left-radius: 0.2rem; } .numa-chat-input { padding: 0.6rem 0.75rem; border-top: 1px solid var(--glass-border); direction: rtl; } .numa-chat-input span { font-size: 0.7rem; color: var(--text-muted); } /* ===== TESTIMONIALS ===== */ .testimonials { padding: 5rem 0; } .testimonials .section-title { margin-bottom: 2.1rem; font-size: clamp(1.45rem, 3.2vw, 2.0rem); font-weight: 650; letter-spacing: 0.2px; } .testimonials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .testimonial-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.75rem; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); } .testimonial-title { font-size: 1.1rem; color: var(--text-bright); margin: 0 0 0.15rem; } .testimonial-meta { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 0.75rem; } .testimonial-card:hover { border-color: rgba(159, 143, 239, 0.15); transform: translateY(-2px); } .stars { color: var(--gold); font-size: 1rem; margin-bottom: 0.85rem; letter-spacing: 1.5px; } .testimonial-card p { font-size: 1rem; line-height: 1.7; color: var(--text); margin-bottom: 0.85rem; } .testimonial-card cite { font-style: normal; color: var(--text-muted); font-size: 0.85rem; } /* ===== FAQ ===== */ .faq { padding: 2.6rem 0; } .faq .section-title { font-size: clamp(1.55rem, 3.6vw, 2.1rem); margin-bottom: 0.5rem; } .faq .section-subtitle { font-size: 1rem; margin-bottom: 0.85rem; } .faq-list { display: grid; gap: 0.65rem; max-width: 860px; margin: 0 auto; } .faq-item { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); } .faq-item:hover { border-color: rgba(159, 143, 239, 0.18); transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); } .faq-question { width: 100%; text-align: right; background: transparent; border: none; color: var(--text-bright); font-size: 0.98rem; font-weight: 600; padding: 0.9rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; } .faq-question::after { content: '+'; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--lavender); background: var(--lavender-dim); transition: transform 0.2s var(--ease), background 0.2s var(--ease); flex: 0 0 auto; } .faq-question[aria-expanded="true"]::after { content: '-'; background: rgba(159, 143, 239, 0.2); } .faq-question:hover { color: var(--text); } .faq-panel { padding: 0 1.25rem 0.9rem; color: var(--text-dim); line-height: 1.7; font-size: 0.98rem; } .faq-panel p { margin: 0; } .faq-cta { margin-top: 1.1rem; display: flex; justify-content: center; } .faq-cta .hero-cta { min-width: 140px; padding: 0.7rem 1.6rem; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; } /* ===== FINAL MESSAGE ===== */ .final-message { padding: 2.5rem 0; text-align: center; } .sleep-message { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--text-dim); line-height: 2; font-weight: 300; max-width: 640px; margin: 0 auto; } /* ===== HOME BLOG (Carousel) ===== */ .home-blog-block { margin-top: 2.2rem; } .home-blog-title { font-size: 1.6rem; font-weight: 700; color: var(--text-bright); margin: 0 0 1rem; text-align: center; } .blog-carousel-shell { position: relative; max-width: 1240px; margin: 0 auto; } .blog-carousel-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0.25rem 0.25rem 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(159, 143, 239, 0.35) transparent; } .blog-carousel-viewport:focus { outline: 2px solid rgba(159, 143, 239, 0.55); outline-offset: 6px; border-radius: var(--radius-lg); } .blog-carousel-viewport::-webkit-scrollbar { height: 10px; } .blog-carousel-viewport::-webkit-scrollbar-thumb { background: rgba(159, 143, 239, 0.25); border-radius: 999px; } .blog-carousel-track { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; } .blog-carousel-item { flex: 0 0 auto; width: min(320px, 82vw); scroll-snap-align: start; } .blog-carousel-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; text-align: start; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .blog-carousel-card:hover { transform: translateY(-3px); border-color: rgba(159, 143, 239, 0.22); box-shadow: 0 10px 26px rgba(0,0,0,0.18); } .blog-carousel-card-link { text-decoration: none; color: inherit; } .blog-carousel-card-link:focus-visible { outline: 2px solid rgba(159, 143, 239, 0.6); outline-offset: 3px; } .blog-carousel-media { width: 100%; height: 160px; background: radial-gradient(circle at top right, rgba(159, 143, 239, 0.18), rgba(26, 31, 58, 0.9)); overflow: hidden; } .blog-carousel-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-carousel-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; } .blog-carousel-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; color: var(--text-dim); font-size: 0.82rem; } .blog-carousel-card-title { font-size: 1.15rem; color: var(--text-bright); font-weight: 700; line-height: 1.35; margin: 0; } .blog-carousel-excerpt { color: var(--text-dim); font-size: 0.93rem; line-height: 1.65; margin: 0; } .blog-carousel-cta { margin-top: auto; display: block; width: 100%; padding: 0.7rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.9rem; text-align: center; color: #f8fafc; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22); backdrop-filter: blur(10px); transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, background 0.2s; } .blog-carousel-cta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.24); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.26); } .blog-carousel-cta:focus-visible { outline: 2px solid rgba(232, 237, 255, 0.8); outline-offset: 3px; } body.day-mode .blog-carousel-cta { color: #1e40af; background: rgba(30, 64, 175, 0.12); border-color: rgba(30, 64, 175, 0.25); } body.day-mode .blog-carousel-cta:hover { background: rgba(30, 64, 175, 0.18); } .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(15, 23, 42, 0.65); color: var(--text-bright); cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2; } .carousel-nav:disabled { opacity: 0.35; cursor: default; } .carousel-prev { inset-inline-start: -10px; } .carousel-next { inset-inline-end: -10px; } .home-blog-all-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1rem; color: var(--lavender); font-weight: 700; text-decoration: none; font-size: 0.95rem; } .home-blog-all-link:hover { color: var(--lavender-soft); } .home-blog-noscript { margin-top: 0.75rem; } @media (min-width: 900px) { .blog-carousel-track { gap: 1.05rem; } .blog-carousel-item { width: calc((100% - 3.15rem) / 4); } } @media (max-width: 720px) { .carousel-nav { display: none; } .blog-carousel-viewport { padding: 0.25rem 0 0.75rem; } } /* ===== HERO SOCIAL PROOF + DOWNLOAD BUTTONS ===== */ .hero-social-proof { margin-top: 1.1rem; margin-bottom: 0.8rem; } .hero-proof-text { font-size: 0.95rem; color: var(--aurora); font-weight: 600; letter-spacing: 0.2px; text-shadow: 0 2px 12px rgba(109, 213, 196, 0.25); } body.day-mode .hero-proof-text { color: #1a6b5a; text-shadow: none; } .hero-download-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; } .hero-download-buttons .app-btn img { height: 44px; } @media (max-width: 480px) { .hero-download-buttons .app-btn img { height: 38px; } .hero-proof-text { font-size: 0.85rem; } } /* ===== UGC VIDEO CAROUSEL ===== */ .ugc-videos { padding: 3.5rem 0; position: relative; z-index: 1; } .ugc-carousel { margin-top: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.5rem; direction: ltr; } .ugc-carousel::-webkit-scrollbar { display: none; } .ugc-track { display: flex; gap: 1rem; padding: 0; direction: ltr; } .ugc-slide { flex: 0 0 auto; width: min(220px, 55vw); scroll-snap-align: start; text-align: center; } .ugc-video-wrap { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); border: 1px solid var(--glass-border); position: relative; } .ugc-video, .ugc-embed { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .ugc-video-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; } .ugc-video-placeholder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ugc-play-btn { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform 0.2s, background 0.2s; } .ugc-video-placeholder:hover .ugc-play-btn { transform: scale(1.1); background: rgba(107, 70, 193, 0.85); } .ugc-slide.active .ugc-video-placeholder .ugc-play-btn { background: var(--lavender); } /* Hide placeholder when iframe is loaded */ .ugc-slide.playing .ugc-video-placeholder { display: none; } .ugc-caption { margin-top: 0.65rem; font-size: 0.88rem; color: var(--text-dim); font-weight: 500; line-height: 1.4; direction: rtl; } body.day-mode .ugc-video-wrap { border-color: rgba(120, 140, 180, 0.2); background: rgba(255, 255, 255, 0.5); } @media (max-width: 480px) { .ugc-slide { width: min(180px, 48vw); } } /* UGC carousel shell (for arrow positioning) */ .ugc-carousel-shell { position: relative; width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); padding-inline: clamp(0.75rem, 2.8vw, 2.25rem); } .ugc-carousel-shell .carousel-prev { left: clamp(6px, 1.2vw, 16px); right: auto; } .ugc-carousel-shell .carousel-next { right: clamp(6px, 1.2vw, 16px); left: auto; } .ugc-nav { top: 40%; background: rgba(107, 70, 193, 0.9); border: 2px solid rgba(255, 255, 255, 0.3); color: #fff; box-shadow: 0 4px 20px rgba(107, 70, 193, 0.4); z-index: 6; pointer-events: auto; touch-action: manipulation; } /* UGC SVG arrows in markup point inward by default; flip to outward. */ .ugc-carousel-shell .carousel-prev svg, .ugc-carousel-shell .carousel-next svg { transform: scaleX(-1); } .ugc-nav:hover { background: var(--lavender); transform: translateY(-50%) scale(1.08); } body.day-mode .ugc-nav { background: rgba(107, 70, 193, 0.85); border-color: rgba(107, 70, 193, 0.3); } @media (max-width: 720px) { .ugc-nav { display: none; } } /* ===== FREQUENCY SCIENCE - SIMPLE ALTERNATIVE ===== */ .freq-simple { padding: 3.5rem 0 2rem; position: relative; z-index: 1; } .freq-simple-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-top: 2rem; } .freq-simple-visual { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; } .freq-simple-gradient { width: 100%; height: 100%; background: radial-gradient(ellipse at 30% 40%, rgba(109, 213, 196, 0.35) 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(159, 143, 239, 0.3) 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(232, 160, 191, 0.2) 0%, transparent 50%), linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-surface) 100%); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); animation: freqSimplePulse 8s ease-in-out infinite; } @keyframes freqSimplePulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } body.day-mode .freq-simple-gradient { background: radial-gradient(ellipse at 30% 40%, rgba(109, 213, 196, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(159, 143, 239, 0.2) 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(232, 160, 191, 0.15) 0%, transparent 50%), linear-gradient(180deg, rgba(240, 245, 255, 1) 0%, rgba(230, 235, 250, 1) 100%); border-color: rgba(120, 140, 180, 0.15); } .freq-simple-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; } .freq-simple-points li { font-size: 1.05rem; color: var(--text); line-height: 1.65; padding-right: 1.5rem; position: relative; } .freq-simple-points li::before { content: "✦"; position: absolute; right: 0; color: var(--lavender); font-size: 0.85rem; } @media (max-width: 768px) { .freq-simple-layout { grid-template-columns: 1fr; gap: 1.5rem; } .freq-simple-visual { max-width: 400px; margin: 0 auto; } } /* Showcase captions: allow multi-line descriptive text */ .showcase-label { max-width: 320px; line-height: 1.45; } /* ===== HOME BLOG - Enhanced ===== */ .home-blog-subtitle { font-size: 1rem; color: var(--text-dim); text-align: center; margin: -0.5rem 0 1.25rem; } /* ===== CTA ===== */ .cta { padding: 4.5rem 0; text-align: center; } .cta h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); font-weight: 700; margin-bottom: 0.6rem; background: linear-gradient(135deg, var(--lavender-soft), var(--rose)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-subtitle { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 1.75rem; } .features-mini { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } .features-mini span { color: var(--aurora); font-weight: 600; font-size: 0.9rem; } .app-buttons { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; } .app-btn { display: inline-block; transition: transform 0.2s var(--ease-spring); border-radius: 8px; overflow: hidden; } .app-btn:hover { transform: translateY(-2px) scale(1.02); } .app-btn:active { transform: scale(0.98); } .app-btn img { height: 48px; display: block; } /* ===== FOOTER ===== */ .site-footer { border-top: 1px solid var(--glass-border); padding: 1.75rem 0; position: relative; z-index: 1; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .footer-brand { font-size: 1.2rem; font-weight: 700; background: linear-gradient(135deg, var(--lavender-soft), var(--rose)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-copy { color: var(--text-muted); font-size: 0.82rem; } .footer-social { color: var(--text-muted); font-size: 0.82rem; } /* ===== BLOG ===== */ .blog-page { position: relative; z-index: 1; padding-bottom: 3rem; } .blog-hero { padding: 5rem 0 2rem; } .blog-hero-inner { display: grid; gap: 1.25rem; align-items: start; } .blog-hero-title { font-size: 2.6rem; font-weight: 700; color: var(--text-bright); } .blog-hero-subtitle { color: var(--text-dim); font-size: 1.05rem; max-width: 720px; } .blog-back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--lavender); font-weight: 600; text-decoration: none; font-size: 0.95rem; } .blog-back-link:hover { color: var(--lavender-soft); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; padding: 1.25rem 0 2.5rem; } .blog-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .blog-card:hover { transform: translateY(-4px); border-color: rgba(159, 143, 239, 0.22); box-shadow: 0 10px 28px rgba(0,0,0,0.2); } .blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .blog-card-media { position: relative; width: 100%; height: 190px; background: radial-gradient(circle at top right, rgba(159, 143, 239, 0.18), rgba(26, 31, 58, 0.9)); overflow: hidden; } .blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card-body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; } .blog-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; color: var(--text-dim); font-size: 0.82rem; } .blog-card-title { font-size: 1.35rem; color: var(--text-bright); font-weight: 700; line-height: 1.35; } .blog-excerpt { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; } .blog-empty { padding: 2rem; border: 1px dashed var(--glass-border); border-radius: var(--radius-lg); color: var(--text-dim); text-align: center; } /* ===== GUIDES HUB ===== */ .guides-hub-hero { padding: 5rem 0 2.5rem; } .guides-hub-hero-inner { display: grid; gap: 1.75rem; align-items: start; } @media (min-width: 960px) { .guides-hub-hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "back" "content" "search"; align-items: start; max-width: 980px; margin: 0 auto; gap: 1.25rem; } .guides-hub-hero-inner .blog-back-link { grid-area: back; justify-self: start; } .guides-hub-hero-content { grid-area: content; justify-self: stretch; } .guides-hub-search { grid-area: search; position: static; max-height: none; } .guides-hub-search-results { max-height: none; overflow: visible; } } .guides-hub-hero-content { display: grid; gap: 0.85rem; } .guides-hub-hero-title { font-size: 2.6rem; font-weight: 700; color: var(--text-bright); } .guides-hub-hero-subtitle { color: var(--text-dim); font-size: 1.05rem; max-width: 720px; } .guides-hub-hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--text-muted); font-size: 0.9rem; } .guides-hub-hero-meta span { padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); } .guides-hub-search { display: grid; gap: 0.6rem; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 18px 40px rgba(0,0,0,0.15); } .guides-hub-search-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; } .guides-hub-search-input { width: 100%; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.06); color: var(--text-bright); font-size: 1rem; font-family: inherit; } .guides-hub-search-input::placeholder { color: var(--text-muted); } .guides-hub-search-input:focus { outline: none; border-color: rgba(139, 92, 246, 0.6); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); } .guides-hub-search-count { color: var(--text-muted); font-size: 0.85rem; min-height: 1.1rem; } .guides-hub-search-results { display: grid; gap: 0.45rem; padding: 0.6rem; border-radius: 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); min-height: 3.5rem; } .guides-hub-search-result { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.5rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background 0.2s var(--ease); } .guides-hub-search-result:hover { background: var(--glass-hover); } .guides-hub-search-thumb { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--glass-bg); border: 1px solid var(--glass-border); } .guides-hub-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .guides-hub-search-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .guides-hub-search-title { font-size: 0.95rem; color: var(--text-bright); font-weight: 600; line-height: 1.4; } .guides-hub-search-meta { font-size: 0.75rem; color: var(--text-muted); } .guides-hub-search-empty { color: var(--text-muted); font-size: 0.85rem; padding: 0.4rem 0.3rem; } /* Guides hub uses homepage palette + non-sticky layout */ .guides-hub-section { padding: 0.5rem 0 2.5rem; } .guides-hub-section-head { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; } .guides-hub-section-title { font-size: 1.6rem; color: var(--text-bright); font-weight: 700; } .guides-hub-section-subtitle { color: var(--text-dim); font-size: 0.95rem; } .guides-hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; } .guides-hub-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); overflow: hidden; } .guides-hub-card:hover { transform: translateY(-4px); border-color: rgba(159, 143, 239, 0.22); box-shadow: 0 10px 28px rgba(0,0,0,0.2); } .guides-hub-card-link { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem 1.4rem 1.4rem; color: inherit; text-decoration: none; height: 100%; } .guides-hub-card-media { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass-bg); } .guides-hub-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .guides-hub-card-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; color: var(--text-dim); font-size: 0.8rem; } .guides-hub-card-title { font-size: 1.25rem; color: var(--text-bright); font-weight: 700; line-height: 1.4; } .guides-hub-card-excerpt { color: var(--text-dim); font-size: 0.93rem; line-height: 1.6; } .guides-hub-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .guides-hub-topic-card { display: grid; gap: 0.55rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); color: inherit; text-decoration: none; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); } .guides-hub-topic-card:hover { transform: translateY(-3px); border-color: rgba(159, 143, 239, 0.28); } .guides-hub-topic-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .guides-hub-topic-title { font-size: 1.05rem; color: var(--text-bright); font-weight: 700; } .guides-hub-topic-count { padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.3); color: var(--text-muted); font-size: 0.75rem; } .guides-hub-topic-desc { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; } .guides-hub-archive { border-radius: var(--radius-lg); border: 1px solid var(--glass-border); background: var(--glass-bg); padding: 1.1rem 1.25rem; } .guides-hub-archive-summary { cursor: pointer; font-weight: 700; color: var(--text-bright); font-size: 1.05rem; list-style: none; } .guides-hub-archive-summary::-webkit-details-marker { display: none; } .guides-hub-archive-body { margin-top: 1.1rem; display: grid; gap: 1.5rem; } .guides-hub-archive-group { display: grid; gap: 0.65rem; } .guides-hub-archive-title { font-size: 1rem; color: var(--text-bright); font-weight: 700; } .guides-hub-archive-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.35rem 1rem; } .guides-hub-archive-item { margin: 0; } .guides-hub-archive-link { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; } .guides-hub-archive-link:hover { color: var(--lavender-soft); } .guides-hub-empty { padding: 1.5rem; border-radius: var(--radius-lg); border: 1px dashed var(--glass-border); color: var(--text-dim); text-align: center; } .post-article { padding: 2rem 0 4rem; } .post-header { display: grid; gap: 1rem; margin-bottom: 1.5rem; } .post-title { font-size: 2.4rem; color: var(--text-bright); font-weight: 700; line-height: 1.3; } .post-meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--text-dim); font-size: 0.9rem; } .post-hero-image { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-border); background: var(--bg-card); } .post-hero-image img { width: 100%; display: block; max-height: 420px; object-fit: cover; } /* Blog posts only: keep visual rhythm tighter, avoid giant hero/content images */ .blog-page .post-hero-image img { max-height: clamp(220px, 34vw, 340px); } .post-content { margin-top: 1.75rem; padding: 2rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(0,0,0,0.15); } .post-content h2, .post-content h3, .post-content h4 { color: var(--text-bright); margin: 1.75rem 0 0.75rem; line-height: 1.4; } .post-content p { margin-bottom: 1rem; color: var(--text); } .post-content ul, .post-content ol { padding-inline-start: 1.5rem; margin-bottom: 1rem; color: var(--text); } .post-content li { margin-bottom: 0.4rem; } .post-content blockquote { border-right: 3px solid var(--lavender); padding-right: 1rem; margin: 1.5rem 0; color: var(--text-dim); font-style: italic; } .post-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.25rem auto; display: block; } .blog-page .post-content img { max-height: 480px; width: auto; } .blog-page .post-content [data-hook="image-viewer"] { max-height: 480px; overflow: hidden; } .post-content a { color: var(--lavender); } .post-content a:hover { color: var(--lavender-soft); } /* ===== GUIDES - ARTICLE READABILITY (guides only) ===== */ .guide-page .post-article > .container { max-width: 860px; } .guide-page .post-hero-image { max-width: 860px; margin-inline: auto; background: rgba(10, 12, 26, 0.55); } .guide-page .post-content { background: rgba(10, 12, 26, 0.92); border-color: rgba(255,255,255,0.08); box-shadow: 0 18px 55px rgba(0,0,0,0.35); line-height: 1.85; } body.day-mode .guide-page .post-content { background: rgba(255, 248, 238, 0.96); border-color: rgba(120, 85, 40, 0.18); box-shadow: 0 16px 45px rgba(120, 85, 40, 0.14); } .guide-page .glass-card, .guide-page .guide-cta-card { max-width: 860px; margin-inline: auto; background: rgba(10, 12, 26, 0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); box-shadow: 0 18px 55px rgba(0,0,0,0.28); } body.day-mode .guide-page .glass-card, body.day-mode .guide-page .guide-cta-card { background: rgba(255, 248, 238, 0.96); border-color: rgba(120, 85, 40, 0.18); box-shadow: 0 16px 45px rgba(120, 85, 40, 0.14); } body.day-mode .guide-page .post-hero-image { background: rgba(255, 248, 238, 0.96); border-color: rgba(120, 85, 40, 0.18); } .guide-page .guide-cta-card { margin-top: 1.5rem; padding: 1.25rem; } @media (max-width: 768px) { .guide-page .post-content { padding: 1.4rem; } .guide-page .guide-cta-card { padding: 1.1rem; } } .footer-links { display: inline-flex; gap: 0.75rem; align-items: center; } .footer-link { color: var(--text-muted); text-decoration: none; font-size: 0.82rem; font-weight: 600; } .footer-link:hover { color: var(--lavender-soft); } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .hero { min-height: 55vh; padding: 3rem 1.5rem 1.25rem; } /* Breathing: make the phone mockups feel like the main content (bigger + centered) */ .breathing-item .phone-frame { width: min(320px, 88vw); height: auto; aspect-ratio: 1 / 2; border-radius: 26px; } .breathing-item .phone-screen { border-radius: 20px; } .breathing-item .phone-notch { width: 86px; height: 20px; } .hero-moon { display: none; } .benefits-grid, .sessions-grid { grid-template-columns: 1fr; } .testimonials-grid { display: flex; overflow-x: auto; gap: 0.75rem; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .testimonial-card { min-width: 76vw; max-width: 76vw; scroll-snap-align: start; padding: 1.25rem; } .testimonial-card p { font-size: 1.05rem; line-height: 1.8; } .sessions-grid { grid-template-columns: repeat(2, 1fr); } .content-grid { grid-template-columns: repeat(2, 1fr); } .session-card { padding: 1.25rem; min-height: 120px; } .radio-interface { padding: 1.4rem 1.05rem; } .freq-number { font-size: 3.1rem; } .freq-pills { display: flex; flex-wrap: wrap; justify-content: center; } .waveform { height: 40px; } .showcase-shell { padding: 0 2.75rem; } .showcase-phone .phone-frame { width: min(300px, 78vw); height: min(600px, 76vh); border-radius: 30px; } .showcase-phone .phone-screen { border-radius: 22px; } .showcase-phone .phone-notch { width: 94px; height: 22px; } .showcase-nav { width: 52px; height: 52px; } .showcase-label { font-size: 0.88rem; } .showcase-dot { width: 9px; height: 9px; } .phone-frame { width: 160px; height: 320px; border-radius: 22px; } .phone-notch { width: 64px; height: 18px; } .phone-screen { border-radius: 16px; } .phone-mockup.featured { transform: scale(1.05); } .phone-mockup.featured:hover { transform: scale(1.05) translateY(-6px); } .screen-placeholder svg { width: 30px; height: 30px; } .screen-placeholder span { font-size: 0.75rem; } .phone-label { font-size: 0.78rem; } .numa-layout { flex-direction: column; justify-content: flex-start; gap: 1.6rem; } .numa-copy { /* On mobile the flex-basis would become a HEIGHT (column layout) and creates big empty space */ flex: 0 0 auto; align-items: center; width: 100%; max-width: 520px; } .numa-layout .numa-embed { flex: 0 0 auto; } .numa .section-title { text-align: center; } .numa-text { text-align: center; } .numa-features { align-items: center; } .numa-embed { max-width: 360px; margin: 0 auto; } .numa-features-wrap { text-align: center; } /* hint removed */ /* freq-science removed */ .features-mini { gap: 0.6rem; } .app-btn img { height: 42px; } .footer-content { flex-direction: column; text-align: center; gap: 0.4rem; } .blog-hero { padding: 4rem 0 1.5rem; } .blog-hero-title { font-size: 2rem; } .guides-hub-hero { padding: 4rem 0 2rem; } .guides-hub-hero-title { font-size: 2.1rem; } .guides-hub-search { padding: 1rem; } .guides-hub-section-title { font-size: 1.35rem; } .guides-hub-topic-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .post-title { font-size: 1.9rem; } .post-content { padding: 1.5rem; } } @media (max-width: 480px) { .hero h1 { font-size: 2.8rem; } .sessions-grid { grid-template-columns: 1fr; } .content-grid { grid-template-columns: 1fr; } /* Breathing carousel: hide arrows on mobile, swipe works */ .breathing-nav { display: none; } .breathing-item { width: 100%; max-width: 420px; } .breathing-item .phone-mockup { width: 100%; } .breathing-item .phone-frame { width: min(280px, 78vw); height: auto; aspect-ratio: 1 / 2; margin: 0 auto; border-radius: 26px; } .breathing-item .phone-screen { border-radius: 20px; } .breathing-item .phone-notch { width: 78px; height: 18px; } .breathing-screen { padding: 2.4rem 1.1rem 1.2rem; } .breathing-circle-wrap { width: 82px; height: 82px; } .radio-controls { gap: 1.75rem; } #radioTimer { font-size: 1.85rem; } .radio-play-btn { width: 58px; height: 58px; } .benefits-grid { gap: 1rem; } .showcase-shell { padding: 0 2.25rem; } .showcase-phone { gap: 0.85rem; } .showcase-phone .phone-frame { width: min(260px, 86vw); height: min(540px, 72vh); border-radius: 26px; padding: 8px; } .showcase-phone .phone-screen { border-radius: 20px; } .showcase-phone .phone-notch { width: 82px; height: 20px; } .showcase-nav { width: 46px; height: 46px; } .showcase-dot { width: 8px; height: 8px; } .phone-frame { width: 140px; height: 280px; border-radius: 20px; } .phone-notch { width: 56px; height: 16px; border-radius: 0 0 10px 10px; } .phone-screen { border-radius: 14px; } .phone-mockup.featured { transform: scale(1.04); } .phone-mockup.featured:hover { transform: scale(1.04) translateY(-6px); } .numa-phone .phone-frame { width: 200px; height: 380px; } .numa-phone-mockup .phone-frame { width: min(220px, 72vw); } .numa-embed { max-width: 280px; } .guides-hub-archive-list { grid-template-columns: 1fr; } } /* ===== TOUCH OPTIMIZATION ===== */ @media (hover: none) { .session-card:active, .freq-pill:active, .radio-play-btn:active { transform: scale(0.96); } .session-card:hover { transform: none; box-shadow: none; } .benefit-card:hover { transform: none; box-shadow: none; } .benefit-card:hover .benefit-cover img { transform: none; } } /* ===== THEME TOGGLE BUTTON ===== */ .theme-toggle { position: fixed; top: 1.25rem; left: 1.25rem; z-index: 100; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--bg-mid); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; padding: 0; font-family: inherit; } .theme-toggle:hover { color: var(--text-bright); border-color: rgba(159, 143, 239, 0.3); } .theme-toggle svg { width: 18px; height: 18px; } /* Night mode (default): show moon icon, hide sun icon */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } /* Day mode: show sun icon, hide moon icon */ body.day-mode .theme-icon-sun { display: block; } body.day-mode .theme-icon-moon { display: none; } /* ===== DAY MODE VARIABLES ===== */ body.day-mode { --bg-deep: #FAF4ED; --bg-mid: #ffecd5; --bg-surface: #fed6aa; --bg-card: rgba(255, 236, 213, 0.7); --text: #4a3728; --text-dim: #7a6252; --text-bright: #2d1f14; --text-muted: #9a8272; --glass-bg: rgba(255, 243, 229, 0.65); --glass-border: rgba(200, 160, 100, 0.2); --glass-hover: rgba(200, 160, 100, 0.1); --lavender: #8b6cc1; --lavender-soft: #7a5bb0; --lavender-glow: rgba(139, 108, 193, 0.3); --lavender-dim: rgba(139, 108, 193, 0.1); --rose: #c4789a; --rose-glow: rgba(196, 120, 154, 0.2); --aurora: #2a9d8f; --aurora-glow: rgba(42, 157, 143, 0.2); --gold: #c4850c; --gold-soft: #d49b2a; } /* Day mode: theme toggle styling */ body.day-mode .theme-toggle { background: #FAF4ED; border-color: rgba(200, 160, 100, 0.3); color: #c4850c; box-shadow: 0 4px 20px rgba(180, 140, 60, 0.15); } body.day-mode .theme-toggle:hover { color: #2d1f14; border-color: rgba(200, 160, 100, 0.5); } /* ===== DAY BACKGROUND ===== */ /* Background gradient stays fixed; sun/clouds scroll with page */ .day-bg { position: fixed; inset: -12vh -12vw; /* cover iOS horizontal/vertical rubber-band */ z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; background: /* Soft blue sky at the very top, warming into the existing palette */ radial-gradient(ellipse 120% 70% at 50% 0%, rgba(214, 235, 255, 0.92) 0%, rgba(250, 244, 237, 0.0) 55%), radial-gradient(ellipse at top, #FAF4ED 0%, transparent 52%), radial-gradient(ellipse at bottom right, #ffecd5 0%, transparent 50%), linear-gradient(to bottom, #dbeeff 0%, #FAF4ED 18%, #ffecd5 48%, #fed6aa 74%, #fdc68a 100%); } body.day-mode .day-bg { opacity: 1; visibility: visible; } /* Fix iOS Safari color flash on overscroll + match background when user drags page sideways */ body.day-mode { background: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(214, 235, 255, 0.92) 0%, rgba(250, 244, 237, 0.0) 55%), radial-gradient(ellipse at top, #FAF4ED 0%, transparent 52%), radial-gradient(ellipse at bottom right, #ffecd5 0%, transparent 50%), linear-gradient(to bottom, #dbeeff 0%, #FAF4ED 18%, #ffecd5 48%, #fed6aa 74%, #fdc68a 100%); } html.day-mode-html { background: #fdc68a; } /* Day elements container: absolute so sun/clouds scroll with page */ .day-elements { position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; /* prevent decorative clouds from creating horizontal scroll */ opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; } body.day-mode .day-elements { opacity: 1; visibility: visible; } /* Hide night background in day mode */ body.day-mode .ambient-bg { /* On mobile, hidden night layers can still create horizontal scrollWidth. Use display:none to avoid sideways dragging artifacts. */ display: none; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; } .ambient-bg { transition: opacity 0.6s ease, visibility 0.6s ease; } /* Sun */ .sun { position: absolute; top: 6%; left: 12%; width: 100px; height: 100px; background: radial-gradient(circle, #fff7b0 0%, #ffd54f 40%, #ffb300 100%); border-radius: 50%; box-shadow: 0 0 60px rgba(255, 183, 0, 0.5), 0 0 120px rgba(255, 213, 79, 0.3), 0 0 200px rgba(255, 183, 0, 0.15); animation: sunPulse 8s ease-in-out infinite; } .sun-rays { position: absolute; top: 6%; left: 12%; width: 100px; height: 100px; transform-origin: center center; animation: sunRotate 30s linear infinite; } .sun-rays::before, .sun-rays::after { content: ''; position: absolute; inset: -30px; background: radial-gradient(circle, rgba(255, 213, 79, 0.15) 0%, transparent 60%); border-radius: 50%; } .sun-rays::after { inset: -60px; background: radial-gradient(circle, rgba(255, 183, 0, 0.08) 0%, transparent 60%); } @keyframes sunPulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.05); opacity: 1; } } @keyframes sunRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Clouds */ .cloud { position: absolute; will-change: transform, opacity; } .cloud-part { position: absolute; background: rgba(255, 255, 255, 0.8); border-radius: 50%; } .cloud-1 { top: 8%; right: 5%; } .cloud-1 .cloud-part:nth-child(1) { width: 220px; height: 90px; top: 20px; left: 0; border-radius: 60px; } .cloud-1 .cloud-part:nth-child(2) { width: 140px; height: 120px; top: -35px; left: 55px; } .cloud-1 .cloud-part:nth-child(3) { width: 170px; height: 80px; top: 10px; left: 110px; border-radius: 50px; } .cloud-2 { top: 18%; left: 15%; opacity: 0.75; } .cloud-2 .cloud-part:nth-child(1) { width: 180px; height: 75px; top: 15px; left: 0; border-radius: 50px; } .cloud-2 .cloud-part:nth-child(2) { width: 110px; height: 100px; top: -25px; left: 40px; } .cloud-2 .cloud-part:nth-child(3) { width: 140px; height: 65px; top: 10px; left: 80px; border-radius: 40px; } .cloud-3 { top: 5%; right: 35%; opacity: 0.6; } .cloud-3 .cloud-part:nth-child(1) { width: 150px; height: 60px; top: 10px; left: 0; border-radius: 40px; } .cloud-3 .cloud-part:nth-child(2) { width: 100px; height: 85px; top: -20px; left: 35px; } /* Clouds spread across the page, not just the top */ .cloud-4 { top: 35%; right: 12%; opacity: 0.5; } .cloud-4 .cloud-part:nth-child(1) { width: 200px; height: 85px; top: 18px; left: 0; border-radius: 55px; } .cloud-4 .cloud-part:nth-child(2) { width: 130px; height: 110px; top: -30px; left: 50px; } .cloud-4 .cloud-part:nth-child(3) { width: 160px; height: 75px; top: 12px; left: 100px; border-radius: 45px; } .cloud-5 { top: 50%; left: 8%; opacity: 0.45; } .cloud-5 .cloud-part:nth-child(1) { width: 170px; height: 70px; top: 14px; left: 0; border-radius: 45px; } .cloud-5 .cloud-part:nth-child(2) { width: 110px; height: 95px; top: -22px; left: 45px; } .cloud-5 .cloud-part:nth-child(3) { width: 130px; height: 60px; top: 8px; left: 85px; border-radius: 38px; } .cloud-6 { top: 70%; right: 25%; opacity: 0.35; } .cloud-6 .cloud-part:nth-child(1) { width: 140px; height: 55px; top: 10px; left: 0; border-radius: 35px; } .cloud-6 .cloud-part:nth-child(2) { width: 90px; height: 80px; top: -18px; left: 30px; } @keyframes cloudFloat { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(40px); } } /* Birds - simple V shapes using borders */ .bird { position: absolute; width: 18px; height: 6px; border: none; background: none; } .bird::before, .bird::after { content: ''; position: absolute; top: 0; width: 50%; height: 100%; border-top: 2px solid rgba(80, 60, 40, 0.35); border-radius: 50% 50% 0 0; } .bird::before { left: 0; transform: rotate(-15deg); } .bird::after { right: 0; transform: rotate(15deg); } .bird-1 { top: 20%; right: 25%; animation: birdFly 8s ease-in-out infinite; } .bird-2 { top: 14%; right: 30%; width: 14px; height: 5px; animation: birdFly 7s ease-in-out infinite; animation-delay: -2s; opacity: 0.6; } .bird-3 { top: 18%; right: 22%; width: 12px; height: 4px; animation: birdFly 9s ease-in-out infinite; animation-delay: -4s; opacity: 0.5; } /* More birds spread across the sky */ .bird-4 { top: 30%; left: 20%; width: 16px; height: 5px; animation: birdFly 10s ease-in-out infinite; animation-delay: -1s; opacity: 0.4; } .bird-5 { top: 35%; left: 25%; width: 12px; height: 4px; animation: birdFly 8s ease-in-out infinite; animation-delay: -3s; opacity: 0.3; } .bird-6 { top: 45%; right: 35%; width: 14px; height: 5px; animation: birdFly 11s ease-in-out infinite; animation-delay: -5s; opacity: 0.35; } .bird-7 { top: 55%; right: 15%; width: 10px; height: 3px; animation: birdFly 7s ease-in-out infinite; animation-delay: -2s; opacity: 0.25; } @keyframes birdFly { 0%, 100% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(-15px, -8px) scaleY(0.6); } 50% { transform: translate(-30px, -3px) scaleY(1); } 75% { transform: translate(-15px, -10px) scaleY(0.7); } } /* Day mode: soften hero heading gradient (less harsh purple) */ body.day-mode .hero h1 { background: linear-gradient(135deg, #2d1f14 0%, #8e7acb 42%, #cfa0b6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Day mode: main CTA - clean + airy, white text (no weird glass blob) */ body.day-mode .hero-cta { color: rgba(255, 255, 255, 0.96); background: linear-gradient(135deg, rgba(142, 122, 203, 0.92) 0%, rgba(196, 120, 154, 0.80) 100%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 18px 55px rgba(139, 108, 193, 0.26), 0 12px 38px rgba(232, 160, 191, 0.14); } body.day-mode .hero-cta::before { display: none; } body.day-mode .hero-cta:hover { box-shadow: 0 24px 70px rgba(139, 108, 193, 0.30), 0 16px 44px rgba(232, 160, 191, 0.18); } /* Day mode: CTA heading gradient */ body.day-mode .cta h2 { background: linear-gradient(135deg, #7a5bb0, #c4789a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Day mode: benefits cards */ body.day-mode .benefits { /* Keep this section consistent with the rest of the day-mode flow */ background: transparent; } body.day-mode .benefit-card { /* Slightly less bright + a hint of cool tone to improve readability */ background: linear-gradient(160deg, rgba(248, 250, 255, 0.9), rgba(255, 236, 213, 0.82)); border-color: rgba(180, 150, 110, 0.22); box-shadow: 0 16px 35px rgba(120, 110, 90, 0.14); } body.day-mode .benefit-card:hover { box-shadow: 0 18px 45px rgba(120, 110, 90, 0.22), 0 0 0 1px rgba(180, 150, 110, 0.18); } body.day-mode .benefit-cover::after { background: linear-gradient(to top, rgba(248, 250, 255, 0.92) 0%, rgba(255, 236, 213, 0.55) 35%, transparent 100%); } body.day-mode .benefit-card:nth-child(2) .benefit-cover::after { background: linear-gradient(to top, rgba(248, 250, 255, 0.92) 0%, rgba(255, 236, 213, 0.55) 40%, rgba(255, 236, 213, 0.22) 60%, rgba(255, 236, 213, 0.78) 100%); } body.day-mode .benefit-cover--numa { background: linear-gradient(135deg, rgba(248, 250, 255, 0.95) 0%, #ffe0bf 60%, #f8cfa0 100%); } body.day-mode .benefit-card h3 { color: #2f3f7a; } body.day-mode .benefit-card p { color: #5a4a3f; } /* Day mode: social proof should not go "yellow haze" */ body.day-mode .social-proof { background: linear-gradient(180deg, rgba(219, 238, 255, 0.22) 0%, rgba(255, 243, 229, 0.0) 60%); } body.day-mode .social-proof-glass { /* cleaner + calmer (less "dirty glass") */ background: rgba(255, 255, 255, 0.18); border-color: rgba(120, 140, 180, 0.20); box-shadow: 0 16px 46px rgba(120, 110, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.16); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); --proof-text: rgba(31, 42, 87, 0.96); --proof-text-dim: rgba(45, 31, 20, 0.70); } /* Calming background (no avatars) */ body.day-mode .social-proof-glass::before { background: url('assets/backgrounds/2026-02-09-social-proof-israel-calm.jpg') center / cover no-repeat, radial-gradient(1200px 600px at 18% 10%, rgba(255, 255, 255, 0.16), transparent 60%), radial-gradient(900px 520px at 86% 86%, rgba(255, 255, 255, 0.08), transparent 55%); opacity: 0.56; } /* Readability layer above the sky bg (Headspace vibe) */ body.day-mode .social-proof-glass::after { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.56) 46%, rgba(255, 255, 255, 0.50) 100% ); opacity: 1; } body.day-mode .social-proof-glass .section-title { text-shadow: 0 10px 26px rgba(31, 42, 87, 0.12); } body.day-mode .proof-live-pill { background: rgba(255, 255, 255, 0.34); border-color: rgba(120, 140, 180, 0.20); box-shadow: 0 12px 34px rgba(120, 110, 90, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.52); } /* Calm the big numbers a bit in day mode */ body.day-mode .proof-stat-value { font-weight: 750; text-shadow: 0 10px 18px rgba(70, 60, 40, 0.14); } body.day-mode .proof-stat-label { color: rgba(45, 31, 20, 0.66); } /* Day mode: FAQ cards */ body.day-mode .faq-item { box-shadow: 0 16px 35px rgba(180, 140, 60, 0.12); } body.day-mode .faq-item:hover { box-shadow: 0 18px 45px rgba(180, 140, 60, 0.2); } /* Day mode: footer brand gradient */ body.day-mode .footer-brand { background: linear-gradient(135deg, #7a5bb0, #c4789a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Day mode: phone frame adjustments */ body.day-mode .phone-frame { background: linear-gradient(160deg, #f5e6d0, #eedcc5); border-color: rgba(180, 140, 80, 0.25); box-shadow: 0 8px 40px rgba(180, 140, 60, 0.15), 0 0 0 1px rgba(180, 140, 80, 0.1); } body.day-mode .phone-notch { background: #e8d6c0; } body.day-mode .phone-screen { background: linear-gradient(180deg, #f0e0cc 0%, #e8d4be 50%, #e0c8b0 100%); } /* Day mode: breathing screen */ body.day-mode .breathing-screen { --breathing-border: rgba(120, 140, 180, 0.25); --breathing-title: #2b3d64; --breathing-text: rgba(43, 61, 100, 0.85); --breathing-btn-text: #2b3d64; background: linear-gradient(180deg, #FFF3E5 0%, #FFECD5 50%, #FED6AA 100%) !important; box-shadow: 0 18px 40px rgba(80, 60, 30, 0.15); } body.day-mode .breathing-title { color: var(--breathing-title); } body.day-mode .breathing-circle { background: var(--breathing-circle); border-color: var(--breathing-circle-border); box-shadow: 0 0 20px var(--breathing-circle-glow); } body.day-mode .breathing-circle.expanded { background: radial-gradient(circle at 30% 30%, rgba(200, 215, 255, 0.75) 0%, rgba(150, 175, 240, 0.35) 60%, transparent 80%); box-shadow: 0 0 28px var(--breathing-circle-glow); } body.day-mode .breathing-phase { color: var(--breathing-text); } body.day-mode .breathing-timer { color: var(--breathing-text); } body.day-mode .breathing-start-btn { border-color: rgba(43, 61, 100, 0.2); } body.day-mode .breathing-screen[data-breathing="stress"] { --breathing-bg: linear-gradient(180deg, #ECFFF9 0%, #E2F8F2 55%, #D7F0EA 100%); --breathing-border: rgba(90, 170, 170, 0.3); --breathing-title: #1d4e4f; --breathing-text: rgba(29, 78, 79, 0.85); --breathing-circle: radial-gradient(circle at 30% 30%, rgba(120, 210, 200, 0.55) 0%, rgba(90, 170, 165, 0.25) 55%, transparent 78%); --breathing-circle-expanded: radial-gradient(circle at 30% 30%, rgba(150, 225, 218, 0.7) 0%, rgba(105, 180, 175, 0.3) 60%, transparent 82%); --breathing-circle-border: rgba(90, 170, 165, 0.45); --breathing-circle-glow: rgba(90, 170, 165, 0.25); --breathing-btn-bg: linear-gradient(135deg, rgba(142, 214, 208, 0.7), rgba(110, 185, 182, 0.8)); --breathing-btn-text: #1d4e4f; } body.day-mode .breathing-screen[data-breathing="sleep"] { --breathing-bg: linear-gradient(180deg, #F4F0FF 0%, #ECE6FF 55%, #E2DBFF 100%); --breathing-border: rgba(140, 130, 210, 0.3); --breathing-title: #3b2f6d; --breathing-text: rgba(59, 47, 109, 0.85); --breathing-circle: radial-gradient(circle at 30% 30%, rgba(170, 160, 235, 0.6) 0%, rgba(135, 125, 210, 0.3) 55%, transparent 78%); --breathing-circle-expanded: radial-gradient(circle at 30% 30%, rgba(185, 175, 245, 0.75) 0%, rgba(145, 135, 220, 0.35) 60%, transparent 82%); --breathing-circle-border: rgba(135, 125, 210, 0.45); --breathing-circle-glow: rgba(135, 125, 210, 0.28); --breathing-btn-bg: linear-gradient(135deg, rgba(188, 176, 242, 0.75), rgba(150, 136, 225, 0.85)); --breathing-btn-text: #3b2f6d; } body.day-mode .breathing-screen[data-breathing="focus"] { --breathing-bg: linear-gradient(180deg, #FFF7E8 0%, #FFEED5 55%, #FFE4BF 100%); --breathing-border: rgba(210, 160, 90, 0.3); --breathing-title: #6a4a1f; --breathing-text: rgba(106, 74, 31, 0.85); --breathing-circle: radial-gradient(circle at 30% 30%, rgba(240, 190, 120, 0.6) 0%, rgba(210, 160, 90, 0.3) 55%, transparent 78%); --breathing-circle-expanded: radial-gradient(circle at 30% 30%, rgba(245, 205, 140, 0.75) 0%, rgba(220, 170, 100, 0.35) 60%, transparent 82%); --breathing-circle-border: rgba(210, 160, 90, 0.45); --breathing-circle-glow: rgba(210, 160, 90, 0.25); --breathing-btn-bg: linear-gradient(135deg, rgba(244, 201, 122, 0.75), rgba(225, 168, 79, 0.85)); --breathing-btn-text: #6a4a1f; } body.day-mode .breathing-popup { background: linear-gradient(160deg, #FFF3E5, #FFECD5); border-color: rgba(63, 81, 148, 0.25); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15); } body.day-mode .breathing-popup h3 { color: #3F5194; } body.day-mode .breathing-popup p { color: #7a6252; } body.day-mode .breathing-popup-dismiss { color: #7a6252; border-color: rgba(63, 81, 148, 0.2); } /* Day mode: radio interface */ body.day-mode .radio-interface { background: linear-gradient(160deg, rgba(255, 243, 229, 0.8), rgba(254, 214, 170, 0.5)); } body.day-mode .radio-subtitle { color: #5a4a88; } body.day-mode .freq-number { text-shadow: none; } body.day-mode .freq-unit { color: #6b5646; } body.day-mode .freq-label { color: #3b2c20; } body.day-mode .freq-range { color: #6b5646; } body.day-mode #radioTimer { color: #2d1f14; } body.day-mode .timer-label { color: #7a6252; } body.day-mode .freq-pills { background: rgba(255, 244, 228, 0.78); border-color: rgba(122, 98, 82, 0.28); box-shadow: 0 12px 30px rgba(120, 110, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.75); } body.day-mode .freq-pill { color: #5a4738; } body.day-mode .freq-pill:hover { color: #2d1f14; background: rgba(122, 98, 82, 0.12); } body.day-mode .freq-pill .pill-hz { opacity: 0.75; } body.day-mode .freq-pill.active { color: #2d1f14; background: linear-gradient(135deg, rgba(109, 213, 196, 0.26), rgba(159, 143, 239, 0.22), rgba(232, 160, 191, 0.2)); box-shadow: 0 0 14px rgba(159, 143, 239, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72); } body.day-mode .insight-compare-label { text-shadow: 0 3px 12px rgba(255, 255, 255, 0.8); } body.day-mode .insight-compare-label .ic-main { color: #233060; } body.day-mode .insight-compare-label .ic-sub { color: rgba(35, 48, 96, 0.82); } /* Day mode: audio player */ body.day-mode .audio-player { background: rgba(255, 240, 220, 0.95); border-top-color: rgba(200, 160, 100, 0.2); } /* Day mode: hide hero moon completely */ body.day-mode .hero-moon { display: none; } /* Day mode: footer border */ body.day-mode .site-footer { border-top-color: rgba(200, 160, 100, 0.2); } /* Day mode: sticky CTA */ body.day-mode .sticky-download-cta { box-shadow: 0 4px 20px rgba(180, 140, 60, 0.2); } /* Sticky CTA text: full on desktop, short on mobile */ .sticky-cta-short { display: none; } @media (max-width: 480px) { .sticky-cta-full { display: none; } .sticky-cta-short { display: inline; } } @media (max-width: 768px) { .theme-toggle { top: 0.85rem; left: 0.85rem; width: 36px; height: 36px; } .theme-toggle svg { width: 16px; height: 16px; } .sun { width: 70px; height: 70px; } .sun-rays { width: 70px; height: 70px; } } /* ===== NUMA CHAT WIDGET ===== */ /* Embedded Numa (homepage section) */ .numa-embed { width: 100%; } .numa-phone-wrap { display: flex; justify-content: center; } .numa-phone-mockup { transform: none; } /* Day mode: make the phone pop a bit more (still subtle) */ body.day-mode .numa-phone-mockup .phone-frame { box-shadow: 0 22px 70px rgba(120, 110, 90, 0.16), 0 0 0 1px rgba(180, 140, 80, 0.14); } body.day-mode .numa-subtitle { color: rgba(45, 31, 20, 0.60); } .numa-phone-mockup .phone-frame { /* Closer to real iPhone proportions + readable on mobile */ width: clamp(240px, 28vw, 300px); height: auto; max-width: 100%; aspect-ratio: 9 / 19.5; } .numa-phone-mockup .phone-screen { align-items: stretch; justify-content: stretch; } /* Static Numa screenshot (replaces interactive chat) */ .numa-screen-static { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; } .numa-screenshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .numa-panel--phone { position: relative; inset: auto; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; border: none; box-shadow: none; } /* (numa-embed-hint removed) */ .numa-launcher { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 1100; width: 56px; height: 56px; border: none; padding: 0; cursor: pointer; background: transparent; box-shadow: none; transition: transform 0.25s var(--ease-spring); } .numa-launcher:hover { transform: scale(1.08); } .numa-launcher:active { transform: scale(0.96); } .numa-launcher:focus-visible { outline: 3px solid rgba(159,143,239,0.45); outline-offset: 4px; border-radius: 14px; } .numa-launcher-img { width: 100%; height: 100%; border-radius: 0; object-fit: contain; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); } .numa-launcher.open { display: none; } .blog-page .numa-launcher { display: none; } /* Hide sticky Numa widget on guides pages */ .guide-page ~ .numa-launcher, .guide-page ~ .numa-panel { display: none !important; } /* Chat Panel */ .numa-panel { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 1100; width: 360px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 3rem); background: #FFF3E5; border-radius: 1.25rem; box-shadow: 0 12px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(200,160,100,0.15); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.96); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s var(--ease-spring); direction: rtl; } .numa-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Embedded mode: airy, seamless, always visible (glass) */ .numa-panel--embed { position: relative; inset: auto; width: 100%; max-width: 560px; height: 560px; max-height: 70vh; margin-right: auto; margin-left: 0; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(247, 241, 231, 0.56) 100%); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 26px 90px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.10) inset; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); opacity: 1; visibility: visible; transform: none; } .numa-panel--embed .numa-panel-header { background: rgba(255, 247, 237, 0.72); border-bottom: 1px solid rgba(0, 0, 0, 0.04); justify-content: flex-start; } .numa-panel--embed .numa-panel-title { color: #2c1f18; } .numa-panel-status { font-weight: 500; font-size: 0.82rem; color: rgba(44, 31, 24, 0.55); margin-right: 0.35rem; } .numa-panel--embed .numa-panel-messages { background: transparent; } .numa-panel--embed .numa-quick-replies { gap: 0.35rem; } /* Apple-ish bubbles */ .numa-panel--embed .numa-msg { font-size: 0.86rem; line-height: 1.45; padding: 0.45rem 0.7rem; border-radius: 14px; } .numa-panel--embed .numa-msg.user { align-self: flex-end; background: rgba(255, 255, 255, 0.9); color: #1e1e1e; border: 1px solid rgba(0, 0, 0, 0.04); border-bottom-left-radius: 6px; } .numa-panel--embed .numa-msg.assistant { align-self: flex-start; background: rgba(139, 108, 193, 0.1); color: #2a1f3a; border: none; border-bottom-right-radius: 6px; } .numa-panel--embed .numa-typing { align-self: flex-start; background: rgba(139, 108, 193, 0.10); border: none; padding: 0.45rem 0.7rem; border-radius: 14px; border-bottom-right-radius: 6px; } .numa-panel--embed .numa-panel-input { /* App-like composer: borderless, seamless, soft shadow */ flex-direction: row-reverse; /* put send button on the LEFT like the app */ margin: 0.85rem; padding: 0.6rem; border-radius: 999px; background: rgba(255, 247, 237, 0.92); border: none; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.55) inset; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); } .numa-panel--embed .numa-panel-input:focus-within { box-shadow: 0 22px 60px rgba(139, 108, 193, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.70) inset; } .numa-panel--embed .numa-panel-input input { background: transparent; border: none; box-shadow: none; padding: 0.7rem 0.85rem; font-size: 0.98rem; color: #1e1e1e; } .numa-panel--embed .numa-panel-input input::placeholder { color: rgba(30, 30, 30, 0.35); } .numa-panel--embed .numa-panel-input input:focus { outline: none; } .numa-panel--embed .numa-panel-input button { width: 50px; height: 50px; background: radial-gradient(120% 120% at 20% 20%, #9f8fef 0%, #8b6cc1 45%, #ec4899 100%); box-shadow: 0 14px 28px rgba(139, 108, 193, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.55) inset; } .numa-panel--embed .numa-panel-input button:hover { transform: scale(1.03); } .numa-panel--embed .numa-panel-input button:active { transform: scale(0.98); } .numa-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: rgba(139,108,193,0.08); border-bottom: 1px solid rgba(200,160,100,0.15); flex-shrink: 0; } .numa-panel-title { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; color: #4a3728; } .numa-panel-avatar { width: 32px; height: 32px; border-radius: 0; object-fit: contain; } .numa-panel-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #9a8272; line-height: 1; padding: 0.25rem; transition: color 0.2s; } .numa-panel-close:hover { color: #4a3728; } /* Messages area */ .numa-panel-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; } .numa-msg { max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.55; word-wrap: break-word; animation: numaMsgIn 0.25s ease-out; } @keyframes numaMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .numa-msg.user { align-self: flex-start; background: #8b6cc1; color: #fff; border-bottom-right-radius: 0.25rem; } .numa-msg.assistant { align-self: flex-end; background: #fff; color: #4a3728; border: 1px solid rgba(200,160,100,0.2); border-bottom-left-radius: 0.25rem; } /* Typing indicator */ .numa-typing { align-self: flex-end; display: flex; gap: 4px; padding: 0.65rem 0.9rem; background: #fff; border-radius: 1rem; border: 1px solid rgba(200,160,100,0.2); border-bottom-left-radius: 0.25rem; } .numa-typing-dot { width: 6px; height: 6px; background: #c4a882; border-radius: 50%; animation: numaTypingBounce 1.2s ease-in-out infinite; } .numa-typing-dot:nth-child(2) { animation-delay: 0.15s; } .numa-typing-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes numaTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Locked view */ .numa-panel-locked { display: none; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; text-align: center; } .numa-panel-locked.visible { display: flex; } .numa-panel-locked p { color: #7a6252; font-size: 0.95rem; line-height: 1.6; } .numa-panel-cta-buttons { display: flex; gap: 0.5rem; } .numa-panel-cta-btn { display: inline-block; padding: 0.55rem 1.2rem; background: linear-gradient(135deg, #8b6cc1, #7c5db0); color: #fff; text-decoration: none; border-radius: 50px; font-size: 0.85rem; font-weight: 600; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s; } .numa-panel-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(139,108,193,0.35); } /* Input area */ .numa-panel-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.85rem; border-top: 1px solid rgba(200,160,100,0.15); flex-shrink: 0; background: rgba(255,243,229,0.6); } .numa-panel-input.hidden { display: none; } .numa-panel-input input { flex: 1; border: 1px solid rgba(200,160,100,0.25); border-radius: 1.5rem; padding: 0.55rem 1rem; font-size: 0.88rem; font-family: inherit; background: #fff; color: #4a3728; outline: none; transition: border-color 0.2s; } .numa-panel-input input:focus { border-color: #8b6cc1; } .numa-panel-input button { width: 36px; height: 36px; border-radius: 50%; border: none; background: linear-gradient(135deg, #8b6cc1, #7c5db0); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s var(--ease-spring); } .numa-panel-input button:hover { transform: scale(1.06); } /* Night mode overrides */ body:not(.day-mode) .numa-panel { background: #1e1b2e; box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(159,143,239,0.1); } body:not(.day-mode) .numa-panel-header { background: rgba(159,143,239,0.06); border-bottom-color: rgba(159,143,239,0.1); } body:not(.day-mode) .numa-panel-title { color: var(--text-bright); } body:not(.day-mode) .numa-panel-close { color: var(--text-muted); } body:not(.day-mode) .numa-panel-close:hover { color: var(--text-bright); } body:not(.day-mode) .numa-panel-messages { background: rgba(10, 12, 26, 0.4); } body:not(.day-mode) .numa-msg.assistant { background: var(--glass-bg); color: var(--text); border-color: var(--glass-border); } body:not(.day-mode) .numa-typing { background: var(--glass-bg); border-color: var(--glass-border); } body:not(.day-mode) .numa-typing-dot { background: var(--lavender); } body:not(.day-mode) .numa-panel-locked p { color: var(--text-dim); } body:not(.day-mode) .numa-panel-input { border-top-color: rgba(159,143,239,0.1); background: rgba(17,25,54,0.5); } body:not(.day-mode) .numa-panel-input input { background: var(--bg-surface); border-color: var(--glass-border); color: var(--text); } body:not(.day-mode) .numa-panel-input input:focus { border-color: var(--lavender); } /* Ensure embedded chat stays beige even in night mode overrides (higher specificity + later) */ body:not(.day-mode) .numa-panel.numa-panel--embed { background: #F7F1E7; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04); } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-panel-header { background: rgba(255, 247, 237, 0.78); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-panel-title { color: #2c1f18; } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-panel-input { background: rgba(255, 255, 255, 0.82); border: none; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.55) inset; } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-panel-input:focus-within { box-shadow: 0 22px 60px rgba(139, 108, 193, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.70) inset; } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-panel-input input { background: transparent; border: none; color: #1e1e1e; } .numa-panel--embed .numa-quick-reply { /* Match app: soft, borderless “prompt bubbles” */ background: rgba(246, 231, 213, 0.92); border: none; color: rgba(44, 31, 24, 0.92); border-radius: 13px; padding: 0.4rem 0.75rem; font-size: 0.82rem; line-height: 1.35; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); } .numa-panel--embed .numa-quick-reply:hover { background: rgba(246, 231, 213, 1); } @media (max-width: 480px) { .numa-panel { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-width: none; height: calc(100vh - 1rem); max-height: calc(100vh - 1rem); border-radius: 1rem; } .numa-launcher { bottom: 1rem; left: 1rem; width: 50px; height: 50px; } } /* Quick-reply buttons */ .numa-quick-replies { display: flex; flex-direction: column; gap: 0.45rem; align-self: flex-end; max-width: 85%; animation: numaMsgIn 0.25s ease-out; } .numa-quick-reply { background: #fff; color: #4a3728; border: 1px solid rgba(200,160,100,0.25); border-radius: 1rem; padding: 0.55rem 0.9rem; font-size: 0.88rem; font-family: inherit; cursor: pointer; text-align: right; line-height: 1.4; transition: background 0.2s, border-color 0.2s, transform 0.15s; } .numa-quick-reply:hover { background: rgba(139,108,193,0.08); border-color: rgba(139,108,193,0.3); } .numa-quick-reply:active { transform: scale(0.97); } body:not(.day-mode) .numa-quick-reply { background: var(--glass-bg); color: var(--text); border-color: var(--glass-border); } body:not(.day-mode) .numa-quick-reply:hover { background: rgba(159,143,239,0.12); border-color: var(--lavender); } /* Embedded Numa: warm beige (no grey) */ .numa-panel.numa-panel--embed { background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(244, 230, 211, 0.96) 100%); border: 1px solid rgba(0, 0, 0, 0.04); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .numa-panel.numa-panel--embed .numa-panel-messages { background: transparent; } /* Keep embedded chat beige even when site is in night mode */ body:not(.day-mode) .numa-panel.numa-panel--embed { background: linear-gradient(180deg, rgba(255, 247, 237, 0.98) 0%, rgba(244, 230, 211, 0.96) 100%); border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 32px 120px rgba(0, 0, 0, 0.38); } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-panel-messages { background: transparent; } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-msg.user { background: rgba(255, 255, 255, 0.80); color: #1e1e1e; border: 1px solid rgba(0, 0, 0, 0.06); } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-msg.assistant { background: rgba(139, 108, 193, 0.12); color: #2a1f3a; border: none; } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-typing { background: rgba(139, 108, 193, 0.10); border: none; } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-quick-reply { background: rgba(246, 231, 213, 0.94); border: none; color: rgba(44, 31, 24, 0.92); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); } body:not(.day-mode) .numa-panel.numa-panel--embed .numa-quick-reply:hover { background: rgba(246, 231, 213, 1); } .numa-phone-mockup .numa-panel--embed { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-radius: inherit; border: none; box-shadow: none; } body:not(.day-mode) .numa-phone-mockup .numa-panel--embed { border: none; box-shadow: none; border-radius: inherit; } /* ===== SECTION SCROLL EFFECTS ===== */ /* Container for per-section scroll-reactive wisps/particles */ .section-scroll-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.6s ease; } .section-scroll-fx.active { opacity: 1; } /* Individual wisp — small translucent dot that drifts with scroll */ .scroll-wisp { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--lavender-glow) 0%, transparent 70%); opacity: 0; will-change: transform, opacity; animation: wispFloat linear infinite; animation-play-state: paused; } .section-scroll-fx.active .scroll-wisp { animation-play-state: running; } /* Day mode wisps: warm golden tones */ body.day-mode .scroll-wisp { background: radial-gradient(circle, rgba(240, 194, 122, 0.25) 0%, transparent 70%); } /* Night mode wisps: cool lavender/aurora tones */ body:not(.day-mode) .scroll-wisp:nth-child(odd) { background: radial-gradient(circle, rgba(159, 143, 239, 0.2) 0%, transparent 70%); } body:not(.day-mode) .scroll-wisp:nth-child(even) { background: radial-gradient(circle, rgba(109, 213, 196, 0.15) 0%, transparent 70%); } @keyframes wispFloat { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(var(--wisp-drift, -20px)) translateX(calc(var(--wisp-drift, 15px) * 0.5)); } } /* Ensure section positioning for the absolute-positioned fx container */ [data-scroll-section] { position: relative; } /* Hide section fx on mobile for performance — keep only on larger screens */ @media (max-width: 768px) { .section-scroll-fx .scroll-wisp { display: none; } .section-scroll-fx .scroll-wisp:nth-child(-n+2) { display: block; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } }