/* ================================================================ Kwamle Media — Bold Edition (v4) A distinctive bold layer on top of style.css. Inspired by Arc / Cron / Raycast / Vercel. Activated via . ================================================================ */ body.bold-v4 { --bold-bg-0: #0b0d12; --bold-bg-1: #0f1218; --bold-bg-2: #161a23; --bold-surface: #1a1f2a; --bold-surface-2: #232936; --bold-line: rgba(255,255,255,.08); --bold-line-strong: rgba(255,255,255,.16); --bold-text: #f4f6fb; --bold-text-soft: #b5bcc8; --bold-text-mute: #7a8190; --bold-grad-1: linear-gradient(135deg,#a855f7 0%,#6366f1 35%,#06b6d4 70%,#10b981 100%); --bold-grad-2: linear-gradient(135deg,#ec4899 0%,#f97316 50%,#facc15 100%); --bold-grad-3: linear-gradient(135deg,#3b82f6 0%,#0ea5e9 50%,#22d3ee 100%); --bold-grad-4: linear-gradient(135deg,#a855f7,#ec4899); --bold-grad-5: linear-gradient(135deg,#10b981,#06b6d4); --bold-grad-soft: linear-gradient(135deg,rgba(99,102,241,.18),rgba(6,182,212,.12)); --bold-radius: 18px; --bold-radius-l: 26px; } body.bold-v4 { background: var(--bold-bg-0); color: var(--bold-text); font-family: 'Cairo','Inter',system-ui,-apple-system,sans-serif; letter-spacing: -0.005em; } body.bold-v4 .container { max-width: 1240px; } /* ----- Animated background orbs (decorative) ----- */ body.bold-v4::before, body.bold-v4::after { content: ""; position: fixed; pointer-events: none; z-index: -2; filter: blur(80px); opacity: .55; border-radius: 50%; transition: transform 6s ease-out; } body.bold-v4::before { width: 620px; height: 620px; background: radial-gradient(circle,#a855f7,transparent 70%); top: -200px; left: -200px; animation: orb-float-a 22s ease-in-out infinite; } body.bold-v4::after { width: 540px; height: 540px; background: radial-gradient(circle,#06b6d4,transparent 70%); bottom: -180px; right: -180px; animation: orb-float-b 26s ease-in-out infinite; } @keyframes orb-float-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,80px) scale(1.12); } } @keyframes orb-float-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,-60px) scale(1.18); } } /* ----- Header / nav (dark refresh) ----- */ body.bold-v4 .announce { background: linear-gradient(90deg,rgba(168,85,247,.18),rgba(6,182,212,.18)); border-bottom: 1px solid var(--bold-line); color: var(--bold-text-soft); } body.bold-v4 .announce a { color:#fff; font-weight:600; } body.bold-v4 .header { background: rgba(11,13,18,.7); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--bold-line); } body.bold-v4 .nav-links a { color: var(--bold-text-soft); transition: color .2s; } body.bold-v4 .nav-links a:hover { color: #fff; } body.bold-v4 .brand-light { display: none; } body.bold-v4 .brand-dark { display: inline-block; } body.bold-v4 .lang-switch { background: var(--bold-surface); border: 1px solid var(--bold-line); } body.bold-v4 .lang-switch button { color: var(--bold-text-soft); } body.bold-v4 .lang-switch button.active { background: var(--bold-grad-1); color: #fff; } body.bold-v4 .theme-toggle { background: var(--bold-surface); border: 1px solid var(--bold-line); color: var(--bold-text-soft); } body.bold-v4 .btn-ghost { color: var(--bold-text); background: rgba(255,255,255,.04); border: 1px solid var(--bold-line-strong); } body.bold-v4 .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); } /* ----- Primary buttons (bold gradient + glow) ----- */ body.bold-v4 .btn-primary { background: var(--bold-grad-1); background-size: 200% 100%; color: #fff; border: 0; box-shadow: 0 12px 40px -10px rgba(168,85,247,.6), 0 6px 20px -8px rgba(6,182,212,.5), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .25s cubic-bezier(.2,.7,.2,1.4), box-shadow .25s, background-position .6s; position: relative; } body.bold-v4 .btn-primary:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 50px -10px rgba(168,85,247,.75), 0 10px 30px -10px rgba(6,182,212,.6), inset 0 1px 0 rgba(255,255,255,.3); } body.bold-v4 .btn-primary:active { transform: translateY(0); } body.bold-v4 .btn-lg { padding: 14px 28px; font-size: 1rem; font-weight: 700; } /* ----- HERO ------------------------------------------------------- */ body.bold-v4 .hero { padding: 80px 0 60px; } body.bold-v4 .hero-text h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: #fff; } body.bold-v4 .hero-text .gradient-text { background: var(--bold-grad-1); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 200% 100%; animation: grad-slide 8s linear infinite; } @keyframes grad-slide { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } } body.bold-v4 .hero-badge { background: linear-gradient(135deg,rgba(168,85,247,.18),rgba(6,182,212,.18)); border: 1px solid var(--bold-line-strong); color: #fff; backdrop-filter: blur(10px); } body.bold-v4 .hero-badge .dot { background: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,.25), 0 0 12px rgba(34,211,238,.8); } body.bold-v4 .lead { color: var(--bold-text-soft); font-size: 1.13rem; line-height: 1.7; } body.bold-v4 .hero-note { color: var(--bold-text-mute); } body.bold-v4 .hero-note .check { color: #10b981; } /* Hero floating stat pills (NEW, ADDED VIA HTML) */ body.bold-v4 .hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } body.bold-v4 .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bold-surface); border: 1px solid var(--bold-line); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--bold-text); backdrop-filter: blur(10px); } body.bold-v4 .hero-pill .pill-num { color: transparent; background: var(--bold-grad-1); background-clip: text; -webkit-background-clip: text; font-weight: 800; } /* Hero visual: keep chat-card but darken */ body.bold-v4 .chat-card { background: var(--bold-surface); border: 1px solid var(--bold-line-strong); color: var(--bold-text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.06); } body.bold-v4 .chat-card .chat-head { border-bottom-color: var(--bold-line); } body.bold-v4 .chat-card .name { color: #fff; } body.bold-v4 .chat-card .status { color: var(--bold-text-mute); } body.bold-v4 .show-tabs { background: var(--bold-bg-2); border-bottom-color: var(--bold-line); } body.bold-v4 .show-tab { color: var(--bold-text-mute); } body.bold-v4 .show-tab:hover { color: var(--bold-text); } body.bold-v4 .show-tab.active { color: #fff; background: rgba(168,85,247,.14); } body.bold-v4 .show-tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--bold-grad-1); border-radius: 2px 2px 0 0; } body.bold-v4 .bubble.bot { background: var(--bold-surface-2); color: var(--bold-text); } body.bold-v4 .bubble.user { background: var(--bold-grad-1); color: #fff; } body.bold-v4 .post-mini { background: var(--bold-bg-2); border-color: var(--bold-line); color: var(--bold-text); } body.bold-v4 .post-meta { color: var(--bold-text-mute); } body.bold-v4 .cmt-bubble { background: var(--bold-surface-2); color: var(--bold-text); } body.bold-v4 .cmt-bubble.ai-bubble { background: linear-gradient(135deg,rgba(168,85,247,.15),rgba(6,182,212,.15)); } body.bold-v4 .ai-tag { background: var(--bold-grad-1); color: #fff; font-size: .65rem; padding: 2px 7px; border-radius: 6px; font-weight: 700; margin-inline-start: 6px; letter-spacing: .04em; } body.bold-v4 .prod-card { background: var(--bold-bg-2); border-color: var(--bold-line); } body.bold-v4 .prod-title { color: var(--bold-text); } body.bold-v4 .prod-price { color: #22d3ee; } body.bold-v4 .prod-old { color: var(--bold-text-mute); } body.bold-v4 .prod-cta { background: var(--bold-grad-1); color: #fff; border: 0; font-weight: 700; } body.bold-v4 .ai-prompt, body.bold-v4 .ai-output { background: var(--bold-bg-2); border-color: var(--bold-line); } body.bold-v4 .ai-label { color: var(--bold-text-mute); } body.bold-v4 .ai-label-out { background: var(--bold-grad-1); background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 700; } body.bold-v4 .ai-btn { background: var(--bold-surface); border-color: var(--bold-line-strong); color: var(--bold-text); } body.bold-v4 .ai-btn-primary { background: var(--bold-grad-1); color: #fff; border: 0; } body.bold-v4 .show-dot { background: rgba(255,255,255,.16); } body.bold-v4 .show-dot.active { background: var(--bold-grad-1); } body.bold-v4 .metric-card { background: var(--bold-surface); border: 1px solid var(--bold-line-strong); color: var(--bold-text); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); backdrop-filter: blur(10px); } body.bold-v4 .metric-card .label { color: var(--bold-text-mute); } body.bold-v4 .metric-card .value { color: #fff; font-weight: 800; } body.bold-v4 .metric-card .value.up { background: var(--bold-grad-5); background-clip: text; -webkit-background-clip: text; color: transparent; } body.bold-v4 .metric-card .icon-box { background: var(--bold-grad-1); color: #fff; } /* Hero orb: a glow rather than the default flat shape */ body.bold-v4 .hero-orb { background: radial-gradient(circle,rgba(168,85,247,.6),rgba(6,182,212,.3) 50%,transparent 70%); filter: blur(70px); opacity: .9; animation: orb-pulse 8s ease-in-out infinite; } @keyframes orb-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.15); opacity: 1; } } /* ----- SECTION HEADS (universal style) ---------------------------- */ body.bold-v4 .section-head .eyebrow { background: linear-gradient(135deg,rgba(168,85,247,.18),rgba(6,182,212,.18)); border: 1px solid var(--bold-line-strong); color: #fff; padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: .82rem; letter-spacing: .04em; } body.bold-v4 .section-head h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; } body.bold-v4 .section-head p { color: var(--bold-text-soft); font-size: 1.1rem; } /* ============== BENTO FEATURES (new) ============================= */ body.bold-v4 .features { background: transparent; padding: 100px 0; } body.bold-v4 .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); gap: 16px; margin-top: 40px; } body.bold-v4 .bento-tile { position: relative; background: var(--bold-surface); border: 1px solid var(--bold-line); border-radius: var(--bold-radius); padding: 28px; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1.4), border-color .25s, box-shadow .35s; isolation: isolate; } body.bold-v4 .bento-tile::before { content: ""; position: absolute; inset: 0; background: var(--tile-grad, var(--bold-grad-soft)); opacity: 0; transition: opacity .4s; z-index: -1; } body.bold-v4 .bento-tile::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--tile-grad, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; } body.bold-v4 .bento-tile:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18); box-shadow: 0 30px 60px -25px rgba(0,0,0,.7); } body.bold-v4 .bento-tile:hover::before { opacity: .18; } body.bold-v4 .bento-tile:hover::after { opacity: .8; } body.bold-v4 .bento-tile .b-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--tile-grad, var(--bold-grad-1)); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 8px 22px -8px var(--tile-shadow, rgba(168,85,247,.6)); } body.bold-v4 .bento-tile .b-icon svg { width: 24px; height: 24px; } body.bold-v4 .bento-tile h3 { color: #fff; font-size: 1.18rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; } body.bold-v4 .bento-tile p { color: var(--bold-text-soft); font-size: .94rem; line-height: 1.6; margin: 0; } /* Tile color palettes (set via --tile-grad on each tile) */ body.bold-v4 .bento-tile.t-purple { --tile-grad: linear-gradient(135deg,#a855f7,#6366f1); --tile-shadow: rgba(168,85,247,.5); } body.bold-v4 .bento-tile.t-cyan { --tile-grad: linear-gradient(135deg,#06b6d4,#3b82f6); --tile-shadow: rgba(6,182,212,.5); } body.bold-v4 .bento-tile.t-pink { --tile-grad: linear-gradient(135deg,#ec4899,#f97316); --tile-shadow: rgba(236,72,153,.5); } body.bold-v4 .bento-tile.t-green { --tile-grad: linear-gradient(135deg,#10b981,#22d3ee); --tile-shadow: rgba(16,185,129,.5); } body.bold-v4 .bento-tile.t-amber { --tile-grad: linear-gradient(135deg,#f59e0b,#ef4444); --tile-shadow: rgba(245,158,11,.5); } body.bold-v4 .bento-tile.t-indigo { --tile-grad: linear-gradient(135deg,#6366f1,#ec4899); --tile-shadow: rgba(99,102,241,.5); } /* Tile spans on the 6-col grid */ body.bold-v4 .bento-tile.span-3 { grid-column: span 3; } body.bold-v4 .bento-tile.span-2 { grid-column: span 2; } body.bold-v4 .bento-tile.span-4 { grid-column: span 4; } body.bold-v4 .bento-tile.span-6 { grid-column: span 6; } /* Featured big stat tile */ body.bold-v4 .bento-tile.stat-tile { text-align: start; padding: 32px; } body.bold-v4 .bento-tile .b-stat { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; background: var(--tile-grad); background-clip: text; -webkit-background-clip: text; color: transparent; line-height: 1; margin-bottom: 6px; } body.bold-v4 .bento-tile .b-stat-label { color: var(--bold-text-soft); font-size: .92rem; font-weight: 600; } /* Integration strip inside bento */ body.bold-v4 .int-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } body.bold-v4 .int-strip .int-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--bold-line); border-radius: 10px; font-size: .8rem; color: var(--bold-text); font-weight: 600; } body.bold-v4 .int-strip .int-chip svg { width: 16px; height: 16px; } /* Logos strip inside bento (AI providers tile) */ body.bold-v4 .ai-providers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } body.bold-v4 .ai-providers span { padding: 6px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--bold-line); border-radius: 999px; font-size: .8rem; color: var(--bold-text-soft); font-weight: 600; } /* Mobile/tablet bento collapse */ @media (max-width: 1024px) { body.bold-v4 .bento { grid-template-columns: repeat(4, 1fr); } body.bold-v4 .bento-tile.span-3 { grid-column: span 2; } body.bold-v4 .bento-tile.span-2 { grid-column: span 2; } body.bold-v4 .bento-tile.span-4 { grid-column: span 4; } body.bold-v4 .bento-tile.span-6 { grid-column: span 4; } } @media (max-width: 600px) { body.bold-v4 .bento { grid-template-columns: 1fr; } body.bold-v4 .bento-tile.span-3, body.bold-v4 .bento-tile.span-2, body.bold-v4 .bento-tile.span-4, body.bold-v4 .bento-tile.span-6 { grid-column: span 1; } } /* ============== HOW (bold rebuild) ================================ */ body.bold-v4 .how { background: transparent; padding: 100px 0; } body.bold-v4 .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; } body.bold-v4 .step { background: var(--bold-surface); border: 1px solid var(--bold-line); border-radius: var(--bold-radius-l); padding: 36px 28px; position: relative; overflow: hidden; transition: transform .3s, border-color .3s; } body.bold-v4 .step:hover { transform: translateY(-6px); border-color: var(--bold-line-strong); } body.bold-v4 .step .step-num { position: static; width: auto; height: auto; inset: auto; border-radius: 0; box-shadow: none; background: var(--step-grad, var(--bold-grad-1)); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 5rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; display: block; margin-bottom: 16px; padding: 0; opacity: .95; } body.bold-v4 .step:nth-child(1) { --step-grad: linear-gradient(135deg,#a855f7,#6366f1); } body.bold-v4 .step:nth-child(2) { --step-grad: linear-gradient(135deg,#06b6d4,#22d3ee); } body.bold-v4 .step:nth-child(3) { --step-grad: linear-gradient(135deg,#ec4899,#f97316); } body.bold-v4 .step h3 { color: #fff; font-size: 1.4rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; } body.bold-v4 .step p { color: var(--bold-text-soft); line-height: 1.65; margin: 0; } @media (max-width: 900px) { body.bold-v4 .how-grid { grid-template-columns: 1fr; } } /* ============== PRICING ============================================ */ body.bold-v4 .pricing { padding: 100px 0; background: transparent; } body.bold-v4 .billing-toggle { background: var(--bold-surface); border: 1px solid var(--bold-line); display: inline-flex; border-radius: 999px; padding: 4px; } body.bold-v4 .billing-toggle button { background: transparent; color: var(--bold-text-soft); font-weight: 600; padding: 9px 22px; border-radius: 999px; } body.bold-v4 .billing-toggle button.active { background: var(--bold-grad-1); color: #fff; box-shadow: 0 6px 20px -6px rgba(168,85,247,.5); } body.bold-v4 .billing-toggle .save { background: rgba(16,185,129,.18); color: #34d399; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; margin-inline-start: 8px; } body.bold-v4 .plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; } body.bold-v4 .plan { background: var(--bold-surface); border: 1px solid var(--bold-line); border-radius: var(--bold-radius-l); padding: 36px 30px; position: relative; transition: transform .3s, border-color .3s; } body.bold-v4 .plan:hover { transform: translateY(-4px); border-color: var(--bold-line-strong); } body.bold-v4 .plan.popular { background: linear-gradient(160deg,rgba(168,85,247,.12),rgba(6,182,212,.06)); border: 1.5px solid transparent; background-clip: padding-box; position: relative; } body.bold-v4 .plan.popular::before { content: ""; position: absolute; inset: 0; padding: 1.5px; background: var(--bold-grad-1); border-radius: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: grad-slide 8s linear infinite; background-size: 200% 100%; } body.bold-v4 .plan-badge { background: var(--bold-grad-1); color: #fff; box-shadow: 0 8px 22px -8px rgba(168,85,247,.6); font-weight: 700; letter-spacing: .04em; } body.bold-v4 .plan h3 { color: #fff; font-size: 1.4rem; font-weight: 700; } body.bold-v4 .plan .price { color: #fff; font-weight: 800; font-size: 2.6rem; letter-spacing: -.02em; } body.bold-v4 .plan .price small { color: var(--bold-text-mute); font-weight: 500; } body.bold-v4 .plan .desc { color: var(--bold-text-soft); } body.bold-v4 .plan ul li { color: var(--bold-text); } body.bold-v4 .plan ul li svg { color: #22d3ee; } body.bold-v4 .plan .btn-ghost { background: rgba(255,255,255,.04); } body.bold-v4 .plan .btn-dark { background: linear-gradient(135deg,#1f2937,#374151); color: #fff; border: 1px solid var(--bold-line-strong); } @media (max-width: 900px) { body.bold-v4 .plans { grid-template-columns: 1fr; } } /* ============== TESTIMONIALS ====================================== */ body.bold-v4 .testimonials { padding: 100px 0; background: transparent; } body.bold-v4 .tg { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; } body.bold-v4 .tc { background: var(--bold-surface); border: 1px solid var(--bold-line); border-radius: var(--bold-radius-l); padding: 28px; position: relative; transition: transform .3s, border-color .3s; } body.bold-v4 .tc:hover { transform: translateY(-4px); border-color: var(--bold-line-strong); } body.bold-v4 .tc .stars svg { fill: #facc15; width: 16px; height: 16px; } body.bold-v4 .tc blockquote { color: var(--bold-text); font-size: 1.02rem; line-height: 1.7; margin: 14px 0 20px; font-weight: 500; } body.bold-v4 .tc-author .name { color: #fff; font-weight: 700; } body.bold-v4 .tc-author .role { color: var(--bold-text-mute); font-size: .85rem; } body.bold-v4 .tc-avatar { background: var(--bold-grad-1); color: #fff; font-weight: 700; } @media (max-width: 900px) { body.bold-v4 .tg { grid-template-columns: 1fr; } } /* ============== CTA BAND (big, bold) =============================== */ body.bold-v4 .cta-band { padding: 60px 0 100px; background: transparent; } body.bold-v4 .cta-card { background: linear-gradient(135deg,#a855f7 0%,#6366f1 35%,#06b6d4 70%,#10b981 100%); background-size: 200% 200%; border-radius: 32px; padding: 80px 40px; text-align: center; position: relative; overflow: hidden; animation: grad-shift 15s ease-in-out infinite; } @keyframes grad-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } body.bold-v4 .cta-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.14) 0%, transparent 50%); pointer-events: none; } body.bold-v4 .cta-card h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 16px; position: relative; } body.bold-v4 .cta-card p { color: rgba(255,255,255,.92); font-size: 1.15rem; margin-bottom: 32px; position: relative; } body.bold-v4 .cta-card .btn-primary { background: #fff; color: #6366f1; border: 0; box-shadow: 0 18px 50px -8px rgba(0,0,0,.4); } body.bold-v4 .cta-card .btn-primary:hover { background: #f8fafc; transform: translateY(-3px); } body.bold-v4 .cta-card .btn-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(10px); } body.bold-v4 .cta-card .btn-ghost:hover { background: rgba(255,255,255,.2); } /* ============== FOOTER ============================================ */ body.bold-v4 .footer { background: var(--bold-bg-1); border-top: 1px solid var(--bold-line); color: var(--bold-text-soft); } body.bold-v4 .footer h4 { color: #fff; } body.bold-v4 .footer a { color: var(--bold-text-soft); transition: color .2s; } body.bold-v4 .footer a:hover { color: #fff; } body.bold-v4 .footer-social a { background: var(--bold-surface); border: 1px solid var(--bold-line); color: var(--bold-text); } body.bold-v4 .footer-social a:hover { background: var(--bold-grad-1); color: #fff; border-color: transparent; } body.bold-v4 .footer-bottom { border-top: 1px solid var(--bold-line); color: var(--bold-text-mute); } /* ----- Light-mode toggle (override when user picks light) --------- */ html[data-theme="light"] body.bold-v4 { --bold-bg-0: #f7f9fc; --bold-bg-1: #ffffff; --bold-bg-2: #eef2f8; --bold-surface: #ffffff; --bold-surface-2: #f3f6fb; --bold-line: rgba(15,23,42,.10); --bold-line-strong: rgba(15,23,42,.16); --bold-text: #0f172a; --bold-text-soft: #475569; --bold-text-mute: #64748b; } /* keep the product dashboard mockup dark even on light pages */ html[data-theme="light"] body.bold-v4 .dash { --bold-bg-2: #161a23; --bold-surface: #1a1f2a; --bold-surface-2: #232936; --bold-line: rgba(255,255,255,.08); --bold-line-strong: rgba(255,255,255,.16); --bold-text: #f4f6fb; --bold-text-soft: #b5bcc8; --bold-text-mute: #7a8190; } /* soften decorative orbs on light */ html[data-theme="light"] body.bold-v4::before, html[data-theme="light"] body.bold-v4::after { opacity: .16; } /* hard-coded white text -> dark on light surfaces (dashboard excluded) */ html[data-theme="light"] body.bold-v4 .hero-text h1, html[data-theme="light"] body.bold-v4 .section-head h2, html[data-theme="light"] body.bold-v4 .section-head .eyebrow, html[data-theme="light"] body.bold-v4 .step h3, html[data-theme="light"] body.bold-v4 .plan h3, html[data-theme="light"] body.bold-v4 .plan .price, html[data-theme="light"] body.bold-v4 .bento-tile h3, html[data-theme="light"] body.bold-v4 .tc-author .name, html[data-theme="light"] body.bold-v4 .chat-card .name, html[data-theme="light"] body.bold-v4 .metric-card .value, html[data-theme="light"] body.bold-v4 .hero-badge, html[data-theme="light"] body.bold-v4 .announce a, html[data-theme="light"] body.bold-v4 .nav-links a:hover, html[data-theme="light"] body.bold-v4 .show-tab.active, html[data-theme="light"] body.bold-v4 .footer h4, html[data-theme="light"] body.bold-v4 .footer a:hover, html[data-theme="light"] body.bold-v4 .mock-kpi b, html[data-theme="light"] body.bold-v4 .compare thead th, html[data-theme="light"] body.bold-v4 .faq-item summary { color: #0f172a; } /* subtle white fills -> subtle dark fills */ html[data-theme="light"] body.bold-v4 .btn-ghost, html[data-theme="light"] body.bold-v4 .plan .btn-ghost, html[data-theme="light"] body.bold-v4 .int-strip .int-chip, html[data-theme="light"] body.bold-v4 .ai-providers span, html[data-theme="light"] body.bold-v4 .sec-badge, html[data-theme="light"] body.bold-v4 .mock-kpi, html[data-theme="light"] body.bold-v4 .compare thead th { background: rgba(15,23,42,.04); } html[data-theme="light"] body.bold-v4 .btn-ghost:hover { background: rgba(15,23,42,.08); border-color: rgba(15,23,42,.2); } html[data-theme="light"] body.bold-v4 .show-dot { background: rgba(15,23,42,.18); } html[data-theme="light"] body.bold-v4 .stats-card { background: linear-gradient(135deg,rgba(15,23,42,.05),rgba(15,23,42,.02)); } /* header glass + footer + logo swap */ html[data-theme="light"] body.bold-v4 .header { background: rgba(255,255,255,.82); } html[data-theme="light"] body.bold-v4 .footer { background: var(--bold-bg-2); } html[data-theme="light"] body.bold-v4 .brand-light { display: none; } html[data-theme="light"] body.bold-v4 .brand-dark { display: inline-block; } /* ----- Reduce-motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.bold-v4::before, body.bold-v4::after, body.bold-v4 .hero-orb, body.bold-v4 .cta-card, body.bold-v4 .plan.popular::before, body.bold-v4 .hero-text .gradient-text { animation: none !important; } }