resolves --gradient etc. to the CG values; everything outside keeps the Aspyn pink/orange. */ .cg-page { --cyan: #00C2D4; --cyan-dark: #0099A8; --green: #3DD68C; --green-dark:#28B870; --teal: #1A3B4A; --teal-mid: #2C5464; --teal-light:#3A6E82; --bg: #F2FBFC; --bg2: #E8F6F8; --white: #FFFFFF; --dark: #0F2530; --mid: #4A7080; --light: #7AA8B8; --border: rgba(0,194,212,.12); --gradient: linear-gradient(135deg, #00C2D4 0%, #3DD68C 100%); --gradient-r: linear-gradient(135deg, #3DD68C 0%, #00C2D4 100%); --gradient-dark: linear-gradient(135deg, #1A3B4A 0%, #2C5464 100%); --gradient-soft: linear-gradient(135deg, rgba(0,194,212,.1) 0%, rgba(61,214,140,.1) 100%); --font-head: 'Sora', sans-serif; --font-body: 'DM Sans', sans-serif; --nav-h: 72px; --radius: 20px; --radius-sm: 12px; --shadow-sm: 0 2px 12px rgba(0,0,0,.06); --shadow-md: 0 8px 32px rgba(0,0,0,.10); --shadow-cyan: 0 8px 30px rgba(0,194,212,.35); --shadow-card: 0 4px 24px rgba(0,0,0,.06), 0 0 0 1px rgba(0,194,212,.08); --t: .25s ease; /* Soft cyan-tinted background on the page wrapper itself, so the page reads as the CG visual world even though is still Aspyn cream. */ background: var(--bg); color: var(--dark); } /* ── Brand lockup at the top of the hero — makes the ConnectGroove name unmistakably prominent (operator feedback: "put the name ConnectGroove in evidence in the hero section"). */ .cg-brand-lockup { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 28px; } .cg-brand-lockup .cg-brand-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--gradient-dark); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(26,59,74,.28), 0 0 0 1px rgba(0,194,212,.18); flex-shrink: 0; } .cg-brand-lockup .cg-brand-text { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.5px; line-height: 1; } .cg-brand-lockup .cg-brand-text .cg-b-connect { color: var(--cyan); } .cg-brand-lockup .cg-brand-text .cg-b-groove { color: var(--green); } /* ── RESET — scoped to .cg-page so we don't reset the Aspyn header/ footer/lists/links/buttons outside the CG subtree. */ .cg-page, .cg-page *, .cg-page *::before, .cg-page *::after { box-sizing: border-box; } .cg-page { font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.65; } .cg-page img, .cg-page svg { display: block; max-width: 100%; } .cg-page ul, .cg-page ol { list-style: none; padding: 0; margin: 0; } .cg-page a { text-decoration: none; color: inherit; transition: color var(--t); } .cg-page button { cursor: pointer; border: none; background: none; font-family: var(--font-body); } /* ── TYPOGRAPHY ── */ h1,h2,h3,h4,h5 { font-family:var(--font-head); font-weight:800; line-height:1.08; letter-spacing:-.03em; color:var(--dark); } h1 { font-size:clamp(36px,5vw,68px); } h2 { font-size:clamp(26px,3.5vw,48px); } h3 { font-size:clamp(18px,2.2vw,28px); } h4 { font-size:18px; font-weight:700; } p { color:var(--mid); line-height:1.7; } /* ── GRADIENT TEXT ── */ .gradient-text { background: var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .cyan-text { color:var(--cyan); } .green-text { color:var(--green); } .white-text { color:white; } /* ── LAYOUT ── */ .container { max-width:1160px; margin:0 auto; padding:0 60px; } .container-sm { max-width:840px; margin:0 auto; padding:0 60px; } section { padding:96px 0; } section[id] { position: relative; scroll-margin-top: calc(var(--nav-h) + 24px); } /* ── OVERLINE ── */ @media (min-width:2000px) { .container { max-width:1360px; } .container-sm { max-width:920px; } } .overline-badge { display:inline-flex; align-items:center; gap:8px; background:white; border:1.5px solid var(--border); border-radius:50px; padding:7px 18px; font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--mid); margin-bottom:24px; } .overline-badge.cyan { background:rgba(0,194,212,.07); border-color:rgba(0,194,212,.25); color:var(--cyan-dark); } .overline-badge .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--gradient); animation:pulse-dot 2s ease infinite; } @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(.75);} } /* ── BUTTONS ── */ .btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:var(--font-head); font-weight:600; transition:all var(--t); text-decoration:none; white-space:nowrap; } .btn-primary { background:var(--gradient); color:white; padding:14px 30px; border-radius:50px; font-size:15px; box-shadow:var(--shadow-cyan); } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,194,212,.45); color:white; } .btn-primary-lg { padding:18px 42px; font-size:17px; } .btn-ghost { background:transparent; color:var(--teal); border:1.5px solid rgba(26,59,74,.2); padding:13px 28px; border-radius:50px; font-size:15px; } .btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); } .btn-ghost-white { background:transparent; color:white; border:1.5px solid rgba(255,255,255,.35); padding:13px 28px; border-radius:50px; font-size:15px; } .btn-ghost-white:hover { border-color:rgba(255,255,255,.8); } .btn svg { transition:transform .2s; } .btn:hover svg { transform:translateX(3px); } /* ── STORE BADGES ── */ .store-badge { display:inline-flex; align-items:center; justify-content:flex-start; gap:12px; min-width:164px; min-height:54px; padding:10px 16px; border-radius:12px; background:#0b1418; border:1px solid rgba(255,255,255,.12); color:white; font-family:var(--font-head); font-size:14px; font-weight:600; transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); box-shadow:0 4px 16px rgba(26,59,74,.26); text-decoration:none; } .store-badge:hover { background:#071014; border-color:rgba(255,255,255,.24); color:white; transform:translateY(-2px); box-shadow:0 8px 28px rgba(26,59,74,.36); } .store-badge svg { flex:0 0 auto; } .store-badge-sub { display:block; font-size:10px; font-weight:500; opacity:.72; letter-spacing:0; margin-bottom:1px; line-height:1.1; } .store-badge-name { display:block; font-size:15px; font-weight:800; line-height:1.1; color:inherit; } .store-badge--light { background:white; color:var(--teal); border-color:rgba(255,255,255,.6); box-shadow:0 10px 26px rgba(0,0,0,.14); } .store-badge--light:hover { background:#f6fbfc; color:var(--teal); border-color:white; box-shadow:0 14px 32px rgba(0,0,0,.2); } /* ── CARDS ── */ .card { background:white; border-radius:var(--radius); border:1.5px solid var(--border); box-shadow:var(--shadow-card); transition:transform var(--t), box-shadow var(--t); } .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); } /* ── NAV ── */ #cg-nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; padding:0 60px; background:rgba(242,251,252,.9); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid transparent; transition:all .4s ease; } #cg-nav.scrolled { background:rgba(242,251,252,.97); border-bottom-color:var(--border); box-shadow:0 2px 24px rgba(0,0,0,.05); } .cg-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; } .cg-logo-icon { width:36px; height:36px; border-radius:10px; flex-shrink:0; background:var(--gradient-dark); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(0,0,0,.2); } .cg-logo-text { font-family:var(--font-head); font-size:18px; font-weight:800; color:var(--teal); } .cg-logo-text span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .cg-nav-links { display:flex; align-items:center; gap:8px; margin:0 auto; } .cg-nav-link { font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--mid); padding:8px 14px; border-radius:8px; transition:color var(--t), background var(--t); } .cg-nav-link:hover { color:var(--teal); background:rgba(0,0,0,.04); } .cg-nav-link.active { color:var(--cyan-dark); } .cg-nav-right { display:flex; align-items:center; gap:12px; flex-shrink:0; } .cg-nav-cta { background:var(--gradient); color:white; padding:10px 22px; border-radius:50px; font-family:var(--font-head); font-size:13px; font-weight:600; box-shadow:0 3px 14px rgba(0,194,212,.3); transition:all var(--t); } .cg-nav-cta:hover { transform:translateY(-1px); color:white; } .cg-hamburger { display:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; margin-left:8px; } .cg-hamburger span { display:block; width:24px; height:2px; background:var(--teal); border-radius:2px; transition:all .3s ease; transform-origin:center; } .cg-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .cg-hamburger.open span:nth-child(2) { opacity:0; } .cg-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } /* ── MOBILE MENU ── */ #cg-mobile-menu { position:fixed; top:var(--nav-h); left:0; right:0; z-index:999; background:rgba(242,251,252,.98); backdrop-filter:blur(24px); border-bottom:1px solid var(--border); padding:16px 24px 28px; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease; } #cg-mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:all; } .cg-mobile-links { display:flex; flex-direction:column; gap:4px; margin-bottom:20px; } .cg-mobile-link { font-family:var(--font-head); font-size:16px; font-weight:700; color:var(--teal); padding:14px 8px; border-bottom:1px solid var(--border); } /* ── SECTION HEADERS ── */ .section-header { text-align:center; max-width:700px; margin:0 auto 60px; } .section-header h2 { margin-bottom:16px; } .section-header p { font-size:17px; } /* ── FEATURE CARDS ── */ .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .feature-card { background:white; border:1.5px solid var(--border); border-radius:var(--radius); padding:32px; transition:all .25s; } .feature-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,194,212,.12); border-color:rgba(0,194,212,.25); } .feature-icon { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:24px; } .feature-icon.cyan { background:rgba(0,194,212,.1); } .feature-icon.green { background:rgba(61,214,140,.1); } .feature-icon.teal { background:rgba(26,59,74,.08); } .feature-title { font-family:var(--font-head); font-size:17px; font-weight:800; margin-bottom:10px; color:var(--teal); } .feature-desc { font-size:14px; line-height:1.7; } /* ── HOW IT WORKS ── */ .steps-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:0; } .step-row { display:grid; grid-template-columns:56px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--border); align-items:flex-start; } .step-row:last-child { border-bottom:none; } .step-num { width:48px; height:48px; border-radius:50%; flex-shrink:0; background:var(--gradient); color:white; font-family:var(--font-head); font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,194,212,.4); } .step-title { font-family:var(--font-head); font-size:18px; font-weight:800; margin-bottom:8px; color:var(--teal); } .step-desc { font-size:15px; line-height:1.7; } /* ── STAT CARDS ── */ .stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .stat-card { text-align:center; padding:32px 20px; } .stat-value { font-family:var(--font-head); font-size:40px; font-weight:800; line-height:1; margin-bottom:8px; } .stat-label { font-size:14px; color:var(--light); } /* ── CTA SECTION ── */ .cg-cta-card { background:var(--gradient-dark); border-radius:28px; padding:72px 60px; text-align:center; position:relative; overflow:hidden; } .cg-cta-card::before { content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(0,194,212,.15) 0%, transparent 70%); pointer-events:none; } .cg-cta-card h2 { color:white; margin-bottom:16px; } .cg-cta-card p { color:rgba(255,255,255,.7); font-size:17px; margin-bottom:36px; } .cg-cta-actions { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; } /* ── FOOTER ── */ .cg-footer { background:var(--teal); color:rgba(255,255,255,.55); padding:56px 0 28px; } .cg-footer-inner { max-width:1160px; margin:0 auto; padding:0 60px; } .cg-footer-grid { display:grid; grid-template-columns:1.45fr repeat(3,minmax(0,1fr)); gap:40px; margin-bottom:40px; } .cg-footer-tagline { font-size:14px; color:rgba(255,255,255,.4); margin-top:12px; max-width:240px; line-height:1.6; } .cg-footer-col-title { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:14px; } .cg-footer-link { display:block; font-size:14px; color:rgba(255,255,255,.5); padding:4px 0; transition:color var(--t); } .cg-footer-link:hover { color:white; } .cg-footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; } .cg-footer-copy { font-size:13px; } .cg-powered { font-size:12px; color:rgba(255,255,255,.3); } .cg-powered a { color:rgba(0,194,212,.6); } /* ── REVEAL ANIMATIONS ── */ .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .reveal.visible { opacity:1; transform:translateY(0); } .reveal-delay-1 { transition-delay:.12s; } .reveal-delay-2 { transition-delay:.24s; } .reveal-delay-3 { transition-delay:.36s; } .reveal-scale { opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease; } .reveal-scale.visible { opacity:1; transform:scale(1); } .reveal-left { opacity:0; transform:translateX(-24px); transition:opacity .7s ease, transform .7s ease; } .reveal-left.visible { opacity:1; transform:translateX(0); } .reveal-right { opacity:0; transform:translateX(24px); transition:opacity .7s ease, transform .7s ease; } .reveal-right.visible { opacity:1; transform:translateX(0); } /* ── KEYFRAMES ── */ @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } @keyframes blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} } @keyframes scanline { 0%{top:-10%} 100%{top:110%} } @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes orbPulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,194,212,.4)} 50%{box-shadow:0 0 0 20px rgba(0,194,212,0)} } @keyframes dataFlow { 0% { stroke-dashoffset:400; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100%{ stroke-dashoffset:0; opacity:0; } } @keyframes nodeGlow { 0%,100%{filter:drop-shadow(0 0 6px rgba(0,194,212,.5))} 50%{filter:drop-shadow(0 0 16px rgba(0,194,212,.9))} } @keyframes particleFloat { 0% { transform:translate(0,0) scale(1); opacity:.5; } 50% { transform:translate(var(--px),var(--py)) scale(1.1); opacity:.3; } 100% { transform:translate(0,0) scale(1); opacity:.5; } } /* ── HERO BLOBS ── */ .cg-blob { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; animation:blob 12s ease-in-out infinite; } .cg-blob-1 { width:520px; height:520px; background:rgba(0,194,212,.10); top:-120px; right:-60px; animation-delay:0s; } .cg-blob-2 { width:380px; height:380px; background:rgba(61,214,140,.08); bottom:-40px; right:200px; animation-delay:-5s; } .cg-blob-3 { width:280px; height:280px; background:rgba(26,59,74,.07); top:200px; left:-60px; animation-delay:-9s; } /* ── SUPPORT PAGE ── */ .faq-item { background:white; border:1.5px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; } .faq-question { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; cursor:pointer; font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--teal); transition:background var(--t); } .faq-question:hover { background:rgba(0,194,212,.04); } .faq-question .faq-icon { font-size:18px; transition:transform .3s ease; flex-shrink:0; color:var(--cyan); } .faq-item.open .faq-icon { transform:rotate(45deg); } .faq-answer { max-height:0; overflow:hidden; transition:max-height .4s ease; } .faq-answer-inner { padding:0 24px 20px; font-size:14px; color:var(--mid); line-height:1.75; } .faq-item.open .faq-answer { max-height:400px; } /* ── LEGAL PAGES ── */ .legal-page { padding:calc(var(--nav-h) + 56px) 0 96px; } .legal-inner { max-width:780px; margin:0 auto; padding:0 60px; } .legal-inner h1 { font-size:clamp(26px,3.5vw,44px); margin-bottom:8px; } .legal-meta { font-size:14px; color:var(--light); margin-bottom:44px; } .legal-inner h2 { font-size:19px; font-weight:800; margin:36px 0 12px; padding-top:20px; border-top:1px solid var(--border); color:var(--teal); } .legal-inner h3 { font-size:15px; font-weight:700; margin:20px 0 8px; color:var(--teal); } .legal-inner p { font-size:15px; line-height:1.78; margin-bottom:14px; } .legal-inner ul { padding-left:20px; margin-bottom:14px; } .legal-inner li { font-size:15px; color:var(--mid); line-height:1.78; margin-bottom:6px; list-style:disc; } .legal-inner strong { color:var(--teal); } .legal-inner a { color:var(--cyan-dark); text-decoration:underline; } .highlight-box { background:rgba(0,194,212,.06); border:1px solid rgba(0,194,212,.2); border-left:3px solid var(--cyan); border-radius:var(--radius-sm); padding:16px 20px; margin:18px 0; } .highlight-box p { margin:0; font-size:14px; } /* ── RESPONSIVE ── */ @media(max-width:1024px) { .cg-nav-links { display:none; } .cg-hamburger { display:flex; } #cg-nav { padding:0 20px; } .cg-nav-cta { display:none; } .cg-nav-right { margin-left:auto; gap:8px; } .feature-grid { grid-template-columns:1fr 1fr; } .stat-grid { grid-template-columns:1fr 1fr; } .cg-footer-grid { grid-template-columns:1fr 1fr; } .cg-cta-card { padding:52px 36px; } section { padding:72px 0; } .container, .container-sm { padding:0 32px; } .legal-inner { padding:0 32px; } } @media(max-width:640px) { .feature-grid { grid-template-columns:1fr; } .stat-grid { grid-template-columns:1fr 1fr; } .cg-footer-grid { grid-template-columns:1fr; gap:28px; } .cg-footer-inner { padding:0 24px; } .cg-footer-bottom { flex-direction:column; text-align:center; } .cg-cta-card { padding:40px 24px; border-radius:20px; } section { padding:56px 0; } .container, .container-sm { padding:0 20px; } .legal-inner { padding:0 20px; } .reveal-left, .reveal-right { transform:translateY(24px); } .reveal-left.visible, .reveal-right.visible { transform:translateY(0); } .benefits-list li { align-items:flex-start; } .benefits-list li span:last-child { min-width:0; } } @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ── CG Lang toggle active state ── Matches the main-site pattern in css/nav.css: white pill on subtle shadow, no !important needed since this selector is the only one targeting it. */ .lang-btn.active { background: white; color: var(--teal); box-shadow: 0 1px 6px rgba(0,0,0,.1); border-radius: 50px; } /* ── Inline grid safety net for ConnectGroove pages ── Same intent as the main-site rule in global.css: collapse any inline grid-template-columns that wasn't given its own media query. */ @media(max-width:1024px) { [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; } } @media(max-width:640px) { [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:1fr 1.4fr"] { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════ CG LOGO SHRINK — max-width only, no position switching ═══════════════════════════════════════════════════════ */ .cg-logo { align-items: center; gap: 8px; flex-shrink: 0; /* overflow hidden on logo clips both text and CG mark together */ overflow: hidden; } #cg-nav .cg-logo { width: 192px; min-width: 192px; } /* Text wrapper collapses both words as a unit */ .cg-logo-text-wrap { display: inline-flex; align-items: baseline; overflow: hidden; white-space: nowrap; max-width: 200px; opacity: 1; transition: max-width .55s cubic-bezier(.4, 0, .2, 1), opacity .35s ease; } .cg-logo-connect { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--teal); letter-spacing: -.3px; } .cg-logo-groove { font-family: var(--font-head); font-size: 18px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -.3px; } /* CG mark — same max-width technique, never uses position:absolute */ .cg-logo-cg { font-family: var(--font-head); font-size: 18px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; white-space: nowrap; overflow: hidden; max-width: 0; opacity: 0; /* CG fades IN with a delay (after text collapses) */ /* CG fades OUT faster (before text starts expanding) */ transition: max-width .55s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; } /* ── SCROLLED ── collapse text, reveal CG ── */ #cg-nav.scrolled .cg-logo-text-wrap { max-width: 0; opacity: 0; /* text collapses with no delay */ transition: max-width .5s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; } #cg-nav.scrolled .cg-logo-cg { max-width: 40px; opacity: 1; /* CG appears after text is mostly gone (0.2s delay) */ transition: max-width .5s cubic-bezier(.4, 0, .2, 1) .2s, opacity .3s ease .2s; } /* ── UN-SCROLLED ── CG disappears first, then text expands ── */ /* (these are the default non-scrolled transitions above) */ /* CG fades out instantly (0s delay), then text expands after 0.15s */ #cg-nav:not(.scrolled) .cg-logo-cg { transition: max-width .5s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; /* fast fade-out, no delay */ } #cg-nav:not(.scrolled) .cg-logo-text-wrap { transition: max-width .5s cubic-bezier(.4, 0, .2, 1) .15s, opacity .3s ease .15s; /* slight delay — wait for CG to be gone */ } /* Nav height transition */ #cg-nav { transition: height .45s cubic-bezier(.4,0,.2,1), background .4s ease, box-shadow .4s ease, border-color .4s ease; } #cg-nav.scrolled { height: var(--nav-h); } body::after { content: ''; position: fixed; inset: 0; z-index: 10000; pointer-events: none; opacity: 0; background: radial-gradient(circle at 82% 18%, rgba(0,194,212,.14), transparent 34%), linear-gradient(135deg, rgba(242,251,252,.98), rgba(253,246,242,.96)); transition: opacity .22s ease; } body.site-transition-in::after, body.site-transition-out::after { opacity: 1; } body.site-transition-ready::after { opacity: 0; } @media(max-width:1024px) { #cg-nav .cg-logo { width: auto; min-width: 0; max-width: calc(100% - 144px); } } /* ═══════════════════════════════════════════════════════ CG MAGIC BALL ═══════════════════════════════════════════════════════ */ #cg-magic-ball { position: fixed; width: 42px; height: 42px; border-radius: 50%; pointer-events: none; z-index: 9990; top: 0; left: 0; will-change: transform; background: radial-gradient(circle at 38% 32%, rgba(180,255,240,.55) 0%, rgba(0,194,212,.28) 38%, rgba(0,194,212,.07) 65%, transparent 80% ); filter: blur(7px); mix-blend-mode: multiply; opacity: 0; transition: opacity 1.5s ease; } #cg-magic-ball.visible { opacity: 1; } /* Landing: pulse ring via ::after, never touch transform on ball itself */ #cg-magic-ball::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(0,194,212,.5); opacity: 0; pointer-events: none; } #cg-magic-ball.landing::after { animation: cg-ring .8s ease forwards; } @keyframes cg-ring { 0% { transform:scale(.8); opacity:.7; } 60% { transform:scale(2.4); opacity:.3; } 100% { transform:scale(3.2); opacity:0; } } /* CG orb glow on words */ .cg-orb-glow { transition: color .55s ease, text-shadow .55s ease; color: var(--cyan) !important; -webkit-text-fill-color: var(--cyan) !important; text-shadow: 0 0 18px rgba(0,194,212,.55), 0 0 36px rgba(0,194,212,.22), 0 0 55px rgba(61,214,140,.12) !important; } .gradient-text.cg-orb-glow { background: none !important; -webkit-background-clip: initial !important; } /* ── Legal version panels ── */ .legal-version { display: none; } .legal-version.active { display: block; } /* ═══════════════════════════════════════════════════════ PAGE-SPECIFIC STYLES — extracted verbatim from the canonical refs/aspynai-canonical-snapshot/public/connectgroove/index.html inline