/* ============================================================ * cb-home-v4.css — Homepage "Emerald Galaxy" skin * ------------------------------------------------------------ * Brings the V4 shoulder-module design language to the landing page: * emerald galaxy background + glassmorphic cards + gradient hero. * A pure-CSS skin layered on the existing landing markup (loaded LAST so * it wins on equal specificity). Scoped to body.cb-home-v4 → zero blast * radius on other pages. Copy + the product-boundary messaging are * UNCHANGED — this only restyles. * ============================================================ */ /* Pin the emerald accent so the galaxy particle field (#cb-bg-galaxy-canvas, * reads --accent off ) draws green. DARK only — light theme uses a deeper * emerald that's readable on white (set in the LIGHT THEME block at the end). */ html:not([data-theme="light"]){ --accent:#5ba4ff !important; --accent2:#ad93ff !important; --ar:91; --ag:164; --ab:255; } body.cb-home-v4{ --v4-text:#f3f7fa; --v4-text2:#b0c2de; --v4-text3:#6c7d93; --v4-glass:rgba(15, 23, 42, 0.45); --v4-glass2:rgba(15, 23, 42, 0.65); --v4-line:rgba(91, 164, 255, 0.15); --v4-line-hi:rgba(91, 164, 255, 0.3); --v4-red:#4adbb5; --v4-rose:#5ba4ff; --v4-maroon:#ad93ff; --aurora-gradient: linear-gradient(135deg, var(--v4-red) 0%, var(--v4-rose) 50%, var(--v4-maroon) 100%); --bbs-low-risk:#4adbb5; --ease-cubic: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 0.25s; --t-medium: 0.45s; --noise-opacity: 0.025; color:var(--v4-text); } body.cb-home-v4::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%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"); } /* dark (default) galaxy canvas */ html:not([data-theme="light"]) body.cb-home-v4{ background:#0b0f19 !important; color:var(--v4-text) !important; --accent:#5ba4ff !important; --accent2:#ad93ff !important; } /* ============================================================ * GALAXY CANVAS — fixed emerald nebula + starfield (theme-independent) * ============================================================ */ body.cb-home-v4 .cb-mesh-bg{ display:none !important; } body.cb-home-v4 .color-orb{ display:none !important; } html:not([data-theme="light"]) body.cb-home-v4 #cb-bg-galaxy-canvas{ display:block !important; opacity:.6 !important; } html[data-theme="light"] body.cb-home-v4 #cb-bg-galaxy-canvas{ display:none !important; } body.cb-home-v4 .v4-aurora{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; } html:not([data-theme="light"]) body.cb-home-v4 .v4-aurora{ background: radial-gradient(ellipse 60% 40% at 10% 20%, rgba(74, 219, 181, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 90% 10%, rgba(173, 147, 255, 0.1) 0%, transparent 65%), radial-gradient(ellipse 70% 60% at 40% 80%, rgba(91, 164, 255, 0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 90%, rgba(244, 171, 67, 0.05) 0%, transparent 60%), linear-gradient(180deg, #0b0f19 0%, #0b0f19 100%); } html[data-theme="light"] body.cb-home-v4 .v4-aurora{ background: radial-gradient(ellipse 60% 40% at 10% 20%, rgba(74, 219, 181, 0.06) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 90% 10%, rgba(173, 147, 255, 0.05) 0%, transparent 65%), radial-gradient(ellipse 70% 60% at 40% 80%, rgba(91, 164, 255, 0.04) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 90%, rgba(244, 171, 67, 0.02) 0%, transparent 60%), linear-gradient(180deg, #f3f7fa 0%, #f3f7fa 100%) !important; } body.cb-home-v4 .v4-aurora::after{ content:""; position:absolute; inset:0; pointer-events:none; } html:not([data-theme="light"]) body.cb-home-v4 .v4-aurora::after{ background-image: linear-gradient(rgba(91, 164, 255, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 164, 255, 0.012) 1px, transparent 1px); background-size: 50px 50px; } html[data-theme="light"] body.cb-home-v4 .v4-aurora::after{ background-image: linear-gradient(rgba(122, 156, 220, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 156, 220, 0.018) 1px, transparent 1px); background-size: 50px 50px; } body.cb-home-v4 .v4-aurora::before{ content:""; position:absolute; inset:-10%; background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(74,219,181,.4), transparent 60%), radial-gradient(1.2px 1.2px at 28% 62%, rgba(173,147,255,.35), transparent 60%), radial-gradient(1px 1px at 42% 28%, rgba(255,255,255,.3), transparent 60%), radial-gradient(1.6px 1.6px at 55% 78%, rgba(91,164,255,.35), transparent 60%), radial-gradient(1.1px 1.1px at 68% 12%, rgba(173,147,255,.3), transparent 60%), radial-gradient(1.3px 1.3px at 78% 52%, rgba(74,219,181,.3), transparent 60%), radial-gradient(1px 1px at 88% 84%, rgba(255,255,255,.3), transparent 60%), radial-gradient(1.5px 1.5px at 6% 84%, rgba(91,164,255,.35), transparent 60%), radial-gradient(1px 1px at 35% 92%, rgba(173,147,255,.3), transparent 60%), radial-gradient(1.2px 1.2px at 92% 30%, rgba(74,219,181,.35), transparent 60%), radial-gradient(1px 1px at 20% 40%, rgba(173,147,255,.25), transparent 60%), radial-gradient(1.3px 1.3px at 60% 45%, rgba(91,164,255,.3), transparent 60%), radial-gradient(1.1px 1.1px at 48% 14%, rgba(255,255,255,.25), transparent 60%), radial-gradient(1px 1px at 8% 50%, rgba(173,147,255,.25), transparent 60%), radial-gradient(1.4px 1.4px at 74% 88%, rgba(74,219,181,.35), transparent 60%), radial-gradient(1px 1px at 50% 56%, rgba(173,147,255,.25), transparent 60%); opacity:.4; } body.cb-home-v4 .v4-aurora-blob{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.14; will-change:transform; } body.cb-home-v4 .v4-aurora-blob--1{ width:46vw; height:46vw; left:-12vw; top:-2vh; background:radial-gradient(circle, var(--v4-red) 0%, rgba(74,219,181,0) 70%); } body.cb-home-v4 .v4-aurora-blob--2{ width:40vw; height:40vw; right:-10vw; top:-8vh; background:radial-gradient(circle, var(--v4-maroon) 0%, rgba(173,147,255,0) 70%); opacity:.15; } body.cb-home-v4 .v4-aurora-blob--3{ width:50vw; height:50vw; left:32vw; bottom:-24vh; background:radial-gradient(circle, var(--v4-rose) 0%, rgba(91,164,255,0) 70%); opacity:.08; } @keyframes v4h-drift-1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vw,4vh) scale(1.12);} } @keyframes v4h-drift-2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,5vh) scale(1.15);} } @keyframes v4h-drift-3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,-5vh) scale(1.1);} } html[data-motion="high"] body.cb-home-v4 .v4-aurora-blob--1{ animation:v4h-drift-1 26s ease-in-out infinite; } html[data-motion="high"] body.cb-home-v4 .v4-aurora-blob--2{ animation:v4h-drift-2 32s ease-in-out infinite; } html[data-motion="high"] body.cb-home-v4 .v4-aurora-blob--3{ animation:v4h-drift-3 38s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ body.cb-home-v4 .v4-aurora-blob{ animation:none !important; } } /* ============================================================ * NAV — glass * ============================================================ */ body.cb-home-v4 .site-nav{ background:rgba(15,23,42,.6) !important; backdrop-filter: var(--glass-filter-anchor); -webkit-backdrop-filter: var(--glass-filter-anchor); border-bottom:1px solid var(--v4-line) !important; transition: background var(--t-medium) var(--ease-cubic), border-color var(--t-medium) var(--ease-cubic); } body.cb-home-v4 .logo-link .mark{ background:var(--aurora-gradient) !important; color:#fff !important; box-shadow:0 4px 14px rgba(91,164,255,0.3); transition: transform var(--t-fast) var(--ease-cubic); } body.cb-home-v4 .logo-link:hover .mark{ transform:scale(1.04); } body.cb-home-v4 .brand-text{ color:#fff !important; } body.cb-home-v4 .cb-nav-pricing-btn{ background: var(--aurora-gradient) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(91, 164, 255, 0.25) !important; border: none !important; transition: all var(--t-fast) var(--ease-cubic) !important; } body.cb-home-v4 .cb-nav-pricing-btn:hover{ filter: brightness(1.06) !important; box-shadow: 0 6px 16px rgba(91, 164, 255, 0.4) !important; transform: translateY(-1px) !important; } body.cb-home-v4 .cb-nav-account-btn{ background:var(--v4-glass) !important; border:1px solid var(--v4-line) !important; color:var(--v4-text) !important; transition: all var(--t-fast) var(--ease-cubic) !important; } body.cb-home-v4 .cb-nav-account-btn:hover{ background:var(--v4-glass2) !important; border-color:var(--v4-line-hi) !important; transform:translateY(-1px) !important; } body.cb-home-v4 .cb-nav-search-btn, body.cb-home-v4 .cb-nav-flashcards-btn{ background:var(--v4-glass) !important; border:1px solid var(--v4-line) !important; color:var(--v4-text2) !important; transition: all var(--t-fast) var(--ease-cubic) !important; } body.cb-home-v4 .cb-nav-search-btn:hover, body.cb-home-v4 .cb-nav-flashcards-btn:hover{ background:var(--v4-glass2) !important; border-color:var(--v4-line-hi) !important; color:var(--v4-text) !important; } /* keep the sister-product nav buttons recognisable but calmer on glass */ body.cb-home-v4 .cb-nav-npte-btn, body.cb-home-v4 .cb-nav-biz-btn{ box-shadow:0 4px 14px -8px rgba(0,0,0,.6) !important; transition: all var(--t-fast) var(--ease-cubic) !important; } body.cb-home-v4 .theme-toggle .theme-btn{ background:var(--v4-glass); border:1px solid var(--v4-line); color:var(--v4-text2); transition: all var(--t-fast) var(--ease-cubic) !important; } body.cb-home-v4 .cb-motion-toggle{ color:var(--v4-text2); border-color:var(--v4-line); } /* ============================================================ * GLOBAL TYPE on the galaxy * ============================================================ */ body.cb-home-v4 h1, body.cb-home-v4 h2, body.cb-home-v4 h3, body.cb-home-v4 h4{ color:#fff; } body.cb-home-v4 p{ color:var(--v4-text2); } body.cb-home-v4 strong{ color:#fff; } body.cb-home-v4 .sec-tag, body.cb-home-v4 .land-section-tag, body.cb-home-v4 .land-eyebrow, body.cb-home-v4 .land-pillar-num, body.cb-home-v4 .price-track-label{ color:var(--v4-rose) !important; } body.cb-home-v4 .sec-sub, body.cb-home-v4 .land-section-sub, body.cb-home-v4 .sec-title{ color:var(--v4-text2); } /* ============================================================ * HERO * ============================================================ */ body.cb-home-v4 .land-hero h1{ color:#fff; font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.04em !important; line-height: 1.05 !important; } body.cb-home-v4 .land-hero h1 em{ font-family: 'Fraunces', Georgia, serif !important; font-style: italic !important; font-weight: 500 !important; background: var(--aurora-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; padding-right: 4px; } body.cb-home-v4 .land-lead{ color:var(--v4-text2); } body.cb-home-v4 .land-lead strong{ color:#fff; } body.cb-home-v4 .land-trust { display: flex !important; flex-wrap: wrap !important; gap: 8px 10px !important; text-transform: none !important; margin-top: 24px !important; justify-content: flex-start !important; } body.cb-home-v4 .land-trust span { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid var(--v4-line) !important; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; color: var(--v4-text2) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--font-body) !important; font-weight: 600 !important; } html[data-theme="light"] body.cb-home-v4 .land-trust span { background: rgba(0, 0, 0, 0.02) !important; border-color: var(--v4-line) !important; color: var(--v4-text2) !important; } body.cb-home-v4 .land-trust span::before { content: "✓" !important; background: transparent !important; color: var(--v4-red) !important; font-weight: 800 !important; text-shadow: 0 0 6px rgba(0, 255, 135, 0.5); margin-right: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; } /* primary / ghost CTAs */ body.cb-home-v4 .cta-primary, body.cb-home-v4 .land-cta-row .cta-primary{ background: var(--aurora-gradient) !important; color: #fff !important; font-weight: 800 !important; border: 1px solid rgba(255,255,255,0.15) !important; box-shadow: 0 8px 20px -6px rgba(91,164,255,0.3) !important; transition: transform 0.3s var(--ease-cubic), box-shadow 0.3s var(--ease-cubic), filter 0.2s; } body.cb-home-v4 .cta-primary:hover{ filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 24px -4px rgba(91,164,255,0.45), 0 0 16px rgba(173,147,255,0.25) !important; } body.cb-home-v4 .cta-ghost, body.cb-home-v4 .cta-outline{ background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--v4-text) !important; backdrop-filter: var(--glass-filter-standard); -webkit-backdrop-filter: var(--glass-filter-standard); box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, background 0.3s; } body.cb-home-v4 .cta-ghost:hover, body.cb-home-v4 .cta-outline:hover{ background: rgba(255, 255, 255, 0.06) !important; border-color: var(--v4-line-hi) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2), 0 0 10px rgba(0,255,135,0.15); } /* ==================================================== STAT TILES — glass with subtle radial lighting & lift */ body.cb-home-v4 .land-stat{ background: var(--v4-glass) !important; border: 1px solid var(--v4-line) !important; border-radius:16px !important; box-shadow: var(--glass-shadow) !important; transition: transform 0.5s var(--ease-cubic), border-color 0.3s var(--ease-cubic), box-shadow 0.4s var(--ease-cubic), background 0.3s ease; backdrop-filter: var(--glass-filter-anchor); -webkit-backdrop-filter: var(--glass-filter-anchor); } body.cb-home-v4 .land-stat:hover{ transform: translateY(-5px); background: var(--v4-glass2) !important; border-color: var(--v4-line-hi) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px -10px rgba(91,164,255,.3) !important; } body.cb-home-v4 .land-stat-num{ background: linear-gradient(120deg, #fff 30%, var(--v4-rose) 80%, var(--v4-red)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-weight: 800 !important; text-shadow: 0 0 12px rgba(0,255,135,.15); } body.cb-home-v4 .land-stat-label{ color: var(--v4-text3) !important; font-family: 'IBM Plex Mono', monospace; font-size: 10px !important; letter-spacing: 1.2px; text-transform: uppercase; } /* ============================================================ * CARDS — unified frosted glass (paths · sister · positioning · pillars · pricing) * ============================================================ */ body.cb-home-v4 .path-card, body.cb-home-v4 .sister-card, body.cb-home-v4 .cb-positioning-col, body.cb-home-v4 .land-pillar, body.cb-home-v4 .price-card{ background: var(--v4-glass) !important; border: 1px solid var(--v4-line) !important; border-radius: 18px !important; box-shadow: var(--glass-shadow) !important; backdrop-filter: var(--glass-filter-anchor); -webkit-backdrop-filter: var(--glass-filter-anchor); transition: transform 0.5s var(--ease-cubic), border-color 0.3s var(--ease-cubic), box-shadow 0.4s var(--ease-cubic), background 0.3s ease; position: relative; } body.cb-home-v4 .path-card:hover, body.cb-home-v4 .sister-card:hover, body.cb-home-v4 .cb-positioning-col:hover, body.cb-home-v4 .land-pillar:hover, body.cb-home-v4 .price-card:hover{ transform: translateY(-5px) !important; border-color: var(--v4-line-hi) !important; box-shadow: 0 24px 50px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08), 0 0 32px -12px rgba(91,164,255,.35) !important; } /* Path card custom gradient mask border on hover */ body.cb-home-v4 .path-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--v4-line), transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; transition: opacity .35s; opacity: 0.8; } body.cb-home-v4 .path-card:hover::after { background: linear-gradient(135deg, var(--v4-red), var(--v4-rose) 50%, transparent); opacity: 1; } /* card text */ body.cb-home-v4 .path-card h3, body.cb-home-v4 .sister-card h3, body.cb-home-v4 .cb-positioning-col h3, body.cb-home-v4 .land-pillar h3, body.cb-home-v4 .price-card h3{ color:#fff !important; font-weight: 800 !important; letter-spacing: -0.015em !important; } body.cb-home-v4 .path-card p, body.cb-home-v4 .sister-card-sub, body.cb-home-v4 .cb-positioning-col p, body.cb-home-v4 .land-pillar p{ color:var(--v4-text2) !important; line-height: 1.6 !important; } body.cb-home-v4 .path-label{ color: var(--v4-rose) !important; font-family: 'IBM Plex Mono', monospace; font-size: 10px !important; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; } body.cb-home-v4 .path-cta{ color:var(--v4-red) !important; font-weight: 800 !important; font-size: 13.5px !important; } body.cb-home-v4 .sister-card li, body.cb-home-v4 .cb-positioning-col li{ color:var(--v4-text2) !important; } body.cb-home-v4 .cb-positioning-col.cb-is{ border-color:var(--v4-line-hi) !important; background:linear-gradient(180deg, rgba(0,255,135,.1), rgba(255,255,255,.02)) !important; } body.cb-home-v4 .cb-positioning-col.cb-is h3{ color:var(--v4-rose) !important; } body.cb-home-v4 .cb-positioning-col.cb-is li::before{ color:var(--v4-red) !important; } body.cb-home-v4 .cb-positioning-link{ color:var(--v4-red) !important; border-top-color:var(--v4-line) !important; } body.cb-home-v4 .sister-eyebrow{ color:var(--v4-rose) !important; } /* keep the sister-product accent top-bars (brand identity) but soften on glass */ body.cb-home-v4 .sister-card::before{ opacity:.85; } /* pillar bits — increased visual weight and custom detail badges */ body.cb-home-v4 .land-pillar-icon{ filter:drop-shadow(0 0 12px rgba(0,255,135,.45)); font-size: 38px !important; } body.cb-home-v4 .land-pillar-num{ background: linear-gradient(135deg, var(--v4-red), var(--v4-rose)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; font-weight: 800 !important; } body.cb-home-v4 .land-pillar-feat{ background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(0,255,135,.08) !important; border-radius: 10px !important; color: var(--v4-text2) !important; padding: 10px 14px !important; transition: background .2s, border-color .2s; } body.cb-home-v4 .land-pillar-feat:hover{ background: rgba(0,255,135,.04) !important; border-color: rgba(0,255,135,.18) !important; } body.cb-home-v4 .land-pillar-feat::before, body.cb-home-v4 .price-feat::before{ color:var(--v4-red) !important; } /* ============================================================ * PRICING * ============================================================ */ body.cb-home-v4 .price-tagline{ color:var(--v4-text2) !important; } body.cb-home-v4 .price-amt-mo, body.cb-home-v4 .price-amt-yr{ color:#fff !important; } body.cb-home-v4 .price-feat{ color:var(--v4-text2) !important; } body.cb-home-v4 .price-yr-save{ color:var(--v4-red) !important; } body.cb-home-v4 .price-edu-note{ color:var(--v4-text3) !important; } body.cb-home-v4 .cta-white, body.cb-home-v4 .cta-pro, body.cb-home-v4 .cta-student, body.cb-home-v4 .cta-free{ background:var(--aurora-gradient) !important; color:#fff !important; font-weight:800 !important; border:none !important; box-shadow:0 8px 24px -10px rgba(91,164,255,.3) !important; transition: transform 0.25s var(--ease-cubic), box-shadow 0.25s var(--ease-cubic), filter 0.2s !important; } body.cb-home-v4 .cta-white:hover, body.cb-home-v4 .cta-pro:hover, body.cb-home-v4 .cta-student:hover{ transform: translateY(-1.5px) !important; filter: brightness(1.08) !important; box-shadow: 0 12px 28px -8px rgba(91,164,255,.45) !important; } body.cb-home-v4 .cta-free{ background:var(--v4-glass) !important; color:var(--v4-text) !important; border:1px solid var(--v4-line) !important; box-shadow:none !important; } body.cb-home-v4 .cta-free:hover{ background:var(--v4-glass2) !important; border-color:var(--v4-line-hi) !important; transform: translateY(-1.5px) !important; } /* ============================================================ * FINAL CTA STRIP — luxury radial nebula backdrop * ============================================================ */ body.cb-home-v4 .land-cta-strip { background: radial-gradient(circle at 12% 15%, rgba(74,219,181,.12) 0%, transparent 60%), radial-gradient(circle at 88% 85%, rgba(173,147,255,.10) 0%, transparent 60%), linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important; border: 1px solid var(--v4-line) !important; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.7), 0 0 40px -15px rgba(91,164,255,.2) !important; backdrop-filter: var(--glass-filter-standard); -webkit-backdrop-filter: var(--glass-filter-standard); color: #fff !important; position: relative; overflow: hidden; } body.cb-home-v4 .land-cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(91,164,255,.05), transparent 75%); pointer-events: none; } body.cb-home-v4 .land-cta-strip .cta-white { background: var(--aurora-gradient) !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 8px 24px -6px rgba(91,164,255,.35) !important; } body.cb-home-v4 .land-cta-strip .cta-outline { border: 1.5px solid var(--v4-line) !important; background: var(--v4-glass) !important; color: var(--v4-text) !important; } body.cb-home-v4 .land-cta-strip .cta-outline:hover { border-color: var(--v4-line-hi) !important; background: var(--v4-glass2) !important; } /* ============================================================ * SECTION DIVIDERS / misc * ============================================================ */ body.cb-home-v4 .land-section, body.cb-home-v4 .paths-section{ position:relative; z-index:1; } body.cb-home-v4 hr, body.cb-home-v4 .land-divider{ border-color:var(--v4-line) !important; } /* underline accent on section titles → emerald */ body.cb-home-v4 .sec-title::after, body.cb-home-v4 .land-section h2::after{ background:linear-gradient(90deg,var(--v4-red),var(--v4-rose)) !important; } /* footer */ body.cb-home-v4 footer, body.cb-home-v4 .site-footer{ border-top:1px solid var(--v4-line) !important; color:var(--v4-text3); } body.cb-home-v4 footer a, body.cb-home-v4 .site-footer a{ color:var(--v4-text2) !important; } /* ============================================================ * LIGHT THEME — clean emerald-on-white variant (CB has exactly two themes). * No galaxy; a soft mint-tinted backdrop, white glass cards with emerald * hairlines, dark slate text, deeper emerald accents that read on white. * ============================================================ */ html[data-theme="light"] body.cb-home-v4{ --v4-text:#1c2534; --v4-text2:#4e5d78; --v4-text3:#8a99b5; --v4-glass:rgba(255, 255, 255, 0.5); --v4-glass2:rgba(255, 255, 255, 0.75); --v4-line:rgba(122, 156, 220, 0.16); --v4-line-hi:rgba(122, 156, 220, 0.3); --v4-red:#4adbb5; --v4-rose:#5ba4ff; --v4-maroon:#ad93ff; --accent:#5ba4ff !important; --accent2:#ad93ff !important; --bbs-low-risk:#4adbb5; --noise-opacity: 0.015; color:#1c2534 !important; background:#f3f7fa !important; } /* type */ html[data-theme="light"] body.cb-home-v4 h1, html[data-theme="light"] body.cb-home-v4 h2, html[data-theme="light"] body.cb-home-v4 h3, html[data-theme="light"] body.cb-home-v4 h4{ color:#1c2534 !important; } html[data-theme="light"] body.cb-home-v4 p, html[data-theme="light"] body.cb-home-v4 .land-lead, html[data-theme="light"] body.cb-home-v4 .sec-sub, html[data-theme="light"] body.cb-home-v4 .land-section-sub{ color:#4e5d78 !important; } html[data-theme="light"] body.cb-home-v4 strong, html[data-theme="light"] body.cb-home-v4 .land-lead strong{ color:#1c2534 !important; } html[data-theme="light"] body.cb-home-v4 .sec-tag, html[data-theme="light"] body.cb-home-v4 .land-section-tag, html[data-theme="light"] body.cb-home-v4 .land-eyebrow, html[data-theme="light"] body.cb-home-v4 .land-pillar-num, html[data-theme="light"] body.cb-home-v4 .sister-eyebrow, html[data-theme="light"] body.cb-home-v4 .path-label{ color:#5ba4ff !important; } html[data-theme="light"] body.cb-home-v4 .land-trust span{ color:#8a99b5 !important; } /* hero gradient → readable emerald on white. NB: -webkit-background-clip MUST be * !important — the !important `background` shorthand above otherwise resets clip * to border-box and the gradient fills the box as a solid green block. */ /* hero gradient → readable aurora on white. NB: -webkit-background-clip MUST be * !important — the !important `background` shorthand above otherwise resets clip * to border-box and the gradient fills the box as a solid block. */ html[data-theme="light"] body.cb-home-v4 .land-hero h1 em{ background:var(--aurora-gradient) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } /* nav */ html[data-theme="light"] body.cb-home-v4 .site-nav{ background:rgba(255,255,255,.78) !important; border-bottom:1px solid var(--v4-line) !important; } html[data-theme="light"] body.cb-home-v4 .brand-text{ color:#1c2534 !important; } html[data-theme="light"] body.cb-home-v4 .logo-link .mark{ color:#fff !important; } /* glass cards → white frosted */ html[data-theme="light"] body.cb-home-v4 .land-stat, html[data-theme="light"] body.cb-home-v4 .path-card, html[data-theme="light"] body.cb-home-v4 .sister-card, html[data-theme="light"] body.cb-home-v4 .cb-positioning-col, html[data-theme="light"] body.cb-home-v4 .land-pillar, html[data-theme="light"] body.cb-home-v4 .price-card{ background:var(--v4-glass) !important; border:1px solid var(--v4-line) !important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px -20px rgba(15,23,42,.12) !important; backdrop-filter: var(--glass-filter-standard); -webkit-backdrop-filter: var(--glass-filter-standard); transition: transform 0.5s var(--ease-cubic), border-color 0.3s var(--ease-cubic), box-shadow 0.4s var(--ease-cubic), background 0.3s ease; } html[data-theme="light"] body.cb-home-v4 .land-stat:hover, html[data-theme="light"] body.cb-home-v4 .path-card:hover, html[data-theme="light"] body.cb-home-v4 .sister-card:hover, html[data-theme="light"] body.cb-home-v4 .cb-positioning-col:hover, html[data-theme="light"] body.cb-home-v4 .land-pillar:hover, html[data-theme="light"] body.cb-home-v4 .price-card:hover{ border-color:var(--v4-line-hi) !important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 16px 36px -16px rgba(15,23,42,.22), 0 0 20px -12px rgba(91,164,255,.2) !important; } html[data-theme="light"] body.cb-home-v4 .path-card h3, html[data-theme="light"] body.cb-home-v4 .sister-card h3, html[data-theme="light"] body.cb-home-v4 .cb-positioning-col h3, html[data-theme="light"] body.cb-home-v4 .land-pillar h3, html[data-theme="light"] body.cb-home-v4 .price-card h3{ color:#1c2534 !important; } html[data-theme="light"] body.cb-home-v4 .path-card p, html[data-theme="light"] body.cb-home-v4 .sister-card-sub, html[data-theme="light"] body.cb-home-v4 .cb-positioning-col p, html[data-theme="light"] body.cb-home-v4 .land-pillar p, html[data-theme="light"] body.cb-home-v4 .sister-card li, html[data-theme="light"] body.cb-home-v4 .cb-positioning-col li{ color:#4e5d78 !important; } html[data-theme="light"] body.cb-home-v4 .land-stat-num{ background:linear-gradient(120deg,#1c2534,#5ba4ff) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } html[data-theme="light"] body.cb-home-v4 .land-stat-label{ color:#8a99b5 !important; } html[data-theme="light"] body.cb-home-v4 .cb-positioning-col.cb-is{ background:linear-gradient(180deg,rgba(91,164,255,.08),rgba(255,255,255,.7)) !important; border-color:var(--v4-line-hi) !important; } html[data-theme="light"] body.cb-home-v4 .cb-positioning-col.cb-is h3{ color:#5ba4ff !important; } html[data-theme="light"] body.cb-home-v4 .cb-positioning-link, html[data-theme="light"] body.cb-home-v4 .path-cta{ color:#5ba4ff !important; } /* primary CTAs → emerald fill, white text */ html[data-theme="light"] body.cb-home-v4 .cta-primary, html[data-theme="light"] body.cb-home-v4 .cta-white, html[data-theme="light"] body.cb-home-v4 .cta-pro, html[data-theme="light"] body.cb-home-v4 .cta-student, html[data-theme="light"] body.cb-home-v4 .cta-free{ background:linear-gradient(120deg,#10b981,#047857) !important; color:#fff !important; box-shadow:0 8px 22px -10px rgba(5,150,105,.55) !important; } html[data-theme="light"] body.cb-home-v4 .cta-ghost, html[data-theme="light"] body.cb-home-v4 .cta-outline{ background:rgba(255,255,255,.7) !important; border:1px solid var(--v4-line) !important; color:#13241c !important; } /* ============================================================ * INTERACTIVE PREVIEW GRID & DEVICE MOCKUPS * ============================================================ */ body.cb-home-v4 .land-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; text-align: left; max-width: 1200px; margin: 0 auto; } body.cb-home-v4 .land-hero-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } body.cb-home-v4 .land-hero-content h1 { text-align: left; margin-top: 10px; font-family: 'Fraunces', serif; font-size: clamp(2.6rem, 5vw, 4.2rem); } body.cb-home-v4 .land-hero-content .land-lead { margin-left: 0; text-align: left; } body.cb-home-v4 .land-hero-content .land-cta-row { justify-content: flex-start; } body.cb-home-v4 .land-hero-content .land-trust { justify-content: flex-start; } /* Interactive Preview Container */ body.cb-home-v4 .land-interactive-preview { width: 100%; display: flex; flex-direction: column; gap: 16px; perspective: 1000px; } body.cb-home-v4 .lip-tabs { display: flex; gap: 6px; background: var(--v4-glass); border: 1px solid var(--v4-line); padding: 4px; border-radius: 12px; } html[data-theme="light"] body.cb-home-v4 .lip-tabs { background: rgba(0, 0, 0, 0.02); } body.cb-home-v4 .lip-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 9px; border: none; background: transparent; color: var(--v4-text2); font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.25s var(--ease-cubic); } body.cb-home-v4 .lip-tab:hover { color: var(--v4-text); background: rgba(255, 255, 255, 0.02); } html[data-theme="light"] body.cb-home-v4 .lip-tab:hover { color: var(--v4-text); background: rgba(0, 0, 0, 0.02); } body.cb-home-v4 .lip-tab.active { background: var(--v4-glass2) !important; color: var(--v4-rose) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid var(--v4-line-hi) !important; } html[data-theme="light"] body.cb-home-v4 .lip-tab.active { background: #fff !important; color: var(--v4-rose) !important; box-shadow: 0 4px 12px rgba(91,164,255,0.12); border: 1px solid var(--v4-line-hi) !important; } body.cb-home-v4 .lip-panes { position: relative; width: 100%; } body.cb-home-v4 .lip-pane { display: none; width: 100%; animation: lipFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } body.cb-home-v4 .lip-pane.active { display: block; } @keyframes lipFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Device Mockups general */ body.cb-home-v4 .mock-device { width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); border: 1px solid var(--v4-line); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); overflow: hidden; backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient); } html[data-theme="light"] body.cb-home-v4 .mock-device { background: rgba(255, 255, 255, 0.85); box-shadow: 0 15px 35px rgba(5,80,50,0.15); } /* Tablet Device specific */ body.cb-home-v4 .mock-tablet { max-width: 100%; } body.cb-home-v4 .mock-tablet .mock-header { padding: 10px 14px; background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--v4-line); display: flex; align-items: center; gap: 16px; } html[data-theme="light"] body.cb-home-v4 .mock-tablet .mock-header { background: rgba(0, 0, 0, 0.01); } body.cb-home-v4 .mock-dots { display: flex; gap: 6px; } body.cb-home-v4 .mock-dots .dot { width: 7px; height: 7px; border-radius: 50%; } body.cb-home-v4 .mock-dots .dot.red { background: #ff5f56; } body.cb-home-v4 .mock-dots .dot.yellow { background: #ffbd2e; } body.cb-home-v4 .mock-dots .dot.green { background: #27c93f; } body.cb-home-v4 .mock-search-bar { flex: 1; background: rgba(0,0,0,0.2); border: 1px solid var(--v4-line); border-radius: 6px; padding: 4px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--v4-text3); display: flex; align-items: center; gap: 6px; } html[data-theme="light"] body.cb-home-v4 .mock-search-bar { background: rgba(255, 255, 255, 0.9); border-color: var(--v4-line); } body.cb-home-v4 .mock-tablet .mock-body { display: grid; grid-template-columns: 120px 1fr; min-height: 380px; } @media (max-width: 500px) { body.cb-home-v4 .mock-tablet .mock-body { grid-template-columns: 1fr; } body.cb-home-v4 .mock-sidebar { display: none; } } body.cb-home-v4 .mock-sidebar { border-right: 1px solid var(--v4-line); background: rgba(0,0,0,0.1); padding: 12px 6px; display: flex; flex-direction: column; gap: 4px; } html[data-theme="light"] body.cb-home-v4 .mock-sidebar { background: rgba(0, 0, 0, 0.02); } body.cb-home-v4 .sidebar-item { padding: 6px 10px; border-radius: 6px; font-size: 10px; font-family: 'IBM Plex Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v4-text3); transition: all 0.2s; text-align: left; } body.cb-home-v4 .sidebar-item.active { background: rgba(255,255,255,0.04); color: var(--v4-rose) !important; } html[data-theme="light"] body.cb-home-v4 .sidebar-item.active { background: rgba(5,150,105,0.06); color: var(--v4-red) !important; } body.cb-home-v4 .mock-content { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 420px; text-align: left; } body.cb-home-v4 .mock-module-header { display: flex; flex-direction: column; gap: 4px; } body.cb-home-v4 .mock-badge { align-self: flex-start; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; } body.cb-home-v4 .mock-badge.high-yield { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; } body.cb-home-v4 .mock-module-header h4 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -0.01em; color: #fff; } html[data-theme="light"] body.cb-home-v4 .mock-module-header h4 { color: #000; } /* Knee Diagram CSS Art */ body.cb-home-v4 .mock-diagram { height: 90px; background: rgba(0,0,0,0.3); border: 1px dashed var(--v4-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } html[data-theme="light"] body.cb-home-v4 .mock-diagram { background: rgba(255, 255, 255, 0.7); } body.cb-home-v4 .knee-bones { position: relative; width: 100%; height: 100%; } body.cb-home-v4 .bone { position: absolute; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); border: 1px solid var(--v4-line); color: var(--v4-text2); } html[data-theme="light"] body.cb-home-v4 .bone { background: rgba(0,0,0,0.05); color: var(--v4-text); } body.cb-home-v4 .bone.femur { top: 15px; left: 20px; transform: rotate(-15deg); } body.cb-home-v4 .bone.tibia { bottom: 15px; right: 25px; transform: rotate(5deg); border-style: dashed; } body.cb-home-v4 .ligament.acl-lig { position: absolute; top: 38px; left: 105px; width: 32px; height: 4px; background: #ff5f56; transform: rotate(40deg); box-shadow: 0 0 6px rgba(255,95,86,0.8); font-size: 0; } body.cb-home-v4 .vector.force-vector { position: absolute; bottom: 22px; left: 125px; font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; font-weight: 800; color: var(--v4-red); background: rgba(45,255,128,0.1); padding: 1px 4px; border-radius: 2px; border: 1px solid var(--v4-red); animation: lipPulseForce 1.6s infinite ease-in-out; } @keyframes lipPulseForce { 0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 0 rgba(0,255,135,0); } 50% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 8px rgba(0,255,135,0.4); } } body.cb-home-v4 .mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } body.cb-home-v4 .mstat { background: rgba(255,255,255,0.02); border: 1px solid var(--v4-line); padding: 6px 10px; border-radius: 8px; text-align: center; } html[data-theme="light"] body.cb-home-v4 .mstat { background: rgba(0,0,0,0.01); } body.cb-home-v4 .mstat span { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; color: var(--v4-text3); letter-spacing: 0.5px; } body.cb-home-v4 .mstat strong { font-size: 13px; font-weight: 800; color: #fff; } html[data-theme="light"] body.cb-home-v4 .mstat strong { color: #000; } body.cb-home-v4 .mock-steps { display: flex; flex-direction: column; gap: 4px; } body.cb-home-v4 .mstep { padding: 5px 8px; border-radius: 6px; font-size: 11px; color: var(--v4-text3); background: transparent; border-left: 2px solid transparent; text-align: left; } body.cb-home-v4 .mstep.active { color: var(--v4-text); border-left-color: var(--v4-rose); background: rgba(255,255,255,0.02); } html[data-theme="light"] body.cb-home-v4 .mstep.active { color: #000; border-left-color: var(--v4-red); background: rgba(0,0,0,0.02); } body.cb-home-v4 .mock-quiz { border-top: 1px dashed var(--v4-line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } body.cb-home-v4 .quiz-q { font-size: 12px; font-weight: 700; color: #fff; margin: 0; text-align: left; } html[data-theme="light"] body.cb-home-v4 .quiz-q { color: #000; } body.cb-home-v4 .quiz-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } @media (max-width: 480px) { body.cb-home-v4 .quiz-options { grid-template-columns: 1fr; } } body.cb-home-v4 .quiz-opt { padding: 8px; border: 1px solid var(--v4-line); background: rgba(255,255,255,0.02); color: var(--v4-text2); border-radius: 8px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; } html[data-theme="light"] body.cb-home-v4 .quiz-opt { background: rgba(0,0,0,0.02); color: var(--v4-text); border-color: var(--v4-line); } body.cb-home-v4 .quiz-opt:hover:not(:disabled) { border-color: var(--v4-line-hi); background: rgba(255,255,255,0.05); } body.cb-home-v4 .quiz-opt:disabled { opacity: 0.5; cursor: not-allowed; } body.cb-home-v4 .quiz-opt.correct { background: rgba(45, 255, 128, 0.12) !important; border-color: #2dff80 !important; color: #2dff80 !important; opacity: 1 !important; } html[data-theme="light"] body.cb-home-v4 .quiz-opt.correct { background: rgba(16, 185, 129, 0.12) !important; border-color: #10b981 !important; color: #047857 !important; } body.cb-home-v4 .quiz-opt.incorrect { background: rgba(255, 95, 86, 0.12) !important; border-color: #ff5f56 !important; color: #ff5f56 !important; opacity: 1 !important; } html[data-theme="light"] body.cb-home-v4 .quiz-opt.incorrect { background: rgba(239, 68, 68, 0.12) !important; border-color: #ef4444 !important; color: #b91c1c !important; } body.cb-home-v4 .quiz-feedback { font-size: 11px; line-height: 1.5; color: var(--v4-text2); border-radius: 6px; transition: all 0.3s ease; text-align: left; } body.cb-home-v4 .quiz-feedback.pass { padding: 8px 12px; background: rgba(45, 255, 128, 0.08); border-left: 2px solid #2dff80; color: #d4f8e2; } html[data-theme="light"] body.cb-home-v4 .quiz-feedback.pass { color: #1b5e20; background: rgba(16, 185, 129, 0.08); border-left-color: #10b981; } body.cb-home-v4 .quiz-feedback.fail { padding: 8px 12px; background: rgba(255, 95, 86, 0.08); border-left: 2px solid #ff5f56; color: #fddcdb; } html[data-theme="light"] body.cb-home-v4 .quiz-feedback.fail { color: #9b2c2c; background: rgba(239, 68, 68, 0.08); border-left-color: #ef4444; } /* Phone Mockup specifics */ body.cb-home-v4 .mock-phone { max-width: 320px; margin: 0 auto; min-height: 480px; } body.cb-home-v4 .mock-phone .mock-header { height: 22px; background: rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; } html[data-theme="light"] body.cb-home-v4 .mock-phone .mock-header { background: rgba(0,0,0,0.04); } body.cb-home-v4 .phone-speaker { width: 40px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; } html[data-theme="light"] body.cb-home-v4 .phone-speaker { background: rgba(0,0,0,0.1); } body.cb-home-v4 .phone-camera { width: 6px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 50%; } html[data-theme="light"] body.cb-home-v4 .phone-camera { background: rgba(0,0,0,0.1); } body.cb-home-v4 .mock-phone .mock-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; max-height: 460px; overflow-y: auto; } body.cb-home-v4 .phone-app-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--v4-line); padding-bottom: 8px; } body.cb-home-v4 .phone-app-bar span { font-size: 13px; font-weight: 800; color: #fff; } html[data-theme="light"] body.cb-home-v4 .phone-app-bar span { color: #000; } body.cb-home-v4 .phone-settings-select select { background: rgba(0,0,0,0.3); border: 1px solid var(--v4-line); color: var(--v4-text); font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; padding: 2px 4px; border-radius: 4px; outline: none; cursor: pointer; } html[data-theme="light"] body.cb-home-v4 .phone-settings-select select { background: #fff; color: #000; border-color: var(--v4-line); } body.cb-home-v4 .phone-checklist, body.cb-home-v4 .phone-outcome, body.cb-home-v4 .phone-scribe { background: rgba(0,0,0,0.1); border: 1px solid var(--v4-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; } html[data-theme="light"] body.cb-home-v4 .phone-checklist, html[data-theme="light"] body.cb-home-v4 .phone-outcome, html[data-theme="light"] body.cb-home-v4 .phone-scribe { background: rgba(0,0,0,0.01); } body.cb-home-v4 .phone-checklist h5, body.cb-home-v4 .phone-outcome h5, body.cb-home-v4 .phone-scribe h5 { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--v4-rose) !important; margin: 0 0 4px; } html[data-theme="light"] body.cb-home-v4 .phone-checklist h5, html[data-theme="light"] body.cb-home-v4 .phone-outcome h5, html[data-theme="light"] body.cb-home-v4 .phone-scribe h5 { color: var(--v4-red) !important; } body.cb-home-v4 .chk-item { display: flex; gap: 8px; align-items: center; font-size: 11px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.01); } body.cb-home-v4 .chk-icon { font-size: 11px; } body.cb-home-v4 .chk-text { flex: 1; display: flex; justify-content: space-between; align-items: center; } body.cb-home-v4 .chk-text .lbl { color: var(--v4-text2); } body.cb-home-v4 .chk-text strong { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #fff; } html[data-theme="light"] body.cb-home-v4 .chk-text strong { color: #000; } body.cb-home-v4 .chk-item.critical strong { color: #ff6b6b; } body.cb-home-v4 .phone-outcome .outcome-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; } body.cb-home-v4 .phone-outcome .score-display { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--v4-text3); } body.cb-home-v4 .phone-outcome .score-display strong { color: var(--v4-rose); font-size: 13px; } html[data-theme="light"] body.cb-home-v4 .phone-outcome .score-display strong { color: var(--v4-red); } body.cb-home-v4 .slider-container { display: flex; align-items: center; width: 100%; } body.cb-home-v4 .slider-container input[type="range"] { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); outline: none; cursor: pointer; -webkit-appearance: none; } html[data-theme="light"] body.cb-home-v4 .slider-container input[type="range"] { background: rgba(0,0,0,0.1); } body.cb-home-v4 .slider-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--v4-red); box-shadow: 0 0 8px var(--v4-red); } body.cb-home-v4 .outcome-interpretation { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; text-align: center; color: #ffb33f; margin-top: 4px; transition: color 0.3s; } body.cb-home-v4 .scribe-mic-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--v4-line); color: var(--v4-text); font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; padding: 8px; border-radius: 8px; cursor: pointer; transition: all 0.25s; } html[data-theme="light"] body.cb-home-v4 .scribe-mic-btn { background: rgba(0,0,0,0.02); color: #000; border-color: var(--v4-line); } body.cb-home-v4 .scribe-mic-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--v4-line-hi); } body.cb-home-v4 .scribe-mic-btn.recording { background: rgba(255, 95, 86, 0.1) !important; border-color: #ff5f56 !important; color: #ff5f56 !important; } body.cb-home-v4 .mic-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v4-text3); } body.cb-home-v4 .scribe-mic-btn.recording .mic-dot { background: #ff5f56; } body.cb-home-v4 .mic-dot.pulse { animation: lipPulseMic 1.2s infinite ease-in-out; } @keyframes lipPulseMic { 0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255,95,86,0.7); } 70% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 0 6px rgba(255,95,86,0); } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255,95,86,0); } } body.cb-home-v4 .scribe-output { font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.5; color: var(--v4-text2); min-height: 55px; background: rgba(0,0,0,0.2); border: 1px solid var(--v4-line); padding: 6px 10px; border-radius: 8px; max-height: 100px; overflow-y: auto; } html[data-theme="light"] body.cb-home-v4 .scribe-output { background: rgba(255, 255, 255, 0.9); border-color: var(--v4-line); } body.cb-home-v4 .scribe-output em { color: var(--v4-text3); } body.cb-home-v4 .typing-cursor { font-weight: 800; color: var(--v4-red); animation: lipBlinkCursor 0.8s infinite step-end; } @keyframes lipBlinkCursor { from, to { opacity: 0; } 50% { opacity: 1; } } /* Premium Badges & Polish */ .v4-pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--v4-red); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 8px var(--v4-red); position: relative; } .v4-pulse-dot::after { content: ""; position: absolute; inset: -4.5px; border-radius: 50%; border: 1px solid var(--v4-red); animation: v4-dot-pulse 2.2s infinite ease-out; opacity: 0; } @keyframes v4-dot-pulse { 0% { transform: scale(0.8); opacity: 0.85; } 100% { transform: scale(2.6); opacity: 0; } } body.cb-home-v4 .land-stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ============================================================ PREMIUM OVERRIDES — luxury outline animations & mockup halos ============================================================ */ body.cb-home-v4 .cb-reveal { opacity: 0 !important; transform: translateY(24px) scale(0.97) !important; transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.cb-home-v4 .cb-reveal.in-view { opacity: 1 !important; transform: translateY(0) scale(1) !important; } /* Glass Card Masking Border Glow */ body.cb-home-v4 .sister-card::after, body.cb-home-v4 .cb-positioning-col::after, body.cb-home-v4 .land-pillar::after, body.cb-home-v4 .price-card::after, body.cb-home-v4 .land-stat::after, body.cb-home-v4 .howto-step::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--v4-line), transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; transition: opacity .35s; opacity: 0.6; } body.cb-home-v4 .sister-card:hover::after, body.cb-home-v4 .cb-positioning-col:hover::after, body.cb-home-v4 .land-pillar:hover::after, body.cb-home-v4 .price-card:hover::after, body.cb-home-v4 .land-stat:hover::after, body.cb-home-v4 .howto-step:hover::after { background: linear-gradient(135deg, var(--v4-red), var(--v4-rose) 50%, transparent); opacity: 1; } /* Ambient glow halos for mockup devices */ body.cb-home-v4 .mock-device { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 32px rgba(0, 255, 135, 0.06) !important; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s !important; } body.cb-home-v4 .mock-device:hover { transform: translateY(-4px) rotateX(1deg) rotateY(-0.5deg); box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 0 48px rgba(0, 255, 135, 0.14) !important; } html[data-theme="light"] body.cb-home-v4 .mock-device { box-shadow: 0 16px 36px rgba(5,80,50,0.12), 0 0 24px rgba(5,150,105,0.04) !important; } html[data-theme="light"] body.cb-home-v4 .mock-device:hover { box-shadow: 0 24px 48px rgba(5,80,50,0.18), 0 0 36px rgba(5,150,105,0.08) !important; } /* Custom range slider track details */ body.cb-home-v4 .slider-container input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--v4-red) var(--range-pct, 80%), rgba(255,255,255,0.1) var(--range-pct, 80%)); height: 4px; border-radius: 2px; } html[data-theme="light"] body.cb-home-v4 .slider-container input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--v4-red) var(--range-pct, 80%), rgba(0,0,0,0.1) var(--range-pct, 80%)); } /* ============================================================ PERFORMANCE: CSS Containment for offscreen components ============================================================ */ body.cb-home-v4 .features, body.cb-home-v4 .compare, body.cb-home-v4 .quote-section, body.cb-home-v4 .modules, body.cb-home-v4 footer { content-visibility: auto; } body.cb-home-v4 .features { contain-intrinsic-size: auto 600px; } body.cb-home-v4 .compare { contain-intrinsic-size: auto 500px; } body.cb-home-v4 .quote-section { contain-intrinsic-size: auto 250px; } body.cb-home-v4 .modules { contain-intrinsic-size: auto 1500px; } body.cb-home-v4 footer { contain-intrinsic-size: auto 120px; }