/* ============================================================ Creative Capital Group — v3 interaction layer (TEST BUILD) Layered on top of the existing per-page styles. Purely additive: nothing here overrides brand colors, type, or layout. Effects are gated by data-ccg-* attributes on , written live by ccg-config.js from the on-page tuning panel. ============================================================ */ /* Scroll progress bar */ #ccg-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #00C875, #00e08a); z-index: 999; transition: width .08s linear; box-shadow: 0 0 8px rgba(0,200,117,0.6); } /* Nav: scrolled state (shrink + blur + shadow) */ .navbar { transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease; } .navbar.ccg-scrolled { padding-top: 12px; padding-bottom: 12px; background: rgba(255,255,255,0.86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 8px 30px rgba(11,22,40,0.08); } :root[data-ccg-navblur="off"] .navbar.ccg-scrolled { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Nav link animated underline */ .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--green, #00C875); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.8,.2,1); } .nav-links a:hover::after { transform: scaleX(1); } :root[data-ccg-navunderline="off"] .nav-links a::after { display: none; } /* Cursor glow (desktop only, decorative, ignored by touch/reduced-motion) */ #ccg-cursor-glow { position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin-left: -210px; margin-top: -210px; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(0,200,117,0.10) 0%, rgba(0,200,117,0.04) 40%, transparent 70%); transform: translate3d(-1000px,-1000px,0); will-change: transform; transition: opacity .3s ease; opacity: 0; } .ccg-has-hover #ccg-cursor-glow { opacity: 1; } :root[data-ccg-cursorglow="off"] #ccg-cursor-glow { display: none; } /* Ambient floating blobs (hero / cta-subscribe) */ .ccg-blob-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; transition: transform .1s linear; } .ccg-blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.55; animation: ccg-drift 18s ease-in-out infinite; animation-duration: calc(22s * var(--ccg-blob-speed-mult, 1)); } .ccg-blob.b1 { width: 340px; height: 340px; top: -60px; left: 8%; background: radial-gradient(circle, rgba(0,200,117,0.20) 0%, transparent 72%); animation-duration: calc(22s * var(--ccg-blob-speed-mult, 1)); } .ccg-blob.b2 { width: 260px; height: 260px; bottom: -40px; right: 12%; background: radial-gradient(circle, rgba(0,200,117,0.14) 0%, transparent 72%); animation-duration: calc(26s * var(--ccg-blob-speed-mult, 1)); animation-delay: -6s; } .ccg-blob.b3 { width: 180px; height: 180px; top: 30%; right: 30%; background: radial-gradient(circle, rgba(110,231,183,0.16) 0%, transparent 72%); animation-duration: calc(19s * var(--ccg-blob-speed-mult, 1)); animation-delay: -3s; } @keyframes ccg-drift { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(22px,-18px) scale(1.06); } 66% { transform: translate(-16px,14px) scale(0.96); } } :root[data-ccg-blobs="off"] .ccg-blob-field { display: none; } /* Reveal system — style controlled by data-ccg-reveal */ :root[data-ccg-reveal="blur"] .reveal { filter: blur(var(--ccg-reveal-blur, 6px)); } :root[data-ccg-reveal="blur"] .reveal.is-visible { filter: blur(0); } :root[data-ccg-reveal="scale"] .reveal { transform: translateY(28px) scale(0.92); } :root[data-ccg-reveal="scale"] .reveal.is-visible { transform: translateY(0) scale(1); } :root[data-ccg-reveal="instant"] .reveal { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .reveal.is-visible { transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1), filter .7s ease; } /* Tilt targets: cursor-reactive spotlight + 3D tilt */ .ccg-tilt { transform-style: preserve-3d; will-change: transform; } .ccg-tilt::before { content:''; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(0,200,117,0.14), transparent 60%); opacity:0; transition: opacity .25s ease; pointer-events:none; } .ccg-tilt:hover::before { opacity: 1; } :root[data-ccg-tilt="off"] .ccg-tilt::before { display: none; } /* Card hover lift refinement (adds to existing .product/.testimonial transitions) */ .product, .testimonial, .step { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .2s ease; } /* Testimonial auto-cycle spotlight */ .testimonial { position: relative; } .testimonial.ccg-spotlight { border-color: var(--green, #00C875); box-shadow: 0 20px 44px rgba(0,200,117,0.16); transform: translateY(-4px); } /* Buttons: subtle sheen sweep on hover */ .btn-pri, .nav-cta, .cta-side .btn, .apply-card .submit { position: relative; overflow: hidden; } :root[data-ccg-sheen="on"] .btn-pri::after, :root[data-ccg-sheen="on"] .nav-cta::after, :root[data-ccg-sheen="on"] .cta-side .btn::after, :root[data-ccg-sheen="on"] .apply-card .submit::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left .55s ease; } :root[data-ccg-sheen="on"] .btn-pri:hover::after, :root[data-ccg-sheen="on"] .nav-cta:hover::after, :root[data-ccg-sheen="on"] .cta-side .btn:hover::after, :root[data-ccg-sheen="on"] .apply-card .submit:hover::after { left: 130%; } /* Click ripple */ .ccg-ripple-host { position: relative; overflow: hidden; } .chat-button.ccg-ripple-host { position: fixed; } .ccg-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.55); transform: scale(0); animation: ccg-ripple-anim .6s ease-out forwards; pointer-events: none; } .ccg-ripple.dark { background: rgba(11,22,40,0.18); } @keyframes ccg-ripple-anim { to { transform: scale(2.6); opacity: 0; } } /* Grain texture overlay */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 998; opacity: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); transition: opacity .3s ease; } :root[data-ccg-grain="on"] body::after { opacity: 0.05; } /* Page load intro (nav + hero badge) */ :root[data-ccg-pageintro="on"] .navbar { animation: ccg-intro-down .6s cubic-bezier(.22,.61,.36,1) both; } @keyframes ccg-intro-down { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ---------------- Tuning panel ---------------- */ #ccg-tune-btn { position: fixed; bottom: 24px; left: 24px; width: 52px; height: 52px; border-radius: 50%; background: #0B1628; color: #fff; border: 0; cursor: pointer; z-index: 60; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(11,22,40,0.35); transition: transform .2s ease; } #ccg-tune-btn:hover { transform: scale(1.06) rotate(20deg); } #ccg-tune-btn .ccg-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #00C875; border: 2px solid #0B1628; } #ccg-panel { position: fixed; bottom: 88px; left: 24px; width: 340px; max-height: 72vh; overflow-y: auto; background: #ffffff; border-radius: 16px; box-shadow: 0 24px 60px rgba(11,22,40,0.3); z-index: 61; display: none; font-family: 'Inter', -apple-system, sans-serif; color: #0B1628; } #ccg-panel.open { display: block; } #ccg-panel .ccg-p-head { background: #0B1628; color: #fff; padding: 16px 18px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; } #ccg-panel .ccg-p-head h4 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 15px; } #ccg-panel .ccg-p-head .ccg-tag { font-size: 10px; letter-spacing: .06em; background: rgba(0,200,117,0.18); color: #6ee7b7; padding: 3px 8px; border-radius: 100px; font-weight: 700; margin-left: 8px; } #ccg-panel .ccg-p-close { background: none; border: 0; color: #fff; opacity: .75; font-size: 20px; cursor: pointer; line-height: 1; } #ccg-panel .ccg-p-close:hover { opacity: 1; } #ccg-panel .ccg-p-body { padding: 16px 18px 20px; } #ccg-panel .ccg-p-section { margin-bottom: 18px; } #ccg-panel .ccg-p-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #5b6573; margin-bottom: 10px; } #ccg-panel .ccg-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #ccg-panel .ccg-preset-btn { background: #F4F7F9; border: 1px solid #e1e6eb; border-radius: 8px; padding: 8px 4px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: #0B1628; transition: all .15s; } #ccg-panel .ccg-preset-btn:hover { border-color: #00C875; color: #00A862; } #ccg-panel .ccg-master-row { display: flex; align-items: center; justify-content: space-between; background: #F4F7F9; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; } #ccg-panel .ccg-master-row span { font-weight: 700; font-size: 13.5px; } #ccg-panel .ccg-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; } #ccg-panel .ccg-toggle-row .ccg-hint { display: block; font-size: 10.5px; color: #9099a3; font-weight: 400; margin-top: 1px; } /* Switch */ .ccg-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } .ccg-switch input { opacity: 0; width: 0; height: 0; } .ccg-switch .ccg-slider { position: absolute; inset: 0; background: #d7dde3; border-radius: 100px; cursor: pointer; transition: background .2s; } .ccg-switch .ccg-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .ccg-switch input:checked + .ccg-slider { background: #00C875; } .ccg-switch input:checked + .ccg-slider::before { transform: translateX(16px); } /* Range slider (reuse loan-slider look) */ #ccg-panel input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: #e1e6eb; border-radius: 100px; outline: none; margin: 8px 0 4px; cursor: pointer; } #ccg-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: #fff; border: 3px solid #00C875; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } #ccg-panel .ccg-range-val { font-size: 11px; color: #5b6573; display: flex; justify-content: space-between; } /* Segmented control for reveal style */ .ccg-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ccg-seg button { background: #F4F7F9; border: 1px solid #e1e6eb; border-radius: 8px; padding: 7px 2px; font-size: 11px; font-weight: 600; cursor: pointer; color: #0B1628; } .ccg-seg button.active { background: #0B1628; border-color: #0B1628; color: #fff; } #ccg-panel .ccg-reset-btn { width: 100%; background: transparent; border: 1px solid #e1e6eb; color: #5b6573; padding: 9px; border-radius: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-top: 4px; } #ccg-panel .ccg-reset-btn:hover { border-color: #cbd5e1; color: #0B1628; } #ccg-panel .ccg-note { font-size: 11px; color: #9099a3; line-height: 1.5; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef1f4; } @media (max-width: 480px) { #ccg-panel { width: calc(100vw - 32px); left: 16px; bottom: 84px; } #ccg-tune-btn { left: 16px; bottom: 16px; } } /* Respect reduced motion globally for the new effects */ @media (prefers-reduced-motion: reduce) { .ccg-blob { animation: none; } #ccg-cursor-glow { display: none; } .navbar { animation: none !important; } } /* Hide decorative-only layers on touch devices to keep things crisp */ @media (hover: none) { #ccg-cursor-glow { display: none; } } /* ============================================================ v4 additions — photography, "Why Us" section, particle field ============================================================ */ /* Branded duotone treatment for any photo we bring in */ .ccg-photo { position: relative; overflow: hidden; border-radius: 16px; } .ccg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); } .ccg-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(10,31,61,0.78) 0%, rgba(0,168,98,0.30) 100%); mix-blend-mode: multiply; } .ccg-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(155deg, rgba(10,31,61,0.32) 0%, transparent 55%); } /* Page hero background photo (about.html / careers.html) */ .page-hero { background-image: linear-gradient(135deg, rgba(10,31,61,0.93) 0%, rgba(11,42,82,0.91) 100%), var(--ccg-hero-photo, none); background-size: cover; background-position: center; } /* Why Us: image + floating glass stat card */ .why-block { padding: 90px 40px; background: white; overflow: hidden; } .why-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; } .why-photo-wrap { position: relative; } .why-photo-wrap .ccg-photo { aspect-ratio: 4 / 4.6; box-shadow: 0 30px 70px rgba(11,22,40,0.22); } .why-stat-card { position: absolute; bottom: -22px; right: -22px; z-index: 2; width: 190px; background: rgba(255,255,255,0.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,0.6); border-radius: 14px; padding: 18px 20px; box-shadow: 0 20px 44px rgba(11,22,40,0.22); } .why-stat-card .n { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; color: var(--ink); line-height: 1; } .why-stat-card .l { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; } .why-copy .eb { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-2); font-weight: 700; } .why-copy h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 36px; margin: 10px 0 16px; letter-spacing: -0.02em; line-height: 1.12; } .why-copy > p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 0 0 24px; max-width: 480px; } .why-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; } .why-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--ink); line-height: 1.5; } .why-list li .chk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #ECFDF5; color: var(--green-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } .why-photo-wrap .ccg-photo { aspect-ratio: 16/10; } .why-stat-card { position: static; width: auto; margin-top: -40px; margin-left: 20px; margin-right: 20px; } } /* Particle field canvas (hero) */ #ccg-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; } :root[data-ccg-particles="off"] #ccg-particles { display: none; } /* Chat panel: keep it fully on-screen and centered on small viewports, regardless of how tall the conversation gets. */ .chat-panel { max-height: min(70vh, 520px); } .chat-head, .chat-input-area { flex-shrink: 0; } .chat-body { flex: 1 1 auto; max-height: none; min-height: 120px; } @media (max-width: 480px) { .chat-panel { left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 32px); max-width: 380px; bottom: 88px; } }