/* ============================================================ * cb-mod-v4.css — Shoulder Module V4 "Emerald Galaxy" premium skin * ------------------------------------------------------------ * Dark black + maroon + red GALAXY canvas with glassmorphic gradient * text, layered on top of the working V3 structure (body carries BOTH * .cb-mod-v3 and .cb-mod-v4). Loaded AFTER cb-glass.css so equal- * specificity v4 rules win. * * Built with the ui-ux-pro-max "Liquid Glass" guidance + 21st.dev Magic * inspiration, hand-authored in vanilla CSS (no React). * * Everything scoped to body.cb-mod-v4 → ZERO blast radius on the live * site. MOTION CONTRACT: continuous motion (nebula drift, star twinkle, * hero sheen, title shimmer) fires ONLY at html[data-motion="high"] and * is killed by prefers-reduced-motion. Static glass is always on. * * v4.2 (David feedback): galaxy repalette · richer hero quick-info · * anchor strip removed · TOC footer + Dashboard/Library removed · TOC * scrollbar hidden · themes reduced to light/dark · nav recolored to one * cohesive crimson (was green + orange). * ============================================================ */ body.cb-mod-v4{ --v4-ink: #050207; --v4-ink2: #08030c; --v4-maroon: #103024; --v4-crimson: #15803d; --v4-red: #2dff80; /* neon green */ --v4-rose: #82ffb2; --v4-text: #f7eef0; --v4-text2: rgba(247,238,240,.72); --v4-text3: rgba(247,238,240,.62); --v4-glass: rgba(255,255,255,.04); --v4-glass-2: rgba(255,255,255,.07); --v4-line: rgba(130,255,178,.14); --v4-line-hi: rgba(130,255,178,.26); --v4-accent-rgb: 45,255,128; --v4-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px -22px rgba(0,0,0,.85); color: var(--v4-text); /* nav cohesion: retint the theme accent (was green #4ade80 in dark) so * everything keyed to var(--accent) — Upgrade button, logo, links — goes * neon green without per-element overrides. */ --accent: #2dff80 !important; --accent2: #82ffb2 !important; --ar: 45,255,128 !important; } /* ============================================================ * GALAXY CANVAS — fixed nebula + starfield (theme-independent) * ============================================================ */ body.cb-mod-v4 .cb-mesh-bg{ display:none !important; } /* RED galaxy dots: re-enable the galaxy particle field (twinkle + mouse * parallax — gated on motion=high via CBMotion, falls back to a static glow * when off). It reads --accent/--accent2 off , so pin them here: the * stylesheet !important beats themes.js's non-important inline → dots stay * red (+ bonfire-orange dual tone) in every theme. */ html{ --accent: #2dff80 !important; --accent2: #2de0c0 !important; --ar: 45,255,128 !important; } body.cb-mod-v4 #cb-bg-galaxy-canvas{ display: block !important; opacity: .72 !important; } /* GALAXY base: mostly black, slight red hint — sits BEHIND the dots (z -2) */ body.cb-mod-v4 .v4-aurora{ position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; /* David: a little more reddish light so the eyes aren't cut by the harsh * black/red contrast — still dark, just a warmer ambient glow. */ background: radial-gradient(54% 46% at 18% 6%, rgba(45,255,128,.14), transparent 62%), radial-gradient(48% 42% at 88% 4%, rgba(24,110,70,.16), transparent 64%), radial-gradient(58% 50% at 66% 102%, rgba(28,150,90,.13), transparent 66%), radial-gradient(75% 65% at 50% 48%, rgba(18,70,46,.11), transparent 74%), linear-gradient(180deg, #0a040a 0%, #0c0410 55%, #050208 100%); } /* starfield — fine dust of white + rose stars (static; twinkles at high) */ /* static warm ambient dust (always on, even FX-off) — softens the harsh * red-on-black contrast. David: more dots, and the "white" ones are warm * gradient tones (peach/pink/rose) rather than stark white. */ body.cb-mod-v4 .v4-aurora::before{ content: ""; position: absolute; inset: -10%; background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(130,255,178,.65), transparent 60%), radial-gradient(1.2px 1.2px at 28% 62%, rgba(45,255,128,.55), transparent 60%), radial-gradient(1px 1px at 42% 28%, rgba(200,255,222,.55), transparent 60%), radial-gradient(1.6px 1.6px at 55% 78%, rgba(45,225,200,.5), transparent 60%), radial-gradient(1.1px 1.1px at 68% 12%, rgba(130,255,178,.55), transparent 60%), radial-gradient(1.3px 1.3px at 78% 52%, rgba(200,255,222,.5), transparent 60%), radial-gradient(1px 1px at 88% 84%, rgba(45,255,128,.5), transparent 60%), radial-gradient(1.5px 1.5px at 6% 84%, rgba(130,255,178,.55), transparent 60%), radial-gradient(1px 1px at 35% 92%, rgba(130,255,178,.5), transparent 60%), radial-gradient(1.2px 1.2px at 92% 30%, rgba(45,255,128,.5), transparent 60%), radial-gradient(1px 1px at 20% 40%, rgba(130,255,178,.5), transparent 60%), radial-gradient(1.3px 1.3px at 60% 45%, rgba(200,255,222,.5), transparent 60%), radial-gradient(1.1px 1.1px at 48% 14%, rgba(45,225,200,.5), transparent 60%), radial-gradient(1px 1px at 8% 50%, rgba(130,255,178,.45), transparent 60%), radial-gradient(1.4px 1.4px at 74% 88%, rgba(130,255,178,.5), transparent 60%), radial-gradient(1px 1px at 50% 56%, rgba(200,255,222,.45), transparent 60%), radial-gradient(1.2px 1.2px at 32% 36%, rgba(45,255,128,.45), transparent 60%), radial-gradient(1px 1px at 84% 18%, rgba(130,255,178,.45), transparent 60%), radial-gradient(1.3px 1.3px at 16% 70%, rgba(45,225,200,.45), transparent 60%), radial-gradient(1px 1px at 62% 30%, rgba(130,255,178,.45), transparent 60%); opacity: .62; } body.cb-mod-v4 .v4-aurora-blob{ position: absolute; border-radius: 50%; filter: blur(100px); opacity: .2; will-change: transform; } body.cb-mod-v4 .v4-aurora-blob--1{ width: 46vw; height: 46vw; left: -12vw; top: -2vh; background: radial-gradient(circle, var(--v4-red) 0%, rgba(45,255,128,0) 70%); } body.cb-mod-v4 .v4-aurora-blob--2{ width: 40vw; height: 40vw; right: -10vw; top: -8vh; background: radial-gradient(circle, var(--v4-maroon) 0%, rgba(16,64,40,0) 70%); opacity: .18; } body.cb-mod-v4 .v4-aurora-blob--3{ width: 50vw; height: 50vw; left: 32vw; bottom: -24vh; background: radial-gradient(circle, var(--v4-rose) 0%, rgba(130,255,178,0) 70%); opacity: .1; } /* ============================================================ * NAV — sleek glass + ONE cohesive crimson (kill green + orange) * ============================================================ */ body.cb-mod-v4 .site-nav{ background: rgba(10,4,6,.62); backdrop-filter: var(--glass-filter-anchor); -webkit-backdrop-filter: var(--glass-filter-anchor); border-bottom: 1px solid var(--v4-line); } /* logo mark: green → crimson→rose gradient */ body.cb-mod-v4 .logo-link .mark{ background: linear-gradient(135deg, var(--v4-red), var(--v4-rose)) !important; color: #fff !important; box-shadow: 0 0 18px -2px rgba(45,255,128,.6); } body.cb-mod-v4 .cb-nav-bedside-btn{ background: linear-gradient(135deg, var(--v4-red), var(--v4-crimson)) !important; box-shadow: 0 4px 16px -6px rgba(45,255,128,.6); } /* "Upgrade" button — premium purple-to-blue gradient */ body.cb-mod-v4 .cb-nav-pricing-btn { background: linear-gradient(135deg, #7c3aed, #2563eb) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } body.cb-mod-v4 .cb-nav-pricing-btn:hover { filter: brightness(1.15) saturate(1.15) !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.4), 0 4px 16px rgba(124, 58, 237, 0.55), 0 8px 28px rgba(37, 99, 235, 0.30) !important; transform: translateY(-1px) !important; } /* sister-product buttons → calm ghost outlines for a minimal, seamless nav */ body.cb-mod-v4 .cb-nav-npte-btn, body.cb-mod-v4 .cb-nav-biz-btn{ background: var(--v4-glass) !important; border: 1px solid var(--v4-line) !important; color: var(--v4-text2) !important; box-shadow: none !important; } body.cb-mod-v4 .cb-nav-npte-btn:hover, body.cb-mod-v4 .cb-nav-biz-btn:hover{ background: var(--v4-glass-2) !important; color:#fff !important; } /* THEMES → light + dark only. Hide every other theme button (obsidian, * ember, pulse, prestige, galaxy, pink, cat) in the toggle + popover. */ body.cb-mod-v4 .theme-btn:not([data-theme="light"]):not([data-theme="dark"]){ display: none !important; } /* David: remove the white glow that follows the mouse. It's the galaxy * tilt-glare (rgba white) layered on cards. Hiding the glare element kills * the glow but leaves the red CLICK SPARKLE (separate effect) untouched. */ body.cb-mod-v4 .galaxy-tilt-glare{ display: none !important; } /* back button → crimson glass */ body.cb-mod-v4 .cb-v3-backwrap{ padding-top: 18px; } body.cb-mod-v4 .cb-v3-back{ background: var(--v4-glass); border: 1px solid var(--v4-line); color: var(--v4-text2); backdrop-filter: var(--glass-filter-standard); -webkit-backdrop-filter: var(--glass-filter-standard); } body.cb-mod-v4 .cb-v3-back:hover{ background: var(--v4-glass-2); border-color: rgba(45,255,128,.5); color: #fff; } /* redundant v3 hero hidden (our v4-hero replaces it) */ body.cb-mod-v4 .cb-v3-hero{ display: none !important; } /* anchor strip removed per David — useful quick-info now lives in the hero * stat tiles, and this kills the sticky meta bar he didn't want moving. */ body.cb-mod-v4 .cb-v3-anchor-strip{ display: none !important; } /* ============================================================ * HERO — the showpiece * ============================================================ */ body.cb-mod-v4 .v4-hero{ max-width: 1180px; margin: 8px auto 30px; padding: 0 24px; } /* hero is now OPEN — glass box removed (David: "remove the glass around * content"). Title/tagline/CTAs float on the galaxy. */ body.cb-mod-v4 .v4-hero-card{ position: relative; border-radius: 0; padding: 26px 0 16px; display: flex; flex-direction: column; background: none; border: none; box-shadow: none; } body.cb-mod-v4 .v4-hero-card::before{ display: none; } body.cb-mod-v4 .v4-hero-sheen{ display: none; } body.cb-mod-v4 .v4-hero-eyebrow{ display: inline-flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--v4-text2); margin-bottom: 18px; } body.cb-mod-v4 .v4-eyebrow-pip{ width: 7px; height: 7px; border-radius: 50%; background: var(--v4-red); box-shadow: 0 0 0 4px rgba(45,255,128,.18), 0 0 14px 2px rgba(45,255,128,.65); } body.cb-mod-v4 .v4-eyebrow-tag{ margin-left: 4px; padding: 3px 9px; border-radius: 999px; font-size: 9.5px; letter-spacing: 1.4px; color: var(--v4-rose); background: rgba(130,255,178,.10); border: 1px solid rgba(130,255,178,.30); } body.cb-mod-v4 .v4-hero-title{ font-family: 'Manrope', sans-serif; font-size: var(--text-display); font-weight: var(--weight-display); line-height: var(--text-display-lh); letter-spacing: var(--tracking-hero); margin: 0 0 16px; color: #fff; } body.cb-mod-v4 .v4-grad-text{ background: linear-gradient(115deg, var(--v4-rose) 0%, var(--v4-red) 45%, var(--v4-maroon) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; } body.cb-mod-v4 .v4-hero-tagline{ max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--v4-text2); margin: 0 0 30px; } body.cb-mod-v4 .v4-hero-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; } body.cb-mod-v4 .v4-stat{ position: relative; padding: 16px 16px 14px; border-radius: 16px; background: var(--v4-glass); border: 1px solid var(--v4-line); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s; } body.cb-mod-v4 .v4-stat:hover{ transform: translateY(-4px); background: var(--v4-glass-2); border-color: rgba(45,255,128,.42); } body.cb-mod-v4 .v4-stat-num{ display: block; font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1; background: linear-gradient(120deg, #fff, var(--v4-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } body.cb-mod-v4 .v4-stat-lbl{ font-size: 11px; line-height: 1.45; color: var(--v4-text3); font-weight: 500; } body.cb-mod-v4 .v4-stat-lbl br{ margin-bottom: 2px; } body.cb-mod-v4 .v4-hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; } body.cb-mod-v4 .v4-cta-primary{ display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 12px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14.5px; text-decoration: none; color: #fff; background: linear-gradient(120deg, var(--v4-red), var(--v4-maroon)); box-shadow: 0 10px 30px -8px rgba(45,255,128,.65); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, filter .3s; } body.cb-mod-v4 .v4-cta-primary:hover{ transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 40px -8px rgba(45,255,128,.8); } body.cb-mod-v4 .v4-cta-arrow{ transition: transform .3s; } body.cb-mod-v4 .v4-cta-primary:hover .v4-cta-arrow{ transform: translateX(4px); } body.cb-mod-v4 .v4-cta-ghost{ display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 12px; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--v4-text); background: var(--v4-glass); border: 1px solid var(--v4-line); backdrop-filter: var(--glass-filter-standard); -webkit-backdrop-filter: var(--glass-filter-standard); transition: background .3s, border-color .3s, transform .35s cubic-bezier(.16,1,.3,1); } body.cb-mod-v4 .v4-cta-ghost:hover{ background: var(--v4-glass-2); border-color: rgba(45,255,128,.45); transform: translateY(-2px); } /* NPTE sister-product callout → glass strip at hero footer (mandated link, * flex-reordered below the CTAs). */ body.cb-mod-v4 .cb-npte-callout{ order: 10; max-width: none !important; margin: 6px 0 0 !important; background: linear-gradient(90deg, rgba(45,255,128,.14), rgba(16,64,40,.06)) !important; border: 1px solid rgba(130,255,178,.28) !important; border-left: 3px solid var(--v4-red) !important; border-radius: 14px !important; backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient); } body.cb-mod-v4 .cb-npte-callout-title{ color: #fff !important; } body.cb-mod-v4 .cb-npte-callout-text{ color: var(--v4-text2) !important; } body.cb-mod-v4 .cb-npte-callout-text strong{ color: #fff !important; } body.cb-mod-v4 .cb-npte-callout-eyebrow{ color: var(--v4-rose) !important; } /* ============================================================ * TOC sidebar (premium glass · sticky · no scrollbar) * ============================================================ */ body.cb-mod-v4 .cb-v3-layout{ max-width: 1180px; margin: 0 auto; } /* David: tabs see-through so the galaxy shows behind. Transparent bg + no * blur → the dot field is visible through the sidebar. */ body.cb-mod-v4 .cb-v3-toc{ position: sticky !important; top: 80px !important; max-height: calc(100vh - 100px) !important; background: transparent; border: 1px solid var(--v4-line); border-radius: 18px; padding: 14px 12px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; /* Subtle, modern scrollbar (Firefox) */ scrollbar-width: thin; scrollbar-color: rgba(var(--ar), 0.08) transparent; transition: scrollbar-color 0.3s; } body.cb-mod-v4 .cb-v3-toc:hover { scrollbar-color: rgba(var(--ar), 0.28) transparent; } body.cb-mod-v4 .cb-v3-toc::-webkit-scrollbar{ width: 4px !important; height: 4px !important; display: block !important; } body.cb-mod-v4 .cb-v3-toc::-webkit-scrollbar-thumb{ background: rgba(var(--ar), 0.06) !important; border-radius: 99px !important; } body.cb-mod-v4 .cb-v3-toc:hover::-webkit-scrollbar-thumb{ background: rgba(var(--ar), 0.26) !important; } body.cb-mod-v4 .cb-v3-toc::-webkit-scrollbar-track{ background: transparent !important; } /* David: ALL Learning Journey text white + standing out (brighter labels + * numbers, crisp white items on the see-through galaxy sidebar). */ body.cb-mod-v4 .cb-v3-toc-grouplabel{ color: rgba(255,255,255,.88); } body.cb-mod-v4 .cb-v3-toc-grouplabel--ref{ border-top-color: var(--v4-line); } body.cb-mod-v4 .cb-v3-toc-item{ color: #ffffff !important; border-radius: 10px; } body.cb-mod-v4 .cb-v3-toc-item .cb-v3-toc-t{ color: #ffffff !important; } body.cb-mod-v4 .cb-v3-toc-item:hover{ background: rgba(45,255,128,.16); color: #fff; } body.cb-mod-v4 .cb-v3-toc-n{ color: rgba(255,255,255,.78); } /* active item — crimson glass gradient + glow. [data-sec] matches the * cb-glass per-section rule's specificity; !important + later load wins. */ body.cb-mod-v4 .cb-v3-toc-item[data-sec].active{ background: linear-gradient(120deg, rgba(45,255,128,.30), rgba(16,64,40,.08)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(45,255,128,.55), 0 6px 20px -8px rgba(45,255,128,.55) !important; } body.cb-mod-v4 .cb-v3-toc-item[data-sec].active .cb-v3-toc-n{ color: var(--v4-rose) !important; } /* ============================================================ * MAIN reading panel + section headers (cohesive crimson) * ============================================================ */ /* main reading panel: glass box removed — content sits open on the galaxy */ body.cb-mod-v4 .cb-v3-main{ background: none; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.cb-mod-v4 .cb-v3-main, body.cb-mod-v4 .cb-v3-main p, body.cb-mod-v4 .cb-v3-main li, body.cb-mod-v4 .cb-v3-main td{ color: var(--v4-text); } /* David: comfortable body type */ body.cb-mod-v4 .cb-v3-main p, body.cb-mod-v4 .cb-v3-main li{ font-size: var(--text-body); line-height: var(--text-body-lh); } body.cb-mod-v4 .cb-v3-main .section-sub, body.cb-mod-v4 .cb-v3-main .cb-check-eyebrow{ color: var(--v4-text2); } /* David: bold key terms (e.g. "supraspinatus") get a gradient fill so they * separate from white body text for readability. Fallback to rose if the * browser can't clip text (never invisible). */ body.cb-mod-v4 .cb-v3-main strong{ font-weight: 700; /* David: the gradient on body terms read "kiddish" for a doctorate * audience. Sophisticated emphasis instead — bold + a muted warm champagne. * Not red, stands out without shouting. (The hero "Complex" keeps its * gradient — that's where gradient text is appropriate.) */ color: #c8e6d0; -webkit-text-fill-color: #c8e6d0; background: none; } /* keep callout-internal strong readable on their own tinted backdrops */ body.cb-mod-v4 .cb-v3-main .cb-tldr strong, body.cb-mod-v4 .cb-npte-callout-text strong{ -webkit-text-fill-color: #fff; color: #fff; background: none; } body.cb-mod-v4 .cb-v3-sec-head{ border-bottom: 1px solid rgba(45,255,128,.28) !important; padding-bottom: 14px; margin-bottom: 22px; } /* chapter number + section title → cohesive rose (override per-section) */ body.cb-mod-v4 .cb-v3-chapter-n{ color: var(--v4-rose) !important; } body.cb-mod-v4 .cb-v3-sec-title{ color: #fff; letter-spacing: -.02em; } body.cb-mod-v4 .section-title{ color: var(--v4-rose); } body.cb-mod-v4 .cb-v3-subhead{ background: rgba(45,255,128,.08) !important; border-left-color: var(--v4-red) !important; color: var(--v4-rose) !important; } body.cb-mod-v4 .cb-v3-subhead-dot{ background: var(--v4-red) !important; } /* ============================================================ * CONTENT CARDS — frosted glass + crimson accent + lift * ============================================================ */ /* content callouts: glass boxes REMOVED (David). Content sits open; we keep * only a crisp accent left-edge for rhythm + scannability. No green. */ body.cb-mod-v4 .cb-v3-main .bl-strip, body.cb-mod-v4 .cb-v3-main .cb-check, body.cb-mod-v4 .cb-v3-main .cb-pearl, body.cb-mod-v4 .cb-v3-main .cb-mnemonic, body.cb-mod-v4 .cb-v3-main .cb-pitfall, /* David: ALL cards are see-through GLASS — one unified premium frosted look, * galaxy visible behind. Translucent bg + hairline border + light blur. */ body.cb-mod-v4 .cb-v3-main .bl-strip, body.cb-mod-v4 .cb-v3-main .cb-check, body.cb-mod-v4 .cb-v3-main .cb-pearl, body.cb-mod-v4 .cb-v3-main .cb-mnemonic, body.cb-mod-v4 .cb-v3-main .cb-pitfall, body.cb-mod-v4 .cb-v3-main .cb-reveal, body.cb-mod-v4 .cb-v3-main .tc-card{ background: rgba(255,255,255,.035) !important; border: 1px solid var(--v4-line) !important; border-radius: 14px !important; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -22px rgba(0,0,0,.6) !important; backdrop-filter: var(--glass-filter-ambient) !important; -webkit-backdrop-filter: var(--glass-filter-ambient) !important; } /* ── CARD SYSTEM (David) ─────────────────────────────────────────────── * The section's topic accordion (.ma-item, toggled by toggleMA) reads as * clean collapsible CARDS — a scannable list you click into, instead of one * endless scroll. Collapsed by default. Restores + tunes the card look my * earlier glass-removal flattened. */ body.cb-mod-v4 .cb-v3-main .ma-item, body.cb-mod-v4 .cb-v3-main .ma-card{ background: rgba(255,255,255,.035) !important; border: 1px solid var(--v4-line) !important; border-radius: 14px !important; overflow: hidden !important; margin: 12px 0 !important; backdrop-filter: var(--glass-filter-ambient) !important; -webkit-backdrop-filter: var(--glass-filter-ambient) !important; transition: border-color .3s, background .3s, box-shadow .3s; } body.cb-mod-v4 .cb-v3-main .ma-item:hover, body.cb-mod-v4 .cb-v3-main .ma-card:hover{ border-color: rgba(45,255,128,.42) !important; background: rgba(255,255,255,.045) !important; box-shadow: 0 10px 30px -16px rgba(45,255,128,.5) !important; } body.cb-mod-v4 .cb-v3-main .ma-header, body.cb-mod-v4 .cb-v3-main .ma-card .ma-header{ background: rgba(255,255,255,.03); padding: 16px 20px; cursor: pointer; } body.cb-mod-v4 .cb-v3-main .ma-header:hover, body.cb-mod-v4 .cb-v3-main .ma-card .ma-header:hover{ background: rgba(45,255,128,.10); } body.cb-mod-v4 .cb-v3-main .ma-header h4, body.cb-mod-v4 .cb-v3-main .ma-card .ma-header h4{ color: #fff !important; font-size: 16px; } body.cb-mod-v4 .cb-v3-main .ma-chevron, body.cb-mod-v4 .cb-v3-main .ma-card .ma-chevron{ color: var(--v4-rose); } body.cb-mod-v4 .cb-v3-main .ma-header:hover .ma-chevron, body.cb-mod-v4 .cb-v3-main .ma-card .ma-header:hover .ma-chevron{ color: var(--v4-red); } body.cb-mod-v4 .cb-v3-main .ma-body, body.cb-mod-v4 .cb-v3-main .ma-card .ma-body{ background: transparent !important; border-top: 1px solid var(--v4-line) !important; padding: 20px !important; } body.cb-mod-v4 .cb-v3-main .ma-body.open, body.cb-mod-v4 .cb-v3-main .ma-card .ma-body.open{ display: block !important; } body.cb-mod-v4 .cb-v3-main .ma-body p, body.cb-mod-v4 .cb-v3-main .ma-body li, body.cb-mod-v4 .cb-v3-main .ma-card .ma-body p, body.cb-mod-v4 .cb-v3-main .ma-card .ma-body li{ color: var(--v4-text); } /* David: removed the accent left-LINE on cards for a seamless look — cards * keep only the uniform hairline glass border (no thick colored edge). */ body.cb-mod-v4 .cb-v3-main .bl-strip{ border-left: 1px solid var(--v4-line) !important; } body.cb-mod-v4 .cb-v3-main .bl-label{ color: var(--v4-rose); } /* TL;DR keeps a faint red wash + edge (key-takeaway emphasis, not a glass box) */ body.cb-mod-v4 .cb-v3-main .cb-tldr{ background: linear-gradient(135deg, rgba(45,255,128,.10), rgba(255,255,255,.03)) !important; border: 1px solid var(--v4-line) !important; border-radius: 14px !important; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important; backdrop-filter: var(--glass-filter-ambient) !important; -webkit-backdrop-filter: var(--glass-filter-ambient) !important; } body.cb-mod-v4 .cb-v3-main .cb-tldr-lbl{ color: var(--v4-rose); } body.cb-mod-v4 .cb-v3-main .data-table{ border: 1px solid var(--v4-line); border-radius: 12px; overflow: hidden; } body.cb-mod-v4 .cb-v3-main .data-table th{ background: rgba(45,255,128,.14); color: var(--v4-rose); border-bottom-color: var(--v4-line); } body.cb-mod-v4 .cb-v3-main .data-table td{ border-bottom-color: rgba(255,255,255,.06); } body.cb-mod-v4 .cb-v3-main .data-table tr:hover td{ background: rgba(255,255,255,.03); } body.cb-mod-v4 .cb-v3-main .cb-reveal-hook{ color: #fff; } body.cb-mod-v4 .cb-v3-main .cb-reveal-tease{ color: var(--v4-text2); } body.cb-mod-v4 .cb-v3-main .cb-check-toggle{ background: rgba(45,255,128,.16); color: var(--v4-rose); border: 1px solid rgba(45,255,128,.3); border-radius: 9px; } body.cb-mod-v4 .cb-v3-main .cb-check-q{ color: var(--v4-text); } body.cb-mod-v4 .cb-v3-main .cb-numlist > li::marker{ color: var(--v4-red); } /* ============================================================ * MOTION — gated to html[data-motion="high"] * ============================================================ */ @keyframes v4-drift-1{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(6vw,4vh) scale(1.12);} } @keyframes v4-drift-2{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-5vw,5vh) scale(1.15);} } @keyframes v4-drift-3{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(4vw,-5vh) scale(1.1);} } @keyframes v4-twinkle{ 0%,100%{ opacity:.8;} 50%{ opacity:.4;} } @keyframes v4-sheen-sweep{ 0%{ left:-60%; opacity:0;} 18%{ opacity:1;} 60%,100%{ left:130%; opacity:0;} } @keyframes v4-grad-shimmer{ 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} } html[data-motion="high"] body.cb-mod-v4 .v4-aurora-blob--1{ animation: v4-drift-1 26s ease-in-out infinite; } html[data-motion="high"] body.cb-mod-v4 .v4-aurora-blob--2{ animation: v4-drift-2 32s ease-in-out infinite; } html[data-motion="high"] body.cb-mod-v4 .v4-aurora-blob--3{ animation: v4-drift-3 38s ease-in-out infinite; } html[data-motion="high"] body.cb-mod-v4 .v4-aurora::before{ animation: v4-twinkle 6s ease-in-out infinite; } html[data-motion="high"] body.cb-mod-v4 .v4-hero-sheen{ animation: v4-sheen-sweep 7s ease-in-out 1.2s infinite; } html[data-motion="high"] body.cb-mod-v4 .v4-grad-text{ animation: v4-grad-shimmer 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ body.cb-mod-v4 .v4-aurora-blob, body.cb-mod-v4 .v4-aurora::before, body.cb-mod-v4 .v4-hero-sheen, body.cb-mod-v4 .v4-grad-text{ animation: none !important; } body.cb-mod-v4 .v4-stat, body.cb-mod-v4 .cb-v3-main .bl-strip, body.cb-mod-v4 .v4-cta-primary, body.cb-mod-v4 .v4-cta-ghost{ transition: none !important; } } /* ============================================================ * RESPONSIVE * ============================================================ */ @media (max-width: 900px){ body.cb-mod-v4 .v4-hero-stats{ grid-template-columns: repeat(2, 1fr); } body.cb-mod-v4 .v4-hero-card{ padding: 34px 26px 30px; border-radius: 22px; } } @media (max-width: 560px){ body.cb-mod-v4 .v4-hero{ padding: 0 14px; } body.cb-mod-v4 .v4-hero-stats{ grid-template-columns: 1fr 1fr; gap: 9px; } body.cb-mod-v4 .v4-hero-cta{ flex-direction: column; } body.cb-mod-v4 .v4-cta-primary, body.cb-mod-v4 .v4-cta-ghost{ justify-content: center; } body.cb-mod-v4 .v4-hero-card{ backdrop-filter: var(--glass-filter-standard); -webkit-backdrop-filter: var(--glass-filter-standard); } body.cb-mod-v4 .v4-aurora-blob{ filter: blur(60px); } } /* ============================================================ * v4.3 FINAL POLISH (David) — module-wide premium pass: * • two-column content flow (short cards pair; wide elements span) * • lit-glass cards (top-down gradient + interaction depth) * • tighter vertical rhythm via grid gap * Scoped to body.cb-mod-v4, appended last so it wins on equal * specificity. See-through preserved — low-alpha glass keeps the * emerald galaxy visible behind every card. * ============================================================ */ /* ── lit glass: a subtle top-down gradient gives cards depth without * losing transparency (galaxy still reads through the low alphas). */ body.cb-mod-v4 .cb-v3-main .bl-strip, body.cb-mod-v4 .cb-v3-main .cb-check, body.cb-mod-v4 .cb-v3-main .cb-pearl, body.cb-mod-v4 .cb-v3-main .cb-mnemonic, body.cb-mod-v4 .cb-v3-main .cb-pitfall, body.cb-mod-v4 .cb-v3-main .cb-reveal, body.cb-mod-v4 .cb-v3-main .tc-card, body.cb-mod-v4 .cb-v3-main .ma-item, body.cb-mod-v4 .cb-v3-main .ma-card{ background: linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.018)) !important; } /* ── interaction depth: cards lift + glow on hover (interaction * feedback, consistent with the hero stat tiles — not ambient * motion, so it is intentionally always on). */ body.cb-mod-v4 .cb-v3-main .bl-strip, body.cb-mod-v4 .cb-v3-main .cb-pearl{ transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s, background .3s; } body.cb-mod-v4 .cb-v3-main .bl-strip:hover, body.cb-mod-v4 .cb-v3-main .cb-pearl:hover{ transform: translateY(-3px); border-color: var(--v4-line-hi) !important; box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 18px 38px -24px rgba(0,0,0,.75), 0 0 26px -14px rgba(45,255,128,.45) !important; } /* ── content rhythm ────────────────────────────────────────────── * Content cards run full-width in one clean column. (An auto 2-col grid of * variable-height cards orphaned lone cards + left ragged gaps — David's * "empty space everywhere".) Two-column is delivered by STRUCTURED, equal- * card grids instead: the joints 2×2, the interactive figures (panel+chips | * image), the hero stat tiles, and explicit fact-grids where content is * genuinely parallel. The gap gives consistent vertical rhythm. */ body.cb-mod-v4 .cb-v3-main .container{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } body.cb-mod-v4 .cb-v3-main .container > *{ margin: 0 !important; min-width: 0; } body.cb-mod-v4 .cb-v3-main .container > .section-title{ margin: 22px 0 0 !important; } /* anatomy-figure captions: readable sans-serif. polish.css renders these in * IBM Plex Mono, which turns the long anterior/posterior-muscle captions into * a dense green "code block" blur (David). Use comfortable prose instead. */ body.cb-mod-v4 .cb-anatomy-figure figcaption{ font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif !important; font-size:13px !important; letter-spacing:0 !important; line-height:1.62 !important; color:var(--v4-text2) !important; } body.cb-mod-v4 .cb-anatomy-figure figcaption strong{ color:#fff !important; } body.cb-mod-v4 .cb-anatomy-figure figcaption em{ color:var(--v4-rose) !important; font-style:italic; } body.cb-mod-v4 .cb-anatomy-figure figcaption a{ color:var(--accent) !important; } body.cb-mod-v4 .cb-anatomy-figure figcaption small{ color:var(--v4-text3) !important; } /* ============================================================ * v4.4 FIXES (David) — anatomy figure polish * ============================================================ */ /* (1) Clinical pearls fill the width — never strand a small card alone in * one column with dead space beside it. */ body.cb-mod-v4 .cb-v3-main .container > .cb-pearl{ grid-column: 1 / -1; } /* (4) STATIC hotspots — no press animation, no "move down". A generic glass * transition (the .34,1.56 overshoot curve) was leaking onto the .v4-hot * buttons and bouncing them on hover/press. Pin the transform and tame the * transition so a press just brightens the ring in place — no scale, no * movement, no bounce. */ body.cb-mod-v4 .v4-hot, body.cb-mod-v4 .v4-hot:hover, body.cb-mod-v4 .v4-hot:focus, body.cb-mod-v4 .v4-hot:focus-visible, body.cb-mod-v4 .v4-hot.active{ transform: translate(-50%, -50%) !important; transition: box-shadow .12s ease, background-color .12s ease, border-color .12s ease !important; animation: none !important; } /* active = a clearly brighter static ring + glow (no size change) so the * selected landmark is obvious at a glance. */ body.cb-mod-v4 .v4-hot.active{ background:#fff !important; color:#05130b !important; border-color:var(--v4-red,#2dff80) !important; z-index: 4 !important; animation: v4ActivePulse 2.5s infinite ease-in-out !important; } /* (3) Figure caption — readable dark footer. Was faint low-contrast text on a * near-transparent bar sitting over the light image; make it a solid dark * strip with light text. */ body.cb-mod-v4 .v4-anat-figure figcaption{ background: rgba(4,8,11,.95) !important; color: rgba(247,245,246,.92) !important; font-size: 11.5px !important; line-height: 1.5 !important; } /* ============================================================ * v4.5 (David) — interactive figures: KILL the empty space. * The left column becomes a detail card (updates on click) + a * glass "jump to" card of clickable structure CHIPS that fills * the height, so the left side matches the image height (no bare * galaxy gap). Chips = the "click the word" interaction + an * obvious active state. Injected by the shared enhancer script. * ============================================================ */ body.cb-mod-v4 .v4-anat{ align-items: stretch; } body.cb-mod-v4 .v4-anat-left{ display:flex; flex-direction:column; gap:14px; min-width:0; } /* Active-dot NAME TAG: when a structure is selected, its name appears in a * small dark pill right above its number on the diagram (one at a time → never * cluttered, always tells you what you're looking at). Pure CSS via the * data-name attr the enhancer sets — no child node, so the dot's textContent * (read by the per-figure handlers for "Nerve · N") stays clean. */ body.cb-mod-v4 .v4-hot.active::after{ content: none; /* v6 (David): no name-pill on the dot — the chip list + detail panel already name the structure */ } /* SPOTLIGHT: click a structure → its region lights up while the rest of the * image gently dims, so the eye goes straight to where it is. The image is a * flat raster (can't recolor one branch; authored SVG is banned), so a * radial spotlight centered on the active dot is the cleanest "show me where * it's at." Sits above the image, below the dots. --sx/--sy set by enhancer. */ body.cb-mod-v4 .v4-anat-spotlight{ /* v6 (David): the moving radial "spotlight" was the wonky highlight that * jumped on click — its center was in % but its hole/ring radii were fixed * px (42/104) over a height:auto box that resizes after image decode, so the * lit zone slid relative to the structure. Removed in the enhancer JS too; * hidden here as belt-and-suspenders. */ display:none !important; } body.cb-mod-v4 .v4-anat-spotlight.on{ opacity:1; } /* a soft accent ring marks the lit zone edge */ body.cb-mod-v4 .v4-anat-spotlight.on::before{ content:""; position:absolute; left:var(--sx,50%); top:var(--sy,50%); width:150px; height:150px; transform:translate(-50%,-50%); border-radius:50%; box-shadow:none; /* v5: ring removed — let the spotlight be the single "here" signal */ } @media (prefers-reduced-motion: reduce){ body.cb-mod-v4 .v4-anat-spotlight{ transition:none; } } /* ============================================================ * NERVES figure — redesigned interaction (David): click a structure → * its printed LABEL highlights + a glowing LEADER LINE connects the label * to the exact spot on the diagram. Cleaner than always-on dots; the dot * becomes the line's endpoint marker, hidden until selected. * (The connector is a UI overlay line — not an authored clinical diagram.) * ============================================================ */ /* v6 (David): nerve dots stay INVISIBLE — the printed labels ARE the structures, * so a numbered dot on top just obscures the very label it highlights. The chip * list navigates; clicking a label (the invisible dot is its hit target) or a * chip swipes the green highlight across the printed label. */ body.cb-mod-v4 #v4-anat-nerves .v4-hot:not(.v4-hot-text){ opacity:0 !important; } body.cb-mod-v4 #v4-anat-nerves .v4-hot.v4-hot-text{ opacity:1 !important; } body.cb-mod-v4 #v4-anat-nerves .v4-hot.active::after{ display:none; } /* SVG Nerve Overlay styling for glowing highlights */ body.cb-mod-v4 .v4-nerves-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } body.cb-mod-v4 .v4-nerves-overlay path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s cubic-bezier(0.4, 0, 0.2, 1); } body.cb-mod-v4 .v4-nerves-overlay path.pulse { stroke: #ffffff; stroke-width: 4.5; stroke-dasharray: 40 180; opacity: 0; z-index: 4; } /* Active Base Glow Highlights */ body.cb-mod-v4 .v4-anat[data-active-key="femoral"] .v4-nerves-overlay path.femoral { opacity: 0.9; filter: drop-shadow(0 0 4px rgba(250, 204, 21, 1)) drop-shadow(0 0 10px rgba(250, 204, 21, 0.8)) drop-shadow(0 0 22px rgba(250, 204, 21, 0.5)); } body.cb-mod-v4 .v4-anat[data-active-key="obturator"] .v4-nerves-overlay path.obturator { opacity: 0.9; filter: drop-shadow(0 0 4px rgba(244, 63, 94, 1)) drop-shadow(0 0 10px rgba(244, 63, 94, 0.8)) drop-shadow(0 0 22px rgba(244, 63, 94, 0.5)); } body.cb-mod-v4 .v4-anat[data-active-key="saphenous"] .v4-nerves-overlay path.saphenous { opacity: 0.9; filter: drop-shadow(0 0 4px rgba(6, 182, 212, 1)) drop-shadow(0 0 10px rgba(6, 182, 212, 0.8)) drop-shadow(0 0 22px rgba(6, 182, 212, 0.5)); } body.cb-mod-v4 .v4-anat[data-active-key="common_fibular"] .v4-nerves-overlay path.common_fibular { opacity: 0.9; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 1)) drop-shadow(0 0 10px rgba(34, 197, 94, 0.8)) drop-shadow(0 0 22px rgba(34, 197, 94, 0.5)); } body.cb-mod-v4 .v4-anat[data-active-key="tibial"] .v4-nerves-overlay path.tibial { opacity: 0.9; filter: drop-shadow(0 0 4px rgba(168, 85, 247, 1)) drop-shadow(0 0 10px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 22px rgba(168, 85, 247, 0.5)); } /* Active Electric Signals (Pulse Animation) flowing from top to bottom */ body.cb-mod-v4 .v4-anat[data-active-key="femoral"] .v4-nerves-overlay path.femoral-pulse, body.cb-mod-v4 .v4-anat[data-active-key="obturator"] .v4-nerves-overlay path.obturator-pulse, body.cb-mod-v4 .v4-anat[data-active-key="saphenous"] .v4-nerves-overlay path.saphenous-pulse, body.cb-mod-v4 .v4-anat[data-active-key="common_fibular"] .v4-nerves-overlay path.common_fibular-pulse, body.cb-mod-v4 .v4-anat[data-active-key="tibial"] .v4-nerves-overlay path.tibial-pulse { opacity: 0.95; animation: nerve-pulse-flow 1.2s linear infinite; filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px currentColor); } body.cb-mod-v4 .v4-anat[data-active-key="femoral"] .v4-nerves-overlay path.femoral-pulse { color: #facc15; } body.cb-mod-v4 .v4-anat[data-active-key="obturator"] .v4-nerves-overlay path.obturator-pulse { color: #f43f5e; } body.cb-mod-v4 .v4-anat[data-active-key="saphenous"] .v4-nerves-overlay path.saphenous-pulse { color: #06b6d4; } body.cb-mod-v4 .v4-anat[data-active-key="common_fibular"] .v4-nerves-overlay path.common_fibular-pulse { color: #22c55e; } body.cb-mod-v4 .v4-anat[data-active-key="tibial"] .v4-nerves-overlay path.tibial-pulse { color: #a855f7; } @keyframes nerve-pulse-flow { 0% { stroke-dashoffset: 220; } 100% { stroke-dashoffset: 0; } } /* the printed label, highlighted like a marker swipe (translucent green over the black text) */ body.cb-mod-v4 .v4-lbl-hl{ position:absolute; display:none; z-index:5; pointer-events:none; border-radius:5px; background:rgba(45,255,128,.30); box-shadow:0 0 0 1.5px rgba(45,255,128,.85), 0 0 16px rgba(45,255,128,.55); } body.cb-mod-v4 .v4-lbl-hl.on{ display:block; animation:v4-hl-in .2s ease both; } @keyframes v4-hl-in{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } } /* the leader line (SVG, % coords via a 0–100 viewBox, non-scaling stroke) */ body.cb-mod-v4 .v4-lead-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible; } body.cb-mod-v4 .v4-lead-svg line{ stroke:#2dff80; stroke-width:2.5; stroke-linecap:round; display:none; filter:drop-shadow(0 0 4px rgba(45,255,128,.9)); } body.cb-mod-v4 .v4-lead-svg line.on{ display:block; } @media (prefers-reduced-motion: reduce){ body.cb-mod-v4 .v4-lbl-hl.on{ animation:none; } } /* chips sit ABOVE the detail (order:-1) as a FIXED-position anchor — so the * numbered list never shifts when the detail card changes height on click * (David: clicking a chip "moved the numbering down"). The detail fills the * remaining height below, where height changes push nothing. */ body.cb-mod-v4 .v4-anat-left > .v4-anat-panel{ flex:1 1 auto; order:1; } body.cb-mod-v4 .v4-anat-list{ order:-1; flex:0 0 auto; display:flex; flex-direction:column; min-width:0; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016)); border:1px solid var(--v4-line); border-radius:14px; padding:13px 13px 11px; backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient); } body.cb-mod-v4 .v4-anat-list-h{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--v4-text3); font-weight:700; margin:0 2px 10px; } body.cb-mod-v4 .v4-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px; align-content:start; flex:1 1 auto; } body.cb-mod-v4 .v4-chip{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 11px; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.03); border:1px solid var(--v4-line); color:var(--v4-text2); font-family:'Manrope',sans-serif; font-size:13px; font-weight:600; line-height:1.25; transition:background .15s ease,border-color .15s ease,color .15s ease; } body.cb-mod-v4 .v4-chip:hover{ background:rgba(45,255,128,.10); border-color:rgba(45,255,128,.42); color:#fff; } body.cb-mod-v4 .v4-chip:focus-visible{ outline:none; border-color:rgba(45,255,128,.8); box-shadow:0 0 0 2px rgba(5,8,11,.9), 0 0 0 4px rgba(45,255,128,.6); } body.cb-mod-v4 .v4-chip.active{ background:linear-gradient(120deg,rgba(45,255,128,.22),rgba(16,64,40,.05)); border-color:rgba(45,255,128,.6); color:#fff; box-shadow:inset 0 0 0 1px rgba(45,255,128,.35); } body.cb-mod-v4 .v4-chip-n{ flex:0 0 21px; height:21px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:#05130b; font-weight:800; font-size:11px; } body.cb-mod-v4 .v4-chip-t{ flex:1 1 auto; min-width:0; } /* top-align the image + caption inside the figure card (when the card is taller * than the picture, any slack sits at the bottom rather than floating it). */ body.cb-mod-v4 .v4-anat-figure{ display:flex; flex-direction:column; justify-content:flex-start; } body.cb-mod-v4 .v4-anat-figure img{ flex:0 0 auto; } /* slightly smaller dots so they obscure the printed image labels less */ body.cb-mod-v4 .v4-hot{ width:25px !important; height:25px !important; font-size:11.5px !important; } /* ── Four Joints — 2×2 grid of cards (replaces the run-on GH strip + table). * Spaced label/value rows fix the "blur of text". ──────────────────── */ body.cb-mod-v4 .v4-joints{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:4px 0 6px; } body.cb-mod-v4 .v4-joint{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); border:1px solid var(--v4-line); border-radius:14px; padding:18px 20px; backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient); } body.cb-mod-v4 .v4-joint-name{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.3px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:13px; display:flex; align-items:center; gap:8px; } body.cb-mod-v4 .v4-joint-name::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(var(--ar),.7); flex:none; } body.cb-mod-v4 .v4-joint-rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } body.cb-mod-v4 .v4-joint-rows li{ display:flex; gap:11px; align-items:baseline; font-size:14px; line-height:1.5; } body.cb-mod-v4 .v4-joint-rows .jl{ flex:0 0 104px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--accent); font-weight:700; padding-top:2px; } body.cb-mod-v4 .v4-joint-rows .jv{ flex:1 1 auto; min-width:0; color:var(--v4-text); } @media (max-width:760px){ body.cb-mod-v4 .v4-joints{ grid-template-columns:1fr; } } /* ============================================================ * v4.6 (David) — figure card = white image "plate" inside a DARK glass card. * • Dots live in .v4-anat-imgwrap (sized to the image), so they stay ON the * picture and never drift onto the caption when the card is tall. * • When the card stretches to match the left column, the space below the * image is the dark glass card (on-theme) — NOT a white void. * ============================================================ */ body.cb-mod-v4 .v4-anat-figure{ background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016)) !important; border:1px solid var(--v4-line) !important; border-radius:16px; padding:10px; overflow:visible; display:flex; flex-direction:column; justify-content:center; gap:4px; } /* the image plate: white so the anatomical drawings (and the plexus, which is * transparent with black labels) stay readable; sized to the image so the dots * (% positioned, inside it) land correctly. */ body.cb-mod-v4 .v4-anat-imgwrap{ position:relative; display:block; min-width:0; } body.cb-mod-v4 .v4-anat-imgwrap img{ display:block; width:100%; height:auto; background:#fff; border-radius:10px; } body.cb-mod-v4 .v4-rc-crop{ background:#fff; border-radius:10px; } /* caption now sits on the dark card — drop its own dark bar, keep it legible */ body.cb-mod-v4 .v4-anat-figure figcaption{ background:transparent !important; padding:8px 4px 2px !important; color:rgba(247,245,246,.9) !important; font-size:11.5px !important; line-height:1.5 !important; } /* ============================================================ * v4.7 (David) — perceived-speed + premium navigation micro-interactions. * Sections snap in instantly on tab switch; a quick fade+rise gives spatial * continuity (it reads as faster + more polished). Strictly gated: disabled * under prefers-reduced-motion AND when motion is set to Off, so the quiet-UI * contract holds. Only opacity/transform animate (GPU-cheap, no layout shift). * ============================================================ */ @keyframes v4-sec-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: no-preference){ html:not([data-motion="off"]) body.cb-mod-v4 .cb-v3-sec.active{ animation: v4-sec-in .22s cubic-bezier(.16,1,.3,1) both; } } /* TOC item: crisp, fast press/hover feedback (no layout shift — color only) */ body.cb-mod-v4 .cb-v3-toc-item{ transition: background .16s ease, color .16s ease, box-shadow .16s ease; } /* chips + figure dots already have their own tuned transitions; nothing else * animates on entrance, so the page stays calm + fast. */ /* ── figure cohesion: the STATIC anatomy figures (chest/arm, SC joint, dorsal * scapula) now match the interactive ones — a white image "plate" inside a * dark glass card — so every figure in the module reads the same. */ body.cb-mod-v4 .cb-v3-main .cb-anatomy-figure{ background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016)) !important; border:1px solid var(--v4-line) !important; border-radius:16px !important; padding:10px !important; margin:14px 0 18px; } body.cb-mod-v4 .cb-v3-main .cb-anatomy-figure img{ background:#fff !important; border:none !important; border-radius:10px !important; padding:0 !important; width:100%; height:auto; } /* ============================================================ * v4.8 LIGHT THEME — CB has exactly two themes (light + dark). The galaxy is * the DARK identity; LIGHT drops it for a clean emerald-on-white surface: * soft mint backdrop, white frosted-glass cards w/ emerald hairlines, dark * slate text, deeper emerald accents readable on white. Gated on * html[data-theme="light"] body.cb-mod-v4 so DARK is untouched. * ============================================================ */ html[data-theme="light"] body.cb-mod-v4{ --v4-text:#13241c; --v4-text2:#475a51; --v4-text3:#788a81; --v4-glass:rgba(255,255,255,.72); --v4-glass-2:rgba(255,255,255,.85); --v4-line:rgba(5,150,105,.20); --v4-line-hi:rgba(5,150,105,.5); --v4-red:#059669; --v4-rose:#047857; --v4-maroon:#10b981; --accent:#059669 !important; --accent2:#10b981 !important; --ar:5,150,105 !important; color:#13241c !important; background: radial-gradient(60% 50% at 15% 0%, rgba(16,185,129,.10), transparent 60%), radial-gradient(55% 45% at 90% 4%, rgba(45,212,160,.10), transparent 62%), linear-gradient(180deg,#f4faf7 0%, #eef6f1 100%) !important; } html[data-theme="light"] body.cb-mod-v4 .v4-aurora{ display:none !important; } html[data-theme="light"] body.cb-mod-v4 #cb-bg-galaxy-canvas{ display:block !important; opacity:0.55 !important; } /* base type */ html[data-theme="light"] body.cb-mod-v4 .cb-v3-main, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main p, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main li, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main td{ color:#23332b !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-sec-title, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-header h4, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main strong{ color:#0d1c15 !important; -webkit-text-fill-color:#0d1c15 !important; } html[data-theme="light"] body.cb-mod-v4 .section-title, html[data-theme="light"] body.cb-mod-v4 .cb-v3-chapter-n, html[data-theme="light"] body.cb-mod-v4 .bl-label, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-numlist>li::marker{ color:#059669 !important; } /* nav */ html[data-theme="light"] body.cb-mod-v4 .site-nav{ background:rgba(255,255,255,.8) !important; border-bottom:1px solid var(--v4-line) !important; } html[data-theme="light"] body.cb-mod-v4 .brand-text{ color:#0d1c15 !important; } /* TOC */ html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc{ border-color:var(--v4-line); } html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-item, html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-item .cb-v3-toc-t{ color:#1d2d25 !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-grouplabel{ color:#475a51; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-n{ color:#788a81; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-item:hover{ background:rgba(5,150,105,.10); } html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-item[data-sec].active{ background:linear-gradient(120deg,rgba(5,150,105,.18),rgba(16,185,129,.05)) !important; color:#0d1c15 !important; box-shadow:inset 0 0 0 1px rgba(5,150,105,.4) !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-toc-item[data-sec].active .cb-v3-toc-n{ color:#047857 !important; } /* subhead + section head */ html[data-theme="light"] body.cb-mod-v4 .cb-v3-subhead{ background:rgba(5,150,105,.08) !important; color:#047857 !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-sec-head{ border-bottom-color:rgba(5,150,105,.25) !important; } /* cards / strips */ html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .bl-strip, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-check, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-pearl, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-mnemonic, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-pitfall, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-reveal, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .tc-card, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-item, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-card{ background:rgba(255,255,255,.36) !important; border:1px solid var(--v4-line) !important; backdrop-filter: var(--glass-filter-standard) !important; -webkit-backdrop-filter: var(--glass-filter-standard) !important; box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 12px 30px -24px rgba(5,80,50,.2) !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-tldr{ background:linear-gradient(135deg,rgba(5,150,105,.08),rgba(255,255,255,.32)) !important; border:1px solid var(--v4-line) !important; backdrop-filter: var(--glass-filter-standard) !important; -webkit-backdrop-filter: var(--glass-filter-standard) !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-header, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-card .ma-header{ background:rgba(255,255,255,.24); } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-body, html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .ma-card .ma-body{ background:rgba(255,255,255,.16) !important; border-top-color:var(--v4-line) !important; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-reveal-hook{ color:#0d1c15; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .cb-check-toggle{ background:rgba(5,150,105,.12); color:#047857; border-color:rgba(5,150,105,.3); } /* tables */ html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .data-table{ border-color:var(--v4-line); } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .data-table th{ background:rgba(5,150,105,.12); color:#047857; } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .data-table td{ border-bottom-color:rgba(5,80,50,.1); } html[data-theme="light"] body.cb-mod-v4 .cb-v3-main .data-table tr:hover td{ background:rgba(5,150,105,.05); } /* hero */ html[data-theme="light"] body.cb-mod-v4 .v4-hero-title{ color:#0d1c15; } html[data-theme="light"] body.cb-mod-v4 .v4-grad-text{ background:linear-gradient(115deg,#10b981,#059669 55%,#047857) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } html[data-theme="light"] body.cb-mod-v4 .v4-hero-tagline{ color:#475a51; } html[data-theme="light"] body.cb-mod-v4 .v4-stat{ background:rgba(255,255,255,.36) !important; border-color:var(--v4-line) !important; backdrop-filter: var(--glass-filter-standard) !important; -webkit-backdrop-filter: var(--glass-filter-standard) !important; } html[data-theme="light"] body.cb-mod-v4 .v4-stat-num{ background:linear-gradient(120deg,#0d1c15,#059669); -webkit-background-clip:text; background-clip:text; color:transparent; } html[data-theme="light"] body.cb-mod-v4 .v4-stat-lbl{ color:#788a81; } html[data-theme="light"] body.cb-mod-v4 .v4-eyebrow-pip{ background:#059669; box-shadow:0 0 0 4px rgba(5,150,105,.16); } /* interactive figures */ html[data-theme="light"] body.cb-mod-v4 .v4-anat-panel, html[data-theme="light"] body.cb-mod-v4 .v4-anat-list, html[data-theme="light"] body.cb-mod-v4 .v4-anat-figure, html[data-theme="light"] body.cb-mod-v4 .v4-joint{ background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.22)) !important; border-color:var(--v4-line) !important; backdrop-filter: var(--glass-filter-standard) !important; -webkit-backdrop-filter: var(--glass-filter-standard) !important; } html[data-theme="light"] body.cb-mod-v4 .v4-anat-name, html[data-theme="light"] body.cb-mod-v4 .v4-anat-list-h{ color:#0d1c15 !important; } html[data-theme="light"] body.cb-mod-v4 .v4-anat-hint, html[data-theme="light"] body.cb-mod-v4 .v4-anat-sub, html[data-theme="light"] body.cb-mod-v4 .v4-anat-pts li{ color:#3a4a42 !important; } html[data-theme="light"] body.cb-mod-v4 .v4-anat-eyebrow, html[data-theme="light"] body.cb-mod-v4 .oina-l, html[data-theme="light"] body.cb-mod-v4 .v4-joint-name, html[data-theme="light"] body.cb-mod-v4 .v4-joint-rows .jl{ color:#059669 !important; } html[data-theme="light"] body.cb-mod-v4 .v4-joint-rows .jv{ color:#23332b !important; } html[data-theme="light"] body.cb-mod-v4 .v4-anat-pts strong{ color:#047857 !important; } html[data-theme="light"] body.cb-mod-v4 .v4-oina-pearl{ background:rgba(5,150,105,.08) !important; border-color:var(--v4-line) !important; color:#3a4a42 !important; } html[data-theme="light"] body.cb-mod-v4 .v4-chip{ background:rgba(255,255,255,.7) !important; border-color:var(--v4-line) !important; color:#23332b !important; } html[data-theme="light"] body.cb-mod-v4 .v4-chip .v4-chip-t{ color:#23332b !important; } html[data-theme="light"] body.cb-mod-v4 .v4-chip:hover{ background:rgba(5,150,105,.10) !important; color:#0d1c15 !important; } html[data-theme="light"] body.cb-mod-v4 .v4-chip.active{ background:linear-gradient(120deg,rgba(5,150,105,.2),rgba(16,185,129,.06)) !important; color:#0d1c15 !important; } /* image plates + green dots already read fine on light */ /* ============================================================ * v5 CALM READING (David greenlit D1+D2 from the design-workforce review). * Hours-of-study fatigue fix WITHOUT touching the galaxy identity: mute the * starfield density a touch, and cap the reading measure on LOOSE PROSE only * (paragraphs / lists / subtitles). Cards, interactive figures, tables, and * the joints grid are deliberately NOT capped — they stay full-width. Galaxy * stays full-strength on the hero, figures, and TOC. * ============================================================ */ body.cb-mod-v4 .v4-aurora::before{ opacity:.42 !important; } body.cb-mod-v4 .cb-v3-main .container > p, body.cb-mod-v4 .cb-v3-main .container > ul, body.cb-mod-v4 .cb-v3-main .container > ol, body.cb-mod-v4 .cb-v3-main .container > .section-sub{ max-width:72ch; } /* ============================================================ * V4 OVERRIDES FOR TAB-BASED MODULES (.tab-layout) * ============================================================ */ body.cb-mod-v4:not(:has(.cb-v3-layout)) { background: transparent; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container { max-width: 1120px !important; margin: 20px auto !important; padding: 24px 32px !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid var(--v4-line) !important; border-radius: 16px !important; backdrop-filter: var(--glass-filter-ambient) !important; -webkit-backdrop-filter: var(--glass-filter-ambient) !important; box-shadow: var(--v4-shadow) !important; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .bl-strip, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-check, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-pearl, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-mnemonic, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-pitfall, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-reveal, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .tc-card, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .ma-item, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .ma-card { background: rgba(255,255,255,.035) !important; border: 1px solid var(--v4-line) !important; border-radius: 14px !important; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -22px rgba(0,0,0,.6) !important; backdrop-filter: var(--glass-filter-ambient) !important; -webkit-backdrop-filter: var(--glass-filter-ambient) !important; margin: 14px 0 !important; max-width: none !important; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .bl-strip:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-check:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-pearl:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-mnemonic:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-pitfall:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .tc-card:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .ma-item:hover, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .ma-card:hover { transform: translateY(-3px) !important; border-color: var(--v4-line-hi) !important; box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 18px 44px -22px rgba(0,0,0,.9), 0 0 26px -14px rgba(45,255,128,.45) !important; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease !important; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container strong { font-weight: 700; color: #c8e6d0; -webkit-text-fill-color: #c8e6d0; background: none; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-tldr strong, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-npte-callout-text strong { -webkit-text-fill-color: #fff; color: #fff; background: none; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container p, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container li, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container td { color: var(--v4-text); } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container p, body.cb-mod-v4:not(:has(.cb-v3-layout)) .container li { font-size: 16px; line-height: 1.66; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .section-title { color: var(--v4-rose); } body.cb-mod-v4:not(:has(.cb-v3-layout)) .chip-nav button { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--v4-line) !important; color: var(--v4-text2) !important; border-radius: 8px !important; font-weight: 600 !important; transition: background .2s, border-color .2s, color .2s !important; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .chip-nav button:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border-color: var(--v4-line-hi) !important; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .chip-nav button.active { background: var(--v4-maroon) !important; border-color: var(--v4-red) !important; color: var(--v4-red) !important; box-shadow: 0 0 12px rgba(45, 255, 128, 0.22) !important; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero { max-width: 1120px; margin: 20px auto 30px; padding: 24px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--v4-line); border-radius: 16px; backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient); box-shadow: var(--v4-shadow); } body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero h1 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.028em; color: #fff; margin-top: 0; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero h1 span { background: linear-gradient(120deg, var(--v4-red) 0%, var(--v4-rose) 60%, var(--v4-red) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero p { color: var(--v4-text2); } /* Light theme overrides for tabbed modules */ html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container { background: rgba(255, 255, 255, 0.85) !important; border-color: var(--v4-line) !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .bl-strip, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-check, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-pearl, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-mnemonic, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-pitfall, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .cb-reveal, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .tc-card, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .ma-item, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container .ma-card { background: rgba(255, 255, 255, 0.74) !important; border-color: var(--v4-line) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 12px rgba(0,0,0,0.03) !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container strong { color: #047857 !important; -webkit-text-fill-color: #047857 !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container p, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container li, html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .container td { color: #23332b !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .chip-nav button { background: rgba(255, 255, 255, 0.74) !important; border-color: var(--v4-line) !important; color: #475a51 !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .chip-nav button:hover { background: rgba(5, 150, 105, 0.05) !important; color: #0d1c15 !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .chip-nav button.active { background: rgba(5, 150, 105, 0.12) !important; border-color: #059669 !important; color: #059669 !important; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero { background: rgba(255, 255, 255, 0.85); border-color: var(--v4-line); } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero h1 { color: #0d1c15; } html[data-theme="light"] body.cb-mod-v4:not(:has(.cb-v3-layout)) .hero p { color: #475a51; } /* ============================================================ * v5.0 DRAFT — LIQUID OBSIDIAN EDITORIAL DESIGN LANGUAGE * Scoped to body.cb-mod-v4 for modular containment. * ============================================================ */ body.cb-mod-v4 { /* Spacing and Radius Token Defaults */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --lh-display: 1.25; --lh-body: 1.8; --lh-callout: 1.66; /* Glassmorphic Depth Elevations (Dark Theme) */ --v5-glass-ambient: rgba(255, 255, 255, 0.05); --v5-glass-card: rgba(255, 255, 255, 0.07); --v5-glass-modal: rgba(255, 255, 255, 0.11); } /* Apply Spacing & Line-Height rules */ body.cb-mod-v4 .cb-v3-main p, body.cb-mod-v4 .cb-v3-main li { line-height: var(--lh-body); } /* Collapsible "Quiet-by-Default" TL;DR + Deeper system */ body.cb-mod-v4 .cb-tldr { margin-bottom: var(--space-sm) !important; border-radius: var(--radius-md) !important; } body.cb-mod-v4 .cb-deeper { border-radius: var(--radius-md) !important; margin-bottom: var(--space-md) !important; } body.cb-mod-v4 .cb-deeper-body { line-height: var(--lh-callout) !important; } /* 3D Flippable Reveal Card System (.rv-card) */ body.cb-mod-v4 .rv-grid { gap: var(--space-md) !important; } body.cb-mod-v4 .rv-card { perspective: 1000px; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; height: 155px; /* height to accommodate text without overflow */ } body.cb-mod-v4 .rv-card-inner { position: relative; width: 100%; height: 100%; text-align: left; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; } body.cb-mod-v4 .rv-card.rv-open .rv-card-inner { transform: rotateY(180deg); } body.cb-mod-v4 .rv-card-front, body.cb-mod-v4 .rv-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); box-sizing: border-box; overflow-y: auto; } body.cb-mod-v4 .rv-card-front { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important; border: 1px solid var(--v4-line) !important; color: var(--v4-text); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; } body.cb-mod-v4 .rv-card-back { background: linear-gradient(180deg, rgba(45,255,128,0.12), rgba(16,64,40,0.04)) !important; border: 1px solid rgba(45,255,128,0.3) !important; color: #fff; transform: rotateY(180deg); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset; } /* V5.0 Matrix Table Cell Highlights */ body.cb-mod-v4 td.bad { color: #ff6b6b !important; font-weight: 600; } body.cb-mod-v4 td.warn { color: #ffd43b !important; font-weight: 600; } body.cb-mod-v4 td.ok { color: #51cf66 !important; font-weight: 600; } html[data-theme="light"] body.cb-mod-v4 td.bad { color: #dc2626 !important; } html[data-theme="light"] body.cb-mod-v4 td.warn { color: #d97706 !important; } html[data-theme="light"] body.cb-mod-v4 td.ok { color: #059669 !important; } /* ============================================================ PERFORMANCE: CSS Containment for heavy tab elements ============================================================ */ body.cb-mod-v4 .cb-anatomy-figure, body.cb-mod-v4 .cb-muscle-card, body.cb-mod-v4 .ma-card, body.cb-mod-v4 .cb-check, body.cb-mod-v4 .self-check { content-visibility: auto; contain-intrinsic-size: auto 300px; }